HoloLens2のWebARで軽率にImmersalによる位置合わせを行う / Localize using Immersal in WebAR Project in HoloLens2 Edge

Tokyo HoloLensミートアップvol.26での登壇資料になります

Transcript

1. HoloLens2のWebARで
   軽率にImmersalによる
   位置合わせを行う
   にー兄さん(@ninisan_drumath)
   Tokyo HoloLensミートアップ vol.26
   

   View Slide

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

   View Slide

3. スライド資料・作業ログなど
   公開しています👍
   スライドのスクショ📸
   SNS共有OKです(お願いします)
   3
   

   View Slide

4. Agenda
   4
   - やりたいことについて
   - WebAR + Immersal
   - おわりに
   

   View Slide

5. やりたいことについて
   5
   

   View Slide

6. やりたいこと
   Babylon.jsのWebARモードで
   Immersalによる空間の位置合わせを
   HoloLens2の(Chromium-based)Edgeでやってみたい
   やってみたくない......？
   6
   

   View Slide

7. 位置合わせ(Localization)
   - 現実空間とマップ座標の整合性をとる
   - ワールドの座標原点はARアプリ開始位置によって
   変わってくる
   - 世界座標にコンテンツを固定できる
   - Immersalの他、Azure Spatial Anchorsや
   Vuforia Area TargetなどのVPSを使う
   - 他人と体験を共有できるようになる
   マップ原点
   ワールド原点
   (初期位置)
   とても遠いところにある地球の中心
   (世界座標系の原点 )
   7
   

   View Slide

8. Immersal
   - AR Cloud開発で使われるサービス
   - VPSを提供
   - つまり位置合わせができる
   - 連続写真(RBG)を使ってマップを作成
   点群/メッシュも作成できる
   - Unity(Android/iOS)で使える
   SDKがある
   - REST APIによって
   サーバーサイド位置合わせも可能
   - スマホさえあれば手軽に利用できてうれ
   しい
   immersal公式ドキュメントより 8
   

   View Slide

9. WebAR ＋ Immersal
   9
   

   View Slide

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

    View Slide

11. HoloLens2を使ったWebXRについて
    - 5月のOSアップデート21H1
    - EdgeでイマーシブWebXRがサポート(嬉しい)
    - Hand Trackingなども使える(嬉しい)
    - (詳しくはWebXR Tech Tokyo#6で少し話したり)
    11
    

    View Slide

12. (注意)ローカル開発環境でデバッグするために
    - WebXR APIを使いたい
    - LANでもhttps接続が必須
    - 方法は何でもよい
    - opensslコマンドで
    オレオレ証明書作成
    - Viteの場合vite.config.jsに設定
    を追記
    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
    

    View Slide

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

    View Slide

14. 準備：Immersalで部屋のスキャン
    - 部屋の写真を複数枚撮る(下のマップは162枚使った)
    - 一つ前に撮った写真と半分くらい被るようにずらして撮影
    - マップデータおよびply/glbが生成
    14
    

    View Slide

15. 処理の流れ
    カメラ画像
    取得
    鯖サイド
    位置合わせ
    マップの
    座標変換
    15
    Immersal
    REST API
    

    View Slide

16. カメラ画像の取得
    - WebクライアントからHoloLensの背面
    カメラストリームを取得
    - 通常のWebCamアクセスと同じやり方
    で取得可能
    - QC Back Camera(1270x720)
    にアクセスできるっぽい
    const videoElement =
    document.getElementById("video");
    const videoCanvas =
    document.getElementById("videoCapture")
    const width = 1270;
    const height = 720;
    navigator.mediaDevices
    .getUserMedia({
    audio: false,
    video: true,
    })
    .then((stream) => {
    videoElement.srcObject = stream;
    videoElement.autoplay = true;
    videoCanvas.width = width;
    videoCanvas.height = height;
    });
    button.onPointerDownObservable.add(() => {
    videoCanvas
    .getContext("2d")!
    .drawImage(videoElement, 0, 0, width, height);
    const imageURL = videoCanvas.toDataURL();
    }); 16
    

    View Slide

17. Immersal REST API
    - Immersalの機能をサーバサイドで使うためのもの
    - マップ作成、位置合わせ、アカウントやマップの管理など
    - SDKがないプラットフォームでもImmersalを使うことができる
    - 現状だとHoloLensやWebにはSDKがない
    - C#やPythonのサンプルコードがドキュメントに
    - 参考：https://immersal.gitbook.io/sdk/cloud-service/rest-api
    17
    

    View Slide

18. Server-side Localization：リクエスト
    - REST APIを用いて位置合わせを行う
    - postリクエストで次のデータを送信
    - base64エンコードされた画像データ
    - カメラの焦点距離(focal length)
    - カメラの光学中心(principal offset)
    - トークン
    - マップID配列
    - 焦点距離と光学中心はWebAPIから取得で
    きなさそう→別途調査＆直打ち
    - 画像1枚で姿勢推定できるのはすごい......
    interface ImmersalLocalizeRequest {
    token: string,
    fx: number;
    fy: number;
    ox: number;
    oy: number;
    b64: string;
    mapIds: SDKMapId[];
    }
    18
    

    View Slide

19. Server-side Localization：レスポンス
    - 次のデータを受信データ
    - エラーの有無
    - 位置合わせの成功/失敗
    - カメラの位置ベクトル
    - カメラの回転行列
    - 計算時間
    - マップID
    - 送信データに誤りがあればエラー内容だけ
    が返ってくる
    - エラーはないけど位置合わせが失敗、みた
    いなケースもあり
    - データはマップ原点との相対姿勢
    19
    

    View Slide

20. 座標変換 Immersal
    マップ座標系の
    カメラの姿勢
    カメラ座標系の
    マップの姿勢
    ワールド座標系の
    マップの姿勢
    20
    レスポンスから変換行列を作成
    逆変換を計算
    リクエスト時のカメラの姿勢を適用
    Map
    Physical
    World
    

    View Slide

21. demo
    21
    

    View Slide

22. おわりに
    22
    

    View Slide

23. まとめ・感想
    - ImmersalでWebARから位置合わせを行うことができた
    - Web固有の問題でちょっとやりにくいところもある
    - 実装方法などは要検討
    - HoloLens＋WebARに光あれ
    - WebAR＋ARCloudはちょっと期待している
    - インスタントかつプレゼンスの高い表現の可能性を追求したい
    - ちょっととがった技術スタックでの検証は面白い
    23
    

    View Slide

24. 参考資料
    作業ログ：
    https://zenn.dev/drumath2237/scraps/cc4fa2315477f9
    Babylon.js＋HoloLensの発表資料：
    https://speakerdeck.com/drumath2237/edge-on-hololens2deqing-lu-niwebxrsurutokigalai-ta
    Immersal REST API Doc：
    https://immersal.gitbook.io/sdk/cloud-service/rest-api
    Immersal勉強会：
    https://hololab.connpass.com/event/210907/
    Babylon.js WebXR：
    https://doc.babylonjs.com/divingDeeper/webXR/introToWebXR
    HoloLens MediaFrameReader を使ったメディア フレームの処理：
    https://docs.microsoft.com/ja-jp/windows/uwp/audio-video-camera/process-media-frames-with-mediaframereader
    24
    

    View Slide