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

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

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

Bf0e54ea0d4ea19343ccfbe5d410a96b?s=128

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 

  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/ 

  3. #HoloLens #HoloMagicians
 アジェンダ
 1. 自己紹介
 2. Babylon.jsとは
 3. 作ってみたWebXRアプリ
 4.

    まとめ

  4. #HoloLens #HoloMagicians
 イワケン/岩﨑謙汰/iwaken71
 o 4つのXRコミュニティリーダー
 o withAR, IwakenLab, HoloLensMeetUp, 


    Babylon.js勉強会 
 o 株式会社サイバーエージェント
 o CG・XR・メタバースのR&D 
 o 採用強化中 (目標100人) とのこと 
 o UnityとHoloLensが好き

  5. #HoloLens #HoloMagicians
 アジェンダ
 1. 自己紹介
 2. Babylon.jsとは
 3. 作ってみたWebXRアプリ
 4.

    まとめ

  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 やまゆさん 

  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 やまゆさん 

  8. #HoloLens #HoloMagicians
 アジェンダ
 1. 自己紹介
 2. Babylon.jsとは
 3. 作ってみたWebXRアプリ
 4.

    まとめ

  9. #HoloLens #HoloMagicians
 作ってみたWebXRアプリ (Piano)
 チュートリアル: Babylon.js を使用して WebXR でピアノを構築する をもとに作りました!→

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

  10. #HoloLens #HoloMagicians
 HoloLens2のブラウザで開く
 起動シーン
 ハンドトラッキング


  11. #HoloLens #HoloMagicians
 MetaQuest2のブラウザで開く
 起動→ハンドトラッキング
 コントローラー


  12. #HoloLens #HoloMagicians
 Babylon.jsすごポイント
 1つのURLで
 o PC/スマホ
 o Meta Quest2
 o

    HoloLens2
 標準仕様 (WebXR Device API) にもとづいているから
 クロスブラウザ対応コンテンツにできる!

  13. #HoloLens #HoloMagicians
 WebXRのコードは約20行追加しただけ
 WebXR体験導入! テレポーテーション機 能導入! ハンドトラッキング機 能導入!

  14. #HoloLens #HoloMagicians
 HandTracking機能を使うために
 このままではHandTracking機能は使えません
 ブラウザで許可をする必要があります。


  15. #HoloLens #HoloMagicians
 [HandTracking機能]のブラウザ許可 
 Meta Quest2編 
 ①Meta Quest Browserを開く

    ②「chrome://flags」で検索 ③「webxr」で検索 ④「WebXR experiences with hand and joints tracking」を Enabledに変える
  16. #HoloLens #HoloMagicians
 [HandTracking機能]のブラウザ許可 HoloLens2編 
 ①Microsoft Edgeを開く ②「edge://flags」で検索 ③「webxr」で検索 ④「WebXR

    Incubations」をEnabled に変える
  17. #HoloLens #HoloMagicians
 アジェンダ
 1. 自己紹介
 2. Babylon.jsとは
 3. 作ってみたWebXRアプリ
 4.

    まとめ

  18. #HoloLens #HoloMagicians
 まとめ
 o Babylon.jsでWebXR開発をすると
 1つのURLで複数のデバイス/ブラウザ体験できる
 コンテンツが開発できる
 o 既存のコードに数行追加するだけでお手軽実装
 o

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

  19. #HoloLens #HoloMagicians
 Babylon.js始めたいあなたに
 「Babylon.js勉強会」というDiscordコミュニティ作りました
 o 「ブラウザ3D表現に関心ある人のための勉強会」 
 o Babylon.jsの日本コミュニティ
 o

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

  20. #HoloLens #HoloMagicians
 Babylon.js勉強会 Discordの雰囲気
 o Unity出身とWeb出身の人が集まっている 
 o 約200人程度
 o

    Babylon.jsはこれから学ぶ人がほとんど 
 o 初歩的なところも優しく教えてくれる 
 o 議論がめっちゃ勉強になる 
 

  21. #HoloLens #HoloMagicians
 HoloMagiciansのDiscordも
 盛り上げたい!
 o 少なくとも私は
 o HoloLensの質問をしたい/答えたい
 o HoloLens開発の進捗共有したい


    o この後の懇親会でも
 よろしくお願いします!