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.8k
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
【初心者向け】ローカルLLMの色々な動かし方まとめ
aratako
7
3.5k
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.7k
AI時代を生き抜くエンジニアキャリアの築き方 (AI-Native 時代、エンジニアという道は 「最大の挑戦の場」となる) / Building an Engineering Career to Thrive in the Age of AI (In the AI-Native Era, the Path of Engineering Becomes the Ultimate Arena of Challenge)
jeongjaesoon
0
130
AIのグローバルトレンド2025 #scrummikawa / global ai trend
kyonmm
PRO
1
280
MCPで変わる Amebaデザインシステム「Spindle」の開発
spindle
PRO
3
3.2k
新アイテムをどう使っていくか?みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
akkiesoft
0
270
Codeful Serverless / 一人運用でもやり抜く力
_kensh
7
420
2025年になってもまだMySQLが好き
yoku0825
8
4.8k
RSCの時代にReactとフレームワークの境界を探る
uhyo
10
3.4k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
9
73k
初めてAWSを使うときのセキュリティ覚書〜初心者支部編〜
cmusudakeisuke
1
250
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
290
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
BBQ
matthewcrist
89
9.8k
KATA
mclloyd
32
14k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Designing for Performance
lara
610
69k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
A designer walks into a library…
pauljervisheath
207
24k
Automating Front-end Workflow
addyosmani
1370
200k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
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