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
いつの間にか入れ替わってる!?新しいAWS Security Hubとは?
cmusudakeisuke
0
120
Glacierだからってコストあきらめてない? / JAWS Meet Glacier Cost
taishin
1
160
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
7.6k
ビギナーであり続ける/beginning
ikuodanaka
3
750
AWS認定を取る中で感じたこと
siromi
1
190
Getting to Know Your Legacy (System) with AI-Driven Software Archeology (WeAreDevelopers World Congress 2025)
feststelltaste
1
130
United airlines®️ USA Contact Numbers: Complete 2025 Support Guide
unitedflyhelp
0
310
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
170
NewSQLや分散データベースを支えるRaftの仕組み - 仕組みを理解して知る得意不得意
hacomono
PRO
2
150
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
2
7.1k
OSSのSNSツール「Misskey」をさわってみよう(右下ワイプで私のOSCの20年を振り返ります) / 20250705-osc2025-do
akkiesoft
0
160
LLM時代の検索
shibuiwilliam
1
120
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.3k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Music & Morning Musume
bryan
46
6.6k
Fireside Chat
paigeccino
37
3.5k
4 Signs Your Business is Dying
shpigford
184
22k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
How to Think Like a Performance Engineer
csswizardry
25
1.7k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Building Adaptive Systems
keathley
43
2.7k
We Have a Design System, Now What?
morganepeng
53
7.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
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