diff --git a/resume/2023-fall/c121092-2023-R.aux b/resume/2023-fall/c121092-2023-R.aux new file mode 100644 index 0000000..106e0be --- /dev/null +++ b/resume/2023-fall/c121092-2023-R.aux @@ -0,0 +1,42 @@ +\relax +\citation{nomura} +\citation{mitubisi} +\citation{home} +\citation{hometown} +\citation{article1} +\citation{sonomama} +\@writefile{toc}{\contentsline {section}{\numberline {1}背景}{1}{}\protected@file@percent } +\@writefile{toc}{\contentsline {section}{\numberline {2}研究目的}{1}{}\protected@file@percent } +\@writefile{toc}{\contentsline {section}{\numberline {3}先行事例}{1}{}\protected@file@percent } +\@writefile{toc}{\contentsline {subsection}{\numberline {3.1}関連研究:様々な場面でのメタバースの活用事例}{1}{}\protected@file@percent } +\@writefile{toc}{\contentsline {subsection}{\numberline {3.2}類似サービス:そのまま展示会}{2}{}\protected@file@percent } +\@writefile{toc}{\contentsline {section}{\numberline {4}システムの提案}{2}{}\protected@file@percent } +\@writefile{toc}{\contentsline {section}{\numberline {5}システムの開発}{2}{}\protected@file@percent } +\@writefile{toc}{\contentsline {subsection}{\numberline {5.1}開発環境}{2}{}\protected@file@percent } +\@writefile{toc}{\contentsline {subsection}{\numberline {5.2}Three.js}{2}{}\protected@file@percent } +\@writefile{toc}{\contentsline {subsubsection}{\numberline {5.2.1}Three.jsのシステム概要}{2}{}\protected@file@percent } +\@writefile{lof}{\contentsline {figure}{\numberline {1}{\ignorespaces Three.jsのシステム概念図}}{2}{}\protected@file@percent } +\newlabel{figure:image}{{1}{2}} +\@writefile{toc}{\contentsline {subsubsection}{\numberline {5.2.2}ビデオの表示と再生・停止}{2}{}\protected@file@percent } +\citation{glTF} +\@writefile{toc}{\contentsline {subsubsection}{\numberline {5.2.3}CSV読み込みによる3DオブジェクトのWebへの反映}{3}{}\protected@file@percent } +\@writefile{lot}{\contentsline {table}{\numberline {1}{\ignorespaces Object.csv}}{3}{}\protected@file@percent } +\@writefile{lof}{\contentsline {figure}{\numberline {2}{\ignorespaces 出力}}{3}{}\protected@file@percent } +\newlabel{figure:image1}{{2}{3}} +\@writefile{toc}{\contentsline {subsection}{\numberline {5.3}Blender}{3}{}\protected@file@percent } +\@writefile{toc}{\contentsline {subsubsection}{\numberline {5.3.1}glTF形式の利用}{3}{}\protected@file@percent } +\@writefile{toc}{\contentsline {subsubsection}{\numberline {5.3.2}3Dモデルの光源}{3}{}\protected@file@percent } +\bibcite{nomura}{1} +\bibcite{mitubisi}{2} +\bibcite{home}{3} +\bibcite{hometown}{4} +\bibcite{article1}{5} +\bibcite{sonomama}{6} +\bibcite{glTF}{7} +\@writefile{lof}{\contentsline {figure}{\numberline {3}{\ignorespaces 影ありのオブジェクト}}{4}{}\protected@file@percent } +\newlabel{figure:cube0}{{3}{4}} +\@writefile{lof}{\contentsline {figure}{\numberline {4}{\ignorespaces 影なしのオブジェクト}}{4}{}\protected@file@percent } +\newlabel{figure:cube1}{{4}{4}} +\@writefile{toc}{\contentsline {section}{\numberline {6}評価の方法}{4}{}\protected@file@percent } +\@writefile{toc}{\contentsline {section}{\numberline {7}今後の展望}{4}{}\protected@file@percent } +\gdef \@abspage@last{4} diff --git a/resume/2023-fall/c121092-2023-R.dvi b/resume/2023-fall/c121092-2023-R.dvi new file mode 100644 index 0000000..54de3af --- /dev/null +++ b/resume/2023-fall/c121092-2023-R.dvi Binary files differ diff --git a/resume/2023-fall/c121092-2023-R.log b/resume/2023-fall/c121092-2023-R.log new file mode 100644 index 0000000..65b0cb5 --- /dev/null +++ b/resume/2023-fall/c121092-2023-R.log @@ -0,0 +1,223 @@ +This is e-pTeX, Version 3.141592653-p3.9.1-210218-2.6 (utf8.euc) (TeX Live 2022/dev/Debian) (preloaded format=platex 2023.8.7) 22 NOV 2023 03:14 +entering extended mode + restricted \write18 enabled. + %&-line parsing enabled. +**c121092-2023-R.tex +(./c121092-2023-R.tex +pLaTeX2e <2021-11-15> (based on LaTeX2e <2021-11-15> patch level 1) +L3 programming layer <2022-01-21> +(/usr/share/texlive/texmf-dist/tex/platex/base/jarticle.cls +Document Class: jarticle 2020/09/30 v1.8f Standard pLaTeX class +\c@@paper=\count184 +(/usr/share/texlive/texmf-dist/tex/platex/base/jsize10.clo +File: jsize10.clo 2020/09/30 v1.8f Standard pLaTeX file (size option) +) +\c@part=\count185 +\c@section=\count186 +\c@subsection=\count187 +\c@subsubsection=\count188 +\c@paragraph=\count189 +\c@subparagraph=\count190 +\c@figure=\count191 +\c@table=\count192 +\abovecaptionskip=\skip47 +\belowcaptionskip=\skip48 +\symmincho=\mathgroup4 +LaTeX Font Info: Overwriting symbol font `mincho' in version `bold' +(Font) JY1/mc/m/n --> JY1/gt/m/n on input line 615. +\toclineskip=\dimen154 +\@lnumwidth=\dimen155 +\bibindent=\dimen156 +\heisei=\count193 +) +(/usr/share/texlive/texmf-dist/tex/latex/graphics/graphicx.sty +Package: graphicx 2021/09/16 v1.2d Enhanced LaTeX Graphics (DPC,SPQR) + +(/usr/share/texlive/texmf-dist/tex/latex/graphics/keyval.sty +Package: keyval 2014/10/28 v1.15 key=value parser (DPC) +\KV@toks@=\toks17 +) +(/usr/share/texlive/texmf-dist/tex/latex/graphics/graphics.sty +Package: graphics 2021/03/04 v1.4d Standard LaTeX Graphics (DPC,SPQR) + +(/usr/share/texlive/texmf-dist/tex/latex/graphics/trig.sty +Package: trig 2021/08/11 v1.11 sin cos tan (DPC) +) +(/usr/share/texlive/texmf-dist/tex/latex/graphics-cfg/graphics.cfg +File: graphics.cfg 2016/06/04 v1.11 sample graphics configuration +) +Package graphics Info: Driver file: dvipdfmx.def on input line 107. + +(/usr/share/texlive/texmf-dist/tex/latex/graphics-def/dvipdfmx.def +File: dvipdfmx.def 2021/03/18 v5.0j Graphics/color driver for dvipdfmx +)) +\Gin@req@height=\dimen157 +\Gin@req@width=\dimen158 +) +(/usr/share/texlive/texmf-dist/tex/latex/url/url.sty +\Urlmuskip=\muskip16 +Package: url 2013/09/16 ver 3.4 Verb mode for urls, etc. +) +(/usr/share/texlive/texmf-dist/tex/latex/ascmac/ascmac.sty +Package: ascmac 2020/01/15 v2.1 ascmac wrapper (community edition) + +(/usr/share/texlive/texmf-dist/tex/latex/ascmac/tascmac.sty +Package: tascmac 2020/01/15 v2.1 ascmac package (community edition) +\@savetbaselineshift=\dimen159 +\@saveybaselineshift=\dimen160 +\scb@x=\box67 +\scscb@x=\box68 +\@bw=\dimen161 +\@nbox=\box69 +\@nbody=\box70 +\@scw=\dimen162 +\ascmac@hoboxa=\box71 +\ascmac@hoboxb=\box72 +\@itemh=\dimen163 +\@iboxpos=\toks18 +\@iboxstr=\box73 +\@bwsp=\box74 +\@@bwsp=\box75 +\@bcal=\count194 +\shaderule=\dimen164 +)) +(/usr/share/texlive/texmf-dist/tex/latex/l3backend/l3backend-dvips.def +File: l3backend-dvips.def 2022-01-12 L3 backend support: dvips +\l__pdf_internal_box=\box76 +\g__pdf_backend_object_int=\count195 +\l__pdf_backend_content_box=\box77 +\l__pdf_backend_model_box=\box78 +\g__pdf_backend_annotation_int=\count196 +\g__pdf_backend_link_int=\count197 +\g__pdf_backend_link_sf_int=\count198 +) +(./c121092-2023-R.aux) +\openout1 = `c121092-2023-R.aux'. + +LaTeX Font Info: Checking defaults for OML/cmm/m/it on input line 17. +LaTeX Font Info: ... okay on input line 17. +LaTeX Font Info: Checking defaults for OMS/cmsy/m/n on input line 17. +LaTeX Font Info: ... okay on input line 17. +LaTeX Font Info: Checking defaults for OT1/cmr/m/n on input line 17. +LaTeX Font Info: ... okay on input line 17. +LaTeX Font Info: Checking defaults for T1/cmr/m/n on input line 17. +LaTeX Font Info: ... okay on input line 17. +LaTeX Font Info: Checking defaults for TS1/cmr/m/n on input line 17. +LaTeX Font Info: ... okay on input line 17. +LaTeX Font Info: Checking defaults for OMX/cmex/m/n on input line 17. +LaTeX Font Info: ... okay on input line 17. +LaTeX Font Info: Checking defaults for U/cmr/m/n on input line 17. +LaTeX Font Info: ... okay on input line 17. +LaTeX Font Info: Checking defaults for JY1/mc/m/n on input line 17. +LaTeX Font Info: ... okay on input line 17. +LaTeX Font Info: Checking defaults for JT1/mc/m/n on input line 17. +LaTeX Font Info: ... okay on input line 17. +LaTeX Font Info: External font `cmex10' loaded for size +(Font) <12> on input line 30. +LaTeX Font Info: External font `cmex10' loaded for size +(Font) <8> on input line 30. +LaTeX Font Info: External font `cmex10' loaded for size +(Font) <6> on input line 30. +LaTeX Font Info: Font shape `JT1/mc/bx/n' in size <10> not available +(Font) Font shape `JT1/gt/m/n' tried instead on input line 30. +LaTeX Font Info: Font shape `JY1/mc/bx/n' in size <10> not available +(Font) Font shape `JY1/gt/m/n' tried instead on input line 30. +LaTeX Font Info: Font shape `JT1/mc/bx/n' in size <14.4> not available +(Font) Font shape `JT1/gt/m/n' tried instead on input line 34. +LaTeX Font Info: Font shape `JY1/mc/bx/n' in size <14.4> not available +(Font) Font shape `JY1/gt/m/n' tried instead on input line 34. +LaTeX Font Info: Font shape `JT1/mc/bx/n' in size <12> not available +(Font) Font shape `JT1/gt/m/n' tried instead on input line 45. +LaTeX Font Info: Font shape `JY1/mc/bx/n' in size <12> not available +(Font) Font shape `JY1/gt/m/n' tried instead on input line 45. + [1 + + +] +File: threeJsSystem.pdf Graphic file (type pdf) + + + +LaTeX Warning: `!h' float specifier changed to `!ht'. + + +Overfull \hbox (3.1395pt too wide) in paragraph at lines 130--130 +[] \OT1/cmtt/m/n/7 positionalAudio = new THREE.PositionalAudio(listener);[] + [] + +LaTeX Font Info: External font `cmex10' loaded for size +(Font) <7> on input line 131. +LaTeX Font Info: External font `cmex10' loaded for size +(Font) <5> on input line 131. +[2] +Overfull \hbox (3.7585pt too wide) in paragraph at lines 176--176 +[]\OT1/cmr/bx/n/10 CSV \JY1/gt/m/n/10 読み込みによる \OT1/cmr/bx/n/10 3D \JY1/g +t/m/n/10 オブジ ェ クトの \OT1/cmr/bx/n/10 Web + [] + +File: fetch.pdf Graphic file (type pdf) + + +Overfull \hbox (7.77586pt too wide) in paragraph at lines 235--236 +[]\OT1/cmr/m/n/10 3D \JY1/mc/m/n/10 モデルは \OT1/cmr/m/n/10 Blender \JY1/mc/m/ +n/10 を用いて作成し , \OT1/cmr/m/n/10 glTF(Graphics + [] + +File: cube0.pdf Graphic file (type pdf) + +File: cube1.pdf Graphic file (type pdf) + + +LaTeX Warning: `h' float specifier changed to `ht'. + +[3] +Underfull \hbox (badness 10000) in paragraph at lines 280--281 +[]\JY1/mc/m/n/10 三菱総合研究所\OT1/cmr/m/n/10 . \JY1/mc/m/n/10 “ \OT1/cmr/m/n +/10 CX2030 \JY1/mc/m/n/10 : バ ーチ ャ ル + [] + + +Underfull \hbox (badness 10000) in paragraph at lines 280--281 +\JY1/mc/m/n/10 テクノロジ ー活用の場としての広義の + [] + + +Underfull \hbox (badness 10000) in paragraph at lines 280--281 +\JY1/mc/m/n/10 メタバ ース ” \OT1/cmr/m/n/10 . $\OT1/cmtt/m/n/10 https : / / w +ww . mri . co . jp / + [] + + +Underfull \hbox (badness 10000) in paragraph at lines 280--281 +\OT1/cmtt/m/n/10 knowledge / column / dia6ou000004u77a-[]att / + [] + + +Underfull \hbox (badness 10000) in paragraph at lines 281--282 +\OT1/cmr/m/n/10 MAR-KET \JY1/mc/m/n/10 ” \OT1/cmr/m/n/10 . $\OT1/cmtt/m/n/10 h +ttps : / / www . biprogy . com / + [] + + +Underfull \hbox (badness 5756) in paragraph at lines 281--282 +\OT1/cmtt/m/n/10 solution / service / myhomemarket . html$\OT1/cmr/m/n/10 . (\J +Y1/mc/m/n/10 参 + [] + + +Underfull \hbox (badness 4429) in paragraph at lines 284--285 +\OT1/cmtt/m/n/10 www . sovec . net / sonomama / tenjikai/$\OT1/cmr/m/n/10 . (\J +Y1/mc/m/n/10 参照 + [] + +[4] (./c121092-2023-R.aux) ) +Here is how much of TeX's memory you used: + 1189 strings out of 478741 + 19536 string characters out of 5860983 + 338443 words of memory out of 5000000 + 19635 multiletter control sequences out of 15000+600000 + 480089 words of font info for 71 fonts, out of 8000000 for 9000 + 929 hyphenation exceptions out of 8191 + 55i,8n,62p,744b,328s stack positions out of 5000i,500n,10000p,200000b,80000s + +Output written on c121092-2023-R.dvi (4 pages, 22928 bytes). diff --git a/resume/2023-fall/c121092-2023-R.pdf b/resume/2023-fall/c121092-2023-R.pdf new file mode 100644 index 0000000..92c709d --- /dev/null +++ b/resume/2023-fall/c121092-2023-R.pdf Binary files differ diff --git a/resume/2023-fall/c121092-2023-R.tex b/resume/2023-fall/c121092-2023-R.tex new file mode 100644 index 0000000..cd48000 --- /dev/null +++ b/resume/2023-fall/c121092-2023-R.tex @@ -0,0 +1,289 @@ +\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} \ No newline at end of file diff --git a/resume/c121092-2023-R.aux b/resume/c121092-2023-R.aux deleted file mode 100644 index 106e0be..0000000 --- a/resume/c121092-2023-R.aux +++ /dev/null @@ -1,42 +0,0 @@ -\relax -\citation{nomura} -\citation{mitubisi} -\citation{home} -\citation{hometown} -\citation{article1} -\citation{sonomama} -\@writefile{toc}{\contentsline {section}{\numberline {1}背景}{1}{}\protected@file@percent } -\@writefile{toc}{\contentsline {section}{\numberline {2}研究目的}{1}{}\protected@file@percent } -\@writefile{toc}{\contentsline {section}{\numberline {3}先行事例}{1}{}\protected@file@percent } -\@writefile{toc}{\contentsline {subsection}{\numberline {3.1}関連研究:様々な場面でのメタバースの活用事例}{1}{}\protected@file@percent } -\@writefile{toc}{\contentsline {subsection}{\numberline {3.2}類似サービス:そのまま展示会}{2}{}\protected@file@percent } -\@writefile{toc}{\contentsline {section}{\numberline {4}システムの提案}{2}{}\protected@file@percent } -\@writefile{toc}{\contentsline {section}{\numberline {5}システムの開発}{2}{}\protected@file@percent } -\@writefile{toc}{\contentsline {subsection}{\numberline {5.1}開発環境}{2}{}\protected@file@percent } -\@writefile{toc}{\contentsline {subsection}{\numberline {5.2}Three.js}{2}{}\protected@file@percent } -\@writefile{toc}{\contentsline {subsubsection}{\numberline {5.2.1}Three.jsのシステム概要}{2}{}\protected@file@percent } -\@writefile{lof}{\contentsline {figure}{\numberline {1}{\ignorespaces Three.jsのシステム概念図}}{2}{}\protected@file@percent } -\newlabel{figure:image}{{1}{2}} -\@writefile{toc}{\contentsline {subsubsection}{\numberline {5.2.2}ビデオの表示と再生・停止}{2}{}\protected@file@percent } -\citation{glTF} -\@writefile{toc}{\contentsline {subsubsection}{\numberline {5.2.3}CSV読み込みによる3DオブジェクトのWebへの反映}{3}{}\protected@file@percent } -\@writefile{lot}{\contentsline {table}{\numberline {1}{\ignorespaces Object.csv}}{3}{}\protected@file@percent } -\@writefile{lof}{\contentsline {figure}{\numberline {2}{\ignorespaces 出力}}{3}{}\protected@file@percent } -\newlabel{figure:image1}{{2}{3}} -\@writefile{toc}{\contentsline {subsection}{\numberline {5.3}Blender}{3}{}\protected@file@percent } -\@writefile{toc}{\contentsline {subsubsection}{\numberline {5.3.1}glTF形式の利用}{3}{}\protected@file@percent } -\@writefile{toc}{\contentsline {subsubsection}{\numberline {5.3.2}3Dモデルの光源}{3}{}\protected@file@percent } -\bibcite{nomura}{1} -\bibcite{mitubisi}{2} -\bibcite{home}{3} -\bibcite{hometown}{4} -\bibcite{article1}{5} -\bibcite{sonomama}{6} -\bibcite{glTF}{7} -\@writefile{lof}{\contentsline {figure}{\numberline {3}{\ignorespaces 影ありのオブジェクト}}{4}{}\protected@file@percent } -\newlabel{figure:cube0}{{3}{4}} -\@writefile{lof}{\contentsline {figure}{\numberline {4}{\ignorespaces 影なしのオブジェクト}}{4}{}\protected@file@percent } -\newlabel{figure:cube1}{{4}{4}} -\@writefile{toc}{\contentsline {section}{\numberline {6}評価の方法}{4}{}\protected@file@percent } -\@writefile{toc}{\contentsline {section}{\numberline {7}今後の展望}{4}{}\protected@file@percent } -\gdef \@abspage@last{4} diff --git a/resume/c121092-2023-R.dvi b/resume/c121092-2023-R.dvi deleted file mode 100644 index 54de3af..0000000 --- a/resume/c121092-2023-R.dvi +++ /dev/null Binary files differ diff --git a/resume/c121092-2023-R.log b/resume/c121092-2023-R.log deleted file mode 100644 index 65b0cb5..0000000 --- a/resume/c121092-2023-R.log +++ /dev/null @@ -1,223 +0,0 @@ -This is e-pTeX, Version 3.141592653-p3.9.1-210218-2.6 (utf8.euc) (TeX Live 2022/dev/Debian) (preloaded format=platex 2023.8.7) 22 NOV 2023 03:14 -entering extended mode - restricted \write18 enabled. - %&-line parsing enabled. -**c121092-2023-R.tex -(./c121092-2023-R.tex -pLaTeX2e <2021-11-15> (based on LaTeX2e <2021-11-15> patch level 1) -L3 programming layer <2022-01-21> -(/usr/share/texlive/texmf-dist/tex/platex/base/jarticle.cls -Document Class: jarticle 2020/09/30 v1.8f Standard pLaTeX class -\c@@paper=\count184 -(/usr/share/texlive/texmf-dist/tex/platex/base/jsize10.clo -File: jsize10.clo 2020/09/30 v1.8f Standard pLaTeX file (size option) -) -\c@part=\count185 -\c@section=\count186 -\c@subsection=\count187 -\c@subsubsection=\count188 -\c@paragraph=\count189 -\c@subparagraph=\count190 -\c@figure=\count191 -\c@table=\count192 -\abovecaptionskip=\skip47 -\belowcaptionskip=\skip48 -\symmincho=\mathgroup4 -LaTeX Font Info: Overwriting symbol font `mincho' in version `bold' -(Font) JY1/mc/m/n --> JY1/gt/m/n on input line 615. -\toclineskip=\dimen154 -\@lnumwidth=\dimen155 -\bibindent=\dimen156 -\heisei=\count193 -) -(/usr/share/texlive/texmf-dist/tex/latex/graphics/graphicx.sty -Package: graphicx 2021/09/16 v1.2d Enhanced LaTeX Graphics (DPC,SPQR) - -(/usr/share/texlive/texmf-dist/tex/latex/graphics/keyval.sty -Package: keyval 2014/10/28 v1.15 key=value parser (DPC) -\KV@toks@=\toks17 -) -(/usr/share/texlive/texmf-dist/tex/latex/graphics/graphics.sty -Package: graphics 2021/03/04 v1.4d Standard LaTeX Graphics (DPC,SPQR) - -(/usr/share/texlive/texmf-dist/tex/latex/graphics/trig.sty -Package: trig 2021/08/11 v1.11 sin cos tan (DPC) -) -(/usr/share/texlive/texmf-dist/tex/latex/graphics-cfg/graphics.cfg -File: graphics.cfg 2016/06/04 v1.11 sample graphics configuration -) -Package graphics Info: Driver file: dvipdfmx.def on input line 107. - -(/usr/share/texlive/texmf-dist/tex/latex/graphics-def/dvipdfmx.def -File: dvipdfmx.def 2021/03/18 v5.0j Graphics/color driver for dvipdfmx -)) -\Gin@req@height=\dimen157 -\Gin@req@width=\dimen158 -) -(/usr/share/texlive/texmf-dist/tex/latex/url/url.sty -\Urlmuskip=\muskip16 -Package: url 2013/09/16 ver 3.4 Verb mode for urls, etc. -) -(/usr/share/texlive/texmf-dist/tex/latex/ascmac/ascmac.sty -Package: ascmac 2020/01/15 v2.1 ascmac wrapper (community edition) - -(/usr/share/texlive/texmf-dist/tex/latex/ascmac/tascmac.sty -Package: tascmac 2020/01/15 v2.1 ascmac package (community edition) -\@savetbaselineshift=\dimen159 -\@saveybaselineshift=\dimen160 -\scb@x=\box67 -\scscb@x=\box68 -\@bw=\dimen161 -\@nbox=\box69 -\@nbody=\box70 -\@scw=\dimen162 -\ascmac@hoboxa=\box71 -\ascmac@hoboxb=\box72 -\@itemh=\dimen163 -\@iboxpos=\toks18 -\@iboxstr=\box73 -\@bwsp=\box74 -\@@bwsp=\box75 -\@bcal=\count194 -\shaderule=\dimen164 -)) -(/usr/share/texlive/texmf-dist/tex/latex/l3backend/l3backend-dvips.def -File: l3backend-dvips.def 2022-01-12 L3 backend support: dvips -\l__pdf_internal_box=\box76 -\g__pdf_backend_object_int=\count195 -\l__pdf_backend_content_box=\box77 -\l__pdf_backend_model_box=\box78 -\g__pdf_backend_annotation_int=\count196 -\g__pdf_backend_link_int=\count197 -\g__pdf_backend_link_sf_int=\count198 -) -(./c121092-2023-R.aux) -\openout1 = `c121092-2023-R.aux'. - -LaTeX Font Info: Checking defaults for OML/cmm/m/it on input line 17. -LaTeX Font Info: ... okay on input line 17. -LaTeX Font Info: Checking defaults for OMS/cmsy/m/n on input line 17. -LaTeX Font Info: ... okay on input line 17. -LaTeX Font Info: Checking defaults for OT1/cmr/m/n on input line 17. -LaTeX Font Info: ... okay on input line 17. -LaTeX Font Info: Checking defaults for T1/cmr/m/n on input line 17. -LaTeX Font Info: ... okay on input line 17. -LaTeX Font Info: Checking defaults for TS1/cmr/m/n on input line 17. -LaTeX Font Info: ... okay on input line 17. -LaTeX Font Info: Checking defaults for OMX/cmex/m/n on input line 17. -LaTeX Font Info: ... okay on input line 17. -LaTeX Font Info: Checking defaults for U/cmr/m/n on input line 17. -LaTeX Font Info: ... okay on input line 17. -LaTeX Font Info: Checking defaults for JY1/mc/m/n on input line 17. -LaTeX Font Info: ... okay on input line 17. -LaTeX Font Info: Checking defaults for JT1/mc/m/n on input line 17. -LaTeX Font Info: ... okay on input line 17. -LaTeX Font Info: External font `cmex10' loaded for size -(Font) <12> on input line 30. -LaTeX Font Info: External font `cmex10' loaded for size -(Font) <8> on input line 30. -LaTeX Font Info: External font `cmex10' loaded for size -(Font) <6> on input line 30. -LaTeX Font Info: Font shape `JT1/mc/bx/n' in size <10> not available -(Font) Font shape `JT1/gt/m/n' tried instead on input line 30. -LaTeX Font Info: Font shape `JY1/mc/bx/n' in size <10> not available -(Font) Font shape `JY1/gt/m/n' tried instead on input line 30. -LaTeX Font Info: Font shape `JT1/mc/bx/n' in size <14.4> not available -(Font) Font shape `JT1/gt/m/n' tried instead on input line 34. -LaTeX Font Info: Font shape `JY1/mc/bx/n' in size <14.4> not available -(Font) Font shape `JY1/gt/m/n' tried instead on input line 34. -LaTeX Font Info: Font shape `JT1/mc/bx/n' in size <12> not available -(Font) Font shape `JT1/gt/m/n' tried instead on input line 45. -LaTeX Font Info: Font shape `JY1/mc/bx/n' in size <12> not available -(Font) Font shape `JY1/gt/m/n' tried instead on input line 45. - [1 - - -] -File: threeJsSystem.pdf Graphic file (type pdf) - - - -LaTeX Warning: `!h' float specifier changed to `!ht'. - - -Overfull \hbox (3.1395pt too wide) in paragraph at lines 130--130 -[] \OT1/cmtt/m/n/7 positionalAudio = new THREE.PositionalAudio(listener);[] - [] - -LaTeX Font Info: External font `cmex10' loaded for size -(Font) <7> on input line 131. -LaTeX Font Info: External font `cmex10' loaded for size -(Font) <5> on input line 131. -[2] -Overfull \hbox (3.7585pt too wide) in paragraph at lines 176--176 -[]\OT1/cmr/bx/n/10 CSV \JY1/gt/m/n/10 読み込みによる \OT1/cmr/bx/n/10 3D \JY1/g -t/m/n/10 オブジ ェ クトの \OT1/cmr/bx/n/10 Web - [] - -File: fetch.pdf Graphic file (type pdf) - - -Overfull \hbox (7.77586pt too wide) in paragraph at lines 235--236 -[]\OT1/cmr/m/n/10 3D \JY1/mc/m/n/10 モデルは \OT1/cmr/m/n/10 Blender \JY1/mc/m/ -n/10 を用いて作成し , \OT1/cmr/m/n/10 glTF(Graphics - [] - -File: cube0.pdf Graphic file (type pdf) - -File: cube1.pdf Graphic file (type pdf) - - -LaTeX Warning: `h' float specifier changed to `ht'. - -[3] -Underfull \hbox (badness 10000) in paragraph at lines 280--281 -[]\JY1/mc/m/n/10 三菱総合研究所\OT1/cmr/m/n/10 . \JY1/mc/m/n/10 “ \OT1/cmr/m/n -/10 CX2030 \JY1/mc/m/n/10 : バ ーチ ャ ル - [] - - -Underfull \hbox (badness 10000) in paragraph at lines 280--281 -\JY1/mc/m/n/10 テクノロジ ー活用の場としての広義の - [] - - -Underfull \hbox (badness 10000) in paragraph at lines 280--281 -\JY1/mc/m/n/10 メタバ ース ” \OT1/cmr/m/n/10 . $\OT1/cmtt/m/n/10 https : / / w -ww . mri . co . jp / - [] - - -Underfull \hbox (badness 10000) in paragraph at lines 280--281 -\OT1/cmtt/m/n/10 knowledge / column / dia6ou000004u77a-[]att / - [] - - -Underfull \hbox (badness 10000) in paragraph at lines 281--282 -\OT1/cmr/m/n/10 MAR-KET \JY1/mc/m/n/10 ” \OT1/cmr/m/n/10 . $\OT1/cmtt/m/n/10 h -ttps : / / www . biprogy . com / - [] - - -Underfull \hbox (badness 5756) in paragraph at lines 281--282 -\OT1/cmtt/m/n/10 solution / service / myhomemarket . html$\OT1/cmr/m/n/10 . (\J -Y1/mc/m/n/10 参 - [] - - -Underfull \hbox (badness 4429) in paragraph at lines 284--285 -\OT1/cmtt/m/n/10 www . sovec . net / sonomama / tenjikai/$\OT1/cmr/m/n/10 . (\J -Y1/mc/m/n/10 参照 - [] - -[4] (./c121092-2023-R.aux) ) -Here is how much of TeX's memory you used: - 1189 strings out of 478741 - 19536 string characters out of 5860983 - 338443 words of memory out of 5000000 - 19635 multiletter control sequences out of 15000+600000 - 480089 words of font info for 71 fonts, out of 8000000 for 9000 - 929 hyphenation exceptions out of 8191 - 55i,8n,62p,744b,328s stack positions out of 5000i,500n,10000p,200000b,80000s - -Output written on c121092-2023-R.dvi (4 pages, 22928 bytes). diff --git a/resume/c121092-2023-R.pdf b/resume/c121092-2023-R.pdf deleted file mode 100644 index 92c709d..0000000 --- a/resume/c121092-2023-R.pdf +++ /dev/null Binary files differ diff --git a/resume/c121092-2023-R.tex b/resume/c121092-2023-R.tex deleted file mode 100644 index cd48000..0000000 --- a/resume/c121092-2023-R.tex +++ /dev/null @@ -1,289 +0,0 @@ -\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} \ No newline at end of file diff --git a/resume/cube0.pdf b/resume/cube0.pdf deleted file mode 100644 index f9f7562..0000000 --- a/resume/cube0.pdf +++ /dev/null Binary files differ diff --git a/resume/cube0.png b/resume/cube0.png deleted file mode 100644 index 9423279..0000000 --- a/resume/cube0.png +++ /dev/null Binary files differ diff --git a/resume/cube1.pdf b/resume/cube1.pdf deleted file mode 100644 index 9dfe9c4..0000000 --- a/resume/cube1.pdf +++ /dev/null Binary files differ diff --git a/resume/cube1.png b/resume/cube1.png deleted file mode 100644 index d7950f4..0000000 --- a/resume/cube1.png +++ /dev/null Binary files differ diff --git a/resume/fetch.pdf b/resume/fetch.pdf deleted file mode 100644 index 2b92039..0000000 --- a/resume/fetch.pdf +++ /dev/null Binary files differ diff --git a/resume/fetch.png b/resume/fetch.png deleted file mode 100644 index a12d198..0000000 --- a/resume/fetch.png +++ /dev/null Binary files differ diff --git a/resume/figure/cube0.pdf b/resume/figure/cube0.pdf new file mode 100644 index 0000000..f9f7562 --- /dev/null +++ b/resume/figure/cube0.pdf Binary files differ diff --git a/resume/figure/cube0.png b/resume/figure/cube0.png new file mode 100644 index 0000000..9423279 --- /dev/null +++ b/resume/figure/cube0.png Binary files differ diff --git a/resume/figure/cube1.pdf b/resume/figure/cube1.pdf new file mode 100644 index 0000000..9dfe9c4 --- /dev/null +++ b/resume/figure/cube1.pdf Binary files differ diff --git a/resume/figure/cube1.png b/resume/figure/cube1.png new file mode 100644 index 0000000..d7950f4 --- /dev/null +++ b/resume/figure/cube1.png Binary files differ diff --git a/resume/figure/fetch.pdf b/resume/figure/fetch.pdf new file mode 100644 index 0000000..2b92039 --- /dev/null +++ b/resume/figure/fetch.pdf Binary files differ diff --git a/resume/figure/fetch.png b/resume/figure/fetch.png new file mode 100644 index 0000000..a12d198 --- /dev/null +++ b/resume/figure/fetch.png Binary files differ diff --git a/resume/figure/threeJsSystem.odg b/resume/figure/threeJsSystem.odg new file mode 100644 index 0000000..ecb25d8 --- /dev/null +++ b/resume/figure/threeJsSystem.odg Binary files differ diff --git a/resume/figure/threeJsSystem.pdf b/resume/figure/threeJsSystem.pdf new file mode 100644 index 0000000..ecfc1d5 --- /dev/null +++ b/resume/figure/threeJsSystem.pdf Binary files differ diff --git a/resume/figure/threeJsSystem.png b/resume/figure/threeJsSystem.png new file mode 100644 index 0000000..917b9b7 --- /dev/null +++ b/resume/figure/threeJsSystem.png Binary files differ diff --git a/resume/threeJsSystem.odg b/resume/threeJsSystem.odg deleted file mode 100644 index ecb25d8..0000000 --- a/resume/threeJsSystem.odg +++ /dev/null Binary files differ diff --git a/resume/threeJsSystem.pdf b/resume/threeJsSystem.pdf deleted file mode 100644 index ecfc1d5..0000000 --- a/resume/threeJsSystem.pdf +++ /dev/null Binary files differ diff --git a/resume/threeJsSystem.png b/resume/threeJsSystem.png deleted file mode 100644 index 917b9b7..0000000 --- a/resume/threeJsSystem.png +++ /dev/null Binary files differ