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
1.9k
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 にー兄さん
UnJSを使って軽率にCLIを作ってみたらめちゃくちゃ便利だった / create CLI with UnJS
drumath2237
4
1.2k
create-babylon-appを軽率にアプデしたい / update create babylon app
drumath2237
1
1.3k
Babylon.js 7注目機能を 軽率にまとめてみる/whats-new-in-babylonjs-v7
drumath2237
1
190
軽率にVFX Graphと Compute Shaderを 組み合わせるテクニック/integrate-vfxgraph-and-compute-shader
drumath2237
1
230
軽率にVue 3で リアルタイム3Dアプリを作れる ライブラリを作ってみた/vue-with-3d-app
drumath2237
3
1.8k
軽率にBabylon.jsを C#で使う技術 / using-babylonjs-with-csharp
drumath2237
1
650
今こそ軽率に理解したい WebXR Device APIとBabylon.jsの話 / understand-webxr-device-api-and-babylonjs
drumath2237
0
120
Vue・Babylon連携ライブラリ BabyuewJSについて / about-babyuewjs
drumath2237
0
150
軽率にBabylon.jsの WebGPUエンジンを使って ComputeShaderに入門した / learn-about-babylonjs-webgpu-computeshader
drumath2237
0
610
Other Decks in Technology
See All in Technology
MobileActOsaka_241018.pdf
akaitadaaki
0
110
ラブグラフ紹介資料 〜プロダクト解体新書〜 / Lovegraph Product Deck
lovegraph
0
14k
寒冷地稲作の歴史にみるコミュニティ
miu_crescent
2
140
JPOUG_10_20241018_OracleDB_AWS_v1.3.pdf
asahihidehiko
1
190
ゼロからはじめる生成AI〜AWS認定とハンズオンで学ぶ初心者の道〜
kenichinakamura
0
140
Nuxt × Vue Router の力を最大限に引き出す機能を紹介
ytr0903
2
330
KongによるAPIライフサイクル マネジメント
hashitokyo
1
160
Deep dive into Nuxt Server Components
wattanx
1
1.3k
Brakeman を欺く - Kashiwa.rb #4
kozy4324
1
100
プログラミング写経のすすめ
natsutan
0
170
WSUSが非推奨に!? Windowsの更新管理を改めて勉強する!
ebibibi
0
580
20241017_俺たちは雰囲気で scope をやっているけどもうちょっとなんとかならんのか?
tokai235
0
360
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
Ruby is Unlike a Banana
tanoku
96
11k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Side Projects
sachag
452
42k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.6k
Making Projects Easy
brettharned
115
5.9k
Speed Design
sergeychernyshev
23
550
The World Runs on Bad Software
bkeepers
PRO
65
11k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
Gamification - CAS2011
davidbonilla
80
5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
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