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

Slide 1

Slide 1 text

#HoloLens #HoloMagicians  HoloLens2とMetaQuest2  どちらも動くWebXRアプリをBabylon.js で作る  株式会社サイバーエージェント   Microsoft MVP   イワケン/岩﨑謙汰   Twitter: @iwaken71  

Slide 2

Slide 2 text

#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/  

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

#HoloLens #HoloMagicians  イワケン/岩﨑謙汰/iwaken71  o 4つのXRコミュニティリーダー  o withAR, IwakenLab, HoloLensMeetUp,   Babylon.js勉強会   o 株式会社サイバーエージェント  o CG・XR・メタバースのR&D   o 採用強化中 (目標100人) とのこと   o UnityとHoloLensが好き 

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

#HoloLens #HoloMagicians  Babylon.jsすごポイント  1つのURLで  o PC/スマホ  o Meta Quest2  o HoloLens2  標準仕様 (WebXR Device API) にもとづいているから  クロスブラウザ対応コンテンツにできる！ 

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

#HoloLens #HoloMagicians  Babylon.js勉強会 Discordの雰囲気  o Unity出身とWeb出身の人が集まっている   o 約200人程度  o Babylon.jsはこれから学ぶ人がほとんど   o 初歩的なところも優しく教えてくれる   o 議論がめっちゃ勉強になる    

Slide 21

Slide 21 text

#HoloLens #HoloMagicians  HoloMagiciansのDiscordも  盛り上げたい！  o 少なくとも私は  o HoloLensの質問をしたい/答えたい  o HoloLens開発の進捗共有したい  o この後の懇親会でも  よろしくお願いします！    