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
2k
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 にー兄さん
軽率にAndroidXRのJetpack SceneCoreを使って3Dモデルを表示してみる / androidxr-scenecore-3dmodels
drumath2237
0
35
UnJSを使って軽率にCLIを作ってみたらめちゃくちゃ便利だった / create CLI with UnJS
drumath2237
4
1.5k
create-babylon-appを軽率にアプデしたい / update create babylon app
drumath2237
1
1.6k
Babylon.js 7注目機能を 軽率にまとめてみる/whats-new-in-babylonjs-v7
drumath2237
1
320
軽率にVFX Graphと Compute Shaderを 組み合わせるテクニック/integrate-vfxgraph-and-compute-shader
drumath2237
1
400
軽率にVue 3で リアルタイム3Dアプリを作れる ライブラリを作ってみた/vue-with-3d-app
drumath2237
3
1.9k
軽率にBabylon.jsを C#で使う技術 / using-babylonjs-with-csharp
drumath2237
1
870
今こそ軽率に理解したい WebXR Device APIとBabylon.jsの話 / understand-webxr-device-api-and-babylonjs
drumath2237
0
220
Vue・Babylon連携ライブラリ BabyuewJSについて / about-babyuewjs
drumath2237
0
190
Other Decks in Technology
See All in Technology
Raycast Favorites × Script Command で実現するお手軽情報チェック
smasato
1
140
AI Agent時代なのでAWSのLLMs.txtが欲しい!
watany
2
220
EMConf JP 2025 懇親会LT / EMConf JP 2025 social gathering
sugamasao
2
190
Pwned Labsのすゝめ
ken5scal
1
390
Perlの生きのこり - エンジニアがこの先生きのこるためのカンファレンス2025
kfly8
2
270
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
10
3.7k
Share my, our lessons from the road to re:Invent
naospon
0
140
AWSを活用したIoTにおけるセキュリティ対策のご紹介
kwskyk
0
340
4th place solution Eedi - Mining Misconceptions in Mathematics
rist
0
140
実は強い 非ViTな画像認識モデル
tattaka
2
1.2k
2/18 Making Security Scale: メルカリが考えるセキュリティ戦略 - Coincheck x LayerX x Mercari
jsonf
0
180
NFV基盤のOpenStack更新 ~9世代バージョンアップへの挑戦~
vtj
0
350
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
A Philosophy of Restraint
colly
203
16k
It's Worth the Effort
3n
184
28k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
370
Fireside Chat
paigeccino
34
3.2k
How STYLIGHT went responsive
nonsquared
98
5.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
What's in a price? How to price your products and services
michaelherold
244
12k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Code Review Best Practice
trishagee
67
18k
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