Three.jsで大学をVR化した

WebXR Tech Tokyo #2
https://vrtokyo.connpass.com/event/181759/

Transcript

1. Three.jsで大学をVR化した 静大xR同好会はまりあ（@xR_Hamamatsu）
2. これまでの活動 Unity勉強会 Blender勉強会
3. これまでの活動 Clusterでの新歓イベント
4. これまでの活動 VRChatやNeosVRの風景を生配信
5. 今回発表するもの https://xr-hamaria.github.io/virtual-inf/
6. プロモーションビデオ PVショート版を流します 完全版は「静岡大学 バーチャル情報学部」トップページで公開中です 是非ご覧下さい！
7. 見下ろしモード キャンパスを上空から一望できる • 建物にマウスカーソルを重ねると施設名が表示される • 建物をクリックすると画像と解説が表示される
8. VRモード キャンパス内を一人称視点で自由に移動できる （VRの定義はとりあえず問わない） PCはキーボード、スマホ等はバーチャルパッドで移動可能
9. VRモード（HMD） HMD内で自由に移動できる
10. スタッフ 基幹システム、UIデザイン、動画等コンテンツ HMD対応、モバイルUI、描画処理軽量化 3Dモデル統括、事務処理 モデリング デバッグ等
11. 試作品の作成 まず、Three.jsとOrbitControls（マウスでカメラ操作できるライブラリ）でプロトタイプを作成。 最初のモデルは板にGoogle Earthのテクスチャを貼っただけの簡易的なもの。
12. 試作品 Rev.4 GitHubにおける最古のバージョン 機能はモデルの拡大縮小・回転・移動のみ
13. 更新履歴 6月10日 Prototype/Rev.1 最初のバージョン 6月11日 Prototype/Rev.2 地図データを使用したモデルに差し替え 6月26日 Prototype/Rev.5 トップページとツールチップを実装 7月 1日 Prototype/Rev.6 モバイル端末用CSSを追加 7月 2日 Prototype/Rev.7 VRモード実装開始 7月 7日 Prototype/Rev.9 VRButtonを追加 7月12日 Prototype/Rev.12 説明文表示用のウインドウを追加
14. 更新履歴 7月28日 Prototype/Rev.15 バーチャルパッドを追加 8月 1日 Prototype/Rev.17 操作説明を追加 8月 2日 Ver.1.0 正式公開版に移行（8/4一般公開） 8月22日 Ver.1.0.4 現時点での最新バージョン モデルデータは適宜更新 開発開始～本公開まで約2か月
15. サーバー情報 GitHub Pagesを使用。 ・ データ容量無制限 ・ 約40MBのデータを数秒で転送できる通信速度 ・ 大学のシステムを通さないため迅速に更新可能 ・ メンバーなら誰でもmasterブランチにコミットするだけで更新できる ・ Organizationを使用しているため、メンバーの代替わりに対応
16. デザイン ・ 背景色は静大のスクールカラー（DIC 143） ・ フォントは「平成明朝体」「平成ゴシック体」「ニューロダン」を主に使用
17. ユーザーインターフェース 3D部分：Three.jsで描画 2D部分：div要素を重ねて描画
18. ユーザーインターフェース jQueryでウインドウのdiv要素を表示 コンテンツは別ファイル（HTML形式）をAjaxで読み込み ※ウインドウ表示中は3Dモデルのマウス操作は停止 カバー用の黒いdiv要素を重ねて暗くする
19. モデル製作の流れ アドオン「Blender-osm」でOpenStreetMapのデータを取得
20. モデル製作の流れ 建築物毎にBlendファイル出力 モデリング担当の各個人がコミットできると個人毎に草が生やせるが、導入コストなども 良い方法ないかな？ モデル統括担当に集約 モデル統括担当がマテリアル数削減など微調整 campus.glbを出力してgit push
21. 比較
22. モデルの負荷 約 45,000ポリゴン（1本あたり200～300程度） 約 65,000ポリゴン（1件あたり2000～8000程度） 約30MB 合計 118,300 ポリゴン 木 建物 容量 モバイル対応を考えるとやや贅沢 もう少し削減できそう
23. HMD対応 • Three.jsのWebXRに対応するプラグインを利用 →Questで動くようになった。 • WebXR-Polyfill を導入 →各種PC接続型HMDに対応！ Questでは、localhost時なら、httpsなしでWebXRを実行できる機能があるので、 それを用いてデバッグ等を行った。
24. VR内操作 • Three.jsでは、コントローラのボタンの押下とモーションは取得できたが、 スティック, ゲームパッドの状態を取得できたなかったため、 自前でGamepadAPIを叩くことに…… Three.js はサンプルが豊富で、その中から移動に適した部分を取り出し、 トラックパッド・ゲームパッドで動かせるように改造。 開発時トラックパッドとサムスティックの違いで時間を結構とられた。注意！ • スマホでは、バーチャルパッドを自前で用意した。
25. オープンソース化 ※学章等のデータの利用については「静岡大学学章等に関する規則」をご参照ください ※キャンパスデータに一部含まれるOpenStreetMapのデータはCC BY-SA 2.0となります ソースコードはMIT License 他大学でも3Dモデルとトップページを変更すればすぐ実装可能 キャンパスの3Dモデルデータの再配布も可能（※）
26. ご意見ご感想お待ちしております！ Twitter @xR_Hamamatsu 見下ろしモードでキャンパス内のとある場所をクリックすると…？ https://xr-hamaria.github.io/virtual-inf/ https://github.com/xr-hamaria/virtual-inf