babylon.jsの備忘録

2023.10.27 - Tweet

用語


エンジン	canvasと結合し描画やクリックの取得、環境設定など管理する
シーン	エンジンに追加され、様々なものを管理する
ノード
メッシュ	ノードの一つ。シーンに配置する。物の形状。
テクスチャ	マテリアルに適用。表面の画像
マテリアル	メッシュに適用。材質であり、ガラスや金属を透過率、反射率などで決める。
ボディ	メッシュに適用。物理効果を適用するための当たり判定の形状。friction(摩擦)やmass(質量)などの値も持つ
カメラ	ノードの一つ。シーンに配置する。
ライト	ノードの一つ。シーンに配置する。

リソース

ツール

エディター
ダウンロード

GUIエディター
WEBアプリ

プレイグラウンド
WEB上

パーティクルエディター
inspectorライブラリを読み込んでscene.debugLayer.show();を実行

ソース

<!-- 4.9MB->1.4MB ライブラリ本体 -->
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/babylon.max.js"></script>

<!-- 197KB->47KB さまざまなマテリアルを定義するためのクラスや関数を提 -->
<script src="https://cdn.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
<script src="https://cdn.babylonjs.com/materialsLibrary/babylonjs.materials.js"></script>

<!-- 185KB->56KB さまざまな形式の3Dモデルをロードするためのクラスや関数を提供 OBJ、GLTF、Babylon.jsファイルなど -->
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.js"></script>

<!-- 11KB->4KB ポストプロセスというレンダリング後の表示処理の機能 背景をぼかしたり セピア調にしたり -->
<script src="https://cdn.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
<script src="https://cdn.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.js"></script>

<!-- 33KB->8KB プロシージャルテクスチャというプログラムで作ったテクスチャ集 -->
<script src="https://cdn.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
<script src="https://cdn.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.js"></script>

<!-- 92KB->30KB シーンをJSONなどの形式にシリアル化するためのクラスや関数を提供 シリアル化したシーンは別のブラウザやデバイスでロードしてレンダリングができる -->
<script src="https://cdn.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
<script src="https://cdn.babylonjs.com/serializers/babylonjs.serializers.js"></script>

<!-- 662KB->169KB GUIを作成するためのクラスや関数を提供 Button、Checkbox、Sliderなど -->
<script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script>
<script src="https://cdn.babylonjs.com/gui/babylon.gui.js"></script>

<!-- 1.2MB->310KB シーンをデバッグするためのインスペクター -->
<script src="https://cdn.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
<script src="https://cdn.babylonjs.com/inspector/babylon.inspector.bundle.max.js"></script>

<!-- 4.9MB->1.5MB 作成したシーンを簡単に表示するためのツール -->
<script src="https://cdn.babylonjs.com/viewer/babylon.viewer.js"></script>
<script src="https://cdn.babylonjs.com/viewer/babylon.viewer.max.js"></script>

型 babylon.d.ts

https://preview.babylonjs.com/documentation.d.tsでダウンロードできる。

URLはDocリポジトリの/lib/buildUtils/typedoc.utils.tsの中に書いてあった。

メソッド等の確認

(function(){
	let a=[], b=[], c=[], d=[];
	Object.keys(BABYLON).forEach(function(key){
		let type = typeof BABYLON[key];
		let arr = [key, BABYLON[key]];
		if(type==='function'){
			a.push(arr);
		}else if(type==='object'){
			if(Object.values(BABYLON[key]).some(val=>typeof val ==='function')){
				b.push(arr);
			}else{
				c.push(arr);
			}
		}else{
			d.push(arr);
		}
	});
	console.log(a, b, c, d);
})()

(function(){

let a=[], b=[], c=[], d=[];

Object.keys(BABYLON).forEach(function(key){

let type = typeof BABYLON[key];

let arr = [key, BABYLON[key]];

if(type==='function'){

a.push(arr);

}else if(type==='object'){

if(Object.values(BABYLON[key]).some(val=>typeof val ==='function')){

b.push(arr);

}else{

c.push(arr);

}

}else{

d.push(arr);

}

});

console.log(a, b, c, d);

})()

BLOG