仮想空間での発表資料展示会の提案

{広瀬研究室 \atop C1210924 斎藤翼} 2023 年 12 月 1 日

目次

第 1 章はじめに 5

第 2 章メタバースをめぐる背景 7 2.1 社会的問題 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 2.2 先行研究の例 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 2.3 身近な例では…… . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

第 3 章システムの設計 9 3.1 関連研究における課題とシステムの提案 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 3.2 システムの概要 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

第 4 章発表会場の適用実験 15 4.1 評価の方法 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 4.2 今後の展望 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

第 5 章結論 17

参考文献 19

第 1 章

はじめに

社会的背景からテーマに至るまでを書く。

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

第 2 章

メタバースをめぐる背景

章の始めにリード文としてこの章で何をどういう順番で述べるかを入れる。 2 章では先行研究をとりあげ、身近な問題ではどうするかまで述べる。

2.1 社会的問題

COVID-19 の流行によって在宅勤務や教育現場の休校などが増加し，それに伴って Vertual Reality(VR) を利用する人が増えた。 2020 年 4 月に行われた野村総合研究所のアンケートでは， COVID-19 感染拡大前に比べ VR コンテンツの消費が全体の 3.6 パーセント増えたと示された。 [1]。

三菱総合研究所では， 2025 年には 4 兆円程度， 2030 年には約 24 兆円規模の国内市場を期待している。また，グローバル市場では， 2030 年において数 10 億人規模がメタバースのユーザになると仮定しており，この場合，市場規模は 8〜13 兆ドルとしている [2]。

BIPROGY の「MY HOME MARKET」では，スマートフォンでバーチャル住宅展示場を見学してセミオーダー型規格住宅を購入する仕組みがある [3]。 360 度視点を変更することが可能で，多くの住宅の内装・外見をバーチャルで内見することができる [4]。

これらのことから， VR のようにバーチャル空間での疑似体験することへの関心が高まってきている。そこで発表資料がまとめられた展示会を作成することを提案する。

2.2 先行研究の例

2.2.1 メタバースを活用した多様な学習環境の構築と実践

澤崎敏文は、メタバースを企画発表の場としての活用、ゼミ・卒業研究での活用・課題活動での活用の三つの事例を通して、実験を行った。それぞれの活用の終了後にアンケート調査・インタビュー調査を行った結果、概ね好意的な回答が多く、メタバース活用の可能性を感じたということだ。授業活用例では、利用当初、学生は何をしていいか分からず戸惑うという声もある一方で，自由に歩き回れる，人との仮想的な距離を取れるといった制約のなさにも次第に慣れ，グループ活動での活発な議論につながったと考えている．また，アンケート中「顔出ししなくていい」という主旨の回答も多数あり，学生にとっては，アバターをとおして仮想空間の中で議論する方が， Zoom 等と比較して抵抗が少ないのではないかと考えた．メタバース内では，仮想的な距離や方向によって音声の聞こえ方なども変化し，自由に空間を行き来してコミュニケーションを取ることができるという点を考慮すると，ポスター発表のような場面での活用にも親和性が高いと考える [5]。 \underline{8 第 2 章メタバースをめぐる背景}

2.3 身近な例では……

2.3.1 そのまま展示会

SoVeC が提供する「そのまま展示会」は，高機能なリード管理画面を実装したソニークオリティのバーチャル展示会を，誰でも簡単にウェブブラウザで閲覧できるプラットフォームサービスだ。

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

第 3 章

システムの設計

3.1 関連研究における課題とシステムの提案

先行研究の中では，パーソナルコンピュータのスペックが足りず，利用したシステムが一定のスペックを持つ端末でなければうまく動作しなかった。発表も行っているということでよりリソースを多く使うことになった。この研究を踏まえて，本システムではより多くの端末で操作できるように軽量なシステムの設計する。また発表するのではなく発表資料を見ることに重点を置いたシステムを提案する。

3.2 システムの概要

3.2.1 開発環境

• 開発言語 – HTML

– CSS

– JavaScript

∗ Three.js - 0.126.1 • ソフトウェア

– Blender - 3.0.1

• ブラウザ – Mozilla Firefox - 119.0.1

3.2.2 Three.js

Three.js と Cannon.js は JavaScript ライブラリである。これらで発表会場を作成する。 Three.js の仕組みとして，シーンにカメラ・ライト・ 3D モデルを追加する。そのシーンをレンダラー通してディスプレイに出力する（図.3.1）。

ビデオの表示と再生・停止ビデオを再生するには，ビデオを再生する部分と音を出す部分を設計する必要がある。ビデオを再生する部分だけ設計し，音を再生してしまうと Firefox のポリシーに引っかかってしまい，うま \underline{10 第 3 章システムの設計}

図 3.1 Three.js のシステム概念図

く動作しなくなる。そのため，ビデオからの音声は無音にし，ビデオ再生と音の再生を別々に設計する。ビデ

オの無音は，下記「Video」項目のコードの 6 行目で実装している。

Video

[figure]

//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);

[figure]

ClickStartStop 関数

[figure]

// 再生・停止の切り替え

let flag = false;
function clickStartStop() {
  if (flag == false) {
    video.pause();
    positionalAudio.pause();
    flag = true;
  } else {
    video.play();
    positionalAudio.play();
    flag = false;
  }
}

[figure]

\underline{3.2 システムの概要 11}

OnClick 関数

[figure]

// クリックしたオブジェクトの検知

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();
  }
}
}

[figure]

本システムでは，ビデオが再生されている「video1」という名前のオブジェクトをクリックすることで再生・

停止の切り替えができるように設計している。上記コードの「clickStartStop」関数と「OnClick」関数で実装

している。

CSV 読み込みによる 3D オブジェクトの Web への反映

「GLFTLoader」クラスインスタンスで 3D オブジェクトの Web への反映はできるが，その都度無駄にコー

ドを書かなくてはならなくなってしまい冗長である。そのため， CSV から値を読み込む手法を取る。 CSV 読

み込みは， Fetch API を用いて行う。

Fetch

[figure]

// 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);
});
}

[figure]

\underline{12 第 3 章システムの設計}

表 3.1 Object.csv

dataPath  loc.X loc.Y loc.Z
model/cube.glb 15  0  0
model/ball.glb  25  0  0

図 3.2 出力

3.2.3 Blender での 3D モデル作成

3D モデルは Blender を用いて作成し， glTF(Graphics Language Transmission Format) でエクスポートしたものを使用する。 glTF の利点として，

1. web ブラウザ，モバイルデバイスなどのプラットフォームで 3D シーンとモデルを効率的に実行して送信及びロードができる。

2. 3D アセットを解凍・処理するための実行時処理を最小限に抑え，高度な広帯域グラフィックス機能を実現する。

の 2 点が挙げられる [7]。これにより， web ブラウザ上での軽量かつ高度なグラフィックスが実現される。

3D モデルの光源

Three.js ではライトを設定することで，オブジェクトを照らしている。しかし，光の当たらないところは影になる (図.3.3)。本システムでは四角柱のオブジェクトを設置し，そのオブジェクトの四面から資料を見れるに設計する。そのため，四面が影にならないようにしなくてはならない。

図 3.3 影ありのオブジェクト

\underline{3.2 システムの概要 13}

どの方向から見ても影がないようにすればいいが Three,js でライトをいくつも設定するのは手間がかかる。そのため Blender でエクスポートする際に「Punctual Lights」をオンにしてエスクポートする。オンにすることで Blender で設定したライトをオブジェクトのデータに組み込まれるようになる (図.3.4)。

図 3.4 影なしのオブジェクト

第 4 章

発表会場の適用実験

4.1 評価の方法

本研究の評価として，利用者に本システムを利用してもらい，そのあとにアンケートでの定性調査を行う。オンラインから本システムにアクセスしてもらい，アンケートの項目に答えてもらう。アンケートの結果か

ら，使用している端末からストレスなく操作できたかを調査する。また仮想空間での資料発表展示会はブラウザで資料を見るのとどのように感じ方が違うのかを調査する。

4.2 今後の展望

現状としては，発表資料展示会のオブジェクトが未完成のままである。これからの予定として，以下のことを中心に展示会場の作成を進めていく。

発表資料展示会の作成と本システムを利用してもらいアンケートの実践をする。物理演算用の Javascript ライブラリの Cannon.js を実装して 3D モデルの通り抜けを防止する。

第 5 章

結論

結論は簡潔に。最後に参考文献を必ず正しく記載する。

参考文献

[1] 株式会社野村総合研究所. “ゲーム， VR，マンガ・本・書籍に対する人々の行動と意識の変化：アフターコロナのコンテンツ市場再成長の機会を逃してはいけない〜新型コロナウイルス感染拡大による消費者の行動変容が ICT メディア・サービス産業に及ぼすインパクトと対応策（3）コンテンツ〜” .

https://www.nri.com/jp/keyword/proposal/20200519/03. (参照日 2023-08-13).

[2] 三菱総合研究所. “CX2030 ：バーチャルテクノロジー活用の場としての広義のメタバース” . https:

//www.mri.co.jp/knowledge/column/dia6ou000004u77a-att/mtr_20221122.pdf. (参照日 2023-08-

13).

[3] BIPROGY. “バーチャル住宅展示場 MY HOME MARKET” . https://www.biprogy.com/solution/

service/myhomemarket.html. (参照日 2023-08-13).
[4] MY HOME MARKET.“バーチャル住宅展示場 VR タウン”. https://myhomemarket.jp/town/index.

html. (参照日 2023-08-13).

[5] 澤崎敏文．メタバースを活用した多様な学習環境の構築と実践．日本教育工学会研究報告書． 2023， vol.2023， no.2， p.83-87．

[6] SoVeC 株式会社. “【メタバース会場】そのまま展示会ならリードが効率よく取れます。” . https://www.

sovec.net/sonomama/tenjikai/. (参照日 2023-08-13).

[7] Khronos Group. “glTF Overview” . https://www.khronos.org/gltf/. (参照日 2023-08-13).