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
バーチャルキャンパスを活用したWebVRコンテンツ開発
Search
Sora Arakawa
September 08, 2020
Technology
0
160
バーチャルキャンパスを活用したWebVRコンテンツ開発
#VRSionUp!8「WebVRオンラインイベント開発」
Sora Arakawa
September 08, 2020
Tweet
Share
More Decks by Sora Arakawa
See All by Sora Arakawa
非root化Androidスマホでも動く仮想マシンアプリを試してみた
arkw
0
190
技術島の指定ツール「LaTeX」で同人誌を作ろう
arkw
2
160
ポスト・パソコン時代のジャンク遊び スマートデバイス編
arkw
0
130
ジャンカーよ、車も買え ~10分でわかる!? 中古車選び入門~
arkw
1
110
arkw vs. サーバ移転 -2024年1月版-
arkw
0
290
なれる! 村上さん Misskeyサーバ構築入門
arkw
0
530
Cloudflare Tunnelで自宅サーバを公開してみた
arkw
0
1.5k
5分でわかる!? 7セグメントLED制御
arkw
0
72
ヤフオクで原付買った話
arkw
0
220
Other Decks in Technology
See All in Technology
フィンテック養成勉強会#54
finengine
0
170
How Community Opened Global Doors
hiroramos4
PRO
1
110
JSX - 歴史を振り返り、⾯⽩がって、エモくなろう
pal4de
4
1.1k
急成長を支える基盤作り〜地道な改善からコツコツと〜 #cre_meetup
stefafafan
0
120
Definition of Done
kawaguti
PRO
6
480
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
620
20250623 Findy Lunch LT Brown
3150
0
840
_第3回__AIxIoTビジネス共創ラボ紹介資料_20250617.pdf
iotcomjpadmin
0
150
監視のこれまでとこれから/sakura monitoring seminar 2025
fujiwara3
11
3.8k
Amazon S3標準/ S3 Tables/S3 Express One Zoneを使ったログ分析
shigeruoda
3
450
ハノーバーメッセ2025座談会.pdf
iotcomjpadmin
0
160
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
29
10k
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Six Lessons from altMBA
skipperchong
28
3.8k
Practical Orchestrator
shlominoach
188
11k
Raft: Consensus for Rubyists
vanstee
140
7k
Navigating Team Friction
lara
187
15k
The Invisible Side of Design
smashingmag
299
51k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Building Adaptive Systems
keathley
43
2.6k
Designing for humans not robots
tammielis
253
25k
Producing Creativity
orderedlist
PRO
346
40k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Transcript
バーチャルキャンパスを活用した WebVRコンテンツ開発 荒川 奏良(Sora Arakawa) 静岡大学xR同好会はまりあ 静岡大学 情報学部 行動情報学科 1年
xR同好会はまりあ • Unity / Blender勉強会 • Clusterで新歓イベント • VRChatやNeosVRの生配信
None
None
静岡大学 バーチャル情報学部 • 静岡大学浜松キャンパスを3DCGで体験できるオンラインコンテンツ • JavaScript(Three.js)で開発 • ウェブアプリだから専用アプリのダウンロードやインストールが不要
静岡大学 バーチャル情報学部 • 3つのモードを搭載 見下ろしモード キャンパスを上空から一望できるモード 建物にカーソルを重ねると建物名を表示 建物をクリックすると説明や写真を表示
None
静岡大学 バーチャル情報学部 • 3つのモードを搭載 VRモード キャンパス内を一人称視点で 自由に移動できるモード キーボードかバーチャルパッドで動作
静岡大学 バーチャル情報学部 • 3つのモードを搭載 VRモード(HMD) Oculus QuestなどのVR機器に対応 実 質 静
大
開発体制 • 完全オンライン 主にGitHubとSlackを使用 • 開発期間 約2ヶ月 (参考) 静岡大学は6月上旬まで完全在宅授業 その後、一部対面授業再開
7月頃からサークル活動が対面で実施可能に
プログラム 3人体制で開発 メインプログラム WebVR、3Dプログラム、処理最適化 WebVR
プログラム • 3D描画部分 → Three.js • 見下ろしモードのマウス操作 → OrbitControls •
UI処理用にjQueryも使用 OrbitControlsは、Three.jsのプラグインの一つ 若干の初期化コードとメインループ内の1行だけで マウス操作(回転、上下左右移動、拡大縮小)を実装可
HMD対応 • Three.jsのWebVRプラグイン → Questに対応 • WebXR-Polyfill を導入 → 各種PC用HMDに対応
Questでは、localhost時ならhttps無しでWebXRを実行できる機能が あるので、それを用いてデバッグ等を行った。
VR内操作 • Three.jsでは、コントローラのボタンの押下とモーションは取得できた が、スティック、ゲームパッドの状態を取得できなかったため、自前で GamepadAPIを叩くことに… • Three.js はサンプルが豊富で、その中から移動に適した部分を取り 出し、トラックパッド・ゲームパッドで動かせるように改造。 •
開発時トラックパッドとサムスティックの違いで時間を結構とられた。 注意! • スマホでは、バーチャルパッドを自前で用意した。
3Dモデル制作 • 5人体制で制作 ① キャンパス全体のオブジェクトをOpenStreetMapから自動生成 (blender-osm) ② 各建物に名前やテクスチャを付ける ③ 各メンバーが建物の3Dデータを作成し、Slackに投稿
④ それを集約し、gITFで出力 → GitHubにコミット
None
3Dモデル制作 • OpenStreetMap
None
None
None
3Dモデル制作 • 比較
3Dモデル制作 • 比較
3Dモデル制作 • 合計 118,300ポリゴン └ 木 約45,000ポリゴン (1本あたり 200~300) └
建物 約65,000ポリゴン (1件あたり 2000~8000) データ容量 約30MB
3Dモデル制作 • 開発段階ではもう少しリアルな木 だったが、ノートPCやモバイル端末 であまりに重いので妥協
負荷の軽減 • ポリゴン数を減らす • テクスチャを荒くする(昔の3Dゲームでよく使われた) • 60fps → 30fps動作(メインループ 2回に1回は描画処理しない)
• アンチエイリアスを切る • アンチエイリアスからFXAAシェーダーに変更(こちらの方が軽い)
UIデザイン
UIデザイン • 背景色 静大スクールカラー (DIC 143) • フォント 「ニューロダン」「平成ゴシック体」「平成明朝体」 読みやすさ重視の選定
None
3D部分 : Three.jsで描画 2D部分 : div要素を重ねて描画
jQueryでウインドウのdiv要素を表示 コンテンツは別ファイル(HTML形式)をAjaxで読み込み ※ウインドウ表示中は3Dモデルのマウス操作は停止 カバー用の黒いdiv要素を重ねて暗くする
オープンソース化 • MIT License (改変・再配布・商用利用OK 著作権表示が条件) • 他大学、他団体によるバーチャルオープンキャンパスの開発基盤とし て使用可能 ※学章等のデータの利用については「静岡大学学章等に関する規則」
をご参照ください ※キャンパスデータに一部含まれるOpenStreetMapのデータはCC BY-SA 2.0となります
None
今後について • 他大学、他団体によるバーチャルオープンキャンパスの開発基盤 • キャンパスの3Dモデルを転用したコンテンツの作成
None
ご意見ご感想お待ちしております! Twitter : @xR_Hamamatsu https://xr-hamaria.github.io/virtual-inf/ 見下ろしモードでキャンパス内のとある場所をクリックすると…?