Three.jsで大学をVR化した

by Hamaria

Slide 1

Slide 1 text

Three.jsで大学をVR化した静大xR同好会はまりあ（@xR_Hamamatsu）

Slide 2

Slide 2 text

これまでの活動 Unity勉強会 Blender勉強会

Slide 3

Slide 3 text

これまでの活動 Clusterでの新歓イベント

Slide 4

Slide 4 text

これまでの活動 VRChatやNeosVRの風景を生配信

Slide 5

Slide 5 text

今回発表するもの https://xr-hamaria.github.io/virtual-inf/

Slide 6

Slide 6 text

プロモーションビデオ PVショート版を流します完全版は「静岡大学バーチャル情報学部」トップページで公開中です是非ご覧下さい！

Slide 7

Slide 7 text

見下ろしモードキャンパスを上空から一望できる ● 建物にマウスカーソルを重ねると施設名が表示される ● 建物をクリックすると画像と解説が表示される

Slide 8

Slide 8 text

VRモードキャンパス内を一人称視点で自由に移動できる（VRの定義はとりあえず問わない） PCはキーボード、スマホ等はバーチャルパッドで移動可能

Slide 9

Slide 9 text

VRモード（HMD） HMD内で自由に移動できる

Slide 10

Slide 10 text

スタッフ基幹システム、UIデザイン、動画等コンテンツ HMD対応、モバイルUI、描画処理軽量化 3Dモデル統括、事務処理モデリングデバッグ等

Slide 11

Slide 11 text

試作品の作成まず、Three.jsとOrbitControls（マウスでカメラ操作できるライブラリ）でプロトタイプを作成。最初のモデルは板にGoogle Earthのテクスチャを貼っただけの簡易的なもの。

Slide 12

Slide 12 text

試作品 Rev.4 GitHubにおける最古のバージョン機能はモデルの拡大縮小・回転・移動のみ

Slide 13

Slide 13 text

更新履歴 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 説明文表示用のウインドウを追加

Slide 14

Slide 14 text

更新履歴 7月28日 Prototype/Rev.15 バーチャルパッドを追加 8月 1日 Prototype/Rev.17 操作説明を追加 8月 2日 Ver.1.0 正式公開版に移行（8/4一般公開） 8月22日 Ver.1.0.4 現時点での最新バージョンモデルデータは適宜更新開発開始～本公開まで約2か月

Slide 15

Slide 15 text

サーバー情報 GitHub Pagesを使用。・データ容量無制限・約40MBのデータを数秒で転送できる通信速度・大学のシステムを通さないため迅速に更新可能・メンバーなら誰でもmasterブランチにコミットするだけで更新できる・ Organizationを使用しているため、メンバーの代替わりに対応

Slide 16

Slide 16 text

デザイン・背景色は静大のスクールカラー（DIC 143）・フォントは「平成明朝体」「平成ゴシック体」「ニューロダン」を主に使用

Slide 17

Slide 17 text

ユーザーインターフェース 3D部分：Three.jsで描画 2D部分：div要素を重ねて描画

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

モデル製作の流れアドオン「Blender-osm」でOpenStreetMapのデータを取得

Slide 20

Slide 20 text

モデル製作の流れ建築物毎にBlendファイル出力モデリング担当の各個人がコミットできると個人毎に草が生やせるが、導入コストなども良い方法ないかな？モデル統括担当に集約モデル統括担当がマテリアル数削減など微調整 campus.glbを出力してgit push

Slide 21

Slide 21 text

比較

Slide 22

Slide 22 text

モデルの負荷約 45,000ポリゴン（1本あたり200～300程度）約 65,000ポリゴン（1件あたり2000～8000程度）約30MB 合計 118,300 ポリゴン木建物容量モバイル対応を考えるとやや贅沢もう少し削減できそう

Slide 23

Slide 23 text

HMD対応 ● Three.jsのWebXRに対応するプラグインを利用 →Questで動くようになった。 ● WebXR-Polyfill を導入 →各種PC接続型HMDに対応！ Questでは、localhost時なら、httpsなしでWebXRを実行できる機能があるので、それを用いてデバッグ等を行った。

Slide 24

Slide 24 text

VR内操作 ● Three.jsでは、コントローラのボタンの押下とモーションは取得できたが、スティック, ゲームパッドの状態を取得できたなかったため、自前でGamepadAPIを叩くことに…… Three.js はサンプルが豊富で、その中から移動に適した部分を取り出し、トラックパッド・ゲームパッドで動かせるように改造。開発時トラックパッドとサムスティックの違いで時間を結構とられた。注意！ ● スマホでは、バーチャルパッドを自前で用意した。

Slide 25

Slide 25 text

オープンソース化 ※学章等のデータの利用については「静岡大学学章等に関する規則」をご参照ください ※キャンパスデータに一部含まれるOpenStreetMapのデータはCC BY-SA 2.0となりますソースコードはMIT License 他大学でも3Dモデルとトップページを変更すればすぐ実装可能キャンパスの3Dモデルデータの再配布も可能（※）

Slide 26

Slide 26 text

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