Babylon.js入門

10.9K Views

June 21, 23

スライド概要

下記イベントの資料
https://xr-fukuoka.connpass.com/event/287305/

profile-image

可視化技術や人間計測/空間計測技術を活用した問題解決に関する研究開発。 ARコンテンツ作成勉強会(tryAR)を主催。

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

(ダウンロード不可)

関連スライド

各ページのテキスト
1.

Babylon.js⼊⾨ハンズオン

2.

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

3.

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

4.

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

5.

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

6.

ハッシュタグ #AR_Fukuoka

7.

本題に⼊ります

8.

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

9.

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

10.

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

11.

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

12.

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

13.

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

14.

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

15.

テンプレートの確認

16.

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

17.

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

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

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

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

19.

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

20.

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

21.

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

22.
[beta]
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

23.

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

24.
[beta]
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>

25.

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

26.

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

27.

描画に関する詳細設定をしよう //①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(); //シーンを描画 });

28.
[beta]
描画に関する詳細設定をしよう
//③実際の描画に関する設定(何を描画)
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
};

29.

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

30.

マウス操作で視点変更 //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

31.

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

32.

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

33.

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

34.

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

35.

おまけ︓⾊を変えてみよう //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

36.

おまけ︓位置を変えてみよう //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

37.

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

38.
[beta]
おまけ︓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

39.

おまけ︓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; ここにコードを追加 (次ページで解説)

40.

おまけ︓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

41.

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

42.

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

43.

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

44.

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

45.

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

46.

おまけ︓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); } );

47.

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

48.

おまけ︓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); } );

49.

参考 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