\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}
  新型コロナウイルスの影響により，仮想空間での会議を行うことや娯楽として楽しむといったことの需要が増えた。そのため，仮想空間上で発表資料の展示会を行うことで，インターネットが接続さえすれば発表資料が見れることに需要があるのではないかと考えた。本研究では，JavaScriptのライブラリであるThree.jsを用いて発表資料の展示会を行い，そのシステムが様々な検索エンジンや端末からでも操作ができる環境を目指し，システムを構築していく。
  \vspace*{2em}
]

\thispagestyle{empty}

\section{背景}
新型コロナウイルスの影響により，在宅勤務や教育現場の休校などで屋内で過ごす時間が増加した。屋内で過ごす中で，VRを利用する人が増えた。2020年4月に行われた野村総合研究所のアンケートでは，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{関連研究:メタバースを活用した多様な学習環境の構築と実践}
澤崎敏文は、メタバースを企画発表の場としての活用、ゼミ・卒業研究での活用・課題活動での活用の三つの事例を通して、実験を行った。
それぞれの活用の終了後にアンケート調査・インタビュー調査を行った結果、概ね好意的な回答が多く、メタバース活用の可能性を感じたということだ。
授業活用例では、利用当初、学生は何をしていいか分からず戸惑うという声もある一方で，自由に歩き回れる，人との仮想的な距離を取れるといった制約のなさにも次第に慣れ，グループ活動での活発な議論につながったと考えている．また，アンケート中「顔出ししなくていい」という主旨の回答も多数あり，学生にとっては，アバターをとおして仮想空間の中で議論する方が，Zoom 等と比較して抵抗が少ないのではないかと考えた．メタバース内では，仮想的な距離や方向によって音声の聞こえ方なども変化し，自由に空間を行き来してコミュニケーションを取ることができるという点を考慮すると，ポスター発表のような場面での活用にも親和性が高いと考える\cite{article1}。

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

\section{関連研究における課題とシステムの提案}
関連論文がまとまってから、記入する。

\section{システムの開発}
\subsection{開発環境}
\begin{itemize}
  \item 開発言語
        \begin{itemize}
          \item Three.js - 0.126.1
                % \item Cannon.js
                % \item Node.js
                % \item Socket.io
          \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のポリシーに引っかかってしまい、うまく動作しなくなる。そのため、ビデオからの音声は無音にし、ビデオ再生と音の再生を別々に設計する。ビデオの無音は、下記コードの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);

  …

  // 再生・停止の切り替え
  let flag = false;
  function clickStartStop() {
    if (flag == false) {
      video.pause();
      positionalAudio.pause();
      flag = true;
    } else {
      video.play();
      positionalAudio.play();
      flag = false;
    }
  }

  …

  // クリックしたオブジェクトの検知
  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{table}[h]
  \centering
  \begin{tabular}{|c|c|c|c|}
    \hline
    dataPath & loc.X & loc.Y & loc.Z\\
    \hline
    model/cube.glb & 0 & 0 & 0\\
    \hline
    model/ball.glb & 50 & 50 & 10\\
    \hline
  \end{tabular}
  \caption{getObject.csv}
\end{table}

blender の色付きを説明する。裏だと影があって見れない。でもblenderからオブジェクトから発光させれば影ができず、どの方向からも見ることができる

\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ブラウザ上での軽量かつ高度なグラフィックスが実現される。

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

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

\section{今後の展望}
現状としては、展示会場作成の途中である。\\
\indent これからの予定として、以下のことを中心に展示会場の作成を進めていく。\\
\indent 物理演算用のJavascriptライブラリのCannon.jsを実装して3Dモデルの通り抜けを防止する。\\
\indent Socket.ioを利用しての双方向通信を実装する。

\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}