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による位置合わせを行う / Localize using Immersal in WebAR Project in HoloLens2 Edge
Search
にー兄さん
June 16, 2021
Technology
0
1.7k
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 にー兄さん
軽率にVFX Graphと Compute Shaderを 組み合わせるテクニック/integrate-vfxgraph-and-compute-shader
drumath2237
1
39
軽率にVue 3で リアルタイム3Dアプリを作れる ライブラリを作ってみた/vue-with-3d-app
drumath2237
3
1.4k
軽率にBabylon.jsを C#で使う技術 / using-babylonjs-with-csharp
drumath2237
1
340
今こそ軽率に理解したい WebXR Device APIとBabylon.jsの話 / understand-webxr-device-api-and-babylonjs
drumath2237
0
22
Vue・Babylon連携ライブラリ BabyuewJSについて / about-babyuewjs
drumath2237
0
64
軽率にBabylon.jsの WebGPUエンジンを使って ComputeShaderに入門した / learn-about-babylonjs-webgpu-computeshader
drumath2237
0
360
Snapdragon Spacesを通して Unity XRプラグインフレームワーク について軽率に学ぶ / about snapdragon spaces sdk and unity xr framework
drumath2237
0
340
Babylon.jsユーザのためのCLIを軽率にnpmで公開した話 / about create babylon app CLI
drumath2237
0
510
軽率な執筆活動 / writing books roughly
drumath2237
0
32
Other Decks in Technology
See All in Technology
競技としてのKaggle、役に立つKaggle
yu4u
3
1.4k
require(ESM)とECMAScript仕様
uhyo
3
680
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
120
開発パフォーマンスを最大化するための開発体制
ham0215
2
410
家族アルバム みてねにおけるGrafana活用術 / Grafana Meetup Japan Vol.1 LT
isaoshimizu
1
740
反実仮想機械学習とは何か
usaito
PRO
11
4.6k
DevOpsメトリクスとアウトカムの接続にトライ!開発プロセスを通して計測できるメトリクスの活用方法
ham0215
2
240
MLOpsの「壁」を乗り越える、LINEヤフーの Data Quality as Code
lycorptech_jp
PRO
5
520
障害対応をちょっとずつよくしていくための 演習の作りかた
heleeen
0
210
推しは推せるときに推せ! プロダクトにフィードバックしていこう
nakasho
0
310
LayerXにおけるLLMプロダクト開発の今までとこれから
layerx
PRO
1
260
20240418_Google ColabにLLMが搭載されたようなのでPython x データ分析の勉強方法を考えてみる
doradora09
0
130
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
24
2k
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
Design by the Numbers
sachag
274
18k
Making the Leap to Tech Lead
cromwellryan
124
8.5k
Designing for Performance
lara
601
67k
The Invisible Customer
myddelton
114
12k
Building Flexible Design Systems
yeseniaperezcruz
319
37k
Art, The Web, and Tiny UX
lynnandtonic
289
19k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Practical Orchestrator
shlominoach
182
9.7k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
121
39k
Statistics for Hackers
jakevdp
789
220k
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