%#!platex -kanji=%k
%#DVIPDF dvipdfmx -f ipa.map
\documentclass{jsbook}
%\pagestyle{empty}
\usepackage[dvipdfmx]{graphicx}
%\usepackage{listings, jlisting}
%\usepackage[sectionbib]{chapterbib}
%\usepackage{ascmac}
\usepackage{geometry}
\usepackage{url}		% 文中にURLを書くときは \url{} で括る
\usepackage{ascmac}
\geometry{textwidth=160mm, textheight=225mm}
\renewcommand{\bibname}{参考文献}

\title{仮想空間での発表資料展示会の提案}
\author{広瀬研究室\\C1210924 斎藤翼}
\date {\today}

\begin{document}
\maketitle
\tableofcontents

\chapter{はじめに}
% 社会的背景からテーマに至るまでを書く。
COVID-19の影響により，仮想空間上で会議を行うことや娯楽として楽しむといった行動が増えるとともに仮想空間の需要が増えた。そのため，仮想空間上で発表資料の展示会を行うことで，インターネットに接続さえすれば発表資料を見れることに需要があるのではないかと考えた。本研究では，JavaScriptのライブラリであるThree.jsを用いて発表資料の展示会を行い，そのシステムが様々な端末からでも操作できる環境を目指し，システムを構築していく。

\chapter{メタバースをめぐる背景}
% 章の始めにリード文としてこの章で何をどういう順番で述べるかを入れる。
% 2章では先行研究をとりあげ，身近な問題ではどうするかまで述べる。

\section{社会的問題}
COVID-19の流行によって在宅勤務や教育現場の休校などが増加し，それに伴ってVertualReality(VR)を利用する人が増えた\cite{goout}。

2020年4月に行われた野村総合研究所のアンケートでは，COVID-19感染拡大前に比べVRコンテンツの消費が全体の3.6パーセント増えたと示された\cite{nomura}。

三菱総合研究所は，2025年には4兆円程度，2030年には約24兆円規模の国内市場を期待している。また，グローバル市場では，2030年において数10億人規模がメタバースのユーザになると仮定しており，この場合，市場規模は8～13兆ドルとしている\cite{mitubisi}。

BIPROGYの「MY HOMEMARKET」では，スマートフォンでバーチャル住宅展示場を見学してセミオーダー型規格住宅を購入する仕組みがある\cite{home}。360度視点を変更することが可能で，多くの住宅の内装・外見をバーチャルで内見することができる\cite{hometown}。

これらのことから，VRのようにバーチャル空間での疑似体験することへの関心が高まってきている。そこで発表資料がまとめられた展示会の作成を提案する。

\section{先行研究の例}
\subsection{メタバースを活用した多様な学習環境の構築と実践}
澤崎敏文は，メタバースを企画発表の場としての活用，ゼミ・卒業研究での活用・課題活動での活用の3つの事例を通して，実験を行った。
それぞれの活用の終了後にアンケート調査・インタビュー調査を行った結果，概ね好意的な回答が多く，メタバース活用の可能性を感じたと示している。
授業活用例では，利用当初，学生は何をしていいか分からず戸惑うという声もある一方で，自由に歩き回れる，人との仮想的な距離を取れるといった制約のなさにも次第に慣れ，グループ活動での活発な議論につながったと考えている。また，アンケート中「顔出ししなくていい」という主旨の回答も多数あり，学生にとっては，アバターを通して仮想空間の中で議論する方が，Zoom
等と比較して抵抗が少ないのではないかと考えた。メタバース内では，仮想的な距離や方向によって音声の聞こえ方なども変化し，自由に空間を行き来してコミュニケーションを取ることができるという点を考慮すると，ポスター発表のような場面での活用にも親和性が高いと考える\cite{article1}。

\section{類似サービス}
\subsection{そのまま展示会}
SoVeCが提供する「そのまま展示会」は，高機能なリード管理画面を実装したソニークオリティのバーチャル展示会を，誰でも簡単にウェブブラウザで閲覧できるプラットフォームサービスである。

来場者向けの機能として，360度で会場を見渡すことができ高い一覧性・リアリティのあるブース内で，チャットや名刺交換の担当者を来場者が選択することが出来る・アーカイブ動画だけでなく，ライブ配信も可能でリアル展示会とバーチャル展示会の入場証をバーコード形式で共通化できる\cite{sonomama}。

\chapter{システムの設計}
\section{関連研究における課題とシステムの提案}
先行研究の中では，パーソナルコンピュータのスペックが足りず，利用したシステムが一定のスペックをもつ端末でなければうまく動作しなかった。また発表を行っていたこともあり，よりリソースを多く使うことになった。この研究を踏まえて，本システムではより多くの端末で操作できるように軽量なシステムの設計する。また発表するのではなく発表資料を見ることに重点を置いたシステムを提案する。

\section{要件定義}
関連研究における課題を踏まえた上で、本システムにおける前提条件と機能要件を以下に示す。


\section{システムの概要}
\subsection{開発環境}
\begin{itemize}
  \item 開発言語
        \begin{itemize}
          \item HTML
          \item CSS
          \item JavaScript
                \begin{itemize}
                  \item Three.js - 0.126.1
                \end{itemize}
                % \item Cannon.js
                % \item Node.js
                % \item Socket.io
        \end{itemize}
  \item ソフトウェア
        \begin{itemize}
          \item Blender - 3.0.1
        \end{itemize}
  \item ブラウザ
        \begin{itemize}
          \item Mozilla Firefox - 119.0.1
        \end{itemize}
\end{itemize}

\subsection{Three.js}
Three.jsとCannon.jsはJavaScriptライブラリである。これらで発表会場を作成する。Three.jsの仕組みとして，シーンにカメラ・ライト・3Dモデルを追加する。そのシーンをレンダラを通してディスプレイに出力する（図.\ref{figure:image}）。

\begin{figure}[t]
  \centering
  \includegraphics[width=7cm]{../resume/figure/threeJsSystem_ja.pdf}
  \caption{Three.jsのシステム概念図}
  \label{figure:image}
\end{figure}

\subsubsection{ビデオの表示と再生・停止}
ビデオを再生する部分だけ設計し，音を再生してしまうとFirefoxのポリシーに接触してしまい，うまく動作しなくなる。そのため，ビデオからの音声は無音にし，ビデオ再生と音の再生を別々に設計する必要がある。

% ビデオを再生するには，ビデオを再生する部分と音を出す部分を設計する必要がある。

ビデオの無音は，下記「Video」項目のコードの6行目で実装している。\\

\begin{itembox}[l]{Video}
  \scriptsize
  \begin{verbatim}
  //video
  video = document.createElement("video");
  video.src = "video/sea.mp4";
  video.autoplay = true;
  video.loop = true;
  video.muted = true;
  video.load();
  video.pause();
  const texture = new THREE.VideoTexture(video);
  const material = new THREE.MeshBasicMaterial
  ({ map: texture });
  const geometry = new THREE.PlaneGeometry(12, 8);
  const mesh = new THREE.Mesh(geometry, material);
  mesh.name = "video1";
  mesh.position.set(0, 5, 0);
  scene.add(mesh);

  // audio
  const listener = new THREE.AudioListener();
  camera.add(listener);
  const audioLoader = new THREE.AudioLoader();
  positionalAudio = new THREE.PositionalAudio(listener);
  audioLoader.load("mp3/sea.mp3", function (buffer) {
    positionalAudio.setBuffer(buffer);
    positionalAudio.setRefDistance(100);
    positionalAudio.pause();
  });
  mesh.add(positionalAudio);

\end{verbatim}
\end{itembox}\\

\begin{itembox}[l]{ClickStartStop関数}
  \scriptsize
  \begin{verbatim}
  // 再生・停止の切り替え
  let flag = false;
  function clickStartStop() {
    if (flag == false) {
      video.pause();
      positionalAudio.pause();
      flag = true;
    } else {
      video.play();
      positionalAudio.play();
      flag = false;
    }
  }
\end{verbatim}
\end{itembox}\\

\begin{itembox}[l]{OnClick関数}
  \scriptsize
  \begin{verbatim}
  // クリックしたオブジェクトの検知
  function OnClick(event) {
    event.preventDefault();
    const raycaster = new THREE.Raycaster();
    const mouse = new THREE.Vector2();
    mouse.x = 0;
    mouse.y = 0;
    raycaster.setFromCamera(mouse, camera);
    const intersects = raycaster.intersectObjects
    (scene.children, true);
    if (intersects.length > 0) {
      if (intersects[0].object.name == "video1") {
        clickStartStop();
      }
    }
  }
\end{verbatim}
\end{itembox}\\

本システムでは，ビデオが再生されている「video1」という名前のオブジェクトをクリックすることで再生・停止の切り替えができるように設計している。上記コードの「clickStartStop」関数と「OnClick」関数で実装している。

\subsubsection{CSV読み込みによる3DオブジェクトのWebへの反映}
「GLFTLoader」クラスインスタンスで3DオブジェクトのWebへの反映はできるが，その都度無駄にコードを書かなくてはならなくなってしまい冗長である。そのため，CSVから値を読み込む手法を取る。CSV読み込みは，Fetch
APIを用いて行う。\\

\begin{itembox}[l]{Fetch}
  \scriptsize
  \begin{verbatim}
  // csv読み込み
  fetch("csv/getObject.csv")
    .then((response) => {
      return response.text();
    })
    .then((data) => {
      let result = data.split(/\r?\n|\r/).map((e) => {
        return e.split(",");
      });
      for (let i = 1; i < result.length; i++) {
        let arr = result[i];
        glbLoader(arr[0], arr[1], arr[2], arr[3])
      }
    })
    .catch((error) => {
      console.log(error);
    });

  // glTFの読み込み関数
  function glbLoader(filePath, x, y, z) {
    const gloader = new GLTFLoader();
    gloader.load(filePath, function (gltf) {
      model = gltf.scene;
      model.position.set(x, y, z);
      scene.add(model);
    });
  }
\end{verbatim}
\end{itembox}\\

\begin{table}[t]
  \centering
  \caption{Object.csv}
  \begin{tabular}{|c|c|c|c|}
    \hline
    dataPath       & loc.X & loc.Y & loc.Z \\
    \hline
    model/cube.glb & 15    & 0     & 0     \\
    \hline
    model/ball.glb & 25    & 0     & 0     \\
    \hline
  \end{tabular}
\end{table}

\begin{figure}[t]
  \centering
  \includegraphics[width=7cm]{../resume/figure/fetch.pdf}
  \caption{出力}
  \label{figure:image1}
\end{figure}

\subsection{Blenderでの3Dモデル作成}
\indent 3DモデルはBlenderを用いて作成し，glTF(Graphics Language Transmission
Format)でエクスポートしたものを使用する。glTFの利点として，
\begin{enumerate}
  \item webブラウザ，モバイルデバイスなどのプラットフォームで3Dシーンとモデルを効率的に実行して送信及びロードができる。
  \item 3Dアセットを解凍・処理するための実行時処理を最小限に抑え，高度な広帯域グラフィックス機能を実現する。
\end{enumerate}

の2点が挙げられる\cite{glTF}。
これにより，webブラウザ上での軽量かつ高度なグラフィックスが実現される。

\subsubsection{3Dモデルの光源}
Three.jsではライトを設定することで，オブジェクトを照らしている。しかし，光の当たらないところは影になる(図.\ref{figure:cube0})。本システムでは四角柱のオブジェクトを設置し，そのオブジェクトの四面から資料を見れるように設計する。そのため，四面が影にならないようにする必要がある。

\begin{figure}[t]
  \centering
  \includegraphics[width=7cm]{../resume/figure/cube0.pdf}
  \caption{影ありのオブジェクト}
  \label{figure:cube0}
\end{figure}

どの方向から見ても影ができないように設計するのは，Three,jsでライトを多数設定することで解決するが手間がかかる。そのためBlenderでエクスポートする際に「Punctual
Lights」をオンにしてエスクポートすることでBlenderで設定したライトをオブジェクトのデータに組み込まれるようになる(図.\ref{figure:cube1})。

\begin{figure}[t]
  \centering
  \includegraphics[width=7cm]{../resume/figure/cube1.pdf}
  \caption{影なしのオブジェクト}
  \label{figure:cube1}
\end{figure}

% \subsection{双方向通信}
% 双方向通信には，Node.js上で動作するSocket.ioを使用する。\\
% \indent Socket.ioはクライエントとサーバ間の低遅延，双方向，イベントベースの通信を可能にするライブラリである\cite{socket.io}。

\chapter{発表会場の適用実験}
\section{評価の方法}
本研究の評価として，利用者に本システムを利用してもらい，そのあとにアンケートでの定性調査を行う。

回答者はオンラインから本システムにアクセスし，アンケートの項目に答える。アンケートの結果から，使用している端末からストレスなく操作できたかを調査する。また仮想空間での資料発表展示会はWebブラウザで資料を閲覧することとどのように感じ方が違うのかを調査する。

\section{今後の展望}
現状としては，発表資料展示会のオブジェクトが未完成である。これからの予定として，以下のことを中心に展示会場の作成を進めていく。

\begin{itemize}
  \item 発表資料展示会の作成と本システムを利用してもらいアンケートの実践をする。
  \item 物理演算用の JavaScript ライブラリの Cannon.jsを実装して 3D モデルの通り抜けを防止する。
\end{itemize}

\chapter{結論}
結論は簡潔に。

最後に参考文献を必ず正しく記載する。
% 原稿がどの程度のクォリティなのか参考文献である程度分かる。

\begin{thebibliography}{}
  \bibitem{goout} 厚生労働省. “図表1-1-3-1　自宅での活動時間，外出率の増減”. \url{https://www.mhlw.go.jp/stf/wp/hakusyo/kousei/20/backdata/1-1-3-1.html}, (参照日 2023-12-05). 
  \bibitem{nomura} 株式会社野村総合研究所.“ゲーム，VR，マンガ・本・書籍に対する人々の行動と意識の変化：アフターコロナのコンテンツ市場再成長の機会を逃してはいけない～新型コロナウイルス感染拡大による消費者の行動変容がICTメディア・サービス産業に及ぼすインパクトと対応策（3）コンテンツ～”.\url{https://www.nri.com/jp/keyword/proposal/20200519/03}, (参照日 2023-08-13).
  \bibitem{mitubisi} 三菱総合研究所.“CX2030：バーチャルテクノロジー活用の場としての広義のメタバース”. \url{https://www.mri.co.jp/knowledge/column/dia6ou000004u77a-att/mtr_20221122.pdf}, (参照日 2023-08-13).
  \bibitem{home} BIPROGY.“バーチャル住宅展示場MY HOME MARKET”. \url{https://www.biprogy.com/solution/service/myhomemarket.html}, (参照日 2023-08-13).
  \bibitem{hometown} MY HOME MARKET.“バーチャル住宅展示場 VRタウン”. \url{https://myhomemarket.jp/town/index.html}, (参照日 2023-08-13).
  \bibitem{article1} 澤崎敏文．メタバースを活用した多様な学習環境の構築と実践．日本教育工学会研究報告書．2023，vol.2023，no.2，p.83-87．
  \bibitem{sonomama} SoVeC株式会社.“【メタバース会場】そのまま展示会ならリードが効率よく取れます。”. \url{https://www.sovec.net/sonomama/tenjikai/}, (参照日 2023-08-13).
  \bibitem{glTF} Khronos Group.“glTF Overview”. \url{https://www.khronos.org/gltf/}, (参照日 2023-08-13).
  % \bibitem{socket.io} Socket.IO.“Introduction”. \url{https://socket.io/docs/v4/}, (参照日 2023-08-13)
\end{thebibliography}

\end{document}