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
400
軽率に足を踏み入れる 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 にー兄さん
Babylon.js 8.0のアプデ情報を 軽率にキャッチアップ / catch-up-babylonjs-8
drumath2237
0
120
フォークギター with VFXの 制作を軽率に振り返ろう! / look back fork guitar with vfx
drumath2237
0
24
軽率に始まった Babylon.js勉強会運営の 1年間をふりかえって / look back babylonjs japan activity
drumath2237
0
50
利己的利他、 あるいは軽率2.0に備えよ。 / prepare-for-keisotsu-2.0
drumath2237
0
38
軽率にAndroidXRのJetpack SceneCoreを使って3Dモデルを表示してみる / androidxr-scenecore-3dmodels
drumath2237
0
89
あなたの知らないWebXR Device APIの話を軽率に / about-webxr-device-api-you-dont-know
drumath2237
0
20
UnJSを使って軽率にCLIを作ってみたらめちゃくちゃ便利だった / create CLI with UnJS
drumath2237
4
1.6k
create-babylon-appを軽率にアプデしたい / update create babylon app
drumath2237
1
1.8k
Babylon.js 7注目機能を 軽率にまとめてみる/whats-new-in-babylonjs-v7
drumath2237
1
400
Other Decks in Technology
See All in Technology
Vibe Codingの裏で、 考える力をどう取り戻すか
csekine
2
600
ゆるSRE #11 LT
okaru
1
530
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
6.3k
Test Smarter, Not Harder: Achieving Confidence in Complex Distributed Systems
eliasnogueira
1
140
Eight Engineering Unit 紹介資料
sansan33
PRO
0
3.4k
(新URLに移行しました)FASTと向き合うことで見えた、大規模アジャイルの難しさと楽しさ
wooootack
0
490
型システムを知りたい人のための型検査器作成入門
mame
14
3.3k
Digitization部 紹介資料
sansan33
PRO
1
4.1k
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
12k
エンジニア採用から始まる技術広報と組織づくり/202506lt
nishiuma
8
1.4k
GitHub Copilot Use Cases at ZOZO
horie1024
1
510
脅威をモデリングしてMCPのセキュリティ対策を考えよう
flatt_security
1
460
Featured
See All Featured
The Invisible Side of Design
smashingmag
299
50k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.6k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Code Review Best Practice
trishagee
68
18k
Writing Fast Ruby
sferik
628
61k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
106
19k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
14
1.5k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
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