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

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

View Slide

今日のスライド/コードは公開中 
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 Slide

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

View Slide

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

View Slide

アジェンダ 
1. 自己紹介 
4. まとめ 

View Slide

🗾 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 Slide

🗾 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 Slide

アジェンダ 
1. 自己紹介 
4. まとめ 

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

アジェンダ 
1. 自己紹介 
4. まとめ 

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

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

Kenta Iwasaki

More Decks by Kenta Iwasaki

Other Decks in Technology

Featured

Transcript