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
360
BabylonJs Editorで軽率にWebVRしたい話
WebXR Tech Tokyoで登壇した資料になります
にー兄さん
March 23, 2021
Tweet
Share
More Decks by にー兄さん
See All by にー兄さん
軽率にAndroidXRのJetpack SceneCoreを使って3Dモデルを表示してみる / androidxr-scenecore-3dmodels
drumath2237
0
36
UnJSを使って軽率にCLIを作ってみたらめちゃくちゃ便利だった / create CLI with UnJS
drumath2237
4
1.5k
create-babylon-appを軽率にアプデしたい / update create babylon app
drumath2237
1
1.6k
Babylon.js 7注目機能を 軽率にまとめてみる/whats-new-in-babylonjs-v7
drumath2237
1
320
軽率にVFX Graphと Compute Shaderを 組み合わせるテクニック/integrate-vfxgraph-and-compute-shader
drumath2237
1
400
軽率にVue 3で リアルタイム3Dアプリを作れる ライブラリを作ってみた/vue-with-3d-app
drumath2237
3
1.9k
軽率にBabylon.jsを C#で使う技術 / using-babylonjs-with-csharp
drumath2237
1
880
今こそ軽率に理解したい WebXR Device APIとBabylon.jsの話 / understand-webxr-device-api-and-babylonjs
drumath2237
0
220
Vue・Babylon連携ライブラリ BabyuewJSについて / about-babyuewjs
drumath2237
0
190
Other Decks in Technology
See All in Technology
"TEAM"を導入したら最高のエンジニア"Team"を実現できた / Deploying "TEAM" and Building the Best Engineering "Team"
yuj1osm
1
230
Oracle Database Technology Night #87-1 : Exadata Database Service on Exascale Infrastructure(ExaDB-XS)サービス詳細
oracle4engineer
PRO
1
210
AWSではじめる Web APIテスト実践ガイド / A practical guide to testing Web APIs on AWS
yokawasa
8
770
OPENLOGI Company Profile
hr01
0
60k
Amazon Athenaから利用時のGlueのIcebergテーブルのメンテナンスについて
nayuts
0
110
x86-64 Assembly Essentials
latte72
1
210
手を動かしてレベルアップしよう!
maruto
0
250
OCI Success Journey OCIの何が評価されてる?疑問に答える事例セミナー(2025年2月実施)
oracle4engineer
PRO
2
220
データベースの負荷を紐解く/untangle-the-database-load
emiki
2
550
大規模アジャイルフレームワークから学ぶエンジニアマネジメントの本質
staka121
PRO
3
1.6k
エンジニアリング価値を黒字化する バリューベース戦略を用いた 技術戦略策定の道のり
kzkmaeda
7
3.4k
サイト信頼性エンジニアリングとAmazon Web Services / SRE and AWS
ymotongpoo
7
1.8k
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Scaling GitHub
holman
459
140k
Designing for humans not robots
tammielis
250
25k
Why Our Code Smells
bkeepers
PRO
336
57k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
260
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Raft: Consensus for Rubyists
vanstee
137
6.8k
A designer walks into a library…
pauljervisheath
205
24k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
11
1.3k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
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/