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
310
BabylonJs Editorで軽率にWebVRしたい話
WebXR Tech Tokyoで登壇した資料になります
にー兄さん
March 23, 2021
Tweet
Share
More Decks by にー兄さん
See All by にー兄さん
UnJSを使って軽率にCLIを作ってみたらめちゃくちゃ便利だった / create CLI with UnJS
drumath2237
0
30
create-babylon-appを軽率にアプデしたい / update create babylon app
drumath2237
1
14
Babylon.js 7注目機能を 軽率にまとめてみる/whats-new-in-babylonjs-v7
drumath2237
1
100
軽率にVFX Graphと Compute Shaderを 組み合わせるテクニック/integrate-vfxgraph-and-compute-shader
drumath2237
1
120
軽率にVue 3で リアルタイム3Dアプリを作れる ライブラリを作ってみた/vue-with-3d-app
drumath2237
3
1.6k
軽率にBabylon.jsを C#で使う技術 / using-babylonjs-with-csharp
drumath2237
1
510
今こそ軽率に理解したい WebXR Device APIとBabylon.jsの話 / understand-webxr-device-api-and-babylonjs
drumath2237
0
60
Vue・Babylon連携ライブラリ BabyuewJSについて / about-babyuewjs
drumath2237
0
120
軽率にBabylon.jsの WebGPUエンジンを使って ComputeShaderに入門した / learn-about-babylonjs-webgpu-computeshader
drumath2237
0
490
Other Decks in Technology
See All in Technology
シフトレフトで挑む セキュリティの生産性向上
sekido
PRO
0
270
さらに高品質・高速化を目指すAI時代のテスト設計支援と、めざす先 / AI Test Lab vol.1
shift_evolve
0
190
Azure Pipelinesを使用したCICDベースラインアーキテクチャ実践
yuriemori
0
190
CEL(Common Expression Language)で書いた条件にマッチしたIAM Policyを見つける / iam-policy-finder
fujiwara3
0
710
DDDにおける認可の扱いとKotlinにおける実装パターン / authorization-for-ddd-and-kotlin-implement-pattern
urmot
4
390
[NIKKEI Tech Talk]Bias for Action!! 実践から学ぶための仕組とコミュニティ / Community for Practice and Learning
kanamasa
0
260
Git 研修 Basic【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
310
大規模ドラレコデータ収集・機械学習基盤を支える AWS CDK 〜導入・運用事例紹介〜
pemugi
0
110
What if...? 처음부터 다시 LLM 어플리케이션을 개발한다면
huffon
0
1k
dxd2024-生成AIに振り回された3か月間の成功と失敗/dxd2024-link-and-motivation
lmi
2
260
AI研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
130
20240725 LLMによるDXのビジョンと、今何からやるべきか @Azure OpenAI Service Dev Day
nrryuya
3
1.1k
Featured
See All Featured
Visualization
eitanlees
139
14k
We Have a Design System, Now What?
morganepeng
46
7k
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
Learning to Love Humans: Emotional Interface Design
aarron
269
39k
A better future with KSS
kneath
231
17k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
24
1.8k
RailsConf 2023
tenderlove
16
720
Design by the Numbers
sachag
277
18k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
Documentation Writing (for coders)
carmenintech
63
4.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
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/