軽率に足を踏み入れる WebXR実験的機能の世界/dive-into-webxr-device-api-experimental-features

XR Kaigi 2022のコミュニティオーガナイズドセッション（WebXR Tech Tokyo＋Babylon.js勉強会）で登壇した資料です

Transcript

1. 軽率に足を踏み入れる WebXR実験的機能の世界 にー兄さん(@ninisan_drumath) XR Kaigi 2022 コミュニティオーガナイズドセッション
2. 発表資料は公開します👍 スクショ等のSNS共有OKです📸
3. にー兄さん(@ninisan_drumath) エンジニア（学生） ロケーションベースAR / Unity / WebAR / Babylon.js / Azure Kinect 最新技術を使ったデモンストレーションが好き - 筑波大学 情報科学類 - 株式会社ホロラボ アルバイト - Microsoft 学生アンバサダー - Iwaken Lab
4. アジェンダ - WebXR Device APIと実験的機能 - WebXR実験的機能を使う準備 - Raw Camera Access ModuleとImmersalによるWebVPS - Depth Sensing Moduleによる深度値の取得 - おわりに
5. WebXR Device APIとその実験的機能
6. WebブラウザにおけるAR/VRの標準機能 Webブラウザが提供しているXRに関する機能群 →WebXR Device API スマートフォンやMeta Quest・HoloLensなどのHMDでも ブラウザが対応していれば動作する W3Cの中のImmersive WebというWG が標準化を行っている https://immersiveweb.dev/
7. WebXR Device APIの機能群 Moduleという単位で機能が提供されている - Hit Test - Plane Detection - Hand Tracking - Light Estimation - DOM Overlay - etc ……
8. 実験的機能 Moduleの中でも - 安定版としてリリースされていないもの - ごく一部の環境のみで動作するもの ここでは、これらを実験的機能と呼ぶ （とはいえWebXR Device API自体がまだ広く普及していない……）
9. WebXR実験的機能を使う準備
10. まずはWebXR Device API実験的機能を使う準備 まずWebXR Device APIが使える必要がある セキュリティの観点からhttps配信が必須になる 動作するデバイスも必要 →ARCore対応AndroidのGoogle Chromeがあると良い WebGLライブラリと組み合わせるのが吉 → 個人的には Babylon.jsがおすすめ
11. Babylon.jsとWebXR Babylon.jsは高機能なWebGLライブラリ 特にWebGL APIに詳しくなくても使えるし Babylon.js自体の表現力も高い WebXR Device APIを使いやすくラップしたAPIを提供 詳しくは本を書きましたのでぜひ（宣伝）→ https://doc.babylonjs.com/ const xr = await scene.createDefaultXRExperienceAsync();
12. デモプロジェクトのご紹介
13. いままで制作してきたWebARのデモをご紹介 WebXR Device APIの最新機能を使ったデモを2種類 - Raw Camera Access ModuleとImmersalによるWebVPS - Depth Sensing Moduleによる深度値の取得
14. Raw Camera Access Moduleと ImmersalによるWebVPS
15. Raw Camera Access Module WebARアプリからカメラ情報にアクセスできるAPI ARCore対応AndroidデバイスのChromeで動作（2022年現在） カメラのRGB画像をWebGLTextureとして取得したり、 カメラの内部パラメータを取得したりするのに使用 詳しくは記事をご参照ください→ https://zenn.dev/drumath2237/articles/52d62638c7d06f
16. WebVPSのデモンストレーション ImmersalというVPSを使用 カメラ画像とパラメータが必要だったので Raw Camera Accessによって取得している GitHubでプロジェクトを公開してます https://github.com/drumath2237/immersal-babylon-webxr
17. Depth Sensing Moduleによる深度値の取得
18. Depth Sensing Module WebARアプリから深度値を取得できるAPI ARCore対応AndroidのChromeで動作（2022年現在） カメラ画角における深度値を取得できる CPU / GPUモードの2種類があり、得られるデータが違う
19. 深度値取得のデモンストレーション Depth Sensingで取得した深度値配列を Depth画像としてCanvasに描画している GitHubでプロジェクトを公開してます https://github.com/drumath2237/webxr-depth-testbed-babylon
20. おわりに
21. まとめ - WebXR Device APIはブラウザが提供するWebXRに関する機能 - そのなかに実験的な機能がある - 2つの事例を紹介 - Raw Camera Access - Depth Sensing
22. 参考文献 WebXR Proposals https://storage.googleapis.com/chromium-webxr-test/r1067245/proposals/index.html Immersive Web Developer Home https://immersiveweb.dev/ WebXR Samples https://immersive-web.github.io/webxr-samples/ Raw Camera Accessのexplaner https://github.com/immersive-web/raw-camera-access/blob/main/explainer.md Depth Sensingのexplaner https://github.com/immersive-web/depth-sensing/blob/main/explainer.md