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.6k
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
Azure Cosmos DB での時系列ログの運用と改善
sansantech
PRO
0
160
時系列データ向け基盤モデル「Chronos (by Amazon.com)」で行う未来予測
soracom
PRO
0
260
ツンデレなGuardDutyをプロデュースして世界一のアイドルにする話
cmusudakeisuke
0
370
[iOSDC 2024]クロスプラットフォーム普及増加。SwiftでiOS開発はもうやらないのか....?
teamlab
PRO
0
130
開発者体験を意識した開発チームの生産性向上の取り組み
ham0215
2
490
チームが自己組織化してから敢えて専任スクラムマスターを置いてみたらめちゃめちゃワークした話 / How bringing in a Scrum Master to an already self-organized team totally worked out
hc0208
2
1.4k
日経電子版から始まった内製開発の現在地と向き合っている課題/inhouse
nishiuma
0
210
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
1
150
Azure SQL Database Hyperscale HA レプリカの監視
sansantech
PRO
0
160
ことばをそろえる / Bridging the Terminology Gap
amaotone
5
940
標準ライブラリの奥深アップデートを掘り下げよう!
logica0419
2
120
JAWSPANKRATION2024-ECS Best Practice All on board(english)
tkikuchi
0
410
Featured
See All Featured
Faster Mobile Websites
deanohume
304
30k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
38
9.1k
YesSQL, Process and Tooling at Scale
rocio
167
14k
We Have a Design System, Now What?
morganepeng
48
7.1k
4 Signs Your Business is Dying
shpigford
179
21k
Fireside Chat
paigeccino
31
2.9k
What's new in Ruby 2.0
geeforr
339
31k
Adopting Sorbet at Scale
ufuk
72
8.9k
Designing for Performance
lara
604
68k
StorybookのUI Testing Handbookを読んだ
zakiyama
25
5k
Music & Morning Musume
bryan
46
6k
Speed Design
sergeychernyshev
18
380
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