\documentclass[a4j]{jarticle}
% -*- coding: utf-8 -*-
\topmargin -2cm
\textheight 26cm
\textwidth 16.5cm
\oddsidemargin -0.3cm
% package
\usepackage[dvipdfmx]{graphicx}
\usepackage{url}
\usepackage{ascmac}
\usepackage{listings}
\lstset{
numbers=left, % 行番号を左側に表示
numberstyle=\scriptsize, % 行番号のフォントサイズを小さくする
stepnumber=1, % 行番号を1行ごとに表示
numbersep=5pt, % 行番号とコードの間のスペース
language=Python % コードの言語を指定
}
\pagestyle{empty}
% start
\begin{document}
\title{仮想空間での発表資料展示会の提案}
\author{広瀬研究室\\C1210924 斎藤翼}
\date{2024年8月18日}
\twocolumn[
\maketitle
% 概要
\begin{center}
{\bfseries 概要}
\end{center}
COVID-19の影響により，仮想空間での会議を行うことや娯楽として楽しむといったことの需要が増えた。そのため，仮想空間上で発表資料の展示会を行うことで，インターネットが接続さえすれば発表資料が見れることに需要があるのではないかと考えた。本研究では，JavaScriptのライブラリであるThree.jsを用いて発表資料の展示会を行い，そのシステムが様々な端末からでも操作ができる環境を目指し，システムを構築していく。
\vspace*{2em}
]
\thispagestyle{empty}
\section{背景}
COVID-19の流行によって在宅勤務や教育現場の休校などが増加し，それに伴ってVertual
Reality(VR)を利用する人が増えた\cite{goout}。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{研究目的}
作成したバーチャル空間の発表資料展示会をWebブラウザから閲覧することができる。またそれに誰でもいつでも参加でき，どの端末からでも操作できるように互換性を持たせることを目的とする。
% 現実では実現できないようなアクティブで閲覧しやすい発表会場の作成を行う。
\section{先行事例}
\subsection{関連研究:様々な場面でのメタバースの活用事例}
澤崎敏文は，これまで授業内容に合わせた様々な方法でオンライン授業を実践し，その考察を行ってきた。オンライン特有のメリットに対する肯定的な意見がある一方で，「リアリティ」「臨場感」の欠如を指摘する声もインタビュー結果から明らかになった。そこで，メタバース（三次元仮想空間）を授業や学生活動の一部に活用することで，その可能性について検討を行った。
メタバースを企画発表の場としての活用，ゼミ・卒業研究での活用・課題活動での活用の3つの事例を通して，実験を行った。
それぞれの活用の終了後にアンケート調査・インタビュー調査を行った結果，概ね好意的な回答が多く，メタバース活用の可能性を感じたと示している。
授業活用例では，利用当初，学生は何をしていいか分からず戸惑うという声もある一方で，自由に歩き回れる，人との仮想的な距離を取れるといった制約のなさにも次第に慣れ，グループ活動での活発な議論につながったと考えている。また，アンケート中「顔出ししなくていい」という主旨の回答も多数あり，学生にとっては，アバターを通して仮想空間の中で議論する方が，Zoom
等と比較して抵抗が少ないのではないかと考えた。メタバース内では，仮想的な距離や方向によって音声の聞こえ方なども変化し，自由に空間を行き来してコミュニケーションを取ることができるという点を考慮すると，ポスター発表のような場面での活用にも親和性が高いと考える\cite{article1}。
\subsection{類似サービス:そのまま展示会}
SoVeC株式会社が提供する「そのまま展示会」は，高機能なリード管理画面を実装したソニークオリティのバーチャル展示会を，誰でも簡単にウェブブラウザで閲覧できるプラットフォームサービスである\cite{sonomama}。\\
\indent
来場者向けの機能として，360度で会場を見渡すことができ，高い一覧性・リアリティのあるブース内で，チャットや名刺交換の担当者を来場者が選択することが出来る・アーカイブ動画だけでなく，ライブ配信も可能・リアル展示会とバーチャル展示会の入場証をバーコード形式で共通化がある。
\section{システムの提案}
先行研究の中の通信環境に関する意見として，「発表を含めるとPCのスペックが足りない」，「パソコンのスペックが足りないため，発表などが非常にやりにくかった」，「資料が見にくい，ネット環境やデバイスによって差が出る」があった。
この研究を踏まえて，本システムではより多くの端末で操作できるように軽量なシステムの設計する。またその場で発表するのではなく発表資料を閲覧することに重点を置いたシステムを提案する。
\section{システムの開発}
\subsection{要件定義}
関連研究における課題を踏まえた上で，本システムにおける前提条件と機能要件を以下に示す。
\begin{itemize}
\item 前提条件
\begin{itemize}
\item 単一接続
\end{itemize}
\item 機能要件
\begin{itemize}
\item 仮想空間上でのPDF形式資料表示
\item 仮想空間上でのMP4形式資料表示
\item MP4形式資料の再生と停止
\item カメラの移動と方向転換
\item 資料の数に応じた展示会場モデルの動的な変更
\end{itemize}
\end{itemize}
前提条件としたのは，複数接続だとサーバに負荷がかかりシステムがうまく動かなくなると示唆されるためである。
前提条件より単一接続であるため、発表資料を閲覧することに重点を置く。そのため、機能要件としたのはPDF形式・MP4形式の資料を表示することである。しかし、複数のMP4形式の動画を再生しつづけては、サーバに負荷がかかることになるため、MP4形式資料の再生と停止を実装する。
また掲載する資料の数で展示会場の大きさを動的に変更する。
\subsection{Three.js}
\subsubsection{Three.jsのシステム概要}
\indent Three.jsはJavaScriptの3
Dimensions(3D)ライブラリでWebページに3Dコンテンツをできる限り簡単に表示しようというものだ\cite{three}。Three.jsはWeb
Graphics
Library(WebGL)という互換性があるWebブラウザにおいて、プラグインを使用せずにインタラクティブな3Dや2DのグラフィックをレンダリングするためのJavaScript
APIを使用して描画している\cite{webgl}。
Three.jsの仕組みとして，シーンにカメラ・ライト・3Dオブジェクトを追加する。そのシーンをレンダラー通してディスプレイに出力する（図.\ref{figure:image}）。
\begin{itemize}
\item レンダラ
レンダラは3Dシーンのうちカメラのフラストラム内にある部分を2D画像としてキャンバスにレンダリング（描画）する。
\item ライトオブジェクト
シーン内にある3Dオブジェクトを照らすために使用される。Three.jsには様々な種類のライトがあり、一点から全方向に放射される光であったり、スポットライトのような光がある。
\item シーンオブジェクト
シーンは、Three.jsによってレンダリングされるものと場所を設定することができる。オブジェクトやライト、カメラを配置する場所のこと。
\item カメラオブジェクト
カメラはシーンをどのように見るかを決めるために使用される。Three.jsには様々な種類のライトがあり、一般的なライトはPerspectiveCameraである。これは遠くのものが近くのものよりも小さく見える3Dビューを提供する。
\end{itemize}
本システムではこのThree.jsを用いて発表資料展示会を作成する。
\begin{figure}[tbp]
\centering
\includegraphics[width=7cm]{../figure/threejs_zu.pdf}
\caption{Three.jsのシステム概念図}
\label{figure:image}
\end{figure}
\begin{figure}[tbp]
\centering
\includegraphics[width=7cm]{../figure/threejs_scenegraphs.pdf}
\caption{図１のシーンマップ}
\label{figure:image}
\end{figure}
\subsubsection{ビデオの表示と再生・停止}
今日にはGoogle ChromeやSafari、Mozilla Firefoxなど様々なウェブブラウザがある。そのウェブブラウザの多くでは自動再生ポリシーが設定されている。本システムの開発環境ではGoogle Chromeを使用しているため、その自動再生ポリシーに基づいてシステムを作成する。
Google Chromeはユーザエクスペリエンスを向上させ、広告ブロッカーをインストールするインセンティブを最小限に抑え、高価なネットワークや制約のあるネットワークでのデータ消費量を削減するために、より厳格な自動再生ポリシーに移行している。この変更は、ユーザーが再生をより詳細に制御できるようにし、正当なユースケースを持つパブリッシャーにメリットをもたらすことを目的としている\cite{chrome}。
本システムの作成にあたり、気をつけるべきポリシーとして、以下の内容がある。
\begin{itemize}
\item ミュート状態で自動再生されるようにすることは常に許可される。
\item 音声付き自動再生は、ユーザがドメインを操作した（クリック、タップなど）場合に許可される。
\end{itemize}
つまり、音声付き動画はクリックなどのアクションを起こさないと再生してはならないということである。
本システムでは、ビデオが再生されているオブジェクトに近づけば音が大きくなり、遠くなれば音が小さくなるように設定する。Three.jsではビデオのテクスチャとオーディオを別々に作成し1つのオブジェクトに追加することで実現できる。
今回は以下のコードで実装している。
\begin{itemize}
\item const videoMaterial = new THREE.MeshBasicMaterial(\{ map: videoTexture, color: 0xffffff \});
\item videoMesh.add(positionalAudio);
\end{itemize}
\begin{itembox}[l]{Video・Audio}
\scriptsize
\begin{verbatim}
function makeVideo(objName, videoPath, audioPath) {
const video = document.createElement("video");
document.body.appendChild(video);
video.style.display = "none";
video.src = videoPath;
video.autoplay = false;
video.preload = "auto";
video.loop = true;
video.muted = true;
video.id = objName;
const videoTexture = new THREE.VideoTexture(video);
videoTexture.minFilter = THREE.LinearFilter;
videoTexture.magFilter = THREE.LinearFilter;
videoTexture.wrapS = THREE.ClampToEdgeWrapping;
videoTexture.wrapT = THREE.ClampToEdgeWrapping;
const videoGeometry = new THREE.PlaneGeometry(3, 2);
const videoMaterial = new THREE.MeshBasicMaterial({
map: videoTexture, color: 0xffffff });
const videoMesh = new THREE.Mesh(
videoGeometry, videoMaterial);
videoMesh.position.set(-0.875, 0, 0);
videoMesh.name = objName;
scene.add(videoMesh);
const audioListener = new THREE.AudioListener();
camera.add(audioListener);
const audioLoader = new THREE.AudioLoader();
const positionalAudio = new THREE.PositionalAudio(
audioListener);
audioLoader.load(audioPath, function (buffer) {
positionalAudio.setBuffer(buffer);
positionalAudio.setRefDistance(100);
positionalAudio.pause();
positionalAudio.name = objName;
});
videoMesh.add(positionalAudio);
return videoMesh
}
\end{verbatim}
\end{itembox}
コードの流れとしては、HTMLのvideoタグに動画を設置し、それをテクスチャとしてオブジェクトに貼り付ける。またビデオのオーディオをmp3として抽出し、それをオブジェクトに追加することで実現している。
自動再生がされないようにビデオの方ではautoplayをfalseにし、オーディオではpause状態に設定しておく。
オブジェクトのクリックをアクションとして再生と停止を実行している。
\begin{itembox}[l]{再生と停止の切替}
\scriptsize
\begin{verbatim}
function startStopVideoAndAudio(
flagNumber, videoTagId, audio) {
if (videoPlayPauseFlag[flagNumber] == false) {
videoTagId.play();
audio[0].play();
videoPlayPauseFlag[flagNumber] = true;
} else {
videoTagId.pause();
audio[0].pause();
videoPlayPauseFlag[flagNumber] = false;
}
}
\end{verbatim}
\end{itembox}
\begin{figure}[tbp]
\centering
\includegraphics[width=7cm]{../figure/video_audio_scenegraphs.pdf}
\caption{ビデオとオーディオのシーングラフ}
\label{figure:video_audio_scenegraphs}
\end{figure}
\subsubsection{資料をメッシュに貼付}
本システムではPDF資料を表示することを機能要件としている。
ジオメトリとテクスチャを含んだマテリアルの２つからメッシュを作成する（図.\ref{figure:texture}）。
本システムではTextureLoaderを使用している。これで読み込める拡張子は、ブラウザがサポートする画像フォーマットに依存する。そのためPDF資料を画像フォーマットにしてからテクスチャとして使用する。
\begin{itembox}[l]{texture}
\scriptsize
\begin{verbatim}
function makeResume(texturePath, makeNumber) {
const resumeGeometry = new THREE.BoxGeometry(
1.5, 1.5 * Math.sqrt(2), 0.01);
const loadPhoto = new THREE.TextureLoader().load(
texturePath);
let resumeMaterial = new THREE.MeshBasicMaterial({
map: loadPhoto });
const resumeMesh = new THREE.Mesh(
resumeGeometry, resumeMaterial);
resumeMesh.castShadow = true;
resumeMesh.position.set(1.625, 0, 0);
resumeMesh.name = texturePath;
scene.add(resumeMesh);
return resumeMesh;
}
\end{verbatim}
\end{itembox}
\begin{figure}[tbp]
\centering
\includegraphics[width=7cm]{../figure/tenjikaijo.pdf}
\caption{PDF資料の貼付}
\label{figure:texture}
\end{figure}
\begin{figure}[tbp]
\centering
\includegraphics[width=7cm]{../figure/texture_scenegraphs.pdf}
\caption{テクスチャのシーングラフ}
\label{figure:texture_scenegraphs}
\end{figure}
\subsubsection{CSV読み込みによる3DオブジェクトのWebへの反映}
「GLFTLoader」クラスインスタンスで3DオブジェクトのWebへの反映はできるが，その都度無駄にコードを書かなくてはならなくなってしまい冗長である。そのため，CSVから値を読み込む手法を取る。CSV読み込みは，FetchAPIを用いて行う。
\begin{itembox}[l]{CSV}
\scriptsize
\begin{verbatim}
1:videoPath,audioPath,rotationX,rotationY,x,y,z,
texturePath1,texturePath2,texturePath3,texturePath4
2:../video/sea.mp4,../mp3/sea.mp3,0,0,3.5,0,-8.125,
../texture_photo/good-1.jpg,../texture_photo/good-2.jpg,
../texture_photo/good-3.jpg,../texture_photo/good-4.jpg
\end{verbatim}
\end{itembox}
\begin{itembox}[l]{Fetch}
\scriptsize
\begin{verbatim}
fetch("../csv/videoAndResume.csv")
.then((response) => {
return response.text();
})
.then((data) => {
let result = data.split(/\r?\n|\r/).map((e) => {
return e.split(",");
});
for (let makeNumber = 1;
makeNumber < result.length; makeNumber++) {
let videoMesh = makeVideo(makeNumber,
result[makeNumber][0],
result[makeNumber][1])
let resumeMesh = makeResume(
result[makeNumber][7], makeNumber)
makeGroup(makeNumber, videoMesh, resumeMesh,
result[makeNumber][2], result[makeNumber][3],
result[makeNumber][4], result[makeNumber][5],
result[makeNumber][6]);
}
document.addEventListener("click", (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) {
for (let number = 1; number < result.length;
number++) {
if (intersects[0].object.name ==
result[number][7]) {
resumePageCounter[number] += 1;
const resumeMesh = makeResume(
result[number][
resumePageCounter[number] + 7],
number);
ntersects[0].object.parent.add(
resumeMesh);
}
if (resumePageCounter[number] ==
result[1].length - 8) {
resumePageCounter[number] = -1;
}
}
for (let number = 1;
number <= Object.keys(
videoPlayPauseFlag).length; number++) {
if (intersects[0].object.name == number) {
let audio =
intersects[0].object.children;
let videoTagId =
document.getElementById(`${number}`);
startStopVideoAndAudio(
number, videoTagId, audio);
}
}
}
})
})
.catch((error) => {
console.log(error);
});
\end{verbatim}
\end{itembox}
% \begin{figure}[tbp]
% \centering
% \includegraphics[width=7cm]{../figure/fetch.pdf}
% \caption{出力}
% \label{figure:image1}
% \end{figure}
\section{評価の方法}
本研究の評価として，利用者に本システムを利用してもらい，そのあとにアンケートでの定性調査を行う。\\
\indent
オンラインから本システムにアクセスしてもらい，アンケートの項目に答えてもらう。アンケートの結果から，使用している端末からストレスなく操作できたかを調査する。また仮想空間での資料発表展示会はブラウザで資料を見るのとどのように感じ方が違うのかを調査する。
\section{今後の展望}
現状としては，発表資料展示会のオブジェクトが未完成のままである。これからの予定として，以下のことを中心に展示会場の作成を進めていく。
発表資料展示会の作成と本システムを利用してもらいアンケートの実践をする。
発表資料展示会の大きさを動的に変更するアルゴリズムの作成をする。
% 物理演算用の Javascript ライブラリの Cannon.jsを実装して 3D モデルの通り抜けを防止する。
\begin{thebibliography}{99}
\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{three} three.js.“Fundamentals”.\url{https://threejs.org/manual/#en/fundamentals}. (参照日 2024-08-01).
\bibitem{webgl} MDN Web Docs.“WebGL:ウェブの2Dおよび3Dグラフィック”.\url{https://developer.mozilla.org/ja/docs/Web/API/WebGL_API}. (参照日2024-08-01).
\bibitem{chrome} Chrome for Developers.“Chromeの自動再生ポリシー”.\url{https://developer.chrome.com/blog/autoplay?hl=ja#webaudio}. (参照日2024-08-08).
% \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}
