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
90
ポスト・パソコン時代のジャンク遊び スマートデバイス編
arkw
0
69
ジャンカーよ、車も買え ~10分でわかる!? 中古車選び入門~
arkw
1
77
arkw vs. サーバ移転 -2024年1月版-
arkw
0
240
なれる! 村上さん Misskeyサーバ構築入門
arkw
0
450
Cloudflare Tunnelで自宅サーバを公開してみた
arkw
0
1.3k
5分でわかる!? 7セグメントLED制御
arkw
0
63
ヤフオクで原付買った話
arkw
0
180
パソコンの消費電力と省エネ化のおはなし
arkw
0
280
Other Decks in Technology
See All in Technology
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
540
JavaにおけるNull非許容性
skrb
2
2.7k
4th place solution Eedi - Mining Misconceptions in Mathematics
rist
0
150
RayでPHPのデバッグをちょっと快適にする
muno92
PRO
0
200
IAMのマニアックな話2025
nrinetcom
PRO
6
1.4k
LayerXにおけるAI活用事例とその裏側(2025年2月) バクラクの目指す “業務の自動運転” の例 / layerx-ai-deim2025
yuya4
4
830
アジリティを高めるテストマネジメント #QiitaQualityForward
makky_tyuyan
1
400
プロダクト開発者目線での Entra ID 活用
sansantech
PRO
0
140
フォーイット_エンジニア向け会社紹介資料_Forit_Company_Profile.pdf
forit_tech
1
1.7k
ABWG2024採択者が語るエンジニアとしての自分自身の見つけ方〜発信して、つながって、世界を広げていく〜
maimyyym
1
230
User Story Mapping + Inclusive Team
kawaguti
PRO
3
480
Snowflakeの開発・運用コストをApache Icebergで効率化しよう!~機能と活用例のご紹介~
sagara
1
540
Featured
See All Featured
Designing Experiences People Love
moore
140
23k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
The Language of Interfaces
destraynor
156
24k
Optimizing for Happiness
mojombo
377
70k
The Invisible Side of Design
smashingmag
299
50k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Speed Design
sergeychernyshev
28
820
Unsuck your backbone
ammeep
669
57k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Navigating Team Friction
lara
183
15k
Site-Speed That Sticks
csswizardry
4
420
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/ 見下ろしモードでキャンパス内のとある場所をクリックすると…?