\documentclass[a4j]{jarticle}
% -*- coding: utf-8 -*-

\topmargin  -2cm
\textheight 26cm
\textwidth 16.5cm
\oddsidemargin -0.3cm

% package
\usepackage[dvipdfmx]{graphicx}
\usepackage{url}
\usepackage{ascmac}

\pagestyle{empty}

% start
\begin{document}
\title{仮想空間での発表資料展示会の提案}
\author{広瀬研究室\\C1210924 斎藤翼}
\date{2023年11月22日}

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

\thispagestyle{empty}

\section{背景}
COVID-19の流行によって在宅勤務や教育現場の休校などが増加し，それに伴ってVertual Reality(VR)を利用する人が増えた。2020年4月に行われた野村総合研究所のアンケートでは，COVID-19感染拡大前に比べVRコンテンツの消費が全体の3.6パーセント増えたと示された。\cite{nomura}。\\
\indent 三菱総合研究所では，2025年には4兆円程度，2030年には約24兆円規模の国内市場を期待している。また，グローバル市場では，2030年において数10億人規模がメタバースのユーザになると仮定しており，この場合，市場規模は8～13兆ドルとしている\cite{mitubisi}。\\
\indent BIPROGYの「MY HOME MARKET」では，スマートフォンでバーチャル住宅展示場を見学してセミオーダー型規格住宅を購入する仕組みがある\cite{home}。　360度視点を変更することが可能で，多くの住宅の内装・外見をバーチャルで内見することができる\cite{hometown}。\\
\indent これらのことから，VRのようにバーチャル空間での疑似体験することへの関心が高まってきている。

\section{研究目的}
作成したバーチャル空間の発表資料展示会に誰でもいつでも参加でき，どの端末からでも操作できるように互換性を持たせることを目的とする。
% 現実では実現できないようなアクティブで閲覧しやすい発表会場の作成を行う。

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

\subsection{類似サービス:そのまま展示会}
SoVeC株式会社が提供する「そのまま展示会」は，高機能なリード管理画面を実装したソニークオリティのバーチャル展示会を，誰でも簡単にウェブブラウザで閲覧できるプラットフォームサービスである\cite{sonomama}。\\
\indent 来場者向けの機能として，360度で会場を見渡すことができ，高い一覧性・リアリティのあるブース内で，チャットや名刺交換の担当者を来場者が選択することが出来る・アーカイブ動画だけでなく，ライブ配信も可能・リアル展示会とバーチャル展示会の入場証をバーコード形式で共通化がある。

\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}
\subsubsection{Three.jsのシステム概要}
\indent Three.jsはJavaScriptライブラリである。これらで発表資料展示会を作成する。Three.jsの仕組みとして，シーンにカメラ・ライト・3Dモデルを追加する。そのシーンをレンダラー通してディスプレイに出力する（図.\ref{figure:image}）。

\begin{figure}[!h]
  \centering
  \includegraphics[width=7cm]{threeJsSystem.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
  \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}
  \caption{Object.csv}
\end{table}

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

\subsection{Blender}
\subsubsection{glTF形式の利用}
\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}[htb]
  \centering
  \includegraphics[width=7cm]{cube0.pdf}
  \caption{影ありのオブジェクト}
  \label{figure:cube0}
\end{figure}

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

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

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

\section{評価の方法}
本研究の評価として，利用者に本システムを利用してもらい，そのあとにアンケートでの定性調査を行う。\\
\indent オンラインから本システムにアクセスしてもらい，アンケートの項目に答えてもらう。アンケートの結果から，使用している端末からストレスなく操作できたかを調査する。また仮想空間での資料発表展示会はブラウザで資料を見るのとどのように感じ方が違うのかを調査する。

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

発表資料展示会の作成と本システムを利用してもらいアンケートの実践をする。

物理演算用の Javascript ライブラリの Cannon.jsを実装して 3D モデルの通り抜けを防止する。

\begin{thebibliography}{99}
  \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}