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

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


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

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

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

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

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

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

    ②「chrome://flags」で検索 ③「webxr」で検索 ④「WebXR experiences with hand and joints tracking」を Enabledに変える
  7. #HoloLens #HoloMagicians
 Babylon.js勉強会 Discordの雰囲気
 o Unity出身とWeb出身の人が集まっている 
 o 約200人程度
 o

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