Save 37% off PRO during our Black Friday Sale! »

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

E123f0d70182268563d4e63e23d8c55c?s=47 にー兄さん
May 24, 2021
790

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

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

E123f0d70182268563d4e63e23d8c55c?s=128

にー兄さん

May 24, 2021
Tweet

Transcript

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

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

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

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

  5. HoloLens OSアプデが来た

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

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

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

  9. WebAR on Hololensを実装する

  10. 開発環境など - Babylon.jsを使う - WebGLライブラリ - WebXR対応が簡単 - MicrosoftがWebXRするのに押していてイイ感じ -

    Microsoft Mesh対応も待ちどおしい - Vite - Webフロントエンドのビルドシステム - 複雑な設定が要らず、融通が利くイメージ - ノーバンドルで開発時は爆速ビルド - loaderの設定なしでTypeScriptやPostCSSを導入できる - プロジェクトテンプレートが利用できる - 今回はvanilla-tsで作る
  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
  12. Babylon.jsでWebARを使う const xr = await scene .createDefaultXRExperienceAsync({ uiOptions: { sessionMode:

    "immersive-ar", referenceSpaceType: "unbounded", }, });
  13. (余談)Reference Spaceについて さまざまなデバイスに対応するための概 念 unbounded:制限のない空間。原点から 離れて使われることを考慮 Babylon.jsではWebARの場合 unboundedじゃないと警告が出る MDN Web

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

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

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

  17. できた!

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

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

    enablePhysics: true, }, } as IWebXRHandTrackingOptions );
  20. できた!

  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
  22. おわりに

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

  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