バーチャルキャンパスを活用したWebVRコンテンツ開発

Transcript

1. バーチャルキャンパスを活用した WebVRコンテンツ開発 荒川 奏良（Sora Arakawa） 静岡大学xR同好会はまりあ 静岡大学 情報学部 行動情報学科 1年

2. xR同好会はまりあ • Unity / Blender勉強会 • Clusterで新歓イベント • VRChatやNeosVRの生配信

3. None
4. None

5. 静岡大学 バーチャル情報学部 • 静岡大学浜松キャンパスを3DCGで体験できるオンラインコンテンツ • JavaScript（Three.js）で開発 • ウェブアプリだから専用アプリのダウンロードやインストールが不要

6. 静岡大学 バーチャル情報学部 • 3つのモードを搭載 見下ろしモード キャンパスを上空から一望できるモード 建物にカーソルを重ねると建物名を表示 建物をクリックすると説明や写真を表示

7. None

8. 静岡大学 バーチャル情報学部 • 3つのモードを搭載 VRモード キャンパス内を一人称視点で 自由に移動できるモード キーボードかバーチャルパッドで動作

9. 静岡大学 バーチャル情報学部 • 3つのモードを搭載 VRモード（HMD） Oculus QuestなどのVR機器に対応 実 質 静

   大

10. 開発体制 • 完全オンライン 主にGitHubとSlackを使用 • 開発期間 約2ヶ月 （参考） 静岡大学は6月上旬まで完全在宅授業 その後、一部対面授業再開

    7月頃からサークル活動が対面で実施可能に

11. プログラム 3人体制で開発 メインプログラム WebVR、3Dプログラム、処理最適化 WebVR

12. プログラム • 3D描画部分 → Three.js • 見下ろしモードのマウス操作 → OrbitControls •

    UI処理用にjQueryも使用 OrbitControlsは、Three.jsのプラグインの一つ 若干の初期化コードとメインループ内の1行だけで マウス操作（回転、上下左右移動、拡大縮小）を実装可

13. ＨＭＤ対応 • Three.jsのWebVRプラグイン → Questに対応 • WebXR-Ｐｏｌｙｆｉｌｌ を導入 → 各種PC用HMDに対応

    Questでは、localhost時ならhttps無しでWebXRを実行できる機能が あるので、それを用いてデバッグ等を行った。

14. VR内操作 • Three.jsでは、コントローラのボタンの押下とモーションは取得できた が、スティック、ゲームパッドの状態を取得できなかったため、自前で GamepadAPIを叩くことに… • Three.js はサンプルが豊富で、その中から移動に適した部分を取り 出し、トラックパッド・ゲームパッドで動かせるように改造。 •

    開発時トラックパッドとサムスティックの違いで時間を結構とられた。 注意！ • スマホでは、バーチャルパッドを自前で用意した。

15. 3Dモデル制作 • 5人体制で制作 ① キャンパス全体のオブジェクトをOpenStreetMapから自動生成 （blender-osm） ② 各建物に名前やテクスチャを付ける ③ 各メンバーが建物の3Dデータを作成し、Slackに投稿

    ④ それを集約し、gITFで出力 → GitHubにコミット
16. None

17. 3Dモデル制作 • OpenStreetMap

18. None
19. None
20. None

21. 3Dモデル制作 • 比較

22. 3Dモデル制作 • 比較

23. 3Dモデル制作 • 合計 118,300ポリゴン └ 木 約45,000ポリゴン （1本あたり 200～300） └

    建物 約65,000ポリゴン （1件あたり 2000～8000） データ容量 約30MB

24. 3Dモデル制作 • 開発段階ではもう少しリアルな木 だったが、ノートPCやモバイル端末 であまりに重いので妥協

25. 負荷の軽減 • ポリゴン数を減らす • テクスチャを荒くする（昔の3Dゲームでよく使われた） • 60fps → 30fps動作（メインループ 2回に1回は描画処理しない）

    • アンチエイリアスを切る • アンチエイリアスからFXAAシェーダーに変更（こちらの方が軽い）

26. ＵＩデザイン

27. ＵＩデザイン • 背景色 静大スクールカラー （DIC 143） • フォント 「ニューロダン」「平成ゴシック体」「平成明朝体」 読みやすさ重視の選定

28. None

29. 3D部分 ： Three.jsで描画 2D部分 ： div要素を重ねて描画

30. jQueryでウインドウのdiv要素を表示 コンテンツは別ファイル（HTML形式）をAjaxで読み込み ※ウインドウ表示中は3Dモデルのマウス操作は停止 カバー用の黒いdiv要素を重ねて暗くする

31. オープンソース化 • MIT License （改変・再配布・商用利用OK 著作権表示が条件） • 他大学、他団体によるバーチャルオープンキャンパスの開発基盤とし て使用可能 ※学章等のデータの利用については「静岡大学学章等に関する規則」

    をご参照ください ※キャンパスデータに一部含まれるOpenStreetMapのデータはCC BY-SA 2.0となります
32. None

33. 今後について • 他大学、他団体によるバーチャルオープンキャンパスの開発基盤 • キャンパスの3Dモデルを転用したコンテンツの作成

34. None

35. ご意見ご感想お待ちしております！ Twitter ： @xR_Hamamatsu https://xr-hamaria.github.io/virtual-inf/ 見下ろしモードでキャンパス内のとある場所をクリックすると…？