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

HoloLens2とMetaQuest2どちらも動くWebXRアプリをBabylon.jsで作る

 HoloLens2とMetaQuest2どちらも動くWebXRアプリをBabylon.jsで作る

Kenta Iwasaki

June 23, 2022
Tweet

More Decks by Kenta Iwasaki

Other Decks in Technology

Transcript

  1. #HoloLens #HoloMagicians

    HoloLens2とMetaQuest2

    どちらも動くWebXRアプリをBabylon.js
    で作る

    株式会社サイバーエージェント 

    Microsoft MVP 

    イワケン/岩﨑謙汰 

    Twitter: @iwaken71 


    View full-size slide

  2. #HoloLens #HoloMagicians

    今日のスライド/コードは公開中

    o スライド

    o https://bit.ly/3MXH6WN 

    o ソースコード

    o https://github.com/iwaken71/babylon_hololens_piano 

    o Webアプリ

    o https://iwaken71.github.io/babylon_hololens_piano/ 


    View full-size slide

  3. #HoloLens #HoloMagicians

    アジェンダ

    1. 自己紹介

    2. Babylon.jsとは

    3. 作ってみたWebXRアプリ

    4. まとめ


    View full-size slide

  4. #HoloLens #HoloMagicians

    イワケン/岩﨑謙汰/iwaken71

    o 4つのXRコミュニティリーダー

    o withAR, IwakenLab, HoloLensMeetUp, 

    Babylon.js勉強会 

    o 株式会社サイバーエージェント

    o CG・XR・メタバースのR&D 

    o 採用強化中 (目標100人) とのこと

    o UnityとHoloLensが好き


    View full-size slide

  5. #HoloLens #HoloMagicians

    アジェンダ

    1. 自己紹介

    2. Babylon.jsとは

    3. 作ってみたWebXRアプリ

    4. まとめ


    View full-size slide

  6. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会

    Babylon.js とは?

    ブラウザ(やネイティブアプリ)で
    - ゲーム作ったり
    - 3D グラフ描画したり
    - AR/VR 空間作ったり
    - 物理演算でピタゴラ作ったり
    - EC サイトの商品を 3D で見れたり
    できる TypeScript-based WebGL エンジン
    https://playground.babylonjs.com/#3I55DK#0

    https://playground.babylonjs.com/#LPTLZM

    https://playground.babylonjs.com/#ZHRWSL#50

    引用: Babylon.js超入門 by やまゆさん 


    View full-size slide

  7. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会

    Babylon.js Word Cloud

    WebGPU

    Viewer

    Native

    Physics

    Animations

    Particles

    Sprites

    Audio Engine

    GUI

    Behaviors

    Node Material

    PBR

    LOD

    Shadow Map

    Post process

    WebXR

    glTF

    Input

    SSAO

    WebGL

    引用: Babylon.js超入門 by やまゆさん 


    View full-size slide

  8. #HoloLens #HoloMagicians

    アジェンダ

    1. 自己紹介

    2. Babylon.jsとは

    3. 作ってみたWebXRアプリ

    4. まとめ


    View full-size slide

  9. #HoloLens #HoloMagicians

    作ってみたWebXRアプリ (Piano)

    チュートリアル: Babylon.js を使用して WebXR でピアノを構築する
    をもとに作りました!→ https://iwaken71.github.io/babylon_hololens_piano/

    View full-size slide

  10. #HoloLens #HoloMagicians

    HoloLens2のブラウザで開く

    起動シーン
 ハンドトラッキング


    View full-size slide

  11. #HoloLens #HoloMagicians

    MetaQuest2のブラウザで開く

    起動→ハンドトラッキング
 コントローラー


    View full-size slide

  12. #HoloLens #HoloMagicians

    Babylon.jsすごポイント

    1つのURLで

    o PC/スマホ

    o Meta Quest2

    o HoloLens2

    標準仕様 (WebXR Device API) にもとづいているから

    クロスブラウザ対応コンテンツにできる!


    View full-size slide

  13. #HoloLens #HoloMagicians

    WebXRのコードは約20行追加しただけ

    WebXR体験導入!
    テレポーテーション機
    能導入!
    ハンドトラッキング機
    能導入!

    View full-size slide

  14. #HoloLens #HoloMagicians

    HandTracking機能を使うために

    このままではHandTracking機能は使えません

    ブラウザで許可をする必要があります。


    View full-size slide

  15. #HoloLens #HoloMagicians

    [HandTracking機能]のブラウザ許可 

    Meta Quest2編 

    ①Meta Quest Browserを開く
    ②「chrome://flags」で検索
    ③「webxr」で検索
    ④「WebXR experiences with hand and joints tracking」を
    Enabledに変える

    View full-size slide

  16. #HoloLens #HoloMagicians

    [HandTracking機能]のブラウザ許可 HoloLens2編 

    ①Microsoft Edgeを開く
    ②「edge://flags」で検索
    ③「webxr」で検索
    ④「WebXR Incubations」をEnabled
    に変える

    View full-size slide

  17. #HoloLens #HoloMagicians

    アジェンダ

    1. 自己紹介

    2. Babylon.jsとは

    3. 作ってみたWebXRアプリ

    4. まとめ


    View full-size slide

  18. #HoloLens #HoloMagicians

    まとめ

    o Babylon.jsでWebXR開発をすると

    1つのURLで複数のデバイス/ブラウザ体験できる

    コンテンツが開発できる

    o 既存のコードに数行追加するだけでお手軽実装

    o HandTrackingはブラウザの許可を忘れずに


    View full-size slide

  19. #HoloLens #HoloMagicians

    Babylon.js始めたいあなたに

    「Babylon.js勉強会」というDiscordコミュニティ作りました

    o 「ブラウザ3D表現に関心ある人のための勉強会」 

    o Babylon.jsの日本コミュニティ

    o これから始める人におススメ


    View full-size slide

  20. #HoloLens #HoloMagicians

    Babylon.js勉強会 Discordの雰囲気

    o Unity出身とWeb出身の人が集まっている 

    o 約200人程度

    o Babylon.jsはこれから学ぶ人がほとんど 

    o 初歩的なところも優しく教えてくれる 

    o 議論がめっちゃ勉強になる 


    View full-size slide

  21. #HoloLens #HoloMagicians

    HoloMagiciansのDiscordも

    盛り上げたい!

    o 少なくとも私は

    o HoloLensの質問をしたい/答えたい

    o HoloLens開発の進捗共有したい

    o この後の懇親会でも

    よろしくお願いします! 


    View full-size slide