Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
HoloLens2のWebARで軽率にImmersalによる位置合わせを行う / Locali...
Search
にー兄さん
June 16, 2021
Technology
0
2.1k
HoloLens2のWebARで軽率にImmersalによる位置合わせを行う / Localize using Immersal in WebAR Project in HoloLens2 Edge
Tokyo HoloLensミートアップvol.26での登壇資料になります
にー兄さん
June 16, 2021
Tweet
Share
More Decks by にー兄さん
See All by にー兄さん
エンジニアが軽率に趣味から始める、OSS貢献を軸とした個人活動 / oss-contribution-as-a-hoby-project
drumath2237
0
31
Babylon.js 8.0のアプデ情報を 軽率にキャッチアップ / catch-up-babylonjs-8
drumath2237
0
130
フォークギター with VFXの 制作を軽率に振り返ろう! / look back fork guitar with vfx
drumath2237
0
27
軽率に始まった Babylon.js勉強会運営の 1年間をふりかえって / look back babylonjs japan activity
drumath2237
0
52
利己的利他、 あるいは軽率2.0に備えよ。 / prepare-for-keisotsu-2.0
drumath2237
0
40
軽率にAndroidXRのJetpack SceneCoreを使って3Dモデルを表示してみる / androidxr-scenecore-3dmodels
drumath2237
0
110
あなたの知らないWebXR Device APIの話を軽率に / about-webxr-device-api-you-dont-know
drumath2237
0
32
UnJSを使って軽率にCLIを作ってみたらめちゃくちゃ便利だった / create CLI with UnJS
drumath2237
4
1.6k
create-babylon-appを軽率にアプデしたい / update create babylon app
drumath2237
1
1.8k
Other Decks in Technology
See All in Technology
5min GuardDuty Extended Threat Detection EKS
takakuni
0
180
AWS Organizations 新機能!マルチパーティ承認の紹介
yhana
1
210
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
120
PHPでWebブラウザのレンダリングエンジンを実装する
dip_tech
PRO
0
220
「良さそう」と「とても良い」の間には 「良さそうだがホンマか」がたくさんある / 2025.07.01 LLM品質Night
smiyawaki0820
1
420
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
0
270
モバイル界のMCPを考える
naoto33
0
310
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
140
Node-RED × MCP 勉強会 vol.1
1ftseabass
PRO
0
170
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
290
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
tomzoh
4
3.4k
MySQL5.6から8.4へ 戦いの記録
kyoshidaxx
1
290
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
The World Runs on Bad Software
bkeepers
PRO
69
11k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Being A Developer After 40
akosma
90
590k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
How to Ace a Technical Interview
jacobian
277
23k
Automating Front-end Workflow
addyosmani
1370
200k
Unsuck your backbone
ammeep
671
58k
Writing Fast Ruby
sferik
628
62k
A designer walks into a library…
pauljervisheath
207
24k
Gamification - CAS2011
davidbonilla
81
5.3k
Visualization
eitanlees
146
16k
Transcript
HoloLens2のWebARで 軽率にImmersalによる 位置合わせを行う にー兄さん(@ninisan_drumath) Tokyo HoloLensミートアップ vol.26
自己紹介 - にー兄さん(@ninisan_drumath) - 筑波大学 情報科学類(coins18) - 3DCGが好き UnityやWebGLで遊ぶのが好き - Vオタク
2
スライド資料・作業ログなど 公開しています👍 スライドのスクショ📸 SNS共有OKです(お願いします) 3
Agenda 4 - やりたいことについて - WebAR + Immersal - おわりに
やりたいことについて 5
やりたいこと Babylon.jsのWebARモードで Immersalによる空間の位置合わせを HoloLens2の(Chromium-based)Edgeでやってみたい やってみたくない......? 6
位置合わせ(Localization) - 現実空間とマップ座標の整合性をとる - ワールドの座標原点はARアプリ開始位置によって 変わってくる - 世界座標にコンテンツを固定できる - Immersalの他、Azure
Spatial Anchorsや Vuforia Area TargetなどのVPSを使う - 他人と体験を共有できるようになる マップ原点 ワールド原点 (初期位置) とても遠いところにある地球の中心 (世界座標系の原点 ) 7
Immersal - AR Cloud開発で使われるサービス - VPSを提供 - つまり位置合わせができる - 連続写真(RBG)を使ってマップを作成
点群/メッシュも作成できる - Unity(Android/iOS)で使える SDKがある - REST APIによって サーバーサイド位置合わせも可能 - スマホさえあれば手軽に利用できてうれ しい immersal公式ドキュメントより 8
WebAR + Immersal 9
開発環境など - Babylon.js - WebGLライブラリ - WebXR対応が簡単 - MicrosoftがWebXRするのに押していてイイ感じ -
Microsoft Mesh対応も待ちどおしい - Vite - Webフロントエンドのビルドシステム - 複雑な設定が要らず、融通が利くイメージ - ノーバンドルで開発時は爆速ビルド - loaderの設定なしでTypeScriptやPostCSSを導入できる - プロジェクトテンプレートが利用できる - 今回はvanilla-tsで作る 10
HoloLens2を使ったWebXRについて - 5月のOSアップデート21H1 - EdgeでイマーシブWebXRがサポート(嬉しい) - Hand Trackingなども使える(嬉しい) - (詳しくはWebXR
Tech Tokyo#6で少し話したり) 11
(注意)ローカル開発環境でデバッグするために - 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
Babylon.jsでWebARを使う const xr = await scene .createDefaultXRExperienceAsync({ uiOptions: { sessionMode:
"immersive-ar", referenceSpaceType: "unbounded", }, }); 13
準備:Immersalで部屋のスキャン - 部屋の写真を複数枚撮る(下のマップは162枚使った) - 一つ前に撮った写真と半分くらい被るようにずらして撮影 - マップデータおよびply/glbが生成 14
処理の流れ カメラ画像 取得 鯖サイド 位置合わせ マップの 座標変換 15 Immersal REST
API
カメラ画像の取得 - WebクライアントからHoloLensの背面 カメラストリームを取得 - 通常のWebCamアクセスと同じやり方 で取得可能 - QC Back
Camera(1270x720) にアクセスできるっぽい const videoElement = <HTMLVideoElement>document.getElementById("video"); const videoCanvas = <HTMLCanvasElement>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
Immersal REST API - Immersalの機能をサーバサイドで使うためのもの - マップ作成、位置合わせ、アカウントやマップの管理など - SDKがないプラットフォームでもImmersalを使うことができる -
現状だとHoloLensやWebにはSDKがない - C#やPythonのサンプルコードがドキュメントに - 参考:https://immersal.gitbook.io/sdk/cloud-service/rest-api 17
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
Server-side Localization:レスポンス - 次のデータを受信データ - エラーの有無 - 位置合わせの成功/失敗 - カメラの位置ベクトル
- カメラの回転行列 - 計算時間 - マップID - 送信データに誤りがあればエラー内容だけ が返ってくる - エラーはないけど位置合わせが失敗、みた いなケースもあり - データはマップ原点との相対姿勢 19
座標変換 Immersal マップ座標系の カメラの姿勢 カメラ座標系の マップの姿勢 ワールド座標系の マップの姿勢 20 レスポンスから変換行列を作成
逆変換を計算 リクエスト時のカメラの姿勢を適用 Map Physical World
demo 21
おわりに 22
まとめ・感想 - ImmersalでWebARから位置合わせを行うことができた - Web固有の問題でちょっとやりにくいところもある - 実装方法などは要検討 - HoloLens+WebARに光あれ -
WebAR+ARCloudはちょっと期待している - インスタントかつプレゼンスの高い表現の可能性を追求したい - ちょっととがった技術スタックでの検証は面白い 23
参考資料 作業ログ: 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