BabylonJs Editorで軽率にWebVRしたい話

WebXR Tech Tokyoで登壇した資料になります

Transcript

1. BabylonJs Editorで軽率に WebVRしたい話 WebXR Tech Tokyo #5 @ cluster にー兄さん(@ninisan_drumath)
2. 自己紹介 にー兄さん(@ninisan_drumath) 筑波大学情報科学類3年 普段はUnityでxRやったりVFXやったり、、、 最近Webフロントの勉強を嗜む程度に
3. 入門したばかりなので 間違っているorより良い手法 があるかもです🙏
4. スライドとサンプルプロジェクト 公開しています👍
5. agenda はじめに Editorプロジェクトを見てみる WebXRアプリにする おわりに
6. はじめに
7. Babylon.js は、ゲームの開発と 使いやすさを重視した WebGL ベースの 3D エンジンです。 (docs.microsoft.comより)
8. Babylon.jsについて - Microsoftが開発しているWebGLライブラリ - Three.jsみたいなやつ - 周辺ツールがしっかりしている - sandbox, playground, editor, exporter, etc... - ドキュメントがしっかり - TypeScriptサポートが強い(大事) - WebXR 対応がしっかり - Microsoft Mesh対応プラットフォームになる予 定
9. Babylon.js Editorについて - Electronで作られたGUIエディタ - 使用感はUnityに寄せている印象 - TSスクリプトをオブジェクトにアタッチでき る - プレビューしながらシーンを構築できる - まだRC版 - VSCodeでコーディング・デバッグできる - 文献が少ない（つらい
10. 今回の試行について Babylon.js Editorはシーンプレビューできる ↓ VR空間をリアルタイムプレビューしたい ↓ WebVR開発が捗るのでは？ ↓ やってみよう！
11. Editorプロジェクトを見てみる
13. 主なディレクトリ構成(青字はbuildされた成果物を動かすのに必要なもの ) / ├─ node_modules/ │ └─ cannon.js 物理演算ライブラリ ├─ dist/ │ └─ bundle.js webpackされたスクリプト ├─ projects/ ├─ scenes/ ├─ src/ tsスクリプトが配置される ├─ index.html mainページ └─ webpack.config.json webpackの設定ファイル
14. 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){} }
15. ビルドの仕組み - Webpackによるビルド - 自動でwebpack.config.jsが作成される - Editorと連携するためのプラグインが組み込まれている - プロジェクト内のコードの変更を監視している - http-serverで鯖が立ってる？ - npm run buildすれば良さそう（実は動かない）
16. WebXRアプリにする
17. 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
18. EditorでWebXRを有効にする - Sceneオブジェクトが必要 - index.tsでsceneをいじれる→あまりいじりたくない - Node._sceneで現在のシーンを取得できる→これがよさそう？ public onInitialize(): void { const env = this._scene.createDefaultEnvironment(); this._scene.createDefaultXRExperienceAsync({ floorMeshes: [env.ground] }); }
19. でも動かない。。。 ローカルホストでもだめなんだなぁという知見を得る htmlをLiveServerとかでホストすればBabylon.js自体は動きます
20. 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を立ち上げる
21. 実際に動かしてみる
22. 動くけど、、、 - fpsが2,3くらいしか出ない - 動くけど動かん - 左右で見え方違う気がする - 左目に変な影ができちゃってる
23. Post Processingの除去によるパフォーマンス改善 - 動作が重い原因はPost Processing - とくにSSAOあたりが重いらしい - 先ほどのSceneConfigにPPを除去するコードを追記 this._scene._postProcessRenderPipelineManager.supportedPipelines.forEach(pp=>{ this._scene.postProcessRenderPipelineManager.detachCamerasFromRenderPipeline( pp.name, this._scene.activeCamera ); })
24. 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", ... },
25. 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())); }
26. 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
27. GitHub Pagesへのデプロイ（デモ）
28. おわりに
29. まとめ - BabylonJs Editorを使ってWebVRが作れた - しかしいろいろ工夫が必要みたい - 今後のアプデに期待！
30. 謝辞 今回の試行にあたり、 BabylonJsの情報発信を多くされているLimesさんと BabylonJs Editorの開発者であるJulien Moreauさん のお二人にTwitterでご助言を賜りました この場を借りて感謝申し上げます。ありがとうございました！🙏
31. 参考文献 - 今回のサンプルプロジェクト https://github.com/drumath2237/babylonjs-editor-webxr-app - BabylonJsのWebXRに関するドキュメント https://doc.babylonjs.com/divingDeeper/webXR - BabylonJs Editor http://editor.babylonjs.com/