Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

にー兄さん

December 15, 2022
Tweet

More Decks by にー兄さん

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  5. WebXR Device APIとその実験的機能

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  9. WebXR実験的機能を使う準備

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  14. Raw Camera Access Moduleと
    ImmersalによるWebVPS

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  20. おわりに

    View Slide

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

    View Slide

  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

    View Slide