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
410
軽率に足を踏み入れる 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 にー兄さん
軽率にプログラミング言語のシンタックスについて考えてみよう / lets-think-about-programming-lang-syntax
drumath2237
0
47
エンジニアが軽率に趣味から始める、OSS貢献を軸とした個人活動 / oss-contribution-as-a-hoby-project
drumath2237
0
32
Babylon.js 8.0のアプデ情報を 軽率にキャッチアップ / catch-up-babylonjs-8
drumath2237
0
160
フォークギター with VFXの 制作を軽率に振り返ろう! / look back fork guitar with vfx
drumath2237
0
32
軽率に始まった Babylon.js勉強会運営の 1年間をふりかえって / look back babylonjs japan activity
drumath2237
0
57
利己的利他、 あるいは軽率2.0に備えよ。 / prepare-for-keisotsu-2.0
drumath2237
0
47
軽率にAndroidXRのJetpack SceneCoreを使って3Dモデルを表示してみる / androidxr-scenecore-3dmodels
drumath2237
0
110
あなたの知らないWebXR Device APIの話を軽率に / about-webxr-device-api-you-dont-know
drumath2237
0
40
UnJSを使って軽率にCLIを作ってみたらめちゃくちゃ便利だった / create CLI with UnJS
drumath2237
4
1.6k
Other Decks in Technology
See All in Technology
Shadow DOM & Security - Exploring the boundary between light and shadow
masatokinugawa
0
670
The Madness of Multiple Gemini CLIs Developing Simultaneously with Jujutsu
gunta
1
2.6k
経験がないことを言い訳にしない、 AI時代の他領域への染み出し方
parayama0625
0
170
エンジニアリングマネージャー“お悩み相談”パネルセッション
ar_tama
1
680
P2P ではじめる WebRTC のつまづきどころ
tnoho
1
220
AI時代にも変わらぬ価値を発揮したい: インフラ・クラウドを切り口にユーザー価値と非機能要件に向き合ってエンジニアとしての地力を培う
netmarkjp
0
220
Turn Your Community into a Fundraising Catalyst for Black Philanthropy Month
auctria
PRO
0
140
OTel 公式ドキュメント翻訳 PJ から始めるコミュニティ活動/Community activities starting with the OTel official document translation project
msksgm
0
260
「現場で活躍するAIエージェント」を実現するチームと開発プロセス
tkikuchi1002
6
1k
TROCCO今昔
gtnao
0
210
スプリントレビューを効果的にするために
miholovesq
9
1.6k
QuickBooks®️ Customer®️ USA Contact Numbers: Complete 2025 Support Guide
qbsupportinfo
0
110
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
How GitHub (no longer) Works
holman
314
140k
Speed Design
sergeychernyshev
32
1k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Music & Morning Musume
bryan
46
6.7k
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