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
150
バーチャルキャンパスを活用したWebVRコンテンツ開発
#VRSionUp!8「WebVRオンラインイベント開発」
Sora Arakawa
September 08, 2020
Tweet
Share
More Decks by Sora Arakawa
See All by Sora Arakawa
技術島の指定ツール「LaTeX」で同人誌を作ろう
arkw
2
89
ポスト・パソコン時代のジャンク遊び スマートデバイス編
arkw
0
69
ジャンカーよ、車も買え ~10分でわかる!? 中古車選び入門~
arkw
1
77
arkw vs. サーバ移転 -2024年1月版-
arkw
0
240
なれる! 村上さん Misskeyサーバ構築入門
arkw
0
440
Cloudflare Tunnelで自宅サーバを公開してみた
arkw
0
1.3k
5分でわかる!? 7セグメントLED制御
arkw
0
62
ヤフオクで原付買った話
arkw
0
180
パソコンの消費電力と省エネ化のおはなし
arkw
0
280
Other Decks in Technology
See All in Technology
Snowflake ML モデルを dbt データパイプラインに組み込む
estie
0
110
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
12
4.4k
JAWS DAYS 2025 アーキテクチャ道場 事前説明会 / JAWS DAYS 2025 briefing document
naospon
0
2.6k
どちらかだけじゃもったいないかも? ECSとEKSを適材適所で併用するメリット、運用課題とそれらの対応について
tk3fftk
2
240
What's new in Go 1.24?
ciarana
1
110
生成AI×財務経理:PoCで挑むSlack AI Bot開発と現場巻き込みのリアル
pohdccoe
1
780
エンジニアリング価値を黒字化する バリューベース戦略を用いた 技術戦略策定の道のり
kzkmaeda
7
3.2k
JAWS FESTA 2024「バスロケ」GPS×サーバーレスの開発と運用の舞台裏/jawsfesta2024-bus-gps-serverless
ma2shita
3
280
わたしがEMとして入社した「最初の100日」の過ごし方 / EMConfJp2025
daiksy
14
5.3k
自分だけの仮想クラスタを高速かつ効率的に作る kubefork
donkomura
0
110
AIエージェント開発のノウハウと課題
pharma_x_tech
8
4.3k
DevinでAI AWSエンジニア製造計画 序章 〜CDKを添えて〜/devin-load-to-aws-engineer
tomoki10
0
190
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
51k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
How to train your dragon (web standard)
notwaldorf
91
5.9k
GitHub's CSS Performance
jonrohan
1030
460k
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/ 見下ろしモードでキャンパス内のとある場所をクリックすると…?