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

https://hololens.connpass.com/event/249363/
Tokyo HoloLens ミートアップ vol.30にLT登壇しました

Google Slideはこちら
https://docs.google.com/presentation/d/1-J_hZhAUc22F3XpS415t6FsHtuYfMGqAVsYo4g1VYgc/edit?usp=sharing

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 この後の懇親会でも
 よろしくお願いします！