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

Edge on HoloLens2で軽率にWebXRするときが来た

にー兄さん
May 24, 2021
2.5k

Edge on HoloLens2で軽率にWebXRするときが来た

WebXR Tech TokyoでLT登壇した時の資料です

にー兄さん

May 24, 2021
Tweet

More Decks by にー兄さん

Transcript

  1. Edge on HoloLens2で
    軽率にWebXRする時が来た
    WebXR Tech Tokyo #6
    にー兄さん(@ninisan_drumath)

    View full-size slide

  2. 自己紹介
    - にー兄さん(@ninisan_drumath)
    - 筑波大学 情報科学類
    - 3DCGが好き
    UnityやWebGLで遊ぶのが好き

    View full-size slide

  3. agenda
    - HoloLens OSのアプデがきた
    - WebAR on HoloLensをしてみる
    - おわりに

    View full-size slide

  4. スライド資料・デモプロジェクト
    すべて公開しています👍
    スライドのスクショ📸
    SNS共有OKです(お願いします)

    View full-size slide

  5. HoloLens OSアプデが来た

    View full-size slide

  6. Windows Holographic(21H1)が登場
    - 2021/5/11
    - ホームメニューに再起動やシャットダウンの項目が追加
    - 複数ユーザの切り替えが簡単に
    - キーボードのスワイプ入力
    - Chromium-based Edgeの登場

    View full-size slide

  7. 新しいEdge
    - アイコンが変わる
    - 中身がChromium
    - イマーシブWebXRと
    360°ビューのサポート

    View full-size slide

  8. EdgeでWebXRの機能を有効にしよう
    1. Edgeでedge://flagsにアクセスする
    2. 「webxr」と検索バーに入力
    3. 「WebXR Incubation」にチェックを入れる

    View full-size slide

  9. WebAR on Hololensを実装する

    View full-size slide

  10. 開発環境など
    - Babylon.jsを使う
    - WebGLライブラリ
    - WebXR対応が簡単
    - MicrosoftがWebXRするのに押していてイイ感じ
    - Microsoft Mesh対応も待ちどおしい
    - Vite
    - Webフロントエンドのビルドシステム
    - 複雑な設定が要らず、融通が利くイメージ
    - ノーバンドルで開発時は爆速ビルド
    - loaderの設定なしでTypeScriptやPostCSSを導入できる
    - プロジェクトテンプレートが利用できる
    - 今回はvanilla-tsで作る

    View full-size slide

  11. (注意)ローカル開発環境でデバッグするために
    - WebXR APIを使いたい
    - LANでもhttps接続が必須
    - 方法は何でもよい
    - opensslコマンドで
    オレオレ証明書作成
    - Viteの場合vite.config.jsに設定
    を追記
    - Demoプロジェクトの
    READMEに書きました
    const config = defineConfig({
    server: {
    https: {
    key: fs.readFileSync("./key.pem"),
    cert: fs.readFileSync("./cert.pem"),
    },
    },
    });
    openssl req -newkey rsa:2048 -new -nodes
    -x509 -days 3650 -keyout key.pem -out
    cert.pem

    View full-size slide

  12. Babylon.jsでWebARを使う
    const xr = await scene
    .createDefaultXRExperienceAsync({
    uiOptions: {
    sessionMode: "immersive-ar",
    referenceSpaceType: "unbounded",
    },
    });

    View full-size slide

  13. (余談)Reference Spaceについて
    さまざまなデバイスに対応するための概

    unbounded:制限のない空間。原点から
    離れて使われることを考慮
    Babylon.jsではWebARの場合
    unboundedじゃないと警告が出る
    MDN Web Docsより

    View full-size slide

  14. Holographic Buttonを使いたい・・・!
    3D GUIにHolographic Buttonがある
    HoloLensで使いたい!(と前から思っていた)
    見た目をMRTKに寄せてみるなど
    Babylon.js Documentsより
    MRTKのボタンに見た目を寄せ
    てみたボタン

    View full-size slide

  15. だが、、、動かん、、、
    ボタンも出せる、手からコントローラの
    レイキャストもでる、交差判定もできて
    いる
    しかしクリックできない......

    View full-size slide

  16. 解決:Babylon.jsのバージョンを5.0.0にあげる
    現在(2021/5/23)バージョンは4.2.0
    明示的に
    yarn install
    @babylonjs/[email protected]
    と指定する
    Babylon.js Playgroundは普通に5.0.0
    使ってるので注意

    View full-size slide

  17. できた!

    View full-size slide

  18. Edgeでハンドトラッキングを有効化
    先ほどと同様の手順で実行
    Edgeでedge://flagsにアクセス
    検索バーでwebxrと検索
    WebXR Hand Inputを有効にする

    View full-size slide

  19. ハンドトラッキングを試す
    WebXRFeatureを有効にする
    xr.baseExperience.featuresManager.enableFeature(
    WebXRFeatureName.HAND_TRACKING,
    "latest",
    {
    xrInput: xr.input,
    jointMeshes: {
    enablePhysics: true,
    },
    } as IWebXRHandTrackingOptions
    );

    View full-size slide

  20. できた!

    View full-size slide

  21. 最後にデプロイ
    - GitHub Pagesにデプロイ
    - gh-pages用のConfigを適用
    - Viteだとurlの書き換えが起きるので
    設定が必要
    /*vite.config.ts*/
    const config = defineConfig({
    base: "/repository-name/",
    });
    - httpsなのでWebXR APIも使えて
    嬉しい。感謝。
    name: github pages
    on:
    push:
    branches:
    - main
    jobs:
    deploy:
    runs-on: ubuntu-20.04
    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js
    uses: actions/setup-node@v1
    with:
    node-version: "14.x"
    - run: yarn --frozen-lockfile
    - run: yarn build:gh-pages
    - name: deploy gh-pages
    uses: peaceiris/actions-gh-pages@v3
    with:
    github_token: ${{ secrets.GITHUB_TOKEN }}
    publish_dir: ./dist

    View full-size slide

  22. おわりに

    View full-size slide

  23. まとめ
    - 新しいEdgeでWebXRをしよう!
    - Babylon.jsはバージョン5.0を使うとできる

    View full-size slide

  24. 参考:
    - What’s new in Windows Holographic, version 21H1
    https://techcommunity.microsoft.com/t5/mixed-reality-blog/what-s-new-in-wind
    ows-holographic-version-21h1/ba-p/2337067
    - Babylon.js WebXR Augmented Reality Features
    https://doc.babylonjs.com/divingDeeper/webXR/webXRARFeatures
    - MDN WebXR の幾何学と参照空間
    https://developer.mozilla.org/ja/docs/Web/API/WebXR_Device_API/Geometry
    - demoプロジェクト
    https://github.com/drumath2237/babylon-webar-sandbox

    View full-size slide