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
「どこから読む?」コードとカルチャーに最速で馴染むための実践ガイド
zozotech
PRO
0
320
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
400
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
400
人工衛星のファームウェアをRustで書く理由
koba789
15
7.8k
スマートファクトリーの第一歩 〜AWSマネージドサービスで 実現する予知保全と生成AI活用まで
ganota
2
210
Function Body Macros で、SwiftUI の View に Accessibility Identifier を自動付与する/Function Body Macros: Autogenerate accessibility identifiers for SwiftUI Views
miichan
2
180
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
120
ChatGPTとPlantUML/Mermaidによるソフトウェア設計
gowhich501
1
130
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
240
2025年になってもまだMySQLが好き
yoku0825
8
4.7k
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
iwatatomoya
1
920
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
830
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
96
6.2k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
How GitHub (no longer) Works
holman
315
140k
Navigating Team Friction
lara
189
15k
Statistics for Hackers
jakevdp
799
220k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Six Lessons from altMBA
skipperchong
28
4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Site-Speed That Sticks
csswizardry
10
810
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
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