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
BabylonJs Editorで軽率にWebVRしたい話
Search
にー兄さん
March 23, 2021
Technology
0
380
BabylonJs Editorで軽率にWebVRしたい話
WebXR Tech Tokyoで登壇した資料になります
にー兄さん
March 23, 2021
Tweet
Share
More Decks by にー兄さん
See All by にー兄さん
軽率にプログラミング言語のシンタックスについて考えてみよう / lets-think-about-programming-lang-syntax
drumath2237
0
39
エンジニアが軽率に趣味から始める、OSS貢献を軸とした個人活動 / oss-contribution-as-a-hoby-project
drumath2237
0
32
Babylon.js 8.0のアプデ情報を 軽率にキャッチアップ / catch-up-babylonjs-8
drumath2237
0
140
フォークギター with VFXの 制作を軽率に振り返ろう! / look back fork guitar with vfx
drumath2237
0
29
軽率に始まった Babylon.js勉強会運営の 1年間をふりかえって / look back babylonjs japan activity
drumath2237
0
54
利己的利他、 あるいは軽率2.0に備えよ。 / prepare-for-keisotsu-2.0
drumath2237
0
44
軽率にAndroidXRのJetpack SceneCoreを使って3Dモデルを表示してみる / androidxr-scenecore-3dmodels
drumath2237
0
110
あなたの知らないWebXR Device APIの話を軽率に / about-webxr-device-api-you-dont-know
drumath2237
0
33
UnJSを使って軽率にCLIを作ってみたらめちゃくちゃ便利だった / create CLI with UnJS
drumath2237
4
1.6k
Other Decks in Technology
See All in Technology
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
360
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
ar_tama
7
910
SmartNewsにおける 1000+ノード規模 K8s基盤 でのコスト最適化 – Spot・Gravitonの大規模導入への挑戦
vsanna2
0
120
怖くない!はじめてのClaude Code
shinya337
0
380
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
2
6.3k
KiCadでPad on Viaの基板作ってみた
iotengineer22
0
290
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
180
論文紹介:LLMDet (CVPR2025 Highlight)
tattaka
0
310
Yamla: Rustでつくるリアルタイム性を追求した機械学習基盤 / Yamla: A Rust-Based Machine Learning Platform Pursuing Real-Time Capabilities
lycorptech_jp
PRO
4
230
なぜ私はいま、ここにいるのか? #もがく中堅デザイナー #プロダクトデザイナー
bengo4com
0
1.3k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
20
6.8k
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
160
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
94
6.1k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Docker and Python
trallard
44
3.5k
Raft: Consensus for Rubyists
vanstee
140
7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
810
Testing 201, or: Great Expectations
jmmastey
42
7.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Transcript
BabylonJs Editorで軽率に WebVRしたい話 WebXR Tech Tokyo #5 @ cluster にー兄さん(@ninisan_drumath)
自己紹介 にー兄さん(@ninisan_drumath) 筑波大学情報科学類3年 普段はUnityでxRやったりVFXやったり、、、 最近Webフロントの勉強を嗜む程度に
入門したばかりなので 間違っているorより良い手法 があるかもです🙏
スライドとサンプルプロジェクト 公開しています👍
agenda はじめに Editorプロジェクトを見てみる WebXRアプリにする おわりに
はじめに
Babylon.js は、ゲームの開発と 使いやすさを重視した WebGL ベースの 3D エンジンです。 (docs.microsoft.comより)
Babylon.jsについて - Microsoftが開発しているWebGLライブラリ - Three.jsみたいなやつ - 周辺ツールがしっかりしている - sandbox, playground,
editor, exporter, etc... - ドキュメントがしっかり - TypeScriptサポートが強い(大事) - WebXR 対応がしっかり - Microsoft Mesh対応プラットフォームになる予 定
Babylon.js Editorについて - Electronで作られたGUIエディタ - 使用感はUnityに寄せている印象 - TSスクリプトをオブジェクトにアタッチでき る -
プレビューしながらシーンを構築できる - まだRC版 - VSCodeでコーディング・デバッグできる - 文献が少ない(つらい
今回の試行について Babylon.js Editorはシーンプレビューできる ↓ VR空間をリアルタイムプレビューしたい ↓ WebVR開発が捗るのでは? ↓ やってみよう!
Editorプロジェクトを見てみる
None
主なディレクトリ構成(青字はbuildされた成果物を動かすのに必要なもの ) / ├─ node_modules/ │ └─ cannon.js 物理演算ライブラリ ├─
dist/ │ └─ bundle.js webpackされたスクリプト ├─ projects/ ├─ scenes/ ├─ src/ tsスクリプトが配置される ├─ index.html mainページ └─ webpack.config.json webpackの設定ファイル
src/以下のディレクトリ構成及びスクリプトの構造 /src ├─ scenes/ │ ├─ scene/ │ │ └─
index.ts │ └─ MyComponent.ts └─ index.ts export default class MyComponent extends Node { protected constructor() {} public onInitialize(): void {} public onStart(): void {} public onUpdate(): void {} public onMessage (name: string, data: any, sender: any){} }
ビルドの仕組み - Webpackによるビルド - 自動でwebpack.config.jsが作成される - Editorと連携するためのプラグインが組み込まれている - プロジェクト内のコードの変更を監視している -
http-serverで鯖が立ってる? - npm run buildすれば良さそう(実は動かない)
WebXRアプリにする
Babylon.jsのWebXR APIについて - Mixed Reality Devices, Oculus Rift, などのPCVR -
Oculus QuestやAndroidなどのモバイル - Polyfillによるサポート - WebVR APIからのmigration対応など const xr = scene.createDefaultXRExperienceAsync(); 詳しくはこちらのページへ https://doc.babylonjs.com/divingDeeper/webXR/introToWebXR
EditorでWebXRを有効にする - Sceneオブジェクトが必要 - index.tsでsceneをいじれる→あまりいじりたくない - Node._sceneで現在のシーンを取得できる→これがよさそう? public onInitialize(): void
{ const env = this._scene.createDefaultEnvironment(); this._scene.createDefaultXRExperienceAsync({ floorMeshes: [env.ground] }); }
でも動かない。。。 ローカルホストでもだめなんだなぁという知見を得る htmlをLiveServerとかでホストすればBabylon.js自体は動きます
LAN内でHTTPSの有効化 - WebXR APIはHTTPS通信じゃないと利用できない - http-serverでhttps鯖を立てよう openssl req -newkey rsa:2048
-new -nodes -x509 -days 3650 -keyout key.pem -out cert.crt yarn http-server -p 1338 -c-1 -S -C cert.crt 1. opensslコマンドで秘密鍵と証明書を一発で作れるらしい 2. 途中でCommon Nameを問われるのでローカルIPを入力 3. 出力されたpemファイルを指定してhttp-serverを立ち上げる
実際に動かしてみる
動くけど、、、 - fpsが2,3くらいしか出ない - 動くけど動かん - 左右で見え方違う気がする - 左目に変な影ができちゃってる
Post Processingの除去によるパフォーマンス改善 - 動作が重い原因はPost Processing - とくにSSAOあたりが重いらしい - 先ほどのSceneConfigにPPを除去するコードを追記 this._scene._postProcessRenderPipelineManager.supportedPipelines.forEach(pp=>{
this._scene.postProcessRenderPipelineManager.detachCamerasFromRenderPipeline( pp.name, this._scene.activeCamera ); })
Editor無しでビルドできるようにする - 普通にnpm run buildでよくない?→実はよくない - Webpack ConfigにEditorと連携するためのpluginがある - これがEditorの応答を待ってしまう
- 環境変数によってビルドの仕方を変えよう! "scripts": { ... "build": "cross-env BUILD_IN=\"editor\" webpack --mode production", "build:ci": "cross-env BUILD_IN=\"shell\" webpack --mode production", ... },
Editor無しでビルドできるようにする - webpack.config.jsで環境変数によって - Editor用のpluginを入れるか判断する - これで無事にシェル上でビルドが可能になる let plugins =
[ new webpack.BannerPlugin({ banner: `${package.name} ${package.version} ${new Date().toString()}`, }), new webpack.WatchIgnorePlugin([/\.js$/, /\.d\.ts$/]), ]; if (process.env.BUILD_IN === "editor") { plugins.push(editor.createProgressPlugin(new webpack.ProgressPlugin())); }
GitHub Pagesへのデプロイ - WebXRはインストール不要で 体験を共有できる - pushしたらすぐ公開したい - ビルド用のCIを回そ -
GitHub Pagesはhttps配信で きるのでWebXR APIもニッコリ ^^ - name: build project run: npm run build:ci - name: copy files to public run: | mkdir ./public mkdir ./public/node_modules cp -r ./dist ./public/dist cp -r ./scenes ./public/scenes cp -r ./node_modules/cannon ./public/node_modules/cannon cp index.html ./public/index.html - name: Deploy uses: peaceiris/actions-gh-pages@v3 with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./public
GitHub Pagesへのデプロイ(デモ)
おわりに
まとめ - BabylonJs Editorを使ってWebVRが作れた - しかしいろいろ工夫が必要みたい - 今後のアプデに期待!
謝辞 今回の試行にあたり、 BabylonJsの情報発信を多くされているLimesさんと BabylonJs Editorの開発者であるJulien Moreauさん のお二人にTwitterでご助言を賜りました この場を借りて感謝申し上げます。ありがとうございました!🙏
参考文献 - 今回のサンプルプロジェクト https://github.com/drumath2237/babylonjs-editor-webxr-app - BabylonJsのWebXRに関するドキュメント https://doc.babylonjs.com/divingDeeper/webXR - BabylonJs Editor
http://editor.babylonjs.com/