Upgrade to Pro — share decks privately, control downloads, hide ads and more …

BabylonJs Editorで軽率にWebVRしたい話

BabylonJs Editorで軽率にWebVRしたい話

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

にー兄さん

March 23, 2021
Tweet

More Decks by にー兄さん

Other Decks in Technology

Transcript

  1. BabylonJs Editorで軽率に
    WebVRしたい話
    WebXR Tech Tokyo #5 @ cluster
    にー兄さん(@ninisan_drumath)

    View full-size slide

  2. 自己紹介
    にー兄さん(@ninisan_drumath)
    筑波大学情報科学類3年
    普段はUnityでxRやったりVFXやったり、、、
    最近Webフロントの勉強を嗜む程度に

    View full-size slide

  3. 入門したばかりなので
    間違っているorより良い手法
    があるかもです🙏

    View full-size slide

  4. スライドとサンプルプロジェクト
    公開しています👍

    View full-size slide

  5. agenda
    はじめに
    Editorプロジェクトを見てみる
    WebXRアプリにする
    おわりに

    View full-size slide

  6. はじめに

    View full-size slide

  7. Babylon.js は、ゲームの開発と
    使いやすさを重視した WebGL ベースの
    3D エンジンです。
    (docs.microsoft.comより)

    View full-size slide

  8. Babylon.jsについて
    - Microsoftが開発しているWebGLライブラリ
    - Three.jsみたいなやつ
    - 周辺ツールがしっかりしている
    - sandbox, playground, editor, exporter, etc...
    - ドキュメントがしっかり
    - TypeScriptサポートが強い(大事)
    - WebXR 対応がしっかり
    - Microsoft Mesh対応プラットフォームになる予

    View full-size slide

  9. Babylon.js Editorについて
    - Electronで作られたGUIエディタ
    - 使用感はUnityに寄せている印象
    - TSスクリプトをオブジェクトにアタッチでき

    - プレビューしながらシーンを構築できる
    - まだRC版
    - VSCodeでコーディング・デバッグできる
    - 文献が少ない(つらい

    View full-size slide

  10. 今回の試行について
    Babylon.js Editorはシーンプレビューできる

    VR空間をリアルタイムプレビューしたい

    WebVR開発が捗るのでは?

    やってみよう!

    View full-size slide

  11. Editorプロジェクトを見てみる

    View full-size slide

  12. 主なディレクトリ構成(青字はbuildされた成果物を動かすのに必要なもの
    )
    /
    ├─ node_modules/
    │ └─ cannon.js 物理演算ライブラリ
    ├─ dist/
    │ └─ bundle.js webpackされたスクリプト
    ├─ projects/
    ├─ scenes/
    ├─ src/ tsスクリプトが配置される
    ├─ index.html mainページ
    └─ webpack.config.json webpackの設定ファイル

    View full-size slide

  13. 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){}
    }

    View full-size slide

  14. ビルドの仕組み
    - Webpackによるビルド
    - 自動でwebpack.config.jsが作成される
    - Editorと連携するためのプラグインが組み込まれている
    - プロジェクト内のコードの変更を監視している
    - http-serverで鯖が立ってる?
    - npm run buildすれば良さそう(実は動かない)

    View full-size slide

  15. WebXRアプリにする

    View full-size slide

  16. 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

    View full-size slide

  17. EditorでWebXRを有効にする
    - Sceneオブジェクトが必要
    - index.tsでsceneをいじれる→あまりいじりたくない
    - Node._sceneで現在のシーンを取得できる→これがよさそう?
    public onInitialize(): void {
    const env = this._scene.createDefaultEnvironment();
    this._scene.createDefaultXRExperienceAsync({
    floorMeshes: [env.ground]
    });
    }

    View full-size slide

  18. でも動かない。。。
    ローカルホストでもだめなんだなぁという知見を得る
    htmlをLiveServerとかでホストすればBabylon.js自体は動きます

    View full-size slide

  19. 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を立ち上げる

    View full-size slide

  20. 実際に動かしてみる

    View full-size slide

  21. 動くけど、、、
    - fpsが2,3くらいしか出ない
    - 動くけど動かん
    - 左右で見え方違う気がする
    - 左目に変な影ができちゃってる

    View full-size slide

  22. Post Processingの除去によるパフォーマンス改善
    - 動作が重い原因はPost Processing
    - とくにSSAOあたりが重いらしい
    - 先ほどのSceneConfigにPPを除去するコードを追記
    this._scene._postProcessRenderPipelineManager.supportedPipelines.forEach(pp=>{
    this._scene.postProcessRenderPipelineManager.detachCamerasFromRenderPipeline(
    pp.name,
    this._scene.activeCamera
    );
    })

    View full-size slide

  23. 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",
    ...
    },

    View full-size slide

  24. 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()));
    }

    View full-size slide

  25. 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

    View full-size slide

  26. GitHub Pagesへのデプロイ(デモ)

    View full-size slide

  27. おわりに

    View full-size slide

  28. まとめ
    - BabylonJs Editorを使ってWebVRが作れた
    - しかしいろいろ工夫が必要みたい
    - 今後のアプデに期待!

    View full-size slide

  29. 謝辞
    今回の試行にあたり、
    BabylonJsの情報発信を多くされているLimesさんと
    BabylonJs Editorの開発者であるJulien Moreauさん
    のお二人にTwitterでご助言を賜りました
    この場を借りて感謝申し上げます。ありがとうございました!🙏

    View full-size slide

  30. 参考文献
    - 今回のサンプルプロジェクト
    https://github.com/drumath2237/babylonjs-editor-webxr-app
    - BabylonJsのWebXRに関するドキュメント
    https://doc.babylonjs.com/divingDeeper/webXR
    - BabylonJs Editor
    http://editor.babylonjs.com/

    View full-size slide