Tweet
Tweet

Slide 1

Slide 1 text

軽率に足を踏み入れる WebXR実験的機能の世界 にー兄さん(@ninisan_drumath) XR Kaigi 2022 コミュニティオーガナイズドセッション

Slide 2

Slide 2 text

発表資料は公開します👍 スクショ等のSNS共有OKです📸

Slide 3

Slide 3 text

にー兄さん(@ninisan_drumath) エンジニア（学生） ロケーションベースAR / Unity / WebAR / Babylon.js / Azure Kinect 最新技術を使ったデモンストレーションが好き - 筑波大学 情報科学類 - 株式会社ホロラボ アルバイト - Microsoft 学生アンバサダー - Iwaken Lab

Slide 4

Slide 4 text

アジェンダ - WebXR Device APIと実験的機能 - WebXR実験的機能を使う準備 - Raw Camera Access ModuleとImmersalによるWebVPS - Depth Sensing Moduleによる深度値の取得 - おわりに

Slide 5

Slide 5 text

WebXR Device APIとその実験的機能

Slide 6

Slide 6 text

WebブラウザにおけるAR/VRの標準機能 Webブラウザが提供しているXRに関する機能群 →WebXR Device API スマートフォンやMeta Quest・HoloLensなどのHMDでも ブラウザが対応していれば動作する W3Cの中のImmersive WebというWG が標準化を行っている https://immersiveweb.dev/

Slide 7

Slide 7 text

WebXR Device APIの機能群 Moduleという単位で機能が提供されている - Hit Test - Plane Detection - Hand Tracking - Light Estimation - DOM Overlay - etc ……

Slide 8

Slide 8 text

実験的機能 Moduleの中でも - 安定版としてリリースされていないもの - ごく一部の環境のみで動作するもの ここでは、これらを実験的機能と呼ぶ （とはいえWebXR Device API自体がまだ広く普及していない……）

Slide 9

Slide 9 text

WebXR実験的機能を使う準備

Slide 10

Slide 10 text

まずはWebXR Device API実験的機能を使う準備 まずWebXR Device APIが使える必要がある セキュリティの観点からhttps配信が必須になる 動作するデバイスも必要 →ARCore対応AndroidのGoogle Chromeがあると良い WebGLライブラリと組み合わせるのが吉 → 個人的には Babylon.jsがおすすめ

Slide 11

Slide 11 text

Babylon.jsとWebXR Babylon.jsは高機能なWebGLライブラリ 特にWebGL APIに詳しくなくても使えるし Babylon.js自体の表現力も高い WebXR Device APIを使いやすくラップしたAPIを提供 詳しくは本を書きましたのでぜひ（宣伝）→ https://doc.babylonjs.com/ const xr = await scene.createDefaultXRExperienceAsync();

Slide 12

Slide 12 text

デモプロジェクトのご紹介

Slide 13

Slide 13 text

いままで制作してきたWebARのデモをご紹介 WebXR Device APIの最新機能を使ったデモを2種類 - Raw Camera Access ModuleとImmersalによるWebVPS - Depth Sensing Moduleによる深度値の取得

Slide 14

Slide 14 text

Raw Camera Access Moduleと ImmersalによるWebVPS

Slide 15

Slide 15 text

Raw Camera Access Module WebARアプリからカメラ情報にアクセスできるAPI ARCore対応AndroidデバイスのChromeで動作（2022年現在） カメラのRGB画像をWebGLTextureとして取得したり、 カメラの内部パラメータを取得したりするのに使用 詳しくは記事をご参照ください→ https://zenn.dev/drumath2237/articles/52d62638c7d06f

Slide 16

Slide 16 text

WebVPSのデモンストレーション ImmersalというVPSを使用 カメラ画像とパラメータが必要だったので Raw Camera Accessによって取得している GitHubでプロジェクトを公開してます https://github.com/drumath2237/immersal-babylon-webxr

Slide 17

Slide 17 text

Depth Sensing Moduleによる深度値の取得

Slide 18

Slide 18 text

Depth Sensing Module WebARアプリから深度値を取得できるAPI ARCore対応AndroidのChromeで動作（2022年現在） カメラ画角における深度値を取得できる CPU / GPUモードの2種類があり、得られるデータが違う

Slide 19

Slide 19 text

深度値取得のデモンストレーション Depth Sensingで取得した深度値配列を Depth画像としてCanvasに描画している GitHubでプロジェクトを公開してます https://github.com/drumath2237/webxr-depth-testbed-babylon

Slide 20

Slide 20 text

おわりに

Slide 21

Slide 21 text

まとめ - WebXR Device APIはブラウザが提供するWebXRに関する機能 - そのなかに実験的な機能がある - 2つの事例を紹介 - Raw Camera Access - Depth Sensing

Slide 22

Slide 22 text

参考文献 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