Babylon.js x WebXRハンズオン for HoloLens 2 and Meta Quest 1,2

Babylon.js x WebXRハンズオン for HoloLens 2 / Meta Quest

もろもろのダウンロード https://github.com/TakashiYoshinaga/AR-Fukuoka/ raw/main/Babylonjs_20220727/Samples.zip

• https://github.com/TakashiYoshinaga/AR-Fukuoka/raw/main/Babylonjs_20220727/Samples.zip

⾃⼰紹介 ⽒名︓吉永崇(Takashi Yoshinaga) 専⾨︓ARを⽤いた医療⽀援や運動計測 Volumetric Video (3Dビデオ) コミュニティ︓ARコンテンツ作成勉強会 主催 [Twitter] @Taka_Yoshinaga

• https://twitter.com/Taka_Yoshinaga

ARコンテンツ作成勉強会の紹介 p 2013年5⽉に勉強会をスタート。 p ARコンテンツの作り⽅をハンズオン形式で学ぶ p ⼈数は5~10名程度の少⼈数で実施 p 参加条件はAR/VRに興味がある⼈(知識不要) p 各地で開催 (福岡、熊本、宮崎、⻑崎、⼤分、 ⿅児島、⼭⼝、広島、札幌、関東)

Twitterと勉強会ページで情報を発信しています @AR_Fukuoka Googleで「AR勉強会」で検索

ハッシュタグ #AR_Fukuoka

本題に⼊ります

本⽇のゴール https://youtu.be/MyY8gUxv0vA Babylon.jsの基本的な使い⽅とMRTKによるハンドインタラクションの活⽤について紹介

• https://youtu.be/MyY8gUxv0vA

テンプレートの複製 https://glitch.com/~babylon-template GET STARTED

• https://glitch.com/~babylon-template

テンプレートの複製 Remix Your Own

テンプレートの確認 index.htmlをクリックし、コードが表⽰されることを確認 index.html

テンプレートの確認 index.htmlをクリックし、コードが表⽰されることを確認 エディタ Preview

テンプレートの確認 index.htmlをクリックし、コードが表⽰されることを確認 エディタ Preview

補⾜︓Previewが表⽰されない場合 PREVIEW

補⾜︓Previewが表⽰されない場合 Open preview pane

ハンズオンの⼿順 PCのWebブラウザ 3D空間の作成 HoloLens/Quest XRモード MRTKによるインタラクション ハンドトラッキングON

テンプレートの確認 Lesson01

テンプレートの確認 ライブラリの読み込み 描画やインタラクション の記述(今⽇のメイン) 描画領域のレイアウト

テンプレートの確認 描画領域のレイアウト

HTMLの記述の解説
<!--描画する領域-->
<canvas id="renderCanvas" style="width: 100%; height: 100%;"></canvas>

idはjavascriptからアクセスする際に使⽤

ウィンドウ内、めいっぱいのサイズでcanvasを貼り付け

テンプレートの確認 ライブラリの読み込み

テンプレートの確認 描画やインタラクション の記述(今⽇のメイン)

ハンズオンの⼿順 PCのWebブラウザ 3D空間の作成 HoloLens/Quest XRモード MRTKによるインタラクション ハンドトラッキングON

変数の宣⾔ ここに変数を追加 //ページの読み込み終了後に各種初期化を⾏う window.onload = function() { } //3D空間の初期化 function createScene() { } //WebXRの初期化 async function initializeXR(){ } //表⽰オブジェクトの初期化 function addObjects(){ }

変数の宣⾔ let canvas; //canvas要素 (描画領域) ← 「どこに」描画するか let engine; //Babylon.jsによる描画機能 ← 「何を使って」描画するか let scene; //仮想3D空間 ← 「何を」描画するか //ページの読み込み終了後に各種初期化を⾏う window.onload = function() { } //3D空間の初期化 function createScene() { } //WebXRの初期化 async function initializeXR(){ } Lesson02

Babylon.jsを⽤いた描画機能の初期化 let canvas; //canvas要素 (描画領域) let engine; //Babylon.jsによる描画機能 let scene; //仮想3D空間 //ページの読み込み終了後に各種初期化を⾏う window.onload = function() { //描画領域(canvas要素)をHTMLから取得 canvas = document.getElementById("renderCanvas"); //Babylon.jsを使って描画する準備 (引数︓描画先,アンチエイリアス) engine = new BABYLON.Engine(canvas, true); //カメラやライトの設定を⾏ったscene(3D空間)を取得 scene= createScene(); } //3D空間の初期化 function createScene() { } Lesson03

シーン(3D空間)の初期化 let canvas; //canvas要素 (描画領域) let engine; //Babylon.jsによる描画機能 let scene; //仮想3D空間 //ページの読み込み終了後に各種初期化を⾏う window.onload = function() { //描画領域(canvas要素)を取得 canvas = document.getElementById("renderCanvas"); //Babylon.jsを使って描画する準備 (引数︓描画先,アンチエイリアス) engine = new BABYLON.Engine(canvas, true); //カメラやライトの設定を⾏ったscene(3D空間)を作成 createScene(); } //3D空間の初期化 function createScene() { } シーンの初期化処理を記述(次⾴) Lesson04

シーン(3D空間)の初期化
function createScene() {
//3D空間を作成
scene = new BABYLON.Scene(engine);
//背景⾊を設定
scene.clearColor = new BABYLON.Color3.Black();
//Lightを設定 (引数︓名前,反射の⽅向,追加先)
let light = new BABYLON.HemisphericLight("light",
new BABYLON.Vector3(1, 1, -0.5) ,scene);
//カメラを作成 [詳細]
let camera = new BABYLON.ArcRotateCamera(
"camera",
//名前
-Math.PI/2, Math.PI/2, 3, //alpha,beta,距離
new BABYLON.Vector3(0, 0, 0)); //注視点
//マウスやキーボードによるカメラ操作を可能にする
camera.attachControl(canvas, true);
}

Lesson05

• https://doc.babylonjs.com/divingDeeper/cameras/camera_introduction

実際に描画しよう //ページの読み込み終了後に各種初期化を⾏う window.onload = function() { //描画領域(canvas要素)を取得 canvas = document.getElementById("renderCanvas"); //Babylon.jsで描画する準備 (引数︓描画先,アンチエイリアス) engine = new BABYLON.Engine(canvas, true); //カメラやライトの設定を⾏ったscene(3D空間)を作成 createScene(); //毎フレーム描画を更新 engine.runRenderLoop(function () { if (scene && scene.activeCamera) { scene.render(); //描画︕ } }); } Lesson06

確認 Previewの背景が指定した⾊(=⿊)になる

オブジェクトを描画 //ページの読み込み終了後に各種初期化を⾏う window.onload = function() { //描画領域(canvas要素)を取得 canvas = document.getElementById("renderCanvas"); //Babylon.jsで描画する準備 (引数︓描画先,アンチエイリアス) engine = new BABYLON.Engine(canvas, true); //カメラやライトの設定を⾏ったscene(3D空間)を作成 createScene(); //描画オブジェクトの作成 addObjects(); //毎フレーム描画を更新 engine.runRenderLoop(function () { if (scene && scene.activeCamera) { scene.render(); } }); Lesson07 }

オブジェクトを描画 次はここを編集

オブジェクトを描画
function addObjects(){

}

//地⾯を作成 (原点の位置確認⽤。後で削除してOK)
let ground = BABYLON.MeshBuilder.CreateGround(
"ground", {width: 1, height: 1});
//箱状のオブジェクト作成 (30cm)
let box = BABYLON.MeshBuilder.CreateBox(
"box", {width: 0.3, height: 0.3, depth: 0.3});
box.position.x = 0.0;
box.position.y = 1; //地⾯(ground)から1mの⾼さ
//マテリアルを作成
let boxMaterial = new BABYLON.StandardMaterial("material");
//箱の⾊を設定 (今回はランダムに変化)、そのあとboxに適⽤
boxMaterial.diffuseColor = BABYLON.Color3.Random();
box.material = boxMaterial;
//8⾯体を作成
let octa = BABYLON.MeshBuilder.CreatePolyhedron("octa", {type:1,size: 0.15});
octa.position.x=0.5;
octa.position.y=1;
Lesson08

確認 箱と⼋⾯体が表⽰される

確認 camera.attachControl(canvas, true);の⼀⾏でマウスやキーボード操作に対応 初期視点 左クリックドラッグで回転 スクロールで前後移動 右クリックドラッグで 上下左右移動

ハンズオンの⼿順 PCのWebブラウザ 3D空間の作成 HoloLens/Quest XRモード MRTKによるインタラクション ハンドトラッキングON

QuestやHoloLens2で体験可能にしよう window.onload = function() { /*スペースの都合上、省略*/ //描画オブジェクトの作成 addObjects(); //XRモードの初期化 initializeXR(); //毎フレーム描画を更新 engine.runRenderLoop(function () { if (scene && scene.activeCamera) { scene.render(); } }); } //WebXRの初期化 async function initializeXR(){ let xr = await scene.createDefaultXRExperienceAsync({/*オプション*/ }); } Lesson09

実機での体験前にURLを変更 Settingsをクリック

実機での体験前にURLを変更 Edit project details ここを分かりやすく変更 最後にSave

URLを確認 をクリック Copy Link

URLを確認 テキストエディタなどに貼り付けてURLを確認 https://⾃⾝でつけた名前.glitch.me/

動作確認 HoloLens2 URLを⼊⼒ ゴーグルボタン Quest URLを⼊⼒ ゴーグルボタン WebブラウザのアドレスバーにコンテンツのURLを⼊⼒後、ゴーグルボタンをタップ/クリック

動作確認

終了⽅法 HoloLens2 ホームボタン Quest 閉じるボタン ⼿⾸タップ(HoloLens2)やOculusボタン(Quest)からウィンドウを表⽰してコンテンツを終了

ハンズオンの⼿順 PCのWebブラウザ 3D空間の作成 HoloLens/Quest XRモード MRTKによるインタラクション ハンドトラッキングON

オブジェクトを操作(1)
function addObjects(){
/*スペースの都合上、省略*/
//箱の⾊をランダムに設定
let boxMaterial = new BABYLON.StandardMaterial("material");
boxMaterial.diffuseColor = BABYLON.Color3.Random();
box.material = boxMaterial;
//8⾯体を作成
let octa = BABYLON.MeshBuilder.CreatePolyhedron("octa", {type:1,size: 0.15});
octa.position.x=0.5;
octa.position.y=1;
//boxに⼿で掴んで移動できる属性を追加
let sixDofDragBehavior = new BABYLON.SixDofDragBehavior();
sixDofDragBehavior.allowMultiPointer = false;
sixDofDragBehavior.rotateWithMotionController = false;
box.addBehavior(sixDofDragBehavior);
}

Lesson10

PCで動作確認(マウス操作)

実機で動作確認 再読み込み 再読み込み 必ず再読み込みボタンをクリック

実機で動作確認 Questユーザーは現時点ではコントローラのみ対応

オブジェクトを操作(2)
function addObjects(){
/*スペースの都合上、省略*/
let boxMaterial = new BABYLON.StandardMaterial("material");
boxMaterial.diffuseColor = BABYLON.Color3.Random();
box.material = boxMaterial;
//8⾯体を作成
let octa = BABYLON.MeshBuilder.CreatePolyhedron("octa", {type:1,size: 0.15});
octa.position.x=0.5;
octa.position.y=1;
//boxに⼿で掴んで移動できる属性を追加
let sixDofDragBehavior = new BABYLON.SixDofDragBehavior();
sixDofDragBehavior.allowMultiPointer=false;
sixDofDragBehavior.rotateWithMotionController=false;
box.addBehavior(sixDofDragBehavior);
}

バウンディングボックスを⽤いた操作を追加(次⾴)

オブジェクトを操作(2) //boxに⼿で掴んで移動できる属性を追加 let sixDofDragBehavior = new BABYLON.SixDofDragBehavior(); sixDofDragBehavior.allowMultiPointer=false; sixDofDragBehavior.rotateWithMotionController=false; box.addBehavior(sixDofDragBehavior); //バウンディングボックスを⽤いた操作 var gizmoManager = new BABYLON.GizmoManager(scene); gizmoManager.boundingBoxGizmoEnabled = true; gizmoManager.boundingBoxDragBehavior.allowMultiPointer=false; //スケーリング設定(スケーリングの許可,等倍スケーリング) gizmoManager.gizmos.boundingBoxGizmo.setEnabledScaling(true,true); //⾒た⽬の設定 gizmoManager.gizmos.boundingBoxGizmo.scaleBoxSize=0.04; gizmoManager.gizmos.boundingBoxGizmo.rotationSphereSize=0.05; //⼋⾯体オブジェクトを登録 gizmoManager.attachableMeshes = [octa]; Lesson11

PCで動作確認(マウス操作)

実機で動作確認 再読み込み 再読み込み 必ず再読み込みボタンをクリック

実機で動作確認 Questユーザーは現時点ではコントローラのみ対応

ハンズオンの⼿順 PCのWebブラウザ 3D空間の作成 HoloLens/Quest XRモード MRTKによるインタラクション ハンドトラッキングON

ハンドトラッキングをON (For Quest)
//WebXRの初期化
async function initializeXR() {
let xr = await scene.createDefaultXRExperienceAsync({});
//XRモード利⽤可能か不可かを確認
if (!xr.baseExperience) { }
else {
//利⽤可能な場合はハンドトラッキングをオンにする
xr.baseExperience.featuresManager.enableFeature(
BABYLON.WebXRFeatureName.HAND_TRACKING,
"latest",
{xrInput: xr.input}
);
}
}

Lesson12

実機で動作確認

完成︕

参考 Camera https://doc.babylonjs.com/divingDeeper/cameras/camera_introduction WebXR Experience Helper https://doc.babylonjs.com/divingDeeper/webXR/webXRExperienceHelpers#webxr-defaultexperience-helper MRTK https://doc.babylonjs.com/divingDeeper/gui/mrtk SixDofDragBehaviour https://doc.babylonjs.com/typedoc/classes/BABYLON.SixDofDragBehavior GizmoManager https://doc.babylonjs.com/typedoc/classes/BABYLON.GizmoManager Gizmos https://doc.babylonjs.com/divingDeeper/mesh/gizmo Hand Tracking https://doc.babylonjs.com/divingDeeper/webXR/WebXRSelectedFeatures#hand-tracking

• https://doc.babylonjs.com/divingDeeper/cameras/camera_introduction
• https://doc.babylonjs.com/divingDeeper/webXR/webXRExperienceHelpers
• https://doc.babylonjs.com/divingDeeper/gui/mrtk
• https://doc.babylonjs.com/typedoc/classes/BABYLON.SixDofDragBehavior
• https://doc.babylonjs.com/typedoc/classes/BABYLON.GizmoManager
• https://doc.babylonjs.com/divingDeeper/mesh/gizmo
• https://doc.babylonjs.com/divingDeeper/webXR/WebXRSelectedFeatures