Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Three.jsで大学をVR化した
Search
Hamaria
August 24, 2020
Technology
0
1.7k
Three.jsで大学をVR化した
WebXR Tech Tokyo #2
https://vrtokyo.connpass.com/event/181759/
Hamaria
August 24, 2020
Tweet
Share
Other Decks in Technology
See All in Technology
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
1
190
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
2
250
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
2
16k
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
ar_tama
7
1.1k
Zephyr RTOSを使った開発コンペに参加した件
iotengineer22
1
220
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
960
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
270
OPENLOGI Company Profile
hr01
0
67k
SmartNewsにおける 1000+ノード規模 K8s基盤 でのコスト最適化 – Spot・Gravitonの大規模導入への挑戦
vsanna2
0
130
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
460
さくらのIaaS基盤のモニタリングとOpenTelemetry/OSC Hokkaido 2025
fujiwara3
3
440
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
160
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
329
21k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
KATA
mclloyd
30
14k
What's in a price? How to price your products and services
michaelherold
246
12k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Thoughts on Productivity
jonyablonski
69
4.7k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
How to train your dragon (web standard)
notwaldorf
95
6.1k
Done Done
chrislema
184
16k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Transcript
Three.jsで大学をVR化した 静大xR同好会はまりあ(@xR_Hamamatsu)
これまでの活動 Unity勉強会 Blender勉強会
これまでの活動 Clusterでの新歓イベント
これまでの活動 VRChatやNeosVRの風景を生配信
今回発表するもの https://xr-hamaria.github.io/virtual-inf/
プロモーションビデオ PVショート版を流します 完全版は「静岡大学 バーチャル情報学部」トップページで公開中です 是非ご覧下さい!
見下ろしモード キャンパスを上空から一望できる • 建物にマウスカーソルを重ねると施設名が表示される • 建物をクリックすると画像と解説が表示される
VRモード キャンパス内を一人称視点で自由に移動できる (VRの定義はとりあえず問わない) PCはキーボード、スマホ等はバーチャルパッドで移動可能
VRモード(HMD) HMD内で自由に移動できる
スタッフ 基幹システム、UIデザイン、動画等コンテンツ HMD対応、モバイルUI、描画処理軽量化 3Dモデル統括、事務処理 モデリング デバッグ等
試作品の作成 まず、Three.jsとOrbitControls(マウスでカメラ操作できるライブラリ)でプロトタイプを作成。 最初のモデルは板にGoogle Earthのテクスチャを貼っただけの簡易的なもの。
試作品 Rev.4 GitHubにおける最古のバージョン 機能はモデルの拡大縮小・回転・移動のみ
更新履歴 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 説明文表示用のウインドウを追加
更新履歴 7月28日 Prototype/Rev.15 バーチャルパッドを追加 8月 1日 Prototype/Rev.17 操作説明を追加 8月 2日
Ver.1.0 正式公開版に移行(8/4一般公開) 8月22日 Ver.1.0.4 現時点での最新バージョン モデルデータは適宜更新 開発開始~本公開まで約2か月
サーバー情報 GitHub Pagesを使用。 ・ データ容量無制限 ・ 約40MBのデータを数秒で転送できる通信速度 ・ 大学のシステムを通さないため迅速に更新可能 ・
メンバーなら誰でもmasterブランチにコミットするだけで更新できる ・ Organizationを使用しているため、メンバーの代替わりに対応
デザイン ・ 背景色は静大のスクールカラー(DIC 143) ・ フォントは「平成明朝体」「平成ゴシック体」「ニューロダン」を主に使用
ユーザーインターフェース 3D部分:Three.jsで描画 2D部分:div要素を重ねて描画
ユーザーインターフェース jQueryでウインドウのdiv要素を表示 コンテンツは別ファイル(HTML形式)をAjaxで読み込み ※ウインドウ表示中は3Dモデルのマウス操作は停止 カバー用の黒いdiv要素を重ねて暗くする
モデル製作の流れ アドオン「Blender-osm」でOpenStreetMapのデータを取得
モデル製作の流れ 建築物毎にBlendファイル出力 モデリング担当の各個人がコミットできると個人毎に草が生やせるが、導入コストなども 良い方法ないかな? モデル統括担当に集約 モデル統括担当がマテリアル数削減など微調整 campus.glbを出力してgit push
比較
モデルの負荷 約 45,000ポリゴン(1本あたり200~300程度) 約 65,000ポリゴン(1件あたり2000~8000程度) 約30MB 合計 118,300 ポリゴン 木
建物 容量 モバイル対応を考えるとやや贅沢 もう少し削減できそう
HMD対応 • Three.jsのWebXRに対応するプラグインを利用 →Questで動くようになった。 • WebXR-Polyfill を導入 →各種PC接続型HMDに対応! Questでは、localhost時なら、httpsなしでWebXRを実行できる機能があるので、 それを用いてデバッグ等を行った。
VR内操作 • Three.jsでは、コントローラのボタンの押下とモーションは取得できたが、 スティック, ゲームパッドの状態を取得できたなかったため、 自前でGamepadAPIを叩くことに…… Three.js はサンプルが豊富で、その中から移動に適した部分を取り出し、 トラックパッド・ゲームパッドで動かせるように改造。 開発時トラックパッドとサムスティックの違いで時間を結構とられた。注意!
• スマホでは、バーチャルパッドを自前で用意した。
オープンソース化 ※学章等のデータの利用については「静岡大学学章等に関する規則」をご参照ください ※キャンパスデータに一部含まれるOpenStreetMapのデータはCC BY-SA 2.0となります ソースコードはMIT License 他大学でも3Dモデルとトップページを変更すればすぐ実装可能 キャンパスの3Dモデルデータの再配布も可能(※)
ご意見ご感想お待ちしております! Twitter @xR_Hamamatsu 見下ろしモードでキャンパス内のとある場所をクリックすると…? https://xr-hamaria.github.io/virtual-inf/ https://github.com/xr-hamaria/virtual-inf