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

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

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

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

HoloLens OSアプデが来た

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

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

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

WebAR on Hololensを実装する

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

(注意)ローカル開発環境でデバッグするために - 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

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

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

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

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

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

できた！

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

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

できた！

最後にデプロイ - 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

おわりに

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

参考： - 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