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
軽率に足を踏み入れる WebXR実験的機能の世界/dive-into-webxr-device...
Search
にー兄さん
December 15, 2022
Technology
0
340
軽率に足を踏み入れる WebXR実験的機能の世界/dive-into-webxr-device-api-experimental-features
XR Kaigi 2022のコミュニティオーガナイズドセッション(WebXR Tech Tokyo+Babylon.js勉強会)で登壇した資料です
にー兄さん
December 15, 2022
Tweet
Share
More Decks by にー兄さん
See All by にー兄さん
UnJSを使って軽率にCLIを作ってみたらめちゃくちゃ便利だった / create CLI with UnJS
drumath2237
4
1.1k
create-babylon-appを軽率にアプデしたい / update create babylon app
drumath2237
1
1.3k
Babylon.js 7注目機能を 軽率にまとめてみる/whats-new-in-babylonjs-v7
drumath2237
1
170
軽率にVFX Graphと Compute Shaderを 組み合わせるテクニック/integrate-vfxgraph-and-compute-shader
drumath2237
1
210
軽率にVue 3で リアルタイム3Dアプリを作れる ライブラリを作ってみた/vue-with-3d-app
drumath2237
3
1.8k
軽率にBabylon.jsを C#で使う技術 / using-babylonjs-with-csharp
drumath2237
1
620
今こそ軽率に理解したい WebXR Device APIとBabylon.jsの話 / understand-webxr-device-api-and-babylonjs
drumath2237
0
110
Vue・Babylon連携ライブラリ BabyuewJSについて / about-babyuewjs
drumath2237
0
140
軽率にBabylon.jsの WebGPUエンジンを使って ComputeShaderに入門した / learn-about-babylonjs-webgpu-computeshader
drumath2237
0
590
Other Decks in Technology
See All in Technology
OPENLOGI Company Profile for engineer
hr01
1
12k
ITエンジニアとして知っておいてほしい、電子メールという大きな穴
logica0419
2
300
不感対策ソリューション
jtes
0
230
AI時代のアジャイル開発(XP祭り2024版) / Agile Development in the AI Era in XPJUG
takaking22
13
3.4k
【shownet.conf_】多様化するネットワーク環境を柔軟に統合するルーティングテクノロジー
shownet
PRO
0
280
エムスリーマネジメントチーム紹介資料 / Introduction of M3 Management Team
m3_engineering
0
250
分析者起点の企画を成功させた連携面の工夫
lycorptech_jp
PRO
1
220
Hazard pointers with reference counter
ennael
PRO
0
110
Vista FinderMx
jtes
0
160
Understanding and Optimising INP
akshayysharma
0
150
トークナイザー入門
payanotty
2
380
virtme-ng
ennael
PRO
0
310
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
Speed Design
sergeychernyshev
22
460
The Invisible Customer
myddelton
119
13k
Building a Scalable Design System with Sketch
lauravandoore
459
32k
Fireside Chat
paigeccino
32
2.9k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Navigating Team Friction
lara
183
14k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
59k
Transcript
軽率に足を踏み入れる WebXR実験的機能の世界 にー兄さん(@ninisan_drumath) XR Kaigi 2022 コミュニティオーガナイズドセッション
発表資料は公開します👍 スクショ等のSNS共有OKです📸
にー兄さん(@ninisan_drumath) エンジニア(学生) ロケーションベースAR / Unity / WebAR / Babylon.js /
Azure Kinect 最新技術を使ったデモンストレーションが好き - 筑波大学 情報科学類 - 株式会社ホロラボ アルバイト - Microsoft 学生アンバサダー - Iwaken Lab
アジェンダ - WebXR Device APIと実験的機能 - WebXR実験的機能を使う準備 - Raw Camera
Access ModuleとImmersalによるWebVPS - Depth Sensing Moduleによる深度値の取得 - おわりに
WebXR Device APIとその実験的機能
WebブラウザにおけるAR/VRの標準機能 Webブラウザが提供しているXRに関する機能群 →WebXR Device API スマートフォンやMeta Quest・HoloLensなどのHMDでも ブラウザが対応していれば動作する W3Cの中のImmersive WebというWG
が標準化を行っている https://immersiveweb.dev/
WebXR Device APIの機能群 Moduleという単位で機能が提供されている - Hit Test - Plane Detection
- Hand Tracking - Light Estimation - DOM Overlay - etc ……
実験的機能 Moduleの中でも - 安定版としてリリースされていないもの - ごく一部の環境のみで動作するもの ここでは、これらを実験的機能と呼ぶ (とはいえWebXR Device API自体がまだ広く普及していない……)
WebXR実験的機能を使う準備
まずはWebXR Device API実験的機能を使う準備 まずWebXR Device APIが使える必要がある セキュリティの観点からhttps配信が必須になる 動作するデバイスも必要 →ARCore対応AndroidのGoogle Chromeがあると良い
WebGLライブラリと組み合わせるのが吉 → 個人的には Babylon.jsがおすすめ
Babylon.jsとWebXR Babylon.jsは高機能なWebGLライブラリ 特にWebGL APIに詳しくなくても使えるし Babylon.js自体の表現力も高い WebXR Device APIを使いやすくラップしたAPIを提供 詳しくは本を書きましたのでぜひ(宣伝)→ https://doc.babylonjs.com/
const xr = await scene.createDefaultXRExperienceAsync();
デモプロジェクトのご紹介
いままで制作してきたWebARのデモをご紹介 WebXR Device APIの最新機能を使ったデモを2種類 - Raw Camera Access ModuleとImmersalによるWebVPS -
Depth Sensing Moduleによる深度値の取得
Raw Camera Access Moduleと ImmersalによるWebVPS
Raw Camera Access Module WebARアプリからカメラ情報にアクセスできるAPI ARCore対応AndroidデバイスのChromeで動作(2022年現在) カメラのRGB画像をWebGLTextureとして取得したり、 カメラの内部パラメータを取得したりするのに使用 詳しくは記事をご参照ください→ https://zenn.dev/drumath2237/articles/52d62638c7d06f
WebVPSのデモンストレーション ImmersalというVPSを使用 カメラ画像とパラメータが必要だったので Raw Camera Accessによって取得している GitHubでプロジェクトを公開してます https://github.com/drumath2237/immersal-babylon-webxr
Depth Sensing Moduleによる深度値の取得
Depth Sensing Module WebARアプリから深度値を取得できるAPI ARCore対応AndroidのChromeで動作(2022年現在) カメラ画角における深度値を取得できる CPU / GPUモードの2種類があり、得られるデータが違う
深度値取得のデモンストレーション Depth Sensingで取得した深度値配列を Depth画像としてCanvasに描画している GitHubでプロジェクトを公開してます https://github.com/drumath2237/webxr-depth-testbed-babylon
おわりに
まとめ - WebXR Device APIはブラウザが提供するWebXRに関する機能 - そのなかに実験的な機能がある - 2つの事例を紹介 -
Raw Camera Access - Depth Sensing
参考文献 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