%#!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 {令和5年度}

\begin{document}
\maketitle
\tableofcontents

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

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

\section{社会的問題}
COVID-19の流行によって在宅勤務や教育現場の休校などが増加した。令和3年のデータによると，緊急事態宣言中に自宅での活動時間の全国平均は，17時間23分から19時間47分に増加した。また，外出率は74.8\%から56.0\%に減少した\cite{goout}。それら伴いVertualReality(VR)を利用し，ゲームやライブ映像などのエンターテインメントを楽しむ人が増えた。

2020年4月に行われた野村総合研究所の「新型コロナウイルス感染拡大による生活の変化に関するアンケート」では，COVID-19感染拡大前に比べVRコンテンツの消費が全体の3.6パーセント増えたと示された\cite{nomura}。消費が増加した利用者の約20％において，ゲームやアトラクションでのVRがVRコンテンツとして最も体験・利用機会が多かった。また，VRの映像作品やライブ映像といったゲーム以外の種類でも，消費が増加した利用者の約10％から20％の間で体験・利用が増加したとする回答があった。

三菱総合研究所は，バーチャル・テクノロジー（V-tec）に着目し，2020年から研究を進めている。国内市場規模の推計結果として2025年には4兆円程度，2030年には約24兆円規模の国内市場を期待している。また，グローバル市場に関する諸機関の予測として，2030年において数10億人規模がメタバースのユーザになると仮定しており，この場合，市場規模は8～13兆ドルとしている\cite{mitubisi}。

BIPROGYの「MY HOMEMARKET」は，消費者がスマートフォンでバーチャル住宅展示場を見学してセミオーダー型規格住宅を購入する仕組みだ。\cite{home}。これにより，消費者は24時間365日，建てたい家のイメージを膨らませて，予算の中で臨場感を持ってしることができるため，打つ合わせ回数を減らせるなどのメリットがある。バーチャル住宅展示場では住宅の様々な部屋の内装や住宅の外見を360度視点を変更し，リモート内見することができる\cite{hometown}。

これらのことから，VRのようにバーチャル空間での疑似体験することへの関心が高まってきている。また，足を運んで受けていたサービスはVRの発達によっていつでもどこでも閲覧できるようになった。そこで本システムでは，発表会で使用される複数人のPDF資料や発表動画がまとめられた仮想空間での発表資料展示会の作成を提案する。

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

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

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

\begin{figure}[b]
  \centering
  \includegraphics[width=7cm]{../../resume/figure/sonomama-tenjikai.pdf}
  \caption{展示会会場}
  \label{figure:sonomama-tenjikai}
\end{figure}

\chapter{システムの設計}
\section{関連研究における課題とシステムの提案}
先行研究の中の通信環境に関する意見として，「発表を含めるとPCのスペックが足りない」，「パソコンのスペックが足りないため，発表などが非常にやりにくかった」，「資料が見にくい，ネット環境やデバイスによって差が出る」があった。
% メタバースを活用した多様な学習環境の構築と実践．日本教育工学会研究報告書．
この研究を踏まえて，本システムではより多くの端末で操作できるように軽量なシステムの設計する。またその場で発表するのではなく発表資料を閲覧することに重点を置いたシステムを提案する。

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

\begin{itemize}
  \item 前提条件
        \begin{itemize}
          \item 単一接続
        \end{itemize}
  \item 機能要件
        \begin{itemize}
          \item 仮想空間上でのPDF形式資料表示
          \item 仮想空間上でのMP4形式資料表示
          \item MP4形式資料の再生と停止
          \item カメラの移動と方向転換
        \end{itemize}
\end{itemize}

前提条件としたのは，複数接続だとサーバに負荷がかかりシステムがうまく動かなくなると示唆されるためである。

前提条件より単一接続であるため、発表資料を閲覧することに重点を置く。そのため、機能要件としたのはPDF形式・MP4形式の資料を表示することである。しかし、複数のMP4形式の動画を再生しつづけては、サーバに負荷がかかることになるため、MP4形式資料の再生と停止を実装する。

\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は、できるだけ簡単にWebページ上に3Dコンテンツを表示するJavascriptの3Dライブラリである。このライブラリは3D描画にWebGLを使っている。WebGL単体だけでは多くのコードを書かなければならない。
しかし、Three.jsを用いることで簡単に3Dコンテンツを作成することができる。本システムではこのThree.jsを用いて発表会場を作成する。
Three.jsの仕組みとして，シーンにカメラ・ライト・3Dモデルを追加する。そのシーンをレンダラを通してディスプレイに出力する（図.\ref{figure:image}）。

\begin{itemize}
  \item シーン
  \begin{itemize}
    \item オブジェクト、ライト、カメラなど、3Dグラフィックスの全体的な環境を定義する。これは3D空間内での相対的な位置や配置を管理する。
  \end{itemize}
  \item カメラ
  \begin{itemize}
    \item シーン内のオブジェクトを表示するために、カメラは視点からオブジェクトまでの視点を設定する。今回はPerspectiveCameraを用いる。
  \end{itemize}
  \item ライト
  \begin{itemize}
    \item シーン内の光源を表す。これはオブジェクトに影や明るさを与えるために使用される。今回はSpotLightを用いる。
  \end{itemize}
  \item オブジェクト
  \begin{itemize}
    \item シーン内に配置される物体やモデルを表す。本システムではオブジェクトはBlenderを用いて作成する。作成したオブジェクトの読み込みにはGLTFLoaderを用いる。
  \end{itemize}
\end{itemize}

\begin{figure}[t]
  \centering
  \includegraphics[width=7cm]{../../resume/figure/threejs_zu.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}

\subsubsection{発表資料の展示}
発表資料の展示ではPDF形式をPNG形式に変えて行う。

\begin{itembox}[l]{TextureLoader}
  \scriptsize
  \begin{verbatim}
    const geometry = new THREE.BoxGeometry(25, 25 * Math.sqrt(2), 0);
    const loadPhoto = new THREE.TextureLoader().load(
      "../texture_photo/resumeP1.png"
    );
    let material = new THREE.MeshBasicMaterial({
      map: loadPhoto,
    });
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
  \end{verbatim}
\end{itembox}\\

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