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

軽率にWebARアプリでImmersalによるVPSを実装する / localization ...

軽率にWebARアプリでImmersalによるVPSを実装する / localization using immersal in a webar application

VPS座談会でのLT資料です

にー兄さん

August 20, 2022
Tweet

More Decks by にー兄さん

Other Decks in Technology

Transcript

  1. にー兄さん(@ninisan_drumath) - 筑波大学 情報科学類 - HoloLab inc.アルバイト - Microsoft学生アンバサダー -

    Iwaken Lab. Unity・WebAR・VPSが興味領域 Project TSUin-MI: 「つくば市をARネイティブな街にする」が目標 愛猫→
  2. 経緯やモチベーション (2021年HoloLens Edge上での動作を確認) 2021年10月頃に調査を開始 色々進展があったが最後まで実装しきれず中断 2022/7/1にImmersalのdiscordでひっそりアナウンス The WebAR mode has

    now been fixed on the Dev Portal. Works on Android Chrome, and you should have the chrome://flags/#webxr-incubations set to 'enabled'. Sample code: view page source for view.html 再チャレンジするか......→できた
  3. 開発環境 - Immersal REST API(v1.16.1) - Babylon.js 5.x - Vite

    - TypeScript - Chrome for Android (Google Pixel 4a 5G)
  4. 位置合わせに必要な情報 Immersal REST API(後述) のLocalize Imageで必要な情報 • カメラ画像 • カメラ内部パラメータ

    • Immersal開発者トークン • マップID配列 https://immersal.gitbook.io/sdk/api-documentation/rest-api#localize-image-1
  5. 位置合わせに必要な情報 Immersal REST API(後述) のLocalize Imageで必要な情報 • カメラ画像 • カメラ内部パラメータ

    • Immersal開発者トークン • マップID配列 ブラウザ上で取得するのが難しかった (セキュリティ上の問題)
  6. Raw Camera Access WebXR Device APIに含まれる機能の一つ カメラ画像の取得が可能 現在実験的機能なので、 ARCoreが対応したデバイスの Chrome

    for Androidでしか動作しない 加えてWebXR Incubationが有効である必要が ある 詳しくはZennにまとめました https://zenn.dev/drumath2237/articles/52d62638c7d06f
  7. 画像データと内部パラメータの取得 カメラ画像の取得は そのままAPIが利用できる WebGLTextureとして取得できる 内部パラメータは右のような計算式で 取得 let viewerPose = xrFrame.getViewerPose(xrRefSpace);

    for (const view of viewerPose.views) { if (view.camera) { const cameraTexture = binding.getCameraImage(view.camera); } } function getCameraIntrinsics(projectionMatrix, viewport) { const p = projectionMatrix; let u0 = (1 - p[8]) * viewport.width / 2 + viewport.x; let v0 = (1 - p[9]) * viewport.height / 2 + viewport.y; let ax = viewport.width / 2 * p[0]; let ay = viewport.height / 2 * p[5]; let gamma = viewport.width / 2 * p[4]; }
  8. マップ座標 to ワールド座標 Immersal マップ座標系の カメラの姿勢 カメラ座標系の マップの姿勢 ワールド座標系の マップの姿勢

    レスポンスから変換行列を作成 逆変換を計算 リクエスト時のカメラの姿勢を適用 Map Physical World