Babylon.js入門

Babylon.js⼊⾨ハンズオン

サンプル素材のダウンロード https://github.com/TakashiYoshinaga/AR-Fukuoka/ raw/main/Babylonjs_20230621/Sample.zip

• https://github.com/TakashiYoshinaga/AR-Fukuoka/raw/main/Babylonjs_20230621/Sample.zip

⾃⼰紹介 ⽒名︓吉永崇 (Takashi Yoshinaga) 仕事︓AR/VR応⽤に関するR&D。主に医療⽀援 ウェアラブル・モーションキャプチャ技術開発 Volumetric Video遠隔コミュニケーション コミュニティ︓ARコンテンツ作成勉強会を主催

ARコンテンツ作成勉強会(略称:AR Fukuoka)の概要 [形式] AR/VRコンテンツの作り⽅や関連技術を主にハンズオン形式で体験。 [規模] 参加⼈数はコロナ前は約5~10名/回、現在は約10~20名/回。 [参加条件] AR/VRの開発に興味があれば初⼼者⼤歓迎。専⾨知識は不要。

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

ハッシュタグ #AR_Fukuoka

本題に⼊ります

本⽇のゴール Babylon.jsの基本的な使い⽅について紹介 https://get-started-with-babylonjs.glitch.me/

• https://get-started-with-babylonjs.glitch.me/

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

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

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

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

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

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

補⾜︓Previewが表⽰されない場合 Open preview paneで 画⾯右側にプレビューが表⽰される

テンプレートの確認

テンプレートの確認 の読み込み

テンプレートの確認 描画領域(Canvas要素)をページ内にフルサイズで配置

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

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

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

テンプレートの確認 ここまでの内容がBabylon.jsを使う前の下準備︕

テンプレートの確認 javascriptでCanvasへの実際の描画処理を記述(今⽇のメイン!)

Babylon.jsでCanvasに描画する準備 ここにコードを追加 (次ページで解説)

Babylon.jsでCanvasに描画する準備
<script type="text/javascript">
//①Canvas要素の取得(どこに描画)
const canvas = document.getElementById("renderCanvas");
//②Babylon.jsの初期化(何を使って描画)
const engine = new BABYLON.Engine(canvas, true);
//③実際の描画に関する設定(何を描画)
function CreateScene() {
//シーン(3D空間)を⽣成
const scene = new BABYLON.Scene(engine);
return scene;
};
//上記の描画関数を実⾏ (functionは定義だけでは実⾏されない)
const scene = CreateScene();
</script>

Lesson01

Babylon.jsでCanvasに描画する準備 プレビューに何も表⽰されない

Babylon.jsでCanvasに描画する準備
<script type="text/javascript">
//①Canvas要素の取得(どこに描画)
const canvas = document.getElementById("renderCanvas");
//②Babylon.jsの初期化(何を使って描画)
const engine = new BABYLON.Engine(canvas, true);
//③実際の描画に関する設定(何を描画)
function CreateScene() {
//シーン(3D空間)を⽣成
const scene = new BABYLON.Scene(engine);
return scene;
};
//上記の描画関数を実⾏ (functionは定義だけでは実⾏されない)
const scene = CreateScene();
ここに上記を反映させるコードを追加 (次ページで解説)

</script>

Babylon.jsでCanvasに描画する準備 //①Canvas要素の取得(どこに描画) const canvas = document.getElementById("renderCanvas"); //②Babylon.jsの初期化(何を使って描画) const engine = new BABYLON.Engine(canvas, true); //③実際の描画に関する設定(何を描画) function CreateScene() { const scene = new BABYLON.Scene(engine); return scene; }; //上記の描画関数を実⾏ (functionは定義だけでは実⾏されない) const scene = CreateScene(); //毎フレーム更新 engine.runRenderLoop(function () { scene.render(); //シーンを描画 }); Lesson02

動作確認 プレビューの背景⾊が変わった。 何か描いているっぽい

描画に関する詳細設定をしよう //①Canvas要素の取得(どこに描画) const canvas = document.getElementById("renderCanvas"); //②Babylon.jsの初期化(何を使って描画) const engine = new BABYLON.Engine(canvas, true); //③実際の描画に関する設定(何を描画) function CreateScene() { const scene = new BABYLON.Scene(engine); return scene; }; //上記の描画関数を実⾏ (functionは定義だけでは実⾏されない) const scene = CreateScene(); //毎フレーム更新 ここを編集︕ engine.runRenderLoop(function () { scene.render(); //シーンを描画 });

描画に関する詳細設定をしよう
//③実際の描画に関する設定(何を描画)
function CreateScene() {
//3D空間の作成
const scene = new BABYLON.Scene(engine);
//Parameters: name, alpha, beta, radius, target position, scene
const camera = new BABYLON.ArcRotateCamera(
"camera",
//名前
-Math.PI/2, Math.PI/2, 3, //alpha,beta,距離
new BABYLON.Vector3(0, 0, 0), scene); //注視点,追加先
//ライトの設定(引数︓名前,反射の⽅向,追加先)
const light = new BABYLON.HemisphericLight(
"light", new BABYLON.Vector3(0.5, 0.5, -1), scene);
//表⽰オブジェクト(Box)を追加
const box = BABYLON.MeshBuilder.CreateBox("box",{/*オプション*/},scene);
return scene;
Lesson03
};

動作確認 オブジェクトが表⽰される

マウス操作で視点変更 //3D空間の作成 const scene = new BABYLON.Scene(engine); //Parameters: name, alpha, beta, radius, target position, scene const camera = new BABYLON.ArcRotateCamera( "camera", //名前 -Math.PI/2, Math.PI/2, 3, //alpha,beta,距離 new BABYLON.Vector3(0, 0, 0)); //注視点 //カメラの挙動をcanvasの操作と連動させる camera.attachControl(canvas, true); //ライトの設定(引数︓名前,反射の⽅向,追加先) const light = new BABYLON.HemisphericLight( "light", new BABYLON.Vector3(0.5, 0.5, -1), scene); //表⽰オブジェクト(Box)を追加 const box = BABYLON.MeshBuilder.CreateBox("box"); return scene; Lesson04

動作確認 マウス操作で視点を変更することで空間を⾃由な視点で観察できる 初期視点 左クリック+ドラッグで回転 スクロールで前後移動 右クリック+ドラッグで 上下左右移動

仕上げ︓画⾯のリサイズに対応 この辺りにコードを追加

仕上げ︓画⾯のリサイズに対応 //ウィンドウのリサイズに対応 window.addEventListener("resize", function () { engine.resize(); }); Lesson05

Babylon.jsを使⽤するまでの基本⼿順はここまで

おまけ︓⾊を変えてみよう //Boxを追加 const box = BABYLON.MeshBuilder.CreateBox("box",{/*オプション*/},scene); //⾊設定のためのマテリアルを作成 const boxMaterial=new BABYLON.StandardMaterial("material",scene); //マテリアルに⾊を設定(パラメーターはr,g,b) boxMaterial.diffuseColor=new BABYLON.Color3(0,1,1); //マテリアルをboxに適⽤ box.material=boxMaterial; Lesson06

おまけ︓位置を変えてみよう //Boxを追加 const box = BABYLON.MeshBuilder.CreateBox("box",{/*オプション*/},scene); //⾊設定のためのマテリアルを作成 const boxMaterial=new BABYLON.StandardMaterial("material",scene); //マテリアルに⾊を設定(パラメーターはr,g,b) boxMaterial.diffuseColor=new BABYLON.Color3(0,1,1); //マテリアルをboxに適⽤ box.material=boxMaterial; //boxを横に移動 box.position.x=1; Lesson07

おまけ︓3Dモデル(glb)を表⽰しよう ここで3Dモデル読み込み機能を追加(次ページ)

おまけ︓3Dモデル(glb)を表⽰しよう
<head>
<title>Babylon Template</title>
<!--babylon.jsの読み込み-->
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<!̶3Dモデルローダーを読み込み-->
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js">
</script>
</head>

Lesson08

おまけ︓3Dモデル(glb)を表⽰しよう CreateScene関数内 //Boxを追加 const box = BABYLON.MeshBuilder.CreateBox("box",{/*オプション*/},scene); //⾊設定のためのマテリアルを作成 const boxMaterial=new BABYLON.StandardMaterial("material",scene); //マテリアルに⾊を設定(パラメーターはr,g,b) boxMaterial.diffuseColor=new BABYLON.Color3(0,1,1); //マテリアルをboxに適⽤ box.material=boxMaterial; //boxを横に移動 box.position.x=1; ここにコードを追加 (次ページで解説)

おまけ︓3Dモデル(glb)を表⽰しよう //SceneLoaderを使って3Dモデルを読み込む BABYLON.SceneLoader.LoadAssetContainer( "3DモデルのURL", //3Dモデルが置かれたフォルダ or 3DモデルのURL "", //3Dモデルのファイル名。上記でモデルのURLを指定した場合は空でOK scene, //オブジェクトを追加する先のScene function (container) { //Babylon.jsでは0番⽬のメッシュはただのroot。1番⽬にモデルの実体。[詳細] let glbMesh = container.meshes[1]; //scene(3D空間)にオブジェクトを追加 scene.addMesh(glbMesh); } ); Lesson09

• https://doc.babylonjs.com/features/featuresDeepDive/importers/glTF

おまけ︓3Dモデルのアップロード Assets

おまけ︓3Dモデルのアップロード figure.glb ブラウザ内にドラッグ&ドロップ

おまけ︓3Dモデルのアップロード クリック

おまけ︓3Dモデルのアップロード CopyURLをクリック

おまけ︓3Dモデルのアップロード 閉じる

おまけ︓3Dモデル(glb)を表⽰しよう //SceneLoaderを使って3Dモデルを読み込む BABYLON.SceneLoader.LoadAssetContainer( "3DモデルのURL", //3Dモデルが置かれたフォルダ or 3DモデルのURL "", //3Dモデルのファイル名。上記でモデルのURLを指定した場合は空でOK ここをURLに差し替える scene, //オブジェクトを追加する先のScene ※" "は消さない function (container) { //Babylon.jsでは0番⽬のメッシュはただのroot。1番⽬にモデルの実体。[詳細] let glbMesh = container.meshes[1]; //scene(3D空間)にオブジェクトを追加 scene.addMesh(glbMesh); } );

• https://doc.babylonjs.com/features/featuresDeepDive/importers/glTF

動作確認 数cmサイズのオブジェクトが表⽰される ※glbオブジェクトのサイズによって⾒え⽅は異なる

おまけ︓3Dモデル(glb)を表⽰しよう BABYLON.SceneLoader.LoadAssetContainer( "3DモデルのURL", //3Dモデルが置かれたフォルダ or 3DモデルのURL "", //3Dモデルのファイル名。上記でモデルのURLを指定した場合は空でOK scene, //オブジェクトを追加する先のScene function (container) { //Babylon.jsでは0番⽬のメッシュはただのroot。1番⽬にモデルの実体。[詳細] let glbMesh = container.meshes[1]; //scene(3D空間)にオブジェクトを追加 scene.addMesh(glbMesh); //スケールを10倍 glbMesh.scaling=new BABYLON.Vector3(10,10,10); //Y軸(=鉛直⽅向の軸)を中⼼に180度(=πラジアン)回転 glbMesh.rotation =new BABYLON.Vector3(0, Math.PI, 0); } );

• https://doc.babylonjs.com/features/featuresDeepDive/importers/glTF

参考 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 Hand Tracking https://doc.babylonjs.com/divingDeeper/webXR/WebXRSelectedFeatures#hand-tracking SceneLoader https://doc.babylonjs.com/typedoc/classes/BABYLON.SceneLoader ARモード(Questパススルー対応) https://doc.babylonjs.com/features/featuresDeepDive/webXR/webXRARFeatures#features

• 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/divingDeeper/webXR/WebXRSelectedFeatures
• https://doc.babylonjs.com/typedoc/classes/BABYLON.SceneLoader
• https://doc.babylonjs.com/features/featuresDeepDive/webXR/webXRARFeatures