%#!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
\begin{center}
{\bfseries 概要}
\end{center}
研究の簡単な概要説明を行う。また，論文の章立ては基本的に「背景」「先行研究」「研究の設計」「実験」「結論」の基本的な章が必要となり，これに加えて先行研究と研究の設計の間に「提案」などが入る。そのため，自身の研究に合わせて柔軟に組み立てる必要がある。(124文字)←概要は文字数を記載する。
COVID-19の影響により，仮想空間上で会議を行うことや娯楽として楽しむといった行動が増えるとともに仮想空間の需要が増えた。そのため，仮想空間上で発表資料の展示会を行うことで，インターネットに接続さえすれば発表資料を見れることに需要があるのではないかと考えた。本研究では，JavaScriptのライブラリであるThree.jsを用いて発表資料の展示会を行い，そのシステムが様々な端末からでも操作できる環境を目指し，システムを構築していく。
\setcounter{tocdepth}{3}
\tableofcontents
\chapter{はじめに}
% 社会的背景からテーマに至るまでを書く。
本章では、研究の背景と目的について説明する。
\section{メタバースをめぐる背景}
\subsection{メタバースとは}
メタバースの定義については厳密には定められていない。藤本直樹の『行研究におけるメタバースの定義と分類に関する考察』では関連する文献や先行研究からメタバースの定義や使われ方の分類を試みている\cite{metaverse-article}。
この文献では、メタバースは「超越（Meta）」と「世界（Universe）」の造語であり、「インターネット上に三次元CGの技術で仮想空間を構築し、様々な交流や活動ができる仕組み」だと理解されている。
しかし、使用される文脈や著者の属性によって概念が曖昧である一方、専門用語らしく断片的に語られてるため、しばしばバズワードであると評されている。
元アマゾンスタジオ戦略部門グローバル統括責任者のマシュー・ボールは、メタバースの解説書『ザ・メタバース』で「リアルタイムにレンダリングされた3D仮想世界をいくつもつなぎ、相互に連携できるようにした大規模ネットワークで、永続的に同期体験ができるもの、ユーザー数は実質無制限であり、かつユーザーは一人ひとり、個としてそこに存在している感覚を有する。また、アイデンティティ、歴史、各種権利、オブジェクト、コミュニケーション、決済などのデータに連続性がある」ものと定義し、更に同書でメタバースの備えるべき特徴を7つ示した。
\begin{itemize}
\item 永続的であること（中止・リセットされない）
\item 同期的であること（実生活と同じリアルタイム）
\item 大規模であること（同時接続ユーザ数が無制限）
\item 経済性があること（所有・投資・売買などが可能）
\item 広範であること（リアルとデジタルの垣根が無い）
\item 異なるメタバース間でも相互運用性があること
\item 幅広い企業・個人により作成・運用されること
\end{itemize}
(二次元メタバースと三次元メタバースについて記入)
メタバースには二次元メタバースと三次元メタバースがある。\cite{2d3d-metaverse}
二次元メタバースとは、2Dの画面上でアバターを操作するメタバースのことを指す。3Dメタバースと比べ、没入感は高くないが、ヘッドセット無しでPCやスマホからアクセス可能な点や、高度なデータ通信環境に依存しない点、過度な距離感を保ちながらコミュニケーション等を楽しめる点がメリットとしてある。
三次元メタバースとは、3Dの仮想空間でアバターを操作するメタバースのことを指す。利用する際はVRやMRのヘッドセットを使用することで、まるでリアルの世界にいるかのような高い没入感を得ることができる。3Dメタバースではよりリアルなアバターを利用できるため、チャットやメール、通話での従来型のコミュニケーションだけでなく、アバターのジェスチャーを用いた身体的、動的なコミュニケーションが可能になる。
\subsection{メタバース市場規模の増加}
2021年にはFacebook社はMeta Platformsへと社名を変更した。また、
IDC(2022)は2022年時点でAugmented Reality(AR)・Vitual Reality(VR)の世界の市場規模が約138億米ドルであると試算しており、2026年には509億米ドルまで成長すると予測している。
矢野研究所では、2022年度の国内メタバース市場規模とそのデータから将来的にどこまで成長の見込みがあるのかを記している\cite{yano}。
2022年度の国内メタバース市場規模（プラットフォーム、コンテンツ・インフラ等、XR機器の合算値）は前年度比173.6\%の1377億円、2023年度は同207\%の2851億円まで成長する見込みである（図.\ref{figure:yano-metaverse}）。
将来的に、国内のメタバース市場においては、まず法人向け市場でメタバースを次世代プラットフォームとして活用する企業は増え、その後一般消費者を対象とするコンシューマー向けメタバースのユーザーが次第に増えて市場が拡大する見込みで、2027年度の国内メタバース市場規模は2兆円を超えると予想している。
そして、2022年度までは試験的に事業参入する企業や新技術に関心の高い企業が積極的にメタバース事業に資金を投入し、様々な取り組みが行われた。（ここをもう少し詳しく書く）
\begin{figure}[tbp]
\centering
\includegraphics[width=10cm]{../../resume/figure/yano-metaverse.pdf}
\caption{メタバースの国内市場規模推移・予想}
\label{figure:yano-metaverse}
\end{figure}
総務省では、国内と世界のメタバース市場について記している\cite{somusyo}。
日本のメタバース市場（メタバースプラットフォーム、プラットフォーム以外（コンテンツ、インフラ）、XR（VR、AR、MR）機器の合計）は2022年度に1825億円（前年度比145.3\%増）となる見込みで、2026年度には1兆42億円まで拡大すると予想されている（図.\ref{figure:somusyo-metaverse-data}）。
また、世界のメタバース市場（インフラ、ハードウェア、ソフトウェア、サービスの合計）は、2022年の8兆6144億円から、2030年には123兆9738億円まで拡大すると予想されている（図.\ref{figure:somusyo-metaverse-world}）。
\begin{figure}[tbp]
\centering
\includegraphics[width=10cm]{../../resume/figure/somusyo-metaverse-data.pdf}
\caption{日本のメタバース市場規模（売上高）の推移と予測}
\label{figure:somusyo-metaverse-data}
\end{figure}
\begin{figure}[tbp]
\centering
\includegraphics[width=10cm]{../../resume/figure/somusyo-metaverse-world.pdf}
\caption{世界のメタバース市場規模の推移と予測}
\label{figure:somusyo-metaverse-world}
\end{figure}
\subsection{メタバースの利用状況}
Cotraは、2022年に全国15〜60歳以上の男女・計1331名に対してメタバースに関する利用実態や意識を把握したものだ\cite{cotra}。
メタバースの利用状況について聞いたところ、全体では25\%が利用したことがあると回答した。男性15〜19歳では48\%、男性20〜29歳では55\%と若い男性の多くが利用していた（図.\ref{figure:cotra1}）。
\begin{figure}[tbp]
\centering
\includegraphics[width=10cm]{../../resume/figure/cotra1.pdf}
\caption{メタバース利用状況}
\label{figure:cotra1}
\end{figure}
メタバースの利用用途は男性ではゲーム63\%、音楽・ライブ37\%、企業の展示会・イベント30\%だった。
女性ではゲーム53\%、企業の展示会・イベント39\%、音楽・ライブ37\%だった（図.\ref{figure:cotra2}）。
\begin{figure}[tbp]
\centering
\includegraphics[width=10cm]{../../resume/figure/cotra2.pdf}
\caption{（男女別）どのような用途で利用しましたか？}
\label{figure:cotra2}
\end{figure}
メタバースの継続利用について聞いたところ、男女ともに週1回以上継続して利用している人は4割を超え、月1回以上も合わせると約8割の人が継続して利用していた。
特に男性20代では62\%、女性30代では56\%が週1回以上利用していることが分かった（図.\ref{figure:cotra3}）。
\begin{figure}[tbp]
\centering
\includegraphics[width=10cm]{../../resume/figure/cotra3.pdf}
\caption{メタバースを利用したことがある方にお尋ねします。現在も継続して利用していますか？}
\label{figure:cotra3}
\end{figure}
電通では、2023年に全国15〜59歳の2000人を対象に、「メタバースに関する意識調査2023」を実施した\cite{dentu}。
本調査は、日本におけるメタバースに関する「認知・理解」や「興味・関心」の現状把握および、今後の浸透作や活用方法の検討を目的に、2021年より毎年実施している。
「メタバース」という言葉の認知率（「どのようなものか知っているか」「見聞きしたことがある」の合計）は、2021年の18.6\%から82.1\%に増加した（図.\ref{figure:dentu1}）。
\begin{figure}[tbp]
\centering
\includegraphics[width=10cm]{../../resume/figure/dentu1.pdf}
\caption{Q.あなたは「メタバース」をご存知ですか。}
\label{figure:dentu1}
\end{figure}
メタバースプラットフォームの利用経験率（いずれかのメタバースプラットフォームを「現実、利用／プレイすることがある」「これまでに、利用／プレイしたことはあるが、現在はしない」の合計は18.0\%だった（図.\ref{figure:dentu2}）。
また、「メタバースプラットフォームを現在、利用／プレイする人」の1日あたりの平均利用時間は68.8分だった（図.\ref{figure:dentu3}）。
\begin{figure}[tbp]
\centering
\includegraphics[width=10cm]{../../resume/figure/dentu2.pdf}
\caption{Q.あなたは、「以下のゲーム型、交流型などのメタバースプラットフォーム」※を利用／プレイすることがありますか。（各項目単一回答）}
\label{figure:dentu2}
\end{figure}
\begin{figure}[tbp]
\centering
\includegraphics[width=10cm]{../../resume/figure/dentu3.pdf}
\caption{Q. 「以下のあなたが現在利用／プレイすることのあるゲーム型・交流型などのメタバースプラットフォーム」※について、1日あたりの平均利用／プレイ時間をお知らせください。パソコンやスマホ／タブレット、家庭用ゲーム機など、利用／プレイする機器・デバイスは問わずにお知らせください。（各項目単一回答）}
\label{figure:dentu3}
\end{figure}
\subsection{メタバースの利用が広がっている分野}
KDDIは2023年10月24日から、実店舗を空間再現したバーチャル店舗で、最新の展示をみてショッピングができる\( \alpha \)U Placeの提供を開始した\cite{kddi}。
\( \alpha \)U Placeは、「ネットだけでは商品のイメージがわからない」「店員に相談したい」といったお客様におすすめのバーチャル』ショップである。
実店舗の空間を商品陳列から内装の雰囲気まで忠実にバーチャル上で再現しているため、商品の置き場所や商品ポップなどの実店舗ならでは工夫で注目ポイントを知ることができ、欲しい商品をタップするとECサイトで購入することができる（図.\ref{figure:kddi}）。
店舗空間は、スマートフォンでスキャンするだけで簡単にバーチャル空間に再現できるため、お客様は最新展示を体験できる。
さらに、実店舗の店員から接客を受けることができ、バーチャル空間からでも商品に最も詳しい店員に、商品に関する相談や詳細情報を聞くことができる。
\begin{figure}[tbp]
\centering
\includegraphics[width=10cm]{../../resume/figure/kddi.pdf}
\caption{無印良品のバーチャル店舗}
\label{figure:kddi}
\end{figure}
エヌ・ティ・ティ・スマートコネクト株式会社と株式会社 NTTデータNJKは、教育機関向け3Dメタバースサービスを2023年8月28日より提供開始した\cite{ntt}。
このサービスの特徴として、以下の4つがある。
\begin{enumerate}
\item 教育に特化した空間
仮想空間内に「教室」「集会所」「面談室」といった実際の教育現場と同様の空間を事前に準備し、授業や進路相談、全体集会などの円滑な開催が可能である（図.\ref{figure:ntt}）。
また、アバター姿でのディスカッションにより、児童生徒の羞恥心によるコミュニケーションの渋滞を防ぎ、新たなコミュニケーションを創出する。
\item 多様なコミュニケーション
音声会話、テキストチャット、プレゼンターモード、資料共有、ブレイクアウトルーム、ブース機能がある。
\item 安全な授業運営のためのセキュリティ機能
NGワードフィルターにより、トラブルを防ぐことができる。また仮想空間の利用管理や児童生徒のコミュニケーションログ、行動履歴を管理できる。
\item 4OS対応（ChromeOS、iOS、Windows、Android）
端末にアプリケーションをダウンロードして、日常的な利用が可能である。
\end{enumerate}
\begin{figure}[tbp]
\centering
\includegraphics[width=10cm]{../../resume/figure/ntt.pdf}
\caption{集会所でのグループワーク発表会}
\label{figure:ntt}
\end{figure}
BIPROGYの「MY HOME MARKET」は，消費者がスマートフォンでバーチャル住宅展示場を見学してセミオーダー型規格住宅を購入する仕組みだ\cite{home}（図.\ref{figure:myhomemarket}）。
これにより，消費者は24時間365日，建てたい家のイメージを膨らませて，予算の中で臨場感を持ってしることができるため，打つ合わせ回数を減らせるなどのメリットがある。
バーチャル住宅展示場では住宅の様々な部屋の内装や住宅の外見を360度視点を変更し，リモート内見することができる\cite{hometown}。
\begin{figure}[tbp]
\centering
\includegraphics[width=10cm]{../../resume/figure/myhomemarket.pdf}
\caption{住宅の選択画面}
\label{figure:myhomemarket}
\end{figure}
\section{研究目的}
本研究では、2Dメタバース空間においてレジュメ資料やプレゼンテーション資料を展示した展示会会場を作成し、自由にバーチャル空間を移動できるシステムを作成する。
このシステムを利用することで、従来のデータベースから資料を閲覧するよりも没入感をがあり、集中のモチベーションを保つこと、また資料をより簡単に探すことができるということを目的とする。
実験：
滞在時間（VRとデータベース）
早く資料を見つけることができるのか（VRとデータベース）
% \section{メタバースでの没入感について}
\chapter{先行研究と類似サービス}
% 章の始めにリード文としてこの章で何をどういう順番で述べるかを入れる。
% 2章では先行研究をとりあげ，身近な問題ではどうするかまで述べる。
\section{関連研究}
\subsection{メタバースを活用した多様な学習環境の構築と実践}
澤崎敏文は，これまで授業内容に合わせた様々な方法でオンライン授業を実践し，その考察を行ってきた。オンライン特有のメリットに対する肯定的な意見がある一方で，「リアリティ」「臨場感」の欠如を指摘する声もインタビュー結果から明らかになった。そこで，メタバース（三次元仮想空間）を授業や学生活動の一部に活用することで，その可能性について検討を行った。
メタバースを企画発表の場としての活用，ゼミ・卒業研究での活用・課題活動での活用の3つの事例を通して，実験を行った。
それぞれの活用の終了後にアンケート調査・インタビュー調査を行った結果，概ね好意的な回答が多く，メタバース活用の可能性を感じたと示している。
授業活用例では，利用当初，学生は何をしていいか分からず戸惑うという声もある一方で，自由に歩き回れる，人との仮想的な距離を取れるといった制約のなさにも次第に慣れ，グループ活動での活発な議論につながったと考えている。また，アンケート中「顔出ししなくていい」という主旨の回答も多数あり，学生にとっては，アバターを通して仮想空間の中で議論する方が，Zoom
等と比較して抵抗が少ないのではないかと考えた。メタバース内では，仮想的な距離や方向によって音声の聞こえ方なども変化し，自由に空間を行き来してコミュニケーションを取ることができるという点を考慮すると，ポスター発表のような場面での活用にも親和性が高いと考える\cite{article1}。
\subsection{}
\section{類似サービス}
\subsection{そのまま展示会}
SoVeCが提供する「そのまま展示会」は，高機能なリード管理画面を実装したソニークオリティのバーチャル展示会を，誰でも簡単にウェブブラウザで閲覧できるプラットフォームサービスである（図.\ref{figure:sonomama-tenjikai}）。
来場者向けの機能として，360度で会場を見渡すことができ高い一覧性・リアリティのあるブース内で，チャットや名刺交換の担当者を来場者が選択することが出来る・アーカイブ動画だけでなく，ライブ配信も可能でリアル展示会とバーチャル展示会の入場証をバーコード形式で共通化できる\cite{sonomama}。
\begin{figure}[tbp]
\centering
\includegraphics[width=10cm]{../../resume/figure/sonomama-tenjikai.pdf}
\caption{そのまま展示会}
\label{figure:sonomama-tenjikai}
\end{figure}
\subsection{ovice}
oviceは「オンラインでコミュニケーションを最大化」することを目指して開発されたバーチャルオフィスツールで、アバターを使ってオンライン画面上を自由に動いて話しかけることができる（図.\ref{figure:ovice}）\cite{ovice}。
主な機能として、以下が挙げられる。
\begin{enumerate}
\item 移動し、会話を始める。
ダブルクリックで移動を行い、相手に近づくと会話が始まる。相手に近づくほど声が大きくなり、同時に複数人が話しても音が途切れることがない。
\item ミーティングに参加する。
音声通話、ビデオ通話が即座に行える。また、一人が同時に複数の画面共有ができたり、複数人が同時に画面共有をすることが可能である。
\item 会議室に入って会話をする。
会議室をクリックして入室することができ、鍵をかけて会話をすることが可能である。会議室予約機能や録画機能がある。
\end{enumerate}
oviceはオフィスでの利用の他に、イベントでの利用やアカデミックでの利用もされている。
例えば、イベントでの利用だと展示会形式での利用がある。
株式会社ラックでは、仮想空間の展示場「LAC Virtual EXPO」でサイバーセキュリティに関する様々な領域のサービスを提供した。24時間365日いつでも、どこからでもアクセスできる。
二次元の立体的なサイバー空間を作成し、さまざまなコンテンツを掲載しており、GIFの掲載や、クリックでのYouTubeへの誘導もしている。
（説明をもう少し書く、あとアカデミックでの例も書く）？
画像は株式会社ラックのほうがいいかもしれない。
\begin{figure}[tbp]
\centering
\includegraphics[width=10cm]{../../resume/figure/ovice.pdf}
\caption{ovice}
\label{figure:ovice}
\end{figure}
\subsection{artsteps}
artstepsは、独自のVR展示会やストーリーを作成、デザイン、共有するためのプラットフォームを提供している（図.\ref{figure:artsteps1}）\cite{artsteps}。
主な機能として、以下が挙げられる。
\begin{enumerate}
\item 仮想環境を設計する
壁とドアをグリッドに配置し、環境の作成をする。壁や床などは好きな色に塗ることや、独自のテクスチャを使用することができる。
\item デジタルコンテンツをアップロードする
画像やビデオ、3Dオブジェクトや音をアップロードすることができる。
\item ストーリーを作成する
VRスペース全体にガイドポイントを配置し、展示物のタイトルと説明をつけることができる。また、ガイドポイントとアップロードしたコンテンツの間の流れを選択することで、独自の物語を演出できる。
\item 共有
VR空間をソーシャルメディアで共有したり、個人のウェブサイトに埋め込むことができる。また、訪問者や他のクリエイターとリアルタイムでのチャットを行うことができる。
\end{enumerate}
artstepsは、Webサイトだけでなく、スマートフォンのアプリケーションとしても利用することができる。
\begin{figure}[tbp]
\centering
\includegraphics[width=10cm]{../../resume/figure/artsteps1.pdf}
\caption{artsteps}
\label{figure:artsteps1}
\end{figure}
\chapter{提案}
\chapter{システムの設計}
\section{関連研究における課題とシステムの提案}
先行研究の中の通信環境に関する意見として，「発表を含めるとPCのスペックが足りない」，「パソコンのスペックが足りないため，発表などが非常にやりにくかった」，「資料が見にくい，ネット環境やデバイスによって差が出る」があった。
% メタバースを活用した多様な学習環境の構築と実践．日本教育工学会研究報告書．
この研究を踏まえて，本システムではより多くの端末で操作できるように軽量なシステムの設計する。またその場で発表するのではなく発表資料を閲覧することに重点を置いたシステムを提案する。
\section{要件定義}
関連研究における課題を踏まえた上で，本システムにおける前提条件と機能要件を以下に示す。
\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形式資料の再生と停止を実装する。
\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の3Dimensions(3D)ライブラリでWebページに3Dコンテンツをできる限り簡単に表示しようというものだ\cite{three}。
Three.jsはWeb Graphics Library(WebGL)という互換性があるWebブラウザにおいて、プラグインを使用せずにインタラクティブな3Dや2DのグラフィックをレンダリングするためのJavaScript APIを使用して描画している\cite{webgl}。
Three.jsを使用する理由として、Webにアクセスして利用することで、異なるデバイスやOS間での互換性が高いという点や、インストール不要なためインストールの手間と時間がかからなくて済むといったことがある。
また、WebVRを実現するためのJavaScriptのライブラリとして、babylon.jsやA-Frameなどがある。それらではなく、Three.jsを使用するのには（ここの説明を詳しく書く）
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=10cm]{../../resume/figure/threejs_zu.pdf}
\caption{Three.jsのシステム概念図}
\label{figure:image}
\end{figure}
\begin{figure}[tbp]
\centering
\includegraphics[width=10cm]{../../resume/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=10cm]{../../resume/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=10cm]{../../resume/figure/tenjikaijo.pdf}
\caption{PDF資料の貼付}
\label{figure:texture}
\end{figure}
\begin{figure}[tbp]
\centering
\includegraphics[width=10cm]{../../resume/figure/texture_scenegraphs.pdf}
\caption{テクスチャのシーングラフ}
\label{figure:texture_scenegraphs}
\end{figure}
\subsubsection{CSV読み込みによる冗長性の削減}
動画テクスチャオブジェクトや画像テキスチャオブジェクトを複数作成するにあたり、その都度無駄にプログラムを作成しなければならなく冗長である。そのため、CSVから様々な値を読み込む手法を取る。
CSV読み込みには、Fetch APIを用いて行う。Fetch APIとは、HTTPリクエストを行い、レスポンスを処理するためのJavaScriptインターフェイスを提供するAPIのことだ。
\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}
このCSVでは以下の値を設定している。
\begin{itemize}
\item videoPath: 動画ファイルまでの相対パス
\item audioPath: 音声ファイルまでの相対パス
\item rotationX・rotationY: オブジェクトをX軸・Y軸にどのくらい回転するか
\item x・y・z: オブジェクトの位置
\item texturePath: 画像ファイルまでの相対パス
\end{itemize}
\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]);
}
\end{verbatim}
\end{itembox}
\begin{figure}[tbp]
\centering
\includegraphics[width=10cm]{../../resume/figure/group_scenegraphs.pdf}
\caption{グループのシーングラフ}
\label{figure:group_scenegraphs}
\end{figure}
動画テクスチャオブジェクトと画像テクスチャオブジェクトを作成し、１つのグループにする（図.\ref{figure:group_scenegraphs}）。こうすることでそれぞれのオブジェクトを同時に移動することができ、x・y・z座標の位置を設定することができる。
\subsubsection{オブジェクトのクリックイベント}
オブジェクトに焦点を合わせてクリックすることでクリックイベントを発生することができる。これを実現するものとしてThree.jsでは「Raycaster」クラスというレイキャスティングを支援するクラスがある。
本システムでは、「Raycaster」クラスを使用することで、ディスプレイ中心から見えない光線を出し、それと交わったオブジェクトを判定する。そのオブジェクトによって画層テクスチャを変更したり、動画の再生・停止を行っている。
画像テクスチャの変更は、クリックした数だけカウントし、その数に沿った画像テキスチャにしている。また、動画テキスチャのオブジェクトをクリックすると、trueとfalseが切り替えられるように設計した。trueの場合は動画が停止され、falseの場合は動画が再生される。
\begin{itembox}[l]{Raycaster}
\scriptsize
\begin{verbatim}
let resumePageCounter = {};
let videoPlayPauseFlag = {};
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) {
console.log(intersects[0].object);
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);
intersects[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);
}
}
}
})
\end{verbatim}
\end{itembox}
% \begin{figure}[tbp]
% \centering
% \includegraphics[width=7cm]{../figure/fetch.pdf}
% \caption{出力}
% \label{figure:image1}
% \end{figure}
\chapter{発表会場の適用実験}
\section{評価の方法}
% 本研究の評価として，利用者に本システムを利用してもらい，そのあとにアンケートでの定性調査を行う。
% 回答者はオンラインから本システムにアクセスし，アンケートの項目に答える。アンケートの結果から，使用している端末からストレスなく操作できたかを調査する。また仮想空間での資料発表展示会はWebブラウザで資料を閲覧することとどのように感じ方が違うのかを調査する。
１つ目に、資料展示会における発表資料展示者と訪問者とのコミュニケーションの方法についての比較方法として、
リアルテイムでのチャット意見交換がいいのか、それともログを残すという形を意味する意見回収箱のようなものを設置するほうがいいのかをアンケートを取る
２つ目に、発表資料の展示方法についてである。
スライド資料のように、資料を切り替えられるようにしたほうがいいのか、それとも全てのページを配置したほうがいいのか
３つ目に、
\section{今後の展望}
現状としては，発表資料展示会のオブジェクトが未完成である。これからの予定として，以下のことを中心に展示会場の作成を進めていく。
\begin{itemize}
\item 発表資料展示会の作成と本システムを利用してもらいアンケートの実践をする。
\item 物理演算用の JavaScript ライブラリの Cannon.jsを実装して 3D モデルの通り抜けを防止する。
\end{itemize}
\chapter{結論}
結論は簡潔に。
最後に参考文献を必ず正しく記載する。
% 原稿がどの程度のクォリティなのか参考文献である程度分かる。
\begin{thebibliography}{}
% \bibitem{} . “”. \url{}, (参照日 2024-11-06).
\bibitem{metaverse-article}藤本直樹. 先行研究におけるメタバースの定義と分類に関する考察. 日本情報経営学会第87回全国大会. 2024. vol.2024，p.153-156
\bibitem{2d3d-metaverse}メタバース総研.“2Dメタバースと3Dメタバースの違いとは？事例9選も紹介”. \url{https://metaversesouken.com/metaverse/2d-3d/#DD}, (参照日 2024-10-20)
\bibitem{yano} 株式会社矢野経済研究所.“メタバースの国内市場動向調査を実践(2023)”. \url{https://www.yano.co.jp/press-release/show/press_id/3333}, (参照日 2024-10-28).
\bibitem{somusyo} 総務省.“令和5年版 情報通信白書 第2部 情報通信分野の現状を課題”. \url{https://www.soumu.go.jp/johotsusintokei/whitepaper/ja/r05/html/nd247520.html}, (参照日 2024-10-20).
\bibitem{cotra} トランスコスモス株式会社. “【メタバースに関する利用実態\_消費者調査2022】 メタバースを4人に1人が利用し、中でも20代男性は5割以上が利用。目的はゲームが高く、20代女性は企業の展示会・イベント参加が5割超。”. \url{https://www.transcosmos-cotra.jp/report/usage-status-of-metaverse1}, (参照日 2024-11-06).
\bibitem{dentu} 株式会社電通. “電通、「メタバースに関する意識調査2023」を実施”. \url{https://www.dentsu.co.jp/news/release/2023/1211-010670.html}, (参照日 2024-11-06).
\bibitem{kddi} KDDI株式会社. “実店舗を空間再現したバーチャル店舗「\( \alpha \)U place」を提供開始”. \url{https://newsroom.kddi.com/news/detail/kddi_pr-1026.html}, (参照日 2024-11-06).
\bibitem{ntt} エヌ・ティ・ティ・スマートコネクト株式会社，株式会社NTTデータNJK. “子どもたちの学びの多様性に貢献する「3D教育メタバース」を提供開始~ 仮想空間だからこそできる体験・学習効率の向上の場を提供 ~”. \url{https://www.nttsmc.com/news/2023/20230828.html}, (参照日 2024-11-06).
\bibitem{home} BIPROGY.“バーチャル住宅展示場MY HOME MARKET”. \url{https://www.biprogy.com/solution/service/myhomemarket.html}, (参照日2024-11-09).
\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{ovice} oVice株式会社.“ovice｜約4,000社の導入実績 - 仮想オフィス(バーチャルオフィスプラットフォーム)”. \url{https://www.ovice.com/ja}, (参照日 2024-11-04).
\bibitem{artsteps} artsteps.“Artsteps”. \url{https://www.artsteps.com/privatespaces}, (参照日 2024-11-04).
\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}
