BabylonJS-はじめに
Babylon.jsは、ウェブ用の3Dアプリケーション/ビデオゲームの開発に使用されるjavascriptオープンソースフレームワークです。 BabylonJSの公式Webサイトはhttps://www.babylonjs.com/[www.babylonjs.com]です。
Babylon.jsフレームワークの使用はユーザーにとって簡単です。 3Dオブジェクト、特殊効果、サウンドなどを作成および管理するために必要なすべてのツールが含まれています。
Babylon.jsは最も人気のある3Dゲームエンジンの1つであり、開発者によって広く使用されています。 3Dライブラリであるため、組み込み関数を提供します。 これらの関数は、効率的で正確な方法で一般的な3D機能を実装するのに役立ちます。
WebGLとjavascriptに基づくTypeScript言語を使用して開発されています。
WebGLとは何ですか?
WebGL(Web Graphics Library)は、Web上の3Dグラフィックスの新しい標準です。 2Dグラフィックとインタラクティブな3Dグラフィックのレンダリングを目的に設計されています。 これは、電話やその他のモバイルデバイス向けの低レベル3D APIであるOpenGLのES 2.0ライブラリから派生しています。 WebGLはES 2.0(Embedded Systems)と同様の機能を提供し、最新の3Dグラフィックスハードウェアで良好に機能します。
TypeScript
定義では、「TypeScriptはアプリケーション規模の開発のためのJavaScriptです。」
TypeScriptは、強く型付けされたオブジェクト指向のコンパイル言語です。 TypeScriptは言語であり、ツールのセットでもあります。 TypeScriptは、JavaScriptにコンパイルされたJavaScriptの型付きスーパーセットです。 つまり、TypeScriptはJavaScriptといくつかの追加機能です。
TypeScript言語の目標は、JavaScriptコードの生成を改善および保護することです。BabylonJSはTypScriptを使用して開発されているため、堅牢で安全です。
BabylonJS-環境設定
この章では、BabylonJSの環境を設定する方法を学びます。
セットアップを開始するには、Babylon.jsの公式Webサイト(https://www.babylonjs.com/[www.babylonjs.com])にアクセスしてください。 ダウンロードセクションに移動して、Babylon.jsの最新バージョンを選択し、フォルダーに保存します。
同じためのスクリーンショットは次のとおりです-
BabylonJS Website Screenshot
また、GITHUBに移動して、babylonjsプロジェクトのクローンを作成することもできます-
Babylon.js
コマンドラインで次のように入力します-
必要なファイルは、BabylonJSフォルダーにあります。
VSCode(Microsoft Visual Studio Code)を編集に使用できます。コードには、エラーの強調表示、構文の強調表示などの機能が組み込まれています。 任意のエディターを使用できますが、VSCodeのみを使用することは必須ではありません。
BabylonJS-概要
3Dアニメーションの世界では、形状は三角形で描画されます。WebGLでは、プロセスに関係する大量のコーディングによって複雑さが増します。 BabylonJSは、複雑さの増大を緩和するための取り組みが簡単なソリューションです。 ここでは、ライト、カメラ、エンジンのAPIを簡単に処理し、3Dオブジェクトを作成できます。
babylonJSのソースコードはtypescriptでコーディングされています。Javascriptにコンパイルされ、エンドユーザーが利用できるようになります。
Babylonjsでの作業を開始するには、babylonjsファイルをダウンロードし、最後にホストしてください。3Dコードを書き始める準備ができています。
BabylonJSは2016年にMicrosoftの従業員によって開発されました。MicrosoftのWindow&Devices GroupのプリンシパルプログラムマネージャーであるDavid Catuheは、BabylonJsの開発と大成功を収めた主な人物です。
BabylonJSを実行するには、WEBGLをサポートする最新のブラウザーが必要です。 Internet Explorer 11以上、Firefox 4以上、Google Chrome 9以上、Opera 15以上などの最新のブラウザ WEBGLをサポートしており、デモを実行して出力を確認できます。
BabylonJsは、さまざまなタイプの3Dシーンの作成に役立つ以下の機能を提供します-
- 箱、球、円柱、円錐、高さのような形
- カメラ、ライト
- メッシュ、テクスチャ、マテリアル
- スプライト
- モーフィング
- メッシュ交差点と衝突検出
- 物理エンジンプラグイン
- アクションマネージャー
- SolidParticles
- インスタンスとパーティクル
- 骨とスケルトンのサポート
- シーンに音楽とサウンドを追加する
BabylonJSでは、独自のメッシュに加えて、Blender、FBX、3DS Maxなどのサードパーティの3Dソフトウェアから作成されたメッシュを使用することもできます。
ブレンダー
Blenderは、アニメーションシーン、3Dプリントモデル、ビデオゲームなどの作成に使用されるオープンソースの3Dコンピュータグラフィックスソフトウェア製品です。 Blenderが提供します。 バビロンでメッシュをレンダリングするために使用されるbablyonファイル。 ファイルをBlenderからBabylonに変換する方法は、このチュートリアルの後続の章で説明されています。
FBX
フィルムボックスとも呼ばれ、3Dアニメーションおよびテクスチャペイントソフトウェアに役立ちます。 FBXファイルは、拡張子.fbxで保存されます。
MAX
MAXソフトウェアは、ゲームで巨大な世界を作成し、デザインの魅力的なシーンを作成し、バーチャルリアリティの魅力的な体験を支援します。
BabylonJS-基本要素
Babylon.jsは、開発者向けの3Dゲームの構築を支援する一般的なフレームワークです。 3D機能を実装するための組み込み関数があります。 Babylon.jsを使用して簡単なデモを作成し、開始に必要な基本機能を理解しましょう。
最初に、Babylon.jsの基本要素を含むデモを作成します。 さらに、Babylon.jsのさまざまな機能も学習します。
サンプルデモ1
このセクションでは、BabylonJSの基本要素を含むデモを作成する方法を学びます。
Babylonjs Basic Elements
BabylonJSを実行するには、WEBGLをサポートする最新のブラウザーが必要です。 最新のブラウザ-Internet Explorer 11以上、Firefox 4以上、Google Chrome 9以上、Opera 15以上など WEBGLをサポートしており、同じプラットフォームでデモを実行して出力を確認できます。 babylonjsのファイルを保存するディレクトリを作成します。 BabylonJSサイトから最新のBabylonJSscriptsファイルを取得します。 このチュートリアルのすべてのデモリンクは、babylonjsバージョン3.3でテストされています。
ステップ1
- シンプルなhtmlページを作成し、Babylon.jsファイルを含めます。
- 以下に示すように、bodyタグ内にBabylonJSによってコンテンツをレンダリングするために使用されるキャンバスタグを作成します。
- cssをキャンバスに追加して、画面の幅と高さ全体を占有します。
ステップ2
キャンバスにコンテンツをレンダリングするためのBabylonJScodeから始めましょう。
次に、html構造にscriptタグを追加し、キャンバス参照を変数canvasに保存します。
Babylon.jsを開始するには、エンジンインスタンスを作成し、キャンバス参照を渡してレンダリングします。
BABYLONグローバルオブジェクトには、エンジンで使用可能なすべてのBabylon.js関数が含まれています。
ステップ3
このステップでは、最初にシーンを作成します。
シーンは、すべてのコンテンツが表示される場所です。 さまざまな種類のオブジェクトを作成し、同じものをシーンに追加して、画面に表示します。 シーンを作成するには、作成済みのhtml構造に次のコードを追加します。 現在、上記のhtml構造の続きとして、作成済みのコードに追加します。
最終的なhtmlファイルは次のようになります-
上記の例では、CreateScene関数が定義されており、var scene = createScene()が関数を呼び出しています。
CreateScene関数には内部にシーンが作成され、次の行はシーンに色を追加します。これはBABYLON.Color3(1、0.8、0.8)を使用して行われ、ここの色はピンクです。
ブラウザで上記のデモリンクを実行しても、ブラウザ画面には何も表示されません。 ステップ4のようにengine.runRenderLoopと呼ばれるコードに追加するステップがもう1つあります。
ステップ4
シーンを実際に画面に表示するには、engine.runRenderLoop呼び出しを使用してシーンをレンダリングする必要があります。 これがどのように行われるかを見てみましょう。
レンダリングループ
Engine.runRenderLoop関数はscene.renderを呼び出します。これはシーンをレンダリングし、ユーザーに見えるようにします。 最終的なlは次のようになります-
上記のファイルをbasicscenelとして保存し、ブラウザで出力を確認します。 表示される画面は、以下に示すようにピンク色です-
ピンク出力ブラウザー画面
ステップ5
シーンができたので、カメラを追加する必要があります。
カメラとライトを追加する
以下のコードは、シーンにカメラを追加します。 バビロンで使用できるカメラには多くの種類があります。
次に、光を追加する方法を理解する必要があります。
ライトは、各ピクセルが受け取る拡散および鏡面反射色を生成するために使用されます。 ライトには多くの種類があります。 ライトセクションでは、さまざまなタイプのライトについて学習します。
ここでは、シーンでPointLightを使用しています。 PointLightは、theSunのようなあらゆる方向に放出されます。 パラメータは、名前、位置、使用するシーンです。
光を追加するには、次のコードを実行します-
ステップ6
形状を追加する方法を見てみましょう。
図形の追加
上記で共有したデモには、4つの図形が追加されています。
球体を追加するには、次のコードを実行します-
球体が追加されると、コードは次のようになります-
出力
上記のコードは、次の出力を生成します-
シーン
ここで、他の形状-トーラスとボックスを追加しましょう。 次のコードを実行して、トーラス形状を追加します。
ボックスに位置を追加します。 BABYLON.Vector3(-5、0、0)は、x、y、z方向を取ります。
実行時に、上記のコードは次の出力を生成します-
トーラス形状
ここで、上のスクリーンショットに示されている最終形状であるシリンダーを追加しましょう。
位置は、x方向5の円柱に追加されます。 最終的なコードは以下のとおりです-
出力
実行時に、上記のコードは次の出力を生成します-
基本要素の形状
形状は、カーソルを移動する方向に従って移動します。同じことは、カメラをシーンにアタッチするコントロールを使用して行われます。
次に、各形状について詳しく説明します。
ここにすべての形状と構文の概要があります-
基本要素-位置、回転、スケーリング
このセクションでは、これまでに追加した要素を配置、回転、または拡大縮小する方法を学習します。
箱、球、円柱、結び目などを作成しました。 次に、形状の配置、拡大縮小、回転の方法を確認します。
Sr.No.
|
Element & Description
|
1
|
Position
位置を変更すると、メッシュはある位置から別の位置に変更されます。
|
2
|
Rotation
回転すると、メッシュはメッシュの周りを回転します。
|
3
|
Scaling
メッシュのスケーリングは、x、y、またはz軸に関して実行できます。
|
基本要素-子育て
Parentingを使用して、メッシュ間に親子関係を作成し、メッシュの動作を確認します。 したがって、親にどのような変換を適用しても、子にも同じ変換が適用されます。 以下に示すデモでも同じことを理解しましょう。
Demo
出力
基本的な要素の子育て
説明
上記のメッシュに3つのボックスを作成しました。 デモでは、boxbスケーリングが適用され、boxcの親として割り当てられます。boxcは、親boxbと同じものがスケーリングされるため、スケーリングも行います。 デモをいじって、親子リンクの動作を確認できます。
メッシュを作成するには、別のメッシュの親を使用する必要があります-
- child.parent = parentmesh;
基本要素-環境
このセクションでシーン環境について説明しましょう。 *シーンの背景色、アンビエントカラー、スカイボックス、フォグモード*などについて説明します。 シーンで。
シーンの背景色
シーンの背景色がどのように機能するかを見てみましょう。
構文
以下は、シーンの背景色の構文です-
上記のプロパティは、シーンの背景色を変更します。
シーンのアンビエントカラー
シーンのアンビエントカラーがどのように機能するかを見てみましょう。
構文
シーンのアンビエントカラーの構文は次のとおりです-
AmbientColorは、 StandardMaterial 環境色およびテクスチャとともに使用されます。 シーンにambientColorがない場合、 StandardMaterial.ambientColor および StandardMaterial.ambientTexture は効果がありません。 StandardMaterial ambientColor/ambientTextureは、シーンのambientColorが適用されるとアクティブになります。 デフォルトでは、シーンには scene.ambientColor が与えられ、 Color3 (0、0、0)に設定されます。これは、ambientColorがないことを意味します。
シーンフォグモード
これで、シーンフォグモードの仕組みを理解できます。
構文
次に、シーンフォグモードの構文を示します。
利用可能なフォグモードの次のリスト-
- BABYLON.Scene.FOGMODE_NONE -デフォルトの1つ。フォグは非アクティブです。
- BABYLON.Scene.FOGMODE_EXP -フォグ密度は指数関数に従います。
- BABYLON.Scene.FOGMODE_EXP2 -上記と同じですが高速です。
- BABYLON.Scene.FOGMODE_LINEAR -フォグ密度は線形関数に従います。
フォグモードEXPまたはEXP2が定義されている場合、次のように密度を定義できます-
フォグモードがLINEARの場合、フォグの開始位置と終了位置を次のように定義できます-
霧に色を与えるには、次のコードを実行します-
スカイボックス
Skyboxは、ゲームで背景を作成する方法で、シーンをリアルに見せます。 マテリアルに使用されているテクスチャで覆われている、画面のラッパーのようなものです。 画像を適切に選択して、作成するシーンで現実的に見えるようにします。 スカイボックスを作成するには、ボックスを作成してマテリアルを適用する必要があります。 さまざまな資料については、後続の章で詳しく説明します。
次に、ボックスとマテリアルを使用してスカイボックスを作成する方法を見ていきます。
シーン全体を覆うように、サイズ100のボックスを作成します。 私たちは次のように行われるボックスに材料を与えることから始めます-
このマテリアルに、プロパティを割り当てます。
基本的にミラーのようなマテリアルを作成するために使用される反射テクスチャを使用する必要があります。 反射テクスチャプロパティは、入力として画像を取得するCubeTextureを使用します。 キューブには6つの面があるため、スカイボックスに必要な画像は6である必要があります。つまり、内部でskybox_nx、skybox_ny、skybox_nz、skybox_px、skybox_py、skybox_pzとして保存する必要があります。 スカイボックスに使用される画像は以下に貼り付けられます。これらは6面すべての立方体の面です。 テクスチャをシェイプに適用すると、使用される画像の詳細が表示され、シーンがリアルに見えます。 以下に示すように、SKYBOX_MODEとして座標モードを使用しました-
backfaceCulling、diffuseColor、specularColor、disableLightingなどのようなマテリアルに使用される他のプロパティがあります。 プロパティについては、素材のセクションで詳しく説明します。
デモでは、スカイボックスを使用して作成された環境シーン、シーン内で回転する球体、および動き回る平面を示します。 フォグはシーンに適用され、回転すると気づくでしょう。
環境シーンを示すデモ
出力
基本要素スカイボックスモード
説明
上記の例では、霧のために次のコードを使用しました-
- scene.fogMode = BABYLON.Scene.FOGMODE_EXP -ここでは、フォグ密度は指数関数に従います。
- scene.registerBeforeRender =これにより、フォグ密度は次のように変化します-
alphaの値は、上記の関数のようにループ内で0.02ずつ増加し続けます。
ここでは、プレーンスプライトイメージを追加し、 scene.registerBeforeRender 関数を使用して次のように位置を変更しました-
平面のx軸を変更し、50を超えるとリセットします。
また、球体はy軸に沿って回転します。 これは上記の例で示されています。値はsphere.rotation.yを使用して変更されます。
球体に使用されるテクスチャは- images/tshphere.jpg です。 画像はimages/フォルダーにローカルに保存され、参照用に以下に貼り付けられます。 選択した任意の画像をダウンロードして、デモリンクで使用できます。
基本要素Tshphere
キューブには6つの画像が必要です。 画像は、images/cubetexture/フォルダーにローカルに保存されます。 任意のイメージをダウンロードできますが、保存するときに、nameoftheimage_nx、nameoftheimage_ny、nameoftheimage_nz、nameoftheimage_px、nameoftheimage_py、nameoftheimage_pzとして保存します。 選択した画像は、背景がスカイボックスに表示されているもののように現実的に見えるように、連続している必要があります。
スカイボックスの作成に使用される画像は次のとおりです- images/cubetexture/skybox
Basic Element Skybox-nx
Basic Element Skybox-nx
Basic Element Skybox-nx
Basic Element Skybox-nx
Basic Element Skybox-nx
Basic Element Skybox-nx
BabylonJS-材料
材料はオブジェクトの服のようなものです。 色、テクスチャを追加し、それでメッシュをラップできます。 同じマテリアルを使用して、多くのメッシュをカバーできます。 メッシュは、前の章の例で見たシーン、つまり空を通過する平面になります。
この章では、この章でメッシュの色、テクスチャ、反射を追加する方法を学びます。
作成済みのシーンにマテリアルを追加します。 作成したすべてのシェイプにマテリアルを追加して進めていきます。
いくつかの例を考えて、素材の追加がどのように機能するかを見てみましょう。
構文
上記の素材はデフォルトであるため、何も変更されません。 利用可能なプロパティを使用して、オブジェクトをより魅力的に見せます。
利用可能なプロパティは次のとおりです-
- リンク:/babylonjs/babylonjs_transparency [透明度]
- リンク:/babylonjs/babylonjs_diffuse [拡散]
- リンク:/babylonjs/babylonjs_emissive [Emissive]
- リンク:/babylonjs/babylonjs_ambient [環境光]
- リンク:/babylonjs/babylonjs_specular [鏡面反射光]
- リンク:/babylonjs/babylonjs_backface_culling [裏面カリング]
- リンク:/babylonjs/babylonjs_wireframe [WireFrame]
これらのプロパティがマテリアルに適用され、メッシュのルックアンドフィールがどのように変化するかを見てみましょう。
基本的な材料特性-FresnelParameters
フレネルは、BabylonJSによって standardmaterial に追加された新しいものです。 図形に適用される色を変更できます。 シンプルなフレネルを使用すると、ガラスのような反射を得ることができます。 フレネルを使用すると、すべてではなく中央部でエッジをより反射させることができます。
フレネルでは次のプロパティを使用できます
Demo
出力
上記のコード行は、次の出力を生成します-
基本マテリアルプロパティ-FresnelParameters
説明
次のコードは、フレネル効果を適用します。 左と右の色がメッシュの端に適用されます。
バイアスとパワープロパティは、表面のフレネル効果を制御します。
このデモでは、rainbow.pngという画像を使用しました。 画像はローカルのimages/フォルダーに保存されます。 選択した任意の画像をダウンロードして、デモリンクで使用できます。
BabylonJS-アニメーション
アニメーションはシーンをよりインタラクティブにし、リアルな外観を与える印象的なものにします。 アニメーションを詳細に理解しましょう。 図形にアニメーションを適用して、ある位置から別の位置に移動します。 アニメーションを使用するには、必要なパラメーターを使用してアニメーション上にオブジェクトを作成する必要があります。
同じものの構文を見てみましょう-
パラメーター
BabylonJSを使用したアニメーションに関連する以下のパラメーターを考慮してください-
アニメーションの名前。
形状のプロパティ–スケーリング、位置の変更など。 スケーリングは、構文に示されているものです。ここでは、x軸に沿ってボックスを拡大縮小します。
要求された1秒あたりのフレーム数:このアニメーションで可能な最高のFPS。
ここで、変更する値の種類を決定して入力します。それはフロートですか(例: 翻訳)、ベクトル(例: 方向)、またはクォータニオン。
正確な値は-
- BABYLON.Animation.ANIMATIONTYPE_FLOAT
- BABYLON.Animation.ANIMATIONTYPE_VECTOR2
- BABYLON.Animation.ANIMATIONTYPE_VECTOR3
- BABYLON.Animation.ANIMATIONTYPE_QUATERNION
- BABYLON.Animation.ANIMATIONTYPE_COLOR3
アニメーションの動作-アニメーションを停止または再開します。
以前の値を使用し、それをインクリメントします-
- BABYLON.Animation.ANIMATIONLOOPMODE_RELATIVE
初期値から再起動-
- BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
最終的な価値を保つ
- BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
私たちは今、アニメーションオブジェクトを作成しましょう-
アニメーションのデモ
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>BabylonJs - Basic Element-Creating Scene</title>
<script src = "babylon.js"></script>
<style>
canvas {width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(0, 1, 0);
var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 0.7;
var pl = new BABYLON.PointLight("pl", BABYLON.Vector3.Zero(), scene);
pl.diffuse = new BABYLON.Color3(1, 1, 1);
pl.specular = new BABYLON.Color3(1, 1, 1);
pl.intensity = 0.8;
var box = BABYLON.Mesh.CreateBox("box", '3', scene);
box.position = new BABYLON.Vector3(-10,0,0);
var box1 = BABYLON.Mesh.CreateBox("box1", '3', scene);
box1.position = new BABYLON.Vector3(0,0,0);
var animationBox = new BABYLON.Animation("myAnimation", "scaling.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
var animationBox1 = new BABYLON.Animation("myAnimation1", "scaling.z", 10, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
//An array with all animation keys
var keys = [];
//At the animation key 0, the value of scaling is "1"
keys.push({
frame: 0,
value: 1
});
//At the animation key 20, the value of scaling is "0.2"
keys.push({
frame: 20,
value: 0.2
});
keys.push({
frame: 60,
value: 0.4
});
//At the animation key 100, the value of scaling is "1"
keys.push({
frame: 100,
value: 1
});
animationBox.setKeys(keys);
box.animations = [];
box.animations.push(animationBox);
scene.beginAnimation(box, 0, 100, true);
//An array with all animation keys
var keys = [];
//At the animation key 0, the value of scaling is "1"
keys.push({
frame: 0,
value: 1
});
//At the animation key 20, the value of scaling is "0.2"
keys.push({
frame: 60,
value: 0.2
});
//At the animation key 100, the value of scaling is "1"
keys.push({
frame: 100,
value: 1
});
animationBox1.setKeys(keys);
box1.animations = [];
box1.animations.push(animationBox1);
scene.beginAnimation(box1, 0, 100, true);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>
出力
アニメーションデモ
以下は、アニメーションオブジェクトで利用可能な他の機能です-
一時停止()
再起動()
やめる()
reset()
例えば、
キーフレームを制御するために、アニメーションオブジェクトで使用できる機能があります。
ここにあなたが変更できる機能のリストがあります-
- floatInterpolateFunction
- quaternionInterpolateFunction
- quaternionInterpolateFunctionWithTangents
- vector3InterpolateFunction
- vector3InterpolateFunctionWithTangents
- vector2InterpolateFunction
- vector2InterpolateFunctionWithTangents
- sizeInterpolateFunction
- color3InterpolateFunction
- matrixInterpolateFunction
クイックアニメーションを作成するために、直接使用できる機能が用意されています。
例えば、
ここでは、 start と end の2つのキーフレームのみを使用できます。
Demo
出力
アニメーションデモ画像
アニメーションブレンディング
enableBlending = true;を使用すると、アニメーションのブレンドを実現できます。
このブレンドされたアニメーションは、現在のオブジェクトの状態から変化します。
イージング機能
アニメーションをより印象的にするために、以前にcssで使用したイージング関数がいくつかあります。
イージング関数のリストは次のとおりです-
- BABYLON.CircleEase()
- BABYLON.BackEase(振幅)
- BABYLON.BounceEase(バウンス、バウンス)
- BABYLON.CubicEase()
- BABYLON.ElasticEase(振動、弾力性)
- BABYLON.ExponentialEase(指数)
- BABYLON.PowerEase(パワー)
- BABYLON.QuadraticEase()
- BABYLON.QuarticEase()
- BABYLON.QuinticEase()
- BABYLON.SineEase()
Demo
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>BabylonJs - Basic Element-Creating Scene</title>
<script src = "babylon.js"></script>
<style>
canvas {width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(0, 1, 0);
var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 0.7;
var pl = new BABYLON.PointLight("pl", BABYLON.Vector3.Zero(), scene);
pl.diffuse = new BABYLON.Color3(1, 1, 1);
pl.specular = new BABYLON.Color3(1, 1, 1);
pl.intensity = 0.8;
var box1 = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false);
box1.position = new BABYLON.Vector3(0,0,0);
var animationBox1 = new BABYLON.Animation("myAnimation1", "scaling.z", 10, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
//An array with all animation keys
var keys = [];
//At the animation key 0, the value of scaling is "1"
keys.push({
frame: 0,
value: 1
});
//At the animation key 20, the value of scaling is "0.2"
keys.push({
frame: 60,
value: 0.2
});
//At the animation key 100, the value of scaling is "1"
keys.push({
frame: 100,
value: 1
});
animationBox1.setKeys(keys);
box1.animations = [];
//box1.animations.push(animationBox1);
var easingFunction = new BABYLON.QuarticEase();
easingFunction.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
animationBox1.setEasingFunction(easingFunction);
box1.animations.push(animationBox1);
scene.beginAnimation(box1, 0, 100, true);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>
出力
アニメーションブレンディング
アニメーションイベント
アニメーションイベントで必要なことは何でも実行できます。 フレームが変更されたとき、またはアニメーションが完了したときに何かを変更したい場合は、アニメーションにイベントを追加することで実現できます。
BabylonJS-スプライト
コンピューターグラフィックスでスプライトとは何を指しますか? 基本的には、より大きなシーンに統合される2次元のビットマップです。 メモリを節約するために複数の小さな画像を単一のビットマップに結合する場合、結果の画像はスプライトシートと呼ばれます。 スプライトとその使用方法を始めましょう。
スプライトの使用を開始する最初のステップは、スプライトマネージャーを作成することです。
スプライトマネージャを作成するには、次のパラメータを考慮してください-
- 名前-このマネージャーの名前。
- URL -使用される画像のURL。
- マネージャの容量-このマネージャのインスタンスの最大数。たとえば、上記のインスタンスは2000本のツリーを作成します。
- セルサイズ-画像が取得したサイズ。
- Scene -マネージャーが追加されるシーン。
上記のオブジェクトを見てください。プレーヤーの画像を指定し、現在2つのインスタンスを作成しています。 画像のサイズは64です。 スプライトの各画像は、64ピクセルの正方形に含まれている必要があります。
次に、スプライトマネージャにリンクされた同じインスタンスを作成しましょう。
他のシェイプやメッシュと同じように、このプレーヤーオブジェクトで遊ぶことができます。 位置、サイズ、角度などを割り当てることができます。
Demo
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>BabylonJs - Basic Element-Creating Scene</title>
<script src = "babylon.js"></script>
<style>
canvas {width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
//scene.clearColor = new BABYLON.Color3(0, 1, 0);
//Create camera and light
var light = new BABYLON.PointLight("Point", new BABYLON.Vector3(5, 10, 5), scene);
var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 8, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);
var spriteManagerTrees = new BABYLON.SpriteManager("trees", "images/tree.png", 1000, 400, scene);
for (var i = 0; i < 1000; i++) {
var tree = new BABYLON.Sprite("tree", spriteManagerTrees);
tree.position.x = Math.random() *100 - 50;
tree.position.z = Math.random()* 100 - 50;
tree.isPickable = true;
//Some "dead" trees
if (Math.round(Math.random() *5) === 0) {
tree.angle = Math.PI* 90/180;
tree.position.y = -0.3;
}
}
var spriteManagerTrees1 = new BABYLON.SpriteManager("trees1", "images/tree1.png", 1000,400, scene);
for (var i = 0; i < 1000; i++) {
var tree1 = new BABYLON.Sprite("tree1", spriteManagerTrees1);
if (i %2 == 0) {
tree1.position.x = Math.random() *100 - 50;
} else {
tree1.position.z = Math.random()* 100 - 50;
}
tree1.isPickable = true;
}
spriteManagerTrees.isPickable = true;
spriteManagerTrees1.isPickable = true;
var spriteManagerPlayer = new BABYLON.SpriteManager("playerManager", "images/bird.png", 2, 200, scene);
var player = new BABYLON.Sprite("player", spriteManagerPlayer);
player.position.x = 2;
player.position.y = 2;
player.position.z = 0;
var spriteManagerPlayer1 = new BABYLON.SpriteManager("playerManager1", "images/bird.png", 2, 200, scene);
var player1 = new BABYLON.Sprite("player", spriteManagerPlayer1);
player1.position.x = 1;
player1.position.y = 2;
player1.position.z = 0;
var spriteManagerPlayer2 = new BABYLON.SpriteManager("playerManager2", "images/bird.png", 2, 200, scene);
var player2 = new BABYLON.Sprite("player", spriteManagerPlayer2);
player2.position.x = 0;
player2.position.y = 1;
player2.position.z = 0;
scene.onPointerDown = function (evt) {
var pickResult = scene.pickSprite(this.pointerX, this.pointerY);
if (pickResult.hit) {
pickResult.pickedSprite.angle += 1;
}
};
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>
出力
BabylonJS Sprites
このデモでは、tree.png、tree1.pngという名前の画像を使用して木を表示し、bird.pngを使用してシーン内の鳥を表示しました。 これらの画像は、images/フォルダーにローカルに保存され、参照用に以下に貼り付けられます。 選択した任意の画像をダウンロードして、デモリンクで使用できます。
ツリーに使用される画像を以下に示します。
BabylonJS Sprites
BabylonJS Sprites
BabylonJS Sprites
スプライトバルーンを使用したもう1つのデモを見てみましょう。
スプライトバルーンを使用したデモ
出力
スプライトバルーン
このデモでは、ballon.pngという画像を使用しました。 画像はimages/フォルダーにローカルに保存され、参照用に以下に貼り付けられます。 選択した任意の画像をダウンロードして、デモリンクで使用できます。
バルーン
風船は空に浮かび上がり、いったん止まったら、クリックすると消えます。 これは、作成されたスプライトをクリックすると詳細を表示するpickSprite関数を使用して行われます。
onPointerDown関数は、マウスアクションが発生し、スプライトの位置が変更されたときに呼び出されます。
関数animateはregisterBeforeRenderで呼び出され、バルーンを初期-35から+3に移動します。 .05ずつインクリメントすることにより、ゆっくりと移動します。
BabylonJS-パーティクル
パーティクルシステムは、従来のレンダリングテクニックでは再現が非常に難しい特定の種類の「ファジー」現象をシミュレートするために、多数の非常に小さなスプライト、3Dモデル、またはその他のグラフィックオブジェクトを使用するコンピューターグラフィックスのテクニックです。
パーティクルシステムを作成するには、次のようにクラスを呼び出す必要があります-
粒子システムでは、次の特性を考慮する必要があります-
エミッタプロパティは、パーティクルを放出するメッシュを取得します。 color1 および color2 は粒子の色です。
MinSizeとmaxSizeは、パーティクルに与えられたサイズです。 MinlifeTimeとmaxLifeTimeは、パーティクルに与えられた寿命です。
emitRateは、パーティクルが放出されるレートです。
以下に示すデモではトーラスを使用しました。 パーティクルシステムとそのプロパティを使用して、トーラスの周りのすべてのパーティクルを取得しました。
デモ1
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>BabylonJs - Basic Element-Creating Scene</title>
<script src = "babylon.js"></script>
<style>
canvas {width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
//Setup environment
var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 2, 8), scene);
var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 20, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);
var fountain = BABYLON.Mesh.CreateTorus("torus", 2, 1, 8, scene, false);
var particleSystem = new BABYLON.ParticleSystem("particles", 2000, scene);
particleSystem.particleTexture = new BABYLON.Texture("images/dot.jpg", scene);
particleSystem.textureMask = new BABYLON.Color4(0.1, 0.8, 0.8, 1.0);
particleSystem.emitter = fountain;
particleSystem.minEmitBox = new BABYLON.Vector3(-1, 0, 0);//Starting all from
particleSystem.maxEmitBox = new BABYLON.Vector3(1, 0, 0);//To...
particleSystem.color1 = new BABYLON.Color4(0.7, 0.8, 1.0, 1.0);
particleSystem.color2 = new BABYLON.Color4(0.2, 0.5, 1.0, 1.0);
particleSystem.colorDead = new BABYLON.Color4(0, 0, 0.2, 0.0);
particleSystem.minSize = 0.1;
particleSystem.maxSize = 0.5;
particleSystem.minLifeTime = 0.3;
particleSystem.maxLifeTime = 1.5;
particleSystem.emitRate = 1500;
particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE;
particleSystem.gravity = new BABYLON.Vector3(0, -9.81, 0);
particleSystem.direction1 = new BABYLON.Vector3(-7, 8, 3);
particleSystem.direction2 = new BABYLON.Vector3(7, 8, -3);
particleSystem.minAngularSpeed = 0;
particleSystem.maxAngularSpeed = Math.PI;
particleSystem.minEmitPower = 1;
particleSystem.maxEmitPower = 3;
particleSystem.updateSpeed = 0.005;
particleSystem.start();
var keys = [];
var animation = new BABYLON.Animation("animation", "rotation.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT,
BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
//At the animation key 0, the value of scaling is "1"
keys.push({
frame: 0,
value: 0
});
//At the animation key 50, the value of scaling is "0.2"
keys.push({
frame: 50,
value: Math.PI
});
//At the animation key 100, the value of scaling is "1"
keys.push({
frame: 100,
value: 0
});
//Launch animation
animation.setKeys(keys);
fountain.animations.push(animation);
scene.beginAnimation(fountain, 0, 100, true);
return scene;
}
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>
出力
上記のコード行は、次の出力を生成します-
BabylonJS Particles
このデモでは、dot.jpgという画像を使用しました。 画像はimages/フォルダーにローカルに保存され、参照用に以下に貼り付けられます。 選択した任意の画像をダウンロードして、デモリンクで使用できます。
以下は、パーティクルテクスチャに使用される画像です。 images/dot.jpg
ドット
デモ2
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>BabylonJs - Ball/Ground Demo</title>
<script src = "babylon.js"></script>
<style>
canvas {width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3( .5, .5, .5);
var camera = new BABYLON.ArcRotateCamera("camera1", 0, 0, 0, new BABYLON.Vector3(0, 0, -0), scene);
camera.setPosition(new BABYLON.Vector3(-100, 0,-100));
camera.attachControl(canvas, true);
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
var pl = new BABYLON.PointLight("pl", new BABYLON.Vector3(0, 0, 0), scene);
var gmat = new BABYLON.StandardMaterial("mat1", scene);
gmat.alpha = 1.0;
var ground = BABYLON.Mesh.CreateGround("ground", 100, 100, 20, scene);
ground.material = gmat;
gmat.wireframe = true;
var particleSystem = new BABYLON.ParticleSystem("particles", 2000, scene);
particleSystem.particleTexture = new BABYLON.Texture("images/dot.jpg", scene);
particleSystem.textureMask = new BABYLON.Color4(0.1, 0.8, 0.8, 1.0);
particleSystem.emitter = ground;
particleSystem.minEmitBox = new BABYLON.Vector3(-1, 0, 0);//Starting all from
particleSystem.maxEmitBox = new BABYLON.Vector3(1, 0, 0);//To...
particleSystem.color1 = new BABYLON.Color4(0.7, 0.8, 1.0, 1.0);
particleSystem.color2 = new BABYLON.Color4(0.2, 0.5, 1.0, 1.0);
particleSystem.colorDead = new BABYLON.Color4(0, 0, 0.2, 0.0);
particleSystem.minSize = 0.1;
particleSystem.maxSize = 0.5;
particleSystem.minLifeTime = 0.3;
particleSystem.maxLifeTime = 1.5;
particleSystem.emitRate = 1500;
particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE;
particleSystem.gravity = new BABYLON.Vector3(0, -9.81, 0);
particleSystem.direction1 = new BABYLON.Vector3(-7, 8, 3);
particleSystem.direction2 = new BABYLON.Vector3(7, 8, -3);
particleSystem.minAngularSpeed = 0;
particleSystem.maxAngularSpeed = Math.PI;
particleSystem.minEmitPower = 1;
particleSystem.maxEmitPower = 3;
particleSystem.updateSpeed = 0.005;
particleSystem.start();
var keys = [];
var animation = new BABYLON.Animation("animation", "rotation.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT,
BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
//At the animation key 0, the value of scaling is "1"
keys.push({
frame: 0,
value: 0
});
//At the animation key 50, the value of scaling is "0.2"
keys.push({
frame: 50,
value: Math.PI
});
//At the animation key 100, the value of scaling is "1"
keys.push({
frame: 100,
value: 0
});
//Launch animation
animation.setKeys(keys);
ground.animations.push(animation);
//scene.beginAnimation(ground, 0, 100, true);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>
出力
デモ粒子
アニメーション付きデモ
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>BabylonJs - Ball/Ground Demo</title>
<script src = "babylon.js"></script>
<style>
canvas {width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3( .5, .5, .5);
var camera = new BABYLON.ArcRotateCamera("camera1", 0, 0, 0, new BABYLON.Vector3(0, 0, -0), scene);
camera.setPosition(new BABYLON.Vector3(-100, 0, -100));
camera.attachControl(canvas, true);
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
var pl = new BABYLON.PointLight("pl", new BABYLON.Vector3(0, 0, 0), scene);
var gmat = new BABYLON.StandardMaterial("mat1", scene);
gmat.alpha = 1.0;
var ground = BABYLON.Mesh.CreateGround("ground", 100, 100, 20, scene);
ground.material = gmat;
gmat.wireframe = true;
var particleSystem = new BABYLON.ParticleSystem("particles", 2000, scene);
particleSystem.particleTexture = new BABYLON.Texture("images/dot.jpg", scene);
particleSystem.textureMask = new BABYLON.Color4(0.1, 0.8, 0.8, 1.0);
particleSystem.emitter = ground;
particleSystem.minEmitBox = new BABYLON.Vector3(-1, 0, 0);//Starting all from
particleSystem.maxEmitBox = new BABYLON.Vector3(1, 0, 0);//To...
particleSystem.color1 = new BABYLON.Color4(0.7, 0.8, 1.0, 1.0);
particleSystem.color2 = new BABYLON.Color4(0.2, 0.5, 1.0, 1.0);
particleSystem.colorDead = new BABYLON.Color4(0, 0, 0.2, 0.0);
particleSystem.minSize = 0.1;
particleSystem.maxSize = 0.5;
particleSystem.minLifeTime = 0.3;
particleSystem.maxLifeTime = 1.5;
particleSystem.emitRate = 1500;
particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE;
particleSystem.gravity = new BABYLON.Vector3(0, -9.81, 0);//gravity for the particle.
particleSystem.direction1 = new BABYLON.Vector3(-7, 8, 3);
particleSystem.direction2 = new BABYLON.Vector3(7, 8, -3);
//random direction for the particles on the scene
particleSystem.minAngularSpeed = 0;
particleSystem.maxAngularSpeed = Math.PI;
particleSystem.minEmitPower = 1;
particleSystem.maxEmitPower = 3;
particleSystem.updateSpeed = 0.005;
particleSystem.start();
var keys = [];
var animation = new BABYLON.Animation("animation", "rotation.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT,
BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
//At the animation key 0, the value of scaling is "1"
keys.push({
frame: 0,
value: 0
});
//At the animation key 50, the value of scaling is "0.2"
keys.push({
frame: 50,
value: Math.PI
});
//At the animation key 100, the value of scaling is "1"
keys.push({
frame: 100,
value: 0
});
//Launch animation
animation.setKeys(keys);
ground.animations.push(animation);
scene.beginAnimation(ground, 0, 100, true);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>
出力
上記のコード行は、次の出力を生成します-
パーティクルアニメーション
説明
上記のデモでは、ワイヤフレームマテリアルのある地面を示しており、パーティクルシステムは中心から生成されています。
BabylonJS-カメラ
BabylonJSには、使用できるカメラがたくさんあります。 一度に、1つのシーンでアクティブになるカメラは1つだけです。
この章では、BabylonJSでカメラを使用する方法を学びます。
FreeCamera
FreeCameraの仕組みを見てみましょう。
構文
以下はFreeCameraの構文です-
これは、カメラが配置される位置です-新しいBABYLON.Vector3(0、1、-15)。
方向を変えると方向も変わります。 値を変更して、シーンでのカメラの動作を確認できます。
以下はFreeCameraで使用されるパラメータです-
ArcRotateCamera
このカメラは、指定されたターゲットピボットを中心に回転します。 カーソルとマウス、またはタッチイベントで制御できます。 パラメータは、名前、アルファ、ベータ、半径、およびターゲットです。
構文
ArcRotateCameraは、アニメーション化に最適なカメラです。 次のコマンドは、ターゲットの周りにカメラを回転させるのに役立ちます-
TouchCamera
タッチは「ジェスチャー」の一種です。 指、スタイラス、手袋、足、またはレーザーポインターを使用して、パッドまたはスクリーン上に置くことができます。 感知できるあらゆる動き… ジェスチャーと見なすことができます。
構文
以下はTouchCameraの構文です-
ゲームパッドカメラ
このカメラは、ゲームパッドで使用するために特別に設計されています。
構文
ゲームパッドカメラの構文は次のとおりです-
DeviceOrientationCamera
このカメラは、デバイスを前後または左右に傾けたときなど、デバイスの方向イベントに反応するように特別に設計されています。
構文
フォローカメラ
FollowCameraは、位置を持つ任意のシーンアイテムを追跡するように設計されています。 後方、前方、または任意の角度から追従できます。
構文
FollowCameraの構文は次のとおりです-
VirtualJoysticksCamera
このカメラは、仮想ジョイスティックイベントに反応するように設計されています。 仮想ジョイスティックは、カメラやその他のシーンアイテムの制御に使用される画面上の2Dグラフィックです。
構文
以下はVirtualJoysticksCameraの構文です-
アナグリフカメラ
AnaglyphCameraは、赤とシアンの3Dメガネで使用します。 後処理フィルタリング技術を使用します。
AnaglyphArcRotateCamera
以下は、AnaglyphArcRotateCameraの構文です-
AnaglyphFreeCamera
以下は、 AnaglyphFreeCamera の構文です-
VRDeviceOrientationFreeCamera
VRDeviceOrientationFreeCameraはFreeCameraを基礎として使用しているため、FreeCameraのプロパティとメソッドはVRDeviceOrientationFreeCameraにもあります。
構文
以下は VRDeviceOrientationFreeCamera の構文です-
WebVRFreeCamera
WebVRFreeCameraはFreeCameraを基礎として使用しているため、FreeCameraのプロパティとメソッドはWebVRFreeCameraにもあります。
構文
以下は WebVRFreeCamera の構文です-
ほとんどのデモでは、カメラがキャンバスに接続されている attachControl が表示されます。
例
BabylonJS-ライト
この章では、BabylonJSに使用されるライトについて学びます。 まずは、babylonjsで使用できるさまざまな種類のライトを見てみましょう。
ライトは、各ピクセルが受け取る拡散および鏡面反射色を生成するためのものです。 後で、各ピクセルの最終的な色を取得するためにマテリアルで使用されます。
babylonjsには4種類のライトがあります。
- ポイントライト
- 指向性ライト
- スポットライト
- 半球の光
BabylonJS-ポイントライト
ポイントライトの典型的な例は太陽で、その光線は全方向に広がります。 ポイントライトには、空間内にユニークなポイントがあり、そこからあらゆる方向に光が広がります。 光の色は、鏡面反射と拡散反射のプロパティを使用して制御できます。
構文
ポイントライトの構文は次のとおりです-
ポイントライトには3つの異なるパラメータがあります-
- 最初のパラメーターはライトの名前です。
- 2番目のパラメーターは、ポイントライトが配置される位置です。
- 3番目のパラメーターは、ライトをアタッチする必要があるシーンです。
次のプロパティは、上記で作成したオブジェクトに色を追加するために使用されます-
Demo
出力
ポイントライト
BabylonJS-指向性ライト
指向性ライトでは、ライトは方向によって定義され、配置場所に基づいてあらゆる方向に放射されます。
ポイントライトには3つの異なるパラメータがあります-
- 1 ^ st ^ paramはライトの名前です。
- 2 ^ nd ^パラメータは位置です。 現時点では、Y軸にマイナス-1が設定されています。
- 3 ^ rd ^パラメータは、アタッチするシーンです。
ここで、specularプロパティとdiffuseプロパティを使用して色を追加できます。
Demo
出力
上記のコード行は、次の出力を生成します-
指向性ライト
BabylonJS-スポットライト
スポットライトは、円錐形に落ちる光のようなものです。
構文
以下は、スポットライトの構文です-
ポイントライトには5つの異なるパラメータがあります-
- 1 ^ st ^ Paramはライトの名前です。
- 2 ^ nd ^ paramは位置です。
- 3 ^ rd ^ paramは方向です。
- 4 ^ th ^ paramは角度です。
- 5 ^ th ^ paramは指数です。
これらの値は、位置から始まって方向に向かって放射する光の円錐を定義します。 鏡面反射光と拡散反射光を使用して、光の色を制御します。
Demo
出力
上記のコード行は、次の出力を生成します-
スポットライト
BabylonJS-半球の光
半球の光は、環境を明るくすることです。 光の方向は空に向かっています。 3色が光に与えられます。 1つは空用、もう1つは地面用、最後の1つは鏡面反射用です。
構文
以下は、半球光の構文です-
色について
Demo
出力
上記のコード行は、次の出力を生成します-
半球の光
BabylonJS-パラメトリック形状
パラメトリック形状とは、ベンド、ツイストなどで描かれた線を使用して実現できるさまざまな形状を指します。 これは、放物線、正弦曲線、cos曲線、ベジェ曲線などの数学方程式で生成された2D形式です。 方程式を使用して、座標(x、y)を見つけて、同じ線を描くことができます。 この章では、リボン、線、破線、チューブ、押し出しなどの形状を確認します。 ボード上の線のフリーハンド描画は、以下で説明するパラメトリック形状を使用して実現できます。
Sr.No.
|
Parametric Shape & Description
|
1
|
Ribbon
リボンはパスの配列を入力として受け取り、それらのパスに沿って線を引きます。 複雑なロジックを使用して座標を取得します。 以下の例では、ベジェ曲線式を使用してリボンを描画しています。 ベジェ曲線は、主に3Dゲームで滑らかな曲線をモデル化するために使用されます。 曲線には制御点が必要で、曲線は制御点に沿って描かれます。
|
2
|
Line
ラインは3Dゲームの基本要素です。 線を引くには、線を引くことができる2つのポイントが必要です。
|
3
|
Tube
チューブは、湾曲した円筒形です。 座標を取得するために適用される方程式(数学関数)に基づいて、さまざまなパラメトリック形状を与えることができます。
|
4
|
Extrusion
押し出しは、2Dシェイプをボリュームシェイプに変換するのに役立ちます。2Dで星を作成すると、x、y座標があり、zは0になります。2D座標を押し出すと、同じものが3Dに変換されます。したがって、押し出しを使用した2Dの開始は3Dになります。さまざまな2D形状を試して、3Dに変換できます。
|
BabylonJS-メッシュ
この章では、メッシュビルダーを使用してさまざまな形状を作成する方法を学習します。 前の章のいずれかで、シェイプの作成方法を既に学習しました。
違いは、meshbuilderを使用すると、色、画像を図形に追加する柔軟性が得られることです。
MeshBuilderを使用したCreateBox
MeshBuilderを使用してボックスを作成する方法を見てみましょう。
Demo
出力
上記のコード行は、次の出力を生成します-
MeshBuilder CubeBox
上記の例では、次のようにスプライト画像を使用しました。 水平に3列、垂直に2列あります。
キューブ
このデモでは、cube.pngという画像を使用しました。 画像はimages/フォルダーにローカルに保存され、参照用に以下に貼り付けられます。 cube.pngはスプライト画像であり、スプライト画像は画像のコレクションであることに注意してください。 画像を立方体に表示したかったので、立方体のすべての側面を一緒にしたかったのです。 選択した同様のスプライトイメージをダウンロードして、デモリンクで使用することもできます。
createBoxビルダーは、サイズのオプションを提供します。
例えば、
Demo
これは、createBoxメソッドを使用してメッシュビルダーにテクスチャを適用することと呼ばれます。水平方向に3列、垂直方向に2行の画像 cube.png を使用しました。立方体またはボックスには6つの辺があります。
テクスチャを適用するには、optionsパラメーターを使用します。たとえば、
立方体の辺であるサイズ6のfaceUVと呼ばれる配列を定義しました。 この配列には、常にVector4要素が含まれます。 各Vector4(x、y、z、w)は次のように定義されます-
- x = Ubottom
- y = Vbottom
- z = Utop
- w = Vtop
ベクトルの範囲は[0、1]です。 UbottomとVbottomは、テクスチャの切り取りが開始される左下のポイントの2D座標です。 Utop、Vtopは、テクスチャの切り取りが終了する右上のポイントです。
デフォルトのテクスチャ、つまり、与えられた画像がボックスのすべての面に適用されると仮定します。 あなたが1つの面またはボックスの1つの側面のみを変更したい場合、以下に示すように値を直接割り当てることができます
例
出力
上記のコード行は、次の出力を生成します-
Textturepahse4
このデモでは、3d.pngという画像を使用しました。 画像はimages/フォルダーにローカルに保存され、参照用に以下に貼り付けられます。 3d.pngはスプライト画像です。スプライト画像は画像のコレクションです。 立方体のすべての辺を一緒にして、立方体に画像を表示したかったのです。 選択した同様のスプライトイメージをダウンロードして、デモリンクで使用することもできます。
ボックスに使用されるテクスチャ- images/3d.png
3d
メッシュシリンダー
このセクションでは、MeshCylinderの作成方法を確認します。
MeshCylinderを作成するには、BABYLON.MeshBuilder.CreateCylinderクラスを使用する必要があります。
クラスのパラメータは次のとおりです-
メッシュを使用するCreateCylinderとmeshbuilderの違いは、meshbuilderのオプションを使用できることです。 現在、シリンダーに渡すオプションとして高さ、直径、テッセレーションを使用しています。 このメッシュの素材として、ワイヤーフレーム付きの標準素材を使用しています。 ブラウザで出力を確認し、シリンダーを確認します。 ゲーム内で、シーン内で回転するホイールとして同様の構造を使用できます。
Demo
出力
上記のコード行は、次の出力を生成します-
メッシュシリンダー
メッシュビルダーで作成された多くの形状が、1つのデモで一緒に使用されるようになりました。 以下のデモリンクで説明されている形状は、後続のセクションにリストされています。
- リンク:/babylonjs/babylonjs_mesh_ground [地面]
- リンク:/babylonjs/babylonjs_mesh_cone [コーン]
- リンク:/babylonjs/babylonjs_mesh_plane [平面]
- リンク:/babylonjs/babylonjs_mesh_disc [ディスク]
- リンク:/babylonjs/babylonjs_mesh_torus [トーラス]
- リンク:/babylonjs/babylonjs_mesh_polyhedron [多面体]
- リンク:/babylonjs/babylonjs_mesh_icosphere [IcoSphere]
BabylonJS –メッシュ交差点
ゲームで2つのオブジェクトが交差するときに何をする必要があるかを知っているので、ゲームのメッシュ交差は重要です。 以下のデモでは、メッシュが交差するときにキャプチャする必要があるイベントについて、同じ概念を説明しています。
以下に示すデモでは、次の2つの概念を取り上げました-
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>BabylonJs - Basic Element-Creating Scene</title>
<script src = "babylon.js"></script>
<style>
canvas {width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(1, 1, 1);
var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 20, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);
var matcone = new BABYLON.StandardMaterial("mat1", scene);
matcone.alpha = 1.0;
matcone.diffuseColor = new BABYLON.Color3(0, 0, 0);
matcone.wireframe = true;
var cone = BABYLON.MeshBuilder.CreateCylinder("cone", {height : 10, diameterTop: 10,diameterBottom:10, tessellation: 5}, scene);
cone.position= new BABYLON.Vector3(12,1,0);
cone.material = matcone;
var balloon1 = BABYLON.Mesh.CreateSphere("balloon1",5, 1.0, scene);
var balloon2 = BABYLON.Mesh.CreateSphere("balloon2", 5, 1.0, scene);
var balloon3 = BABYLON.Mesh.CreateSphere("balloon3", 5, 1.0, scene);
balloon1.material = new BABYLON.StandardMaterial("matBallon", scene);
balloon2.material = new BABYLON.StandardMaterial("matBallon", scene);
balloon3.material = new BABYLON.StandardMaterial("matBallon", scene);
balloon1.position = new BABYLON.Vector3(4, 2, 0);
balloon2.position = new BABYLON.Vector3(5, 1, 0);
balloon3.position = new BABYLON.Vector3(7, 0, 0);
var pointToIntersect = new BABYLON.Vector3(10, 0, 0);
var a = 0.01;
scene.registerBeforeRender(function () {
if (balloon1.intersectsMesh(cone, false)) {
balloon1.material.emissiveColor = new BABYLON.Color3(1, 0, 0);
} else {
balloon1.material.emissiveColor = new BABYLON.Color3(0, 1, 0);
}
if (balloon2.intersectsMesh(cone, false)) {
balloon2.material.emissiveColor = new BABYLON.Color3(1, 0, 0);
} else {
balloon2.material.emissiveColor = new BABYLON.Color3(0, 1, 0);
}
if (balloon3.intersectsMesh(cone, false)) {
balloon3.material.emissiveColor = new BABYLON.Color3(1, 0, 0);
} else {
balloon3.material.emissiveColor = new BABYLON.Color3(0, 1, 0);
}
if (balloon3.intersectsPoint(pointToIntersect)) {
balloon3.material.emissiveColor = new BABYLON.Color3(0, 0, 0);
}
a += 0.01;
balloon1.position.x += Math.cos(a)/10;
balloon2.position.x += Math.cos(a)/10;
balloon3.position.x += Math.cos(a)/10;
});
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>
出力
上記のコードは、次の出力を生成します-
メッシュ交差点
説明
上記のコードを使用して、ワイヤーフレームがtrueのシリンダーを作成しました。 3つの球体を作成しました。 球体の元の色は緑です。
例えば、
球体の色が赤に変わり、円柱と交差します。それ以外の場合、緑色です。
次のコードは、交差するポイントに使用されます-
ここで、 pointtoIntersect 変数は、x軸で10の位置ベクトルです。 球体が交差点と交差すると、球体の色が黒に変わります。
BabylonJS – MeshPickingコリジョン
実際に衝突を選択すると座標が得られ、メッシュをその場所に配置できます。 オブジェクトはマウスで選択され、マウスでクリックした場所に配置できます。ユーザーがマウスをクリックした場所にメッシュ(オブジェクト)を配置する必要があると考えてください。そのため、衝突を検出することで、クリックした場所の位置の座標を確認できます。
Demo
出力
ピッキング衝突
説明
上記の例では、平面と2つの球体を使用しました。 この出力を生成するには、次のコードを使用します-
イベント scene.onPointerDown は、この例では pickResult である調整された-x、yおよびzを提供します。
グラウンドメッシュをクリックすると、pickResult.hitがtrueになります。 奇数/偶数秒を考慮し、球体の位置を変更して、上記のように結果のz座標とy座標を選択します。 位置が変更されると、マウスをクリックして配置した場所に球が配置されます。 上記のデモを同じように試すことができます。
BabylonJS –レイキャスト
レイキャストは太陽の光線に似ており、シーン内の衝突と交差を確認するために使用されます。
構文
パラメーター
レイキャストの次のパラメータを考慮してください-
- Origin -光線が始まる場所。
- 方向-光線の方向は次のように計算されます-
次に、方向を取得するには、原点、ボックスの位置からそれを引きます-
Demo
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>BabylonJs - Basic Element-Creating Scene</title>
<script src = "babylon.js"></script>
<style>
canvas {width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 100, 100), scene);
var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, new BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
var ground = BABYLON.Mesh.CreateGround("ground", 500, 500, 10, scene);
var box = BABYLON.Mesh.CreateBox("box", 4.0, scene);
box.position.y = 2;
box.scaling.z = 2;
var matBox = new BABYLON.StandardMaterial("matBox", scene);
matBox.diffuseColor = new BABYLON.Color3(0.8, 0.1, 0.5);
box.material = matBox;
box.isPickable = false;
var box2 = BABYLON.Mesh.CreateBox("box2", 8.0, scene);
box2.position = new BABYLON.Vector3(-20, 4, 0);
var matBox2 = new BABYLON.StandardMaterial("matBox2", scene);
matBox2.diffuseColor = new BABYLON.Color3(1, 0, 0);
box2.material = matBox2;
var box3 = BABYLON.Mesh.CreateBox("box3", 8.0, scene);
box3.position = new BABYLON.Vector3(20, 4, 0);
var matBox3 = new BABYLON.StandardMaterial("matBox3", scene);
matBox3.diffuseColor = new BABYLON.Color3(1, 0, 0);
box3.material = matBox3;
var box4 = BABYLON.Mesh.CreateBox("box4", 8.0, scene);
box4.position = new BABYLON.Vector3(0, 0, 20);
var matBox4 = new BABYLON.StandardMaterial("matBox4", scene);
matBox4.diffuseColor = new BABYLON.Color3(0, 1, 0);
box4.material = matBox4;
var box5 = BABYLON.Mesh.CreateBox("box5", 8.0, scene);
box5.position = new BABYLON.Vector3(0, 0, -20);
var matBox5 = new BABYLON.StandardMaterial("matBox5", scene);
matBox5.diffuseColor = new BABYLON.Color3(0, 1, 0);
box5.material = matBox5;
function mousemovef() {
var pickResult = scene.pick(scene.pointerX, scene.pointerY);
if (pickResult.hit) {
var diffX = pickResult.pickedPoint.x - box.position.x;
var diffY = pickResult.pickedPoint.z - box.position.z;
box.rotation.y = Math.atan2(diffX,diffY);
}
}
scene.onPointerMove = function () {
mousemovef();
};
function vecToLocal(vector, mesh) {
var m = mesh.getWorldMatrix();
var v = BABYLON.Vector3.TransformCoordinates(vector, m);
return v;
}
scene.registerBeforeRender(function () {
var origin = box.position;
var forward = new BABYLON.Vector3(0,0,1);
forward = vecToLocal(forward, box);
var direction = forward.subtract(origin);
direction = BABYLON.Vector3.Normalize(direction);
var length = 100;
var ray = new BABYLON.Ray(origin, direction, length);
//ray.show(scene, new BABYLON.Color3(1, 1, 0.1));
var hit = scene.pickWithRay(ray);
if (hit.pickedMesh) {
hit.pickedMesh.scaling.y += 0.01;
}
});
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>
出力
上記のコード行は、次の出力を生成します-
レイキャスト
説明
中央にメインボックスがあり、レイキャストとして機能します。 いずれかのボックスを指すと、ボックスのサイズが大きくなります。 この概念は、ゲームをプレイしているときに、他のオブジェクトがどのオブジェクトに接触し、必要なアクションを実行できるかを知るのに役立ちます。
次のコードは、レイによって選択されるボックスのスケーリングを追加します。
光線への方向は次のように計算されます-
次に、方向を取得するために、ボックスの位置である原点からそれを減算します。 関数 vecToLocal は、ベクトルにメッシュ行列を掛けることにより、メッシュの視点から位置を変換するように設計されています。
光線がメッシュと一致する位置を示します。
スケーリングは、次のコード行を実行することによって選択されたメッシュに適用されます-
ブラウザで上記の例を試して、出力を確認してください。
述語関数を使用したレイキャスト
次に、述語関数を使用したレイキャストの動作と、rayhelperで表示される方向を見てみましょう。
Demo
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>BabylonJs - Basic Element-Creating Scene</title>
<script src = "babylon.js"></script>
<style>
canvas {width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 100, 100), scene);
var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, new BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
var ground = BABYLON.Mesh.CreateGround("ground", 500, 500, 10, scene);
var box = BABYLON.Mesh.CreateBox("box", 4.0, scene);
box.position.y = 2;
box.scaling.z = 2;
var matBox = new BABYLON.StandardMaterial("matBox", scene);
matBox.diffuseColor = new BABYLON.Color3(0.8, 0.1, 0.5);
box.material = matBox;
box.isPickable = false;
var box2 = BABYLON.Mesh.CreateBox("box2", 8.0, scene);
box2.position = new BABYLON.Vector3(-20, 4, 0);
var matBox2 = new BABYLON.StandardMaterial("matBox2", scene);
matBox2.diffuseColor = new BABYLON.Color3(1, 0, 0);
box2.material = matBox2;
var box3 = BABYLON.Mesh.CreateBox("box3", 8.0, scene);
box3.position = new BABYLON.Vector3(20, 4, 0);
var matBox3 = new BABYLON.StandardMaterial("matBox3", scene);
matBox3.diffuseColor = new BABYLON.Color3(1, 0, 0);
box3.material = matBox3;
var box4 = BABYLON.Mesh.CreateBox("box4", 8.0, scene);
box4.position = new BABYLON.Vector3(0, 0, 20);
var matBox4 = new BABYLON.StandardMaterial("matBox4", scene);
matBox4.diffuseColor = new BABYLON.Color3(0, 1, 0);
box4.material = matBox4;
var box5 = BABYLON.Mesh.CreateBox("box5", 8.0, scene);
box5.position = new BABYLON.Vector3(0, 0, -20);
var matBox5 = new BABYLON.StandardMaterial("matBox5", scene);
matBox5.diffuseColor = new BABYLON.Color3(0, 1, 0);
box5.material = matBox5;
//ray showing the direction
var ray = new BABYLON.Ray();
var rayHelper = new BABYLON.RayHelper(ray);
var localMeshDirection = new BABYLON.Vector3(0, 0, -1);
var localMeshOrigin = new BABYLON.Vector3(0, 0, -.4);
var length = 10;
rayHelper.attachToMesh(box, localMeshDirection, localMeshOrigin, length);
rayHelper.show(scene);
function mousemovef() {
var pickResult = scene.pick(scene.pointerX, scene.pointerY);
if (pickResult.hit) {
var diffX = pickResult.pickedPoint.x - box.position.x;
var diffY = pickResult.pickedPoint.z - box.position.z;
box.rotation.y = Math.atan2(diffX,diffY);
}
}
scene.onPointerMove = function () {
mousemovef();
};
function vecToLocal(vector, mesh) {
var m = mesh.getWorldMatrix();
var v = BABYLON.Vector3.TransformCoordinates(vector, m);
return v;
}
scene.registerBeforeRender(function () {
var origin = box.position;
function predicate(mesh) {
if (mesh == box2 || mesh == box || mesh == box5) {
return false;
}
return true;
}
var forward = new BABYLON.Vector3(0,0,1);
forward = vecToLocal(forward, box);
var direction = forward.subtract(origin);
direction = BABYLON.Vector3.Normalize(direction);
var length = 100;
var ray = new BABYLON.Ray(origin, direction, length);
//ray.show(scene, new BABYLON.Color3(1, 1, 0.1));
var hit = scene.pickWithRay(ray, predicate);
if (hit.pickedMesh) {
hit.pickedMesh.scaling.y += 0.01;
}
});
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>
出力
上記のコード行は、次の出力を生成します-
レイキャスト述語
説明
述語関数を使用したレイキャストは、必要なメッシュを選択するのに役立ちます。 メッシュを選択したくない場合は、同じものを無視できます。
上記の関数は、光線によって選択されるメッシュを提供します。 選択されたメッシュがbox2、box、またはbox5の場合、falseを返します。それ以外の場合、true。
上記の例を同じように試すことができます。
BabylonJS –メッシュシャドウ
シャドウは、作成されたメッシュに光が当たる方法に基づいてレンダリングされます。 これらは、3Dの世界で出力をリアルに見せるために重要な役割を果たします。
babylonjsを使用して影を作成する方法を学びましょう。
構文
パラメーター
メッシュの影に関連する次のパラメータを考慮してください-
- Shadowsize -影のサイズ。
- Light -シーンで使用されるライト。
Demo
出力
上記のコード行は、次の出力を生成します-
シャドウ
説明
影を作成するには、shadowgeneratorを作成する必要があります。 以下に例を示します。
シャドウが必要なメッシュを定義するには、上記のジェネレーターに同じものを追加する必要があります。
これで、地面とその上にボックスを作成しました。 箱の影が地面に落ちるようにします。 それを行うには、次のように行われている影を受け取るために地面がマークされていることを確認する必要があります-
次のような影に利用可能ないくつかのフィルターがあります-
デモでは、shadowGenerator00.useBlurExponentialShadowMap = true;を使用しました。他のものを試して、出力がどのように見えるかを確認できます。
ここでは、gr1.jpgという画像を使用しました。 画像は、images/フォルダーにローカルに保存されます。 選択した任意の画像をダウンロードして、デモリンクで使用できます。
BabylonJS –メッシュ上の高度なテクスチャ
このセクションでは、メッシュの高度なテクスチャについて学習します。 さまざまなテクスチャを以下に示します-
- リンク:/babylonjs/babylonjs_mesh_cube_texture [キューブテクスチャ]
- リンク:/babylonjs/babylonjs_mesh_mirror_bump_texture [ミラーとバンプテクスチャ]
- リンク:/babylonjs/babylonjs_mesh_video_texture [ビデオテクスチャ]
ミラー、バンプ、ビデオ、屈折などの複雑なテクスチャをメッシュに適用しましょう。
Sr.No.
|
Mesh & Description
|
1
|
MeshHightlight Layer
ハイライトレイヤーは、シーン内のメッシュをハイライトするために使用されます。 色を付けると、メッシュの境界に色が適用されます。 ハイライトしたいゲームの場合、メッシュハイライトレイヤーを同じように使用できます。
|
2
|
Morph a Mesh
モーフィングは、何らかの遷移手段によってオブジェクトの形状を別の形状に変更します。 図形の更新可能なパラメーターを見てきました。それ以外の場合、パラメーターはfalseに設定されます。 モーフィングの場合、trueに設定され、メッシュが更新されて形状が変更されます。
|
3
|
Actions to Mesh
アクションは、メッシュに相互作用を追加するために使用されます。 イベントは、メッシュをクリックしたとき、またはメッシュが交差または衝突したときにアクティブになります。
|
4
|
Mesh AssetsManager
assestsmanagerクラスを使用すると、メッシュ、画像、およびバイナリファイルをシーンにロードできます。
|
5
|
Import Mesh
Import Meshを使用して学習します。
|
6
|
Mesh Morph Targets
線、リボン、多角形などの変形を見てきました。 さて、このデモでは球と箱のモーフィングが見られます。モーフターゲットを使用すると、球の形状が変更されます。これは以下のデモで見られます。
|
7
|
Mesh Instances
シーンに同一のメッシュを描画する場合は、インスタンスを使用します。
|
8
|
Mesh LOD & Instances
LODは距離の線を表します。 この機能を使用すると、ビューアの距離に基づいてメッシュを指定できます。 ビューアーからオブジェクトまでの距離が長くなると、LODを使用してメッシュの詳細レベルが明確に表示されます。
|
9
|
Mesh VolumemetricLightScatteringPost-process
このプロセスは、以下の出力に示すように光を散乱させます。 ブラウザで同じことをテストすると、メッシュを通して光がどのように散乱するかがわかります。
|
10
|
Mesh EdgesRenderer
EdgesRenderingは、上記の出力に示すように、メッシュの周囲にエッジを描画するために使用されます。
|
11
|
Mesh BlendModes
マテリアルのアルファモードを変更することにより、ブレンドモードを作成できます。
|
12
|
Mesh SolidParticles
SolidParticleシステムはメッシュ上で更新されます。 メッシュで見たすべてのプロパティは、固体粒子で使用できます。
|
13
|
Mesh FacetData
ファセットデータは大量のメモリを消費するため、この機能はデフォルトでは有効になっていません。 有効にするには、必要に応じてメッシュを作成し、ファセットデータを更新する必要があります。
|
BabylonJS-VectorPositionおよびRotation
ブラウザで以下に示すデモリンクを実行します。 以下のデモでは、x、y、z軸を描画しました。 正、負の方向のx、y、z軸にプロットされた数字があります。 ブラウザで同じことを実行し、必要に応じて値を変更し、シェイプ、メッシュを描画し、それらを配置し、x、y、z軸でどのようにレンダリングするかを確認します。メッシュの配置がどのように行われるかを確認すると役立ちます。
Demo
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>BabylonJs - Basic Element-Creating Scene</title>
<script src = "babylon.js"></script>
<style>
canvas {width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3( .5, .5, .5);
//camera
var camera = new BABYLON.ArcRotateCamera("camera1", 0, 0, 0, new BABYLON.Vector3(5, 3, 0), scene);
camera.setPosition(new BABYLON.Vector3(5, 10, -10));
camera.attachControl(canvas, true);
//lights
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
light.intensity = 0.8;
var spot = new BABYLON.SpotLight(
"spot",
new BABYLON.Vector3(25, 15, -10),
new BABYLON.Vector3(-1, -0.8, 1), 15, 1, scene);
spot.diffuse = new BABYLON.Color3(1, 1, 1);
spot.specular = new BABYLON.Color3(0, 0, 0);
spot.intensity = 0.2;
//material
var mat = new BABYLON.StandardMaterial("mat1", scene);
mat.alpha = 1.0;
mat.diffuseColor = new BABYLON.Color3(0.5, 0.5, 1.0);
mat.backFaceCulling = false;
//mat.wireframe = true;
//show axis
var showAxis = function(size) {
var makeTextPlane = function(text, color, size) {
var dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", 50, scene, true);
dynamicTexture.hasAlpha = true;
dynamicTexture.drawText(text, 5, 40, "bold 36px Arial", color , "transparent", true);
var plane = new BABYLON.Mesh.CreatePlane("TextPlane", size, scene, true);
plane.material = new BABYLON.StandardMaterial("TextPlaneMaterial", scene);
plane.material.backFaceCulling = false;
plane.material.specularColor = new BABYLON.Color3(0, 0, 0);
plane.material.diffuseTexture = dynamicTexture;
return plane;
};
var axisX = BABYLON.Mesh.CreateLines("axisX", [
new BABYLON.Vector3(-size *0.95, 0.05* size, 0),
new BABYLON.Vector3(-size, 0, 0),
new BABYLON.Vector3(-size *0.95, -0.05* size, 0),
new BABYLON.Vector3(-size, 0, 0),
new BABYLON.Vector3.Zero(),
new BABYLON.Vector3(size, 0, 0),
new BABYLON.Vector3(size *0.95, 0.05* size, 0),
new BABYLON.Vector3(size, 0, 0),
new BABYLON.Vector3(size *0.95, -0.05* size, 0)
], scene);
axisX.color = new BABYLON.Color3(1, 0, 0);
var xChar = makeTextPlane("X", "red", size/10);
xChar.position = new BABYLON.Vector3(0.9 *size, -0.05* size, 0);
var xChar1 = makeTextPlane("-X", "red", size/10);
xChar1.position = new BABYLON.Vector3(-0.9 *size, 0.05* size, 0);
var axisY = BABYLON.Mesh.CreateLines("axisY", [
new BABYLON.Vector3( -0.05 *size, -size* 0.95, 0),
new BABYLON.Vector3(0, -size, 0),
new BABYLON.Vector3(0.05 *size, -size* 0.95, 0),
new BABYLON.Vector3(0, -size, 0),
new BABYLON.Vector3.Zero(),
new BABYLON.Vector3(0, size, 0),
new BABYLON.Vector3( -0.05 *size, size* 0.95, 0),
new BABYLON.Vector3(0, size, 0),
new BABYLON.Vector3( 0.05 *size, size* 0.95, 0)
], scene);
axisY.color = new BABYLON.Color3(0, 1, 0);
var yChar = makeTextPlane("Y", "green", size/10);
yChar.position = new BABYLON.Vector3(0, 0.9 *size, -0.05* size);
var yChar1 = makeTextPlane("-Y", "green", size/10);
yChar1.position = new BABYLON.Vector3(0, -0.9 *size, 0.05* size);
var axisZ = BABYLON.Mesh.CreateLines("axisZ", [
new BABYLON.Vector3( 0 , -0.05 *size, -size* 0.95),
new BABYLON.Vector3(0, 0, -size),
new BABYLON.Vector3( 0 , 0.05 *size, -size* 0.95),
new BABYLON.Vector3(0, 0, -size),
new BABYLON.Vector3.Zero(),
new BABYLON.Vector3(0, 0, size),
new BABYLON.Vector3( 0 , -0.05 *size, size* 0.95),
new BABYLON.Vector3(0, 0, size),
new BABYLON.Vector3( 0, 0.05 *size, size* 0.95)
], scene);
axisZ.color = new BABYLON.Color3(0, 0, 1);
var zChar = makeTextPlane("Z", "blue", size/10);
zChar.position = new BABYLON.Vector3(0, 0.05 *size, 0.9* size);
var zChar1 = makeTextPlane("-Z", "blue", size/10);
zChar1.position = new BABYLON.Vector3(0, 0.05 *size, -0.9* size);
};
showAxis(10);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>
出力
ベクトル
x、y、z軸に沿って座標を定義してみましょう。
Demo
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>BabylonJs - Basic Element-Creating Scene</title>
<script src = "babylon.js"></script>
<style>
canvas {width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3( .5, .5, .5);
//camera
var camera = new BABYLON.ArcRotateCamera("camera1", 0, 0, 0, new BABYLON.Vector3(5, 3, 0), scene);
camera.setPosition(new BABYLON.Vector3(5, 10, -10));
camera.attachControl(canvas, true);
//lights
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
light.intensity = 0.8;
var spot = new BABYLON.SpotLight(
"spot", new BABYLON.Vector3(25, 15, -10),
new BABYLON.Vector3(-1, -0.8, 1), 15, 1, scene);
spot.diffuse = new BABYLON.Color3(1, 1, 1);
spot.specular = new BABYLON.Color3(0, 0, 0);
spot.intensity = 0.2;
//material
var mat = new BABYLON.StandardMaterial("mat1", scene);
mat.alpha = 1.0;
mat.diffuseColor = new BABYLON.Color3(0.5, 0.5, 1.0);
mat.backFaceCulling = false;
//mat.wireframe = true;
var makeTextPlane = function(text, color, size) {
var dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", 50, scene, true);
dynamicTexture.hasAlpha = true;
dynamicTexture.drawText(text, 5, 40, "bold 36px Arial", color , "transparent", true);
var plane = new BABYLON.Mesh.CreatePlane("TextPlane", size, scene, true);
plane.material = new BABYLON.StandardMaterial("TextPlaneMaterial", scene);
plane.material.backFaceCulling = false;
plane.material.specularColor = new BABYLON.Color3(0, 0, 0);
plane.material.diffuseTexture = dynamicTexture;
return plane;
};
//show axis
var showAxis = function(size) {
var axisX = BABYLON.Mesh.CreateLines("axisX", [
new BABYLON.Vector3(-size *0.95, 0.05* size, 0),
new BABYLON.Vector3(-size, 0, 0),
new BABYLON.Vector3(-size *0.95, -0.05* size, 0),
new BABYLON.Vector3(-size, 0, 0),
new BABYLON.Vector3.Zero(),
new BABYLON.Vector3(size, 0, 0),
new BABYLON.Vector3(size *0.95, 0.05* size, 0),
new BABYLON.Vector3(size, 0, 0),
new BABYLON.Vector3(size *0.95, -0.05* size, 0)
], scene);
axisX.color = new BABYLON.Color3(1, 0, 0);
var xChar = makeTextPlane("X", "red", size/10);
xChar.position = new BABYLON.Vector3(0.9 *size, -0.05* size, 0);
var xChar1 = makeTextPlane("-X", "red", size/10);
xChar1.position = new BABYLON.Vector3(-0.9 *size, 0.05* size, 0);
var xcor = [];
for (i =- 10; i <= 10; i++) {
xcor[i] = makeTextPlane(i, "red", size/10);
xcor[i].position = new BABYLON.Vector3(i, 0, 0);
}
var axisY = BABYLON.Mesh.CreateLines("axisY", [
new BABYLON.Vector3( -0.05 *size, -size* 0.95, 0),
new BABYLON.Vector3(0, -size, 0),
new BABYLON.Vector3(0.05 *size, -size* 0.95, 0),
new BABYLON.Vector3(0, -size, 0),
new BABYLON.Vector3.Zero(),
new BABYLON.Vector3(0, size, 0),
new BABYLON.Vector3( -0.05 *size, size* 0.95, 0),
new BABYLON.Vector3(0, size, 0),
new BABYLON.Vector3( 0.05 *size, size* 0.95, 0)
], scene);
axisY.color = new BABYLON.Color3(0, 1, 0);
var yChar = makeTextPlane("Y", "green", size/10);
yChar.position = new BABYLON.Vector3(0, 0.9 *size, -0.05* size);
var yChar1 = makeTextPlane("-Y", "green", size/10);
yChar1.position = new BABYLON.Vector3(0, -0.9 *size, 0.05* size);
var ycor = [];
for (y=-10;y<=10;y++) {
xcor[y] = makeTextPlane(y, "green", size/10);
xcor[y].position = new BABYLON.Vector3(0, y, 0);
}
var axisZ = BABYLON.Mesh.CreateLines("axisZ", [
new BABYLON.Vector3( 0 , -0.05 *size, -size* 0.95),
new BABYLON.Vector3(0, 0, -size),
new BABYLON.Vector3( 0 , 0.05 *size, -size* 0.95),
new BABYLON.Vector3(0, 0, -size),
new BABYLON.Vector3.Zero(),
new BABYLON.Vector3(0, 0, size),
new BABYLON.Vector3( 0 , -0.05 *size, size* 0.95),
new BABYLON.Vector3(0, 0, size),
new BABYLON.Vector3( 0, 0.05 *size, size* 0.95)
], scene);
axisZ.color = new BABYLON.Color3(0, 0, 1);
var zChar = makeTextPlane("Z", "blue", size/10);
zChar.position = new BABYLON.Vector3(0, 0.05 *size, 0.9* size);
var zChar1 = makeTextPlane("-Z", "blue", size/10);
zChar1.position = new BABYLON.Vector3(0, 0.05 *size, -0.9* size);
var zcor = [];
for (z =- 10; z <= 10; z++) {
xcor[z] = makeTextPlane(z, "green", size/10);
xcor[z].position = new BABYLON.Vector3(0, 0, z);
}
};
//Lets draw a mesh along the axis.
var spriteManagerPlayer = new BABYLON.SpriteManager("playerManager", "images/bird.png", 1, 200, scene);
var player = new BABYLON.Sprite("player", spriteManagerPlayer);
player.position.x = 2;
player.position.y = 2;
player.position.z = 0;
var zChardot = makeTextPlane(".", "red", 1);
zChardot.position = new BABYLON.Vector3(1.8, 1.8,0);
var box = BABYLON.Mesh.CreateBox("box", '2', scene);
box.position = new BABYLON.Vector3(-5,3,0);//center point of box x-axis is -5 and y axis is 3.
var box = BABYLON.Mesh.CreateBox("box", '2', scene);
box.position = new BABYLON.Vector3(0,3,-3);//center point of box x-axis is -5 and y axis is 3.
var redSphere = BABYLON.Mesh.CreateSphere("red", 32, 1, scene);//no position for sphere so by default it takes 0,0,0
showAxis(10);
returnscene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>
出力
上記のコード行は、次の出力を生成します-
このデモでは、画像bird.pngを使用しました。 画像はimages/フォルダにローカルに保存され、参照用に以下に貼り付けられます。 選択した任意の画像をダウンロードして、デモリンクで使用できます。
鳥
ベテックス座標
Demo
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>BabylonJs - Basic Element-Creating Scene</title>
<script src = "babylon.js"></script>
<style>
canvas {width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3( .5, .5, .5);
//camera
var camera = new BABYLON.ArcRotateCamera("camera1", 0, 0, 0, new BABYLON.Vector3(5, 3, 0), scene);
camera.setPosition(new BABYLON.Vector3(5, 10, -10));
camera.attachControl(canvas, true);
//lights
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
light.intensity = 0.8;
var spot = new BABYLON.SpotLight(
"spot",
new BABYLON.Vector3(25, 15, -10),
new BABYLON.Vector3(-1, -0.8, 1), 15, 1, scene);
spot.diffuse = new BABYLON.Color3(1, 1, 1);
spot.specular = new BABYLON.Color3(0, 0, 0);
spot.intensity = 0.2;
//material
var mat = new BABYLON.StandardMaterial("mat1", scene);
mat.alpha = 1.0;
mat.diffuseColor = new BABYLON.Color3(0.5, 0.5, 1.0);
mat.backFaceCulling = false;
//mat.wireframe = true;
var makeTextPlane = function(text, color, size) {
var dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", 50, scene, true);
dynamicTexture.hasAlpha = true;
dynamicTexture.drawText(text, 5, 40, "bold 36px Arial", color , "transparent", true);
var plane = new BABYLON.Mesh.CreatePlane("TextPlane", size, scene, true);
plane.material = new BABYLON.StandardMaterial("TextPlaneMaterial", scene);
plane.material.backFaceCulling = false;
plane.material.specularColor = new BABYLON.Color3(0, 0, 0);
plane.material.diffuseTexture = dynamicTexture;
return plane;
};
//show axis
var showAxis = function(size) {
var axisX = BABYLON.Mesh.CreateLines("axisX", [
new BABYLON.Vector3(-size *0.95, 0.05* size, 0),
new BABYLON.Vector3(-size, 0, 0),
new BABYLON.Vector3(-size *0.95, -0.05* size, 0),
new BABYLON.Vector3(-size, 0, 0),
new BABYLON.Vector3.Zero(),
new BABYLON.Vector3(size, 0, 0),
new BABYLON.Vector3(size *0.95, 0.05* size, 0),
new BABYLON.Vector3(size, 0, 0),
new BABYLON.Vector3(size *0.95, -0.05* size, 0)], scene);
axisX.color = new BABYLON.Color3(1, 0, 0);
var xChar = makeTextPlane("X", "red", size/10);
xChar.position = new BABYLON.Vector3(0.9 *size, -0.05* size, 0);
var xChar1 = makeTextPlane("-X", "red", size/10);
xChar1.position = new BABYLON.Vector3(-0.9 *size, 0.05* size, 0);
var xcor = [];
for (i =- 10; i <= 10; i++) {
xcor[i] = makeTextPlane(i, "red", size/10);
xcor[i].position = new BABYLON.Vector3(i, 0, 0);
}
var axisY = BABYLON.Mesh.CreateLines("axisY", [
new BABYLON.Vector3( -0.05 *size, -size* 0.95, 0),
new BABYLON.Vector3(0, -size, 0),
new BABYLON.Vector3(0.05 *size, -size* 0.95, 0),
new BABYLON.Vector3(0, -size, 0),
new BABYLON.Vector3.Zero(),
new BABYLON.Vector3(0, size, 0),
new BABYLON.Vector3( -0.05 *size, size* 0.95, 0),
new BABYLON.Vector3(0, size, 0),
new BABYLON.Vector3( 0.05 *size, size* 0.95, 0)
], scene);
axisY.color = new BABYLON.Color3(0, 1, 0);
var yChar = makeTextPlane("Y", "green", size/10);
yChar.position = new BABYLON.Vector3(0, 0.9 *size, -0.05* size);
var yChar1 = makeTextPlane("-Y", "green", size/10);
yChar1.position = new BABYLON.Vector3(0, -0.9 *size, 0.05* size);
var ycor = [];
for (y =- 10; y <= 10; y++) {
xcor[y] = makeTextPlane(y, "green", size/10);
xcor[y].position = new BABYLON.Vector3(0, y, 0);
}
var axisZ = BABYLON.Mesh.CreateLines("axisZ", [
new BABYLON.Vector3( 0 , -0.05 *size, -size* 0.95),
new BABYLON.Vector3(0, 0, -size),
new BABYLON.Vector3( 0 , 0.05 *size, -size* 0.95),
new BABYLON.Vector3(0, 0, -size),
new BABYLON.Vector3.Zero(),
new BABYLON.Vector3(0, 0, size),
new BABYLON.Vector3( 0 , -0.05 *size, size* 0.95),
new BABYLON.Vector3(0, 0, size),
new BABYLON.Vector3( 0, 0.05 *size, size* 0.95)
], scene);
axisZ.color = new BABYLON.Color3(0, 0, 1);
var zChar = makeTextPlane("Z", "blue", size/10);
zChar.position = new BABYLON.Vector3(0, 0.05 *size, 0.9* size);
var zChar1 = makeTextPlane("-Z", "blue", size/10);
zChar1.position = new BABYLON.Vector3(0, 0.05 *size, -0.9* size);
var zcor = [];
for (z =- 10; z <= 10; z++) {
xcor[z] = makeTextPlane(z, "green", size/10);
xcor[z].position = new BABYLON.Vector3(0, 0, z);
}
};
var kite = BABYLON.Mesh.CreateLines("kite", [
new BABYLON.Vector3(-4,0,0),
new BABYLON.Vector3(0,4,0),
new BABYLON.Vector3(4,0,0),
new BABYLON.Vector3(0,-4,0),
new BABYLON.Vector3(-4,0,0)
], scene);
kite.color = new BABYLON.Color3(1, 1, 1);
var path = [];
path.push(new BABYLON.Vector3(-4, 0, 0));
path.push(new BABYLON.Vector3(0, 0, 0));
path.push(new BABYLON.Vector3(4, 0, 0));
var lines1 = BABYLON.Mesh.CreateLines("lines",path, scene, true);
lines1.color = new BABYLON.Color3(1, 1, 1);
showAxis(10);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>
出力
上記のコード行は、次の出力を生成します。
Vectormode
ベクトル回転
次に、ベクトルの回転の仕組みを見てみましょう。
Demo
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>BabylonJs - Basic Element-Creating Scene</title>
<script src = "babylon.js"></script>
<style>
canvas {width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3( .5, .5, .5);
//camera
var camera = new BABYLON.ArcRotateCamera("camera1", 0, 0, 0, new BABYLON.Vector3(5, 3, 0), scene);
camera.setPosition(new BABYLON.Vector3(0, 0, 0));
camera.attachControl(canvas, true);
//lights
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
light.intensity = 0.8;
var spot = new BABYLON.SpotLight(
"spot",
new BABYLON.Vector3(25, 15, -10),
new BABYLON.Vector3(-1, -0.8, 1), 15, 1, scene);
spot.diffuse = new BABYLON.Color3(1, 1, 1);
spot.specular = new BABYLON.Color3(0, 0, 0);
spot.intensity = 0.2;
//material
var mat = new BABYLON.StandardMaterial("mat1", scene);
mat.alpha = 1.0;
mat.diffuseColor = new BABYLON.Color3(0.5, 0.5, 1.0);
mat.backFaceCulling = false;
//mat.wireframe = true;
var makeTextPlane = function(text, color, size) {
var dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", 50, scene, true);
dynamicTexture.hasAlpha = true;
dynamicTexture.drawText(text, 5, 40, "bold 36px Arial", color , "transparent", true);
var plane = new BABYLON.Mesh.CreatePlane("TextPlane", size, scene, true);
plane.material = new BABYLON.StandardMaterial("TextPlaneMaterial", scene);
plane.material.backFaceCulling = false;
plane.material.specularColor = new BABYLON.Color3(0, 0, 0);
plane.material.diffuseTexture = dynamicTexture;
return plane;
};
//show axis
var showAxis = function(size) {
var axisX = BABYLON.Mesh.CreateLines("axisX", [
new BABYLON.Vector3(-size *0.95, 0.05* size, 0),
new BABYLON.Vector3(-size, 0, 0),
new BABYLON.Vector3(-size *0.95, -0.05* size, 0),
new BABYLON.Vector3(-size, 0, 0),
new BABYLON.Vector3.Zero(),
new BABYLON.Vector3(size, 0, 0),
new BABYLON.Vector3(size *0.95, 0.05* size, 0),
new BABYLON.Vector3(size, 0, 0),
new BABYLON.Vector3(size *0.95, -0.05* size, 0)
], scene);
axisX.color = new BABYLON.Color3(1, 0, 0);
var xChar = makeTextPlane("X", "red", size/10);
xChar.position = new BABYLON.Vector3(0.9 *size, -0.05* size, 0);
var xChar1 = makeTextPlane("-X", "red", size/10);
xChar1.position = new BABYLON.Vector3(-0.9 *size, 0.05* size, 0);
var xcor = [];
for (i =- 10; i <= 10; i++) {
xcor[i] = makeTextPlane(i, "red", size/10);
xcor[i].position = new BABYLON.Vector3(i, 0, 0);
}
var axisY = BABYLON.Mesh.CreateLines("axisY", [
new BABYLON.Vector3( -0.05 *size, -size* 0.95, 0),
new BABYLON.Vector3(0, -size, 0),
new BABYLON.Vector3(0.05 *size, -size* 0.95, 0),
new BABYLON.Vector3(0, -size, 0),
new BABYLON.Vector3.Zero(),
new BABYLON.Vector3(0, size, 0),
new BABYLON.Vector3( -0.05 *size, size* 0.95, 0),
new BABYLON.Vector3(0, size, 0),
new BABYLON.Vector3( 0.05 *size, size* 0.95, 0)
], scene);
axisY.color = new BABYLON.Color3(0, 1, 0);
var yChar = makeTextPlane("Y", "green", size/10);
yChar.position = new BABYLON.Vector3(0, 0.9 *size, -0.05* size);
var yChar1 = makeTextPlane("-Y", "green", size/10);
yChar1.position = new BABYLON.Vector3(0, -0.9 *size, 0.05* size);
var ycor = [];
for (y =- 10; y <= 10; y++) {
xcor[y] = makeTextPlane(y, "green", size/10);
xcor[y].position = new BABYLON.Vector3(0, y, 0);
}
var axisZ = BABYLON.Mesh.CreateLines("axisZ", [
new BABYLON.Vector3( 0 , -0.05 *size, -size* 0.95),
new BABYLON.Vector3(0, 0, -size),
new BABYLON.Vector3( 0 , 0.05 *size, -size* 0.95),
new BABYLON.Vector3(0, 0, -size),
new BABYLON.Vector3.Zero(),
new BABYLON.Vector3(0, 0, size),
new BABYLON.Vector3( 0 , -0.05 *size, size* 0.95),
new BABYLON.Vector3(0, 0, size),
new BABYLON.Vector3( 0, 0.05 *size, size* 0.95)
], scene);
axisZ.color = new BABYLON.Color3(0, 0, 1);
var zChar = makeTextPlane("Z", "blue", size/10);
zChar.position = new BABYLON.Vector3(0, 0.05 *size, 0.9* size);
var zChar1 = makeTextPlane("-Z", "blue", size/10);
zChar1.position = new BABYLON.Vector3(0, 0.05 *size, -0.9* size);
var zcor = [];
for (z =- 10; z <= 10; z++) {
xcor[z] = makeTextPlane(z, "green", size/10);
xcor[z].position = new BABYLON.Vector3(0, 0, z);
}
};
var yellowSphere = BABYLON.Mesh.CreateSphere("yellowSphere",32, 1, scene);
yellowSphere.setPivotMatrix(BABYLON.Matrix.Translation(2, 0, 0));
var yellowMaterial = new BABYLON.StandardMaterial("yellowMaterial", scene);
yellowMaterial.diffuseColor = BABYLON.Color3.Yellow();
yellowSphere.material = yellowMaterial;
var wheel1 = BABYLON.MeshBuilder.CreateTorus('t1', {diameter: 2.0}, scene);
wheel1.position.x = -2.0
wheel1.position.z = -2.0;
showAxis(10);
var k = 0.0;
var y = 0.0;
var x = 0.0;
scene.registerBeforeRender(function () {
wheel1.rotation.copyFromFloats(0.0, 0.0, Math.PI/2);
wheel1.addRotation(0.0, y, 0.0);
wheel1.addRotation(x, 0.0, 0.0);
yellowSphere.rotation.y += 0.01;
y += 0.05;
});
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>
出力
上記のコード行は、次の出力を生成します-
ベクトル回転
BabylonJS-デカール
デカールは、オブジェクトに貼り付けられたステッカーのようなものです。 ステッカーの描画は、メッシュ(たとえば、ゲーム内のオブジェクト)に描画される2D画像を使用して行われます。 ゲームでは、弾丸を発射する軍隊があると考えてください。弾丸の印象はオブジェクト上で見る必要があります。 だから、Babylonjsでは、デカールを使用して行われます。オブジェクトをクリックすると、クリックした場所に2D画像が描画されます。
デカールは、作成されたメッシュの詳細を追加するために使用されます-弾丸、穴などの詳細 以下のデモリンクでは、画像を使用し、インポートしたメッシュに同じ画像を追加しています。
デカールを追加するには、次のコードを使用できます-
次のコードを実行して、メッシュにデカールを追加します-
Demo
上記のデモリンクでは、SSAOcat.babylonメッシュを使用しています。 ここからSSAOcat.babylonのjsonファイルをダウンロードできます-
SSAOcat.babylon
ファイルをscenes/フォルダーに保存します。 これは、次のように出力を取得するのに役立ちます。
出力
上記のコード行は、次の出力を生成します-
デカール
このデモでは、画像 impact1.jpg を使用しました。 画像はimages/フォルダにローカルに保存され、参照用に以下に貼り付けられます。 選択した任意の画像をダウンロードして、デモリンクで使用できます。
Impact1
BabylonJS-Curve3
BabylonJSには、複雑な数学曲線を作成するためのAPIが組み込まれています。 パターンを描画し、メッシュに与えられたパスの座標を計算するために複雑な方程式を使用して作成されたリボン、ラインを見たことがあります。 ここには組み込みのAPIがあり、Curves APIのように複雑な計算を行わないようにします。
説明される曲線は次のとおりです-
- 二次ベジェ曲線
- 立方ベジェ曲線
- エルミートスプライン
- Catmull-Romスプライン
二次ベジェ曲線
このセクションでは、二次ベジェ曲線について学びます。
構文
パラメーター
二次ベジェ曲線に関連する次のパラメーターを検討してください。
- Origin -曲線の原点。
- Control -曲線の制御点。
- 宛先-宛先ポイント。
- Noofpoints -配列内のポイント。
立方ベゼール曲線
このセクションでは、立方ベジェ曲線について学習します。
構文
パラメーター
3次ベジェ曲線に関連する次のパラメーターを検討してください。
- Origin -原点。
- control1 -ベクトル形式の最初の制御点。
- control2 -ベクトル形式の2番目の制御点。
- Destination -ベクター形式の宛先ポイント。
- no_of_points -配列形式のポイントの数。
エルミートスプライン曲線
このセクションでは、エルミートスプライン曲線について学習します。
構文
パラメーター
エルミートスプライン曲線に関連する次のパラメータを考慮してください-
- p1 -曲線の原点。
- t1 -原点の接線ベクトル点。
- p2 -宛先ポイント。
- t2 -宛先タンジェントベクトル。
- NbPoints -最終曲線のポイントの配列。
Catmull-Romスプライン曲線
このセクションでは、Catmull-Romスプライン曲線について学習します。
構文
パラメーター
Catmull-Romスプライン曲線に関連する次のパラメータを考慮してください-
- ポイント-Vector3の配列、曲線は制御点を通過する必要があります。
- NbPoints -各Vector3コントロールポイント間のポイントの数。
Demo
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>BabylonJs - Basic Element-Creating Scene</title>
<script src = "babylon.js"></script>
<style>
canvas {width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3( .5, .5, .5);
//camera
var camera = new BABYLON.ArcRotateCamera("camera1", 0, 0, 0, new BABYLON.Vector3(5, 3, 0), scene);
camera.setPosition(new BABYLON.Vector3(0, 0, -100));
camera.attachControl(canvas, true);
//lights
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
light.intensity = 0.8;
var spot = new BABYLON.SpotLight(
"spot",
new BABYLON.Vector3(25, 15, -10),
new BABYLON.Vector3(-1, -0.8, 1), 15, 1, scene);
spot.diffuse = new BABYLON.Color3(1, 1, 1);
spot.specular = new BABYLON.Color3(0, 0, 0);
spot.intensity = 0.2;
//material
var mat = new BABYLON.StandardMaterial("mat1", scene);
mat.alpha = 1.0;
mat.diffuseColor = new BABYLON.Color3(0.5, 0.5, 1.0);
mat.backFaceCulling = false;
//mat.wireframe = true;
var makeTextPlane = function(text, color, size) {
var dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", 50, scene, true);
dynamicTexture.hasAlpha = true;
dynamicTexture.drawText(text, 5, 40, "bold 36px Arial", color , "transparent", true);
var plane = new BABYLON.Mesh.CreatePlane("TextPlane", size, scene, true);
plane.material = new BABYLON.StandardMaterial("TextPlaneMaterial", scene);
plane.material.backFaceCulling = false;
plane.material.specularColor = new BABYLON.Color3(0, 0, 0);
plane.material.diffuseTexture = dynamicTexture;
return plane;
};
//show axis
var showAxis = function(size) {
var axisX = BABYLON.Mesh.CreateLines("axisX", [
new BABYLON.Vector3(-size *0.95, 0.05* size, 0),
new BABYLON.Vector3(-size, 0, 0),
new BABYLON.Vector3(-size *0.95, -0.05* size, 0),
new BABYLON.Vector3(-size, 0, 0),
new BABYLON.Vector3.Zero(),
new BABYLON.Vector3(size, 0, 0),
new BABYLON.Vector3(size *0.95, 0.05* size, 0),
new BABYLON.Vector3(size, 0, 0),
new BABYLON.Vector3(size *0.95, -0.05* size, 0)
], scene);
axisX.color = new BABYLON.Color3(1, 0, 0);
var xChar = makeTextPlane("X", "red", size/10);
xChar.position = new BABYLON.Vector3(0.9 *size, -0.05* size, 0);
var xChar1 = makeTextPlane("-X", "red", size/10);
xChar1.position = new BABYLON.Vector3(-0.9 *size, 0.05* size, 0);
var xcor = [];
for (i =- 20; i <= 20; i++) {
xcor[i] = makeTextPlane(i, "red", size/10);
xcor[i].position = new BABYLON.Vector3(i, 0, 0);
}
var axisY = BABYLON.Mesh.CreateLines("axisY", [
new BABYLON.Vector3( -0.05 *size, -size* 0.95, 0),
new BABYLON.Vector3(0, -size, 0),
new BABYLON.Vector3(0.05 *size, -size* 0.95, 0),
new BABYLON.Vector3(0, -size, 0),
new BABYLON.Vector3.Zero(),
new BABYLON.Vector3(0, size, 0),
new BABYLON.Vector3( -0.05 *size, size* 0.95, 0),
new BABYLON.Vector3(0, size, 0),
new BABYLON.Vector3( 0.05 *size, size* 0.95, 0)
], scene);
axisY.color = new BABYLON.Color3(0, 1, 0);
var yChar = makeTextPlane("Y", "green", size/10);
yChar.position = new BABYLON.Vector3(0, 0.9 *size, -0.05* size);
var yChar1 = makeTextPlane("-Y", "green", size/10);
yChar1.position = new BABYLON.Vector3(0, -0.9 *size, 0.05* size);
var ycor = [];
for (y =- 20; y <= 20; y++) {
xcor[y] = makeTextPlane(y, "green", size/10);
xcor[y].position = new BABYLON.Vector3(0, y, 0);
}
var axisZ = BABYLON.Mesh.CreateLines("axisZ", [
new BABYLON.Vector3( 0 , -0.05 *size, -size* 0.95),
new BABYLON.Vector3(0, 0, -size),
new BABYLON.Vector3( 0 , 0.05 *size, -size* 0.95),
new BABYLON.Vector3(0, 0, -size),
new BABYLON.Vector3.Zero(),
new BABYLON.Vector3(0, 0, size),
new BABYLON.Vector3( 0 , -0.05 *size, size* 0.95),
new BABYLON.Vector3(0, 0, size),
new BABYLON.Vector3( 0, 0.05 *size, size* 0.95)
], scene);
axisZ.color = new BABYLON.Color3(0, 0, 1);
var zChar = makeTextPlane("Z", "blue", size/10);
zChar.position = new BABYLON.Vector3(0, 0.05 *size, 0.9* size);
var zChar1 = makeTextPlane("-Z", "blue", size/10);
zChar1.position = new BABYLON.Vector3(0, 0.05 *size, -0.9* size);
var zcor = [];
for (z =- 20; z <= 20; z++) {
xcor[z] = makeTextPlane(z, "green", size/10);
xcor[z].position = new BABYLON.Vector3(0, 0, z);
}
};
var quadraticBezierVectors = BABYLON.Curve3.CreateQuadraticBezier(
BABYLON.Vector3.Zero(),
new BABYLON.Vector3(10, 5, 5),
new BABYLON.Vector3(5, 10, 0), 15);
var quadraticBezierCurve = BABYLON.Mesh.CreateLines("qbezier", quadraticBezierVectors.getPoints(), scene);
quadraticBezierCurve.color = new BABYLON.Color3(1, 1, 0.5);
var cubicBezierVectors = BABYLON.Curve3.CreateCubicBezier(
BABYLON.Vector3.Zero(),
new BABYLON.Vector3(10, 5, 20),
new BABYLON.Vector3(-50, 5, -20),
new BABYLON.Vector3( -10, 20, 10), 60);
var cubicBezierCurve = BABYLON.Mesh.CreateLines("cbezier", cubicBezierVectors.getPoints(), scene);
cubicBezierCurve.color = new BABYLON.Color3(1, 0, 0);
var continued = cubicBezierVectors.continue(cubicBezierVectors).continue(quadraticBezierVectors);
var points = continued.getPoints();
var nbPoints = 60;
var l = continued.length()/2;
var p1 = points[points.length - 1];
var t1 = (p1.subtract(points[points.length - 2])).scale(l);
var p2 = points[0];
var t2 = (points[1].subtract(p2)).scale(l);
var hermite = BABYLON.Curve3.CreateHermiteSpline(p1, t1, p2, t2, nbPoints);
continued = continued.continue(hermite);
var points = continued.getPoints();
var continuedCurve = BABYLON.Mesh.CreateLines("continued", points, scene);
continuedCurve.position = new BABYLON.Vector3(20, -20, 20);
continuedCurve.color = new BABYLON.Color3(0, 0, 0);
var nbPoints = 20; //the number of points between each Vector3 control points
var points = [new BABYLON.Vector3(10, 5, 20),
new BABYLON.Vector3(-20, 5, -20),
new BABYLON.Vector3(-25, 5, -20),
new BABYLON.Vector3( -30, 20, 10),]; //an array of Vector3 the curve must pass through : the control points
var catmullRom = BABYLON.Curve3.CreateCatmullRomSpline(points, nbPoints);
var path = catmullRom.getPoints();
var l = catmullRom.length();
var finalcatmullCurve = BABYLON.Mesh.CreateLines("continued", path, scene);
var mySinus = [];
for (var i = 0; i < 30; i++) {
mySinus.push( new BABYLON.Vector3(i, Math.sin(i/10), 0) );
}
var mySinusCurve3 = new BABYLON.Curve3(mySinus);
var myFullCurve = mySinusCurve3.continue(cubicBezierVectors).continue(quadraticBezierVectors);
var points1 = myFullCurve.getPoints();
var curve3d = BABYLON.Mesh.CreateLines("continued", points1, scene);
curve3d.color = new BABYLON.Color3(0.9, 1, 0.2);
showAxis(20);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>
出力
上記のコード行は、次の出力を生成します-
カツムロムスプライン曲線
BabylonJS-動的テクスチャ
BabylonJSの動的テクスチャはキャンバスを作成し、テクスチャに簡単にテキストを書き込むことができます。 また、キャンバスを操作して、html5キャンバスで使用可能なすべての機能を使用して、動的テクスチャで使用することもできます。
テクスチャにテキストを書き込む方法を示し、作成するメッシュにベジェ曲線を描画する例に取り組みます。
構文
以下は、動的テクスチャを作成するための構文です-
パラメーター
以下は、動的テクスチャを作成するために必要なパラメータです-
- name -動的テクスチャの名前
- option -動的テクスチャの幅と高さがあります
- scene -作成されたシーン
構文
以下は、テクスチャにテキストを書き込むための構文です-
パラメーター
以下は、テクスチャにテキストを書き込むために必要なパラメータです-
- text -書き込まれるテキスト。
- x -左端からの距離。
- Y -invertYに応じて、上端または下端からの距離。
- font -font-style、font-size、font_nameの形式のフォント定義。
- invertY -デフォルトではtrueで、yは上からの距離です。falseの場合、yは下からの距離で、文字が反転します。
- update -デフォルトではtrueで、動的テクスチャはすぐに更新されます。
Demo
出力
動的テクスチャ
動的テクスチャは、次のように動的テクスチャのhtml5キャンバスメソッドとプロパティを操作することもできます-
構文
Demo
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> Babylon.JS : Demo2</title>
<script src = "babylon.js"></script>
<style>
canvas { width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function () {
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI/2, Math.PI/3, 25, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 0.7;
var ground = BABYLON.MeshBuilder.CreateGround("ground1", {width: 20, height: 10, subdivisions: 25}, scene);
//Create dynamic texture
var textureGround = new BABYLON.DynamicTexture("dynamic texture", 512, scene);
var textureContext = textureGround.getContext();
var materialGround = new BABYLON.StandardMaterial("Mat", scene);
materialGround.diffuseTexture = textureGround;
ground.material = materialGround;
//Draw on canvas
textureContext.beginPath();
textureContext.moveTo(75,40);
textureContext.bezierCurveTo(75,37,70,25,50,25);
textureContext.bezierCurveTo(20,25,20,62.5,20,62.5);
textureContext.bezierCurveTo(20,80,40,102,75,120);
textureContext.bezierCurveTo(110,102,130,80,130,62.5);
textureContext.bezierCurveTo(130,62.5,130,25,100,25);
textureContext.bezierCurveTo(85,25,75,37,75,40);
textureContext.fillStyle = "red";
textureContext.fill();
textureGround.update();
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>
出力
動的テクスチャ1
説明
グラウンドメッシュを作成し、ダイナミックテクスチャを追加しました。
動的テクスチャでキャンバスを操作するには、最初にキャンバスメソッドを呼び出す必要があります-
キャンバスに、次のようにbezierCurveを追加します-
BabylonJS-視差マッピング
視差マッピングは、オフセットマッピングとも呼ばれます。 ジオメトリの表面のレリーフの効果を強調するために、マテリアルのテクスチャにオフセットとして適用される高さマップを使用します。 3Dワールドでは、深さを適用した石の壁はより見た目がよく、エンドユーザーにはリアルに見えます。 急角度のビュー角度では、テクスチャ座標がより変位し、ビューの変化に伴う視差効果により奥行きの錯覚を与えます。
Parallexマッピングは標準マテリアルで使用されます。 これについては、標準の素材の章で学びました。
パラレックスマッピングには3つのプロパティがあります。
- material.useParallax = true; -これは、視差マッピングを有効にします。 このプロパティを使用するには、最初にマテリアルにバンプテクスチャを割り当てる必要があります。
- material.useParallaxOcclusion = true; -このプロパティを使用するには、useParallaxをtrueに設定する必要があります。 パララックスオクルージョンを有効にします。
- material.parallaxScaleBias = 0.1; -深さのスケーリング係数をメッシュに適用します。Parallaxの場合、.05〜.1の値が適切です。 オクルージョンの場合、0.2に到達できます。
Demo
出力
上記のコード行は、次の出力を生成します-
Parallex Mapping
このデモでは、画像 a1.png、a2.png、pebble.jpg および a3.png を使用しました。 画像はimages/フォルダーにローカルに保存され、参照用に以下に貼り付けられます。 選択した任意の画像をダウンロードして、デモリンクで使用できます。
Images/a1.png
A1 Wall
Images/a2.png
A2 Wall
Images/pebble.jpg
A1 Wall
images/a3.png
A3 Wall
Babylonjs-lens-flares
BabylonJS-スクリーンショットの作成
現在作業中の画面をキャプチャするために、印刷画面キーを使用して高解像度のスクリーンショットを撮ることはできません。 BabylonJSはcreatescreenshot APIを提供します。 ファイルはpng形式で保存され、画像の品質は犠牲になりません。
構文
画面のスクリーンショットを撮るには、以下に示すようにエンジン、カメラ、サイズを提供する必要があります。
ユーザーがクリックすると、スクリーンショットAPIを呼び出すボタンが配置されます。
スクリーンショットAPIに渡されるエンジンに変更が加えられます。
次のようにボタンが追加されます-
クリックイベントが上のボタンに追加され、 createscreenshot が呼び出されます。 スクリーンの最後にスクリーンショットを更新します。 画像srcに使用されるデータには、スクリーンショットのURLが作成されています。
Demo
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>BabylonJs - Basic Element-Creating Scene</title>
<script src = "babylon.js"></script>
<style>
canvas {width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });
var createScene = function() {
var scene = new BABYLON.Scene(engine);
//Setup environment
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 20, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);
var gmat = new BABYLON.StandardMaterial("mat1", scene);
gmat.alpha = 1.0;
//gmat.diffuseColor = new BABYLON.Color3(1, 0, 0);
var texture = new BABYLON.Texture("images/mat.jpg", scene);
gmat.diffuseTexture = texture;
var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 150, height:15}, scene);
ground.material = gmat;
var mat = new BABYLON.StandardMaterial("mat1", scene);
mat.alpha = 1.0;
mat.diffuseColor = new BABYLON.Color3(1, 0, 0);
var texture = new BABYLON.Texture("images/rugby.jpg", scene);
mat.diffuseTexture = texture;
var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2, diameterX: 3}, scene);
sphere.position= new BABYLON.Vector3(15,1,0);
sphere.material = mat;
var faceColors = new Array();
faceColors[1] = new BABYLON.Color4(0,1,0,1); //green front
var matcone = new BABYLON.StandardMaterial("mat1", scene);
matcone.alpha = 1.0;
matcone.diffuseColor = new BABYLON.Color3(0.9, 0, 2);
var texture = new BABYLON.Texture("images/cone.jpg", scene);
matcone.diffuseTexture = texture;
var cone = BABYLON.MeshBuilder.CreateCylinder("cone", {diameterTop: 0, tessellation: 4}, scene);
cone.position= new BABYLON.Vector3(12,1,0);
cone.material = matcone;
var matplane = new BABYLON.StandardMaterial("matplane", scene);
matplane.alpha = 1.0;
matplane.diffuseColor = new BABYLON.Color3(0.9, 0, 2);
var texture = new BABYLON.Texture("images/board.jpg", scene);
matplane.diffuseTexture = texture;
var plane = BABYLON.MeshBuilder.CreatePlane("plane", {width: 5, height : 5}, scene);
plane.position= new BABYLON.Vector3(9,2.5,0);
plane.material = matplane;
var disc = BABYLON.MeshBuilder.CreateDisc("disc", {tessellation: 3}, scene);
disc.position= new BABYLON.Vector3(5,1,0);
var mattorus = new BABYLON.StandardMaterial("matoct", scene);
mattorus.alpha = 1.0;
var texture = new BABYLON.Texture("images/ring.jpg", scene);
mattorus.diffuseTexture = texture;
var torus = BABYLON.MeshBuilder.CreateTorus("torus", {thickness: 0.5}, scene);
torus.position= new BABYLON.Vector3(3,1,0);
torus.material = mattorus;
var matoct = new BABYLON.StandardMaterial("matoct", scene);
matoct.alpha = 1.0;
var texture = new BABYLON.Texture("images/d1.png", scene);
matoct.diffuseTexture = texture;
var octahedron = BABYLON.MeshBuilder.CreatePolyhedron("oct", {type: 1, size: 3}, scene);
octahedron.position= new BABYLON.Vector3(-2,5,0);
octahedron.material = matoct;
var matico = new BABYLON.StandardMaterial("matico", scene);
matico.alpha = 1.0;
var texture = new BABYLON.Texture("images/diamond.jpg", scene);
matico.diffuseTexture = texture;
var icosphere = BABYLON.MeshBuilder.CreateIcoSphere("ico", {radius: 5, radiusY: 3, subdivisions: 2}, scene);
icosphere.position= new BABYLON.Vector3(-13,3,0);
icosphere.material = matico;
//add screenshot button
var ssButton = document.getElementById("takescreenshot");
if (ssButton == null) {
ssButton = document.createElement("input");
document.body.appendChild(ssButton);
}
ssButton.id = "takescreenshot";
ssButton.type = "button";
ssButton.style.position = "fixed";
ssButton.style.right = "0px";
ssButton.style.top = "100px";
ssButton.value = "create screenshot";
ssButton.onclick = function () {
BABYLON.Tools.CreateScreenshot(engine, camera, { width: 1024, height: 300 },
function (data) {
var img = document.createElement("img");
img.src = data;
document.body.appendChild(img);
});
};
return scene;
}
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>
出力
上記のコード行は、次の出力を生成します-
image
このデモでは、画像 mat.jpg、rugby.jpg、cone.jpg、board.jpg、ring.jpg、d1.png、diamond.jpg を使用しました。 画像はimages/フォルダにローカルに保存され、参照用に以下に貼り付けられます。 選択した任意の画像をダウンロードして、デモリンクで使用できます。
Images/mat.jpg
マット画像
Images/rugby.jpg
rugby Image
Images/cone.jpg
コーン画像
Images/board.jpg
ボード画像
Images/ring.jpg
リング画像
Images/d1.png
D1 Image
Images/diamond.jpg
ダイヤモンド画像
Babylonjs-reflection-probes
BabylonJS-標準レンダリングパイプライン
StandardRenderingPipelineには、実世界に関連する一連のポストプロセスエフェクトが用意されています。 ライト効果やイルミネーション効果など、さまざまなポストプロセス効果があります。
以下の例では、レンズ効果、ライトの後処理効果などのさまざまな効果を確認できます。
HDRキューブテクスチャを使用し、テクスチャは.hdrである必要があります。 このテクスチャは、カメラを回転させているときに見られるパノラマ効果を提供します。
標準のレンダリングパイプラインクラスは、次のコード行で効果を得るために呼び出されます-
以下に示すデモでは、cubetexture環境を作成します。 同じためにグラウンドメッシュを使用し、標準レンダリングパイプラインをシーン全体に適用します。
テクスチャは、画像であるlensTextureを使用して与えられ、シーンを移動すると同じテクスチャを見ることができます。
Demo
imagesフォルダーを作成し、その中に.hdrファイルを保存します。 www.hdrlabs.comのimages/GravelPlaza_REF.hdrを使用しました。
選択した.hdrタイプのファイルをダウンロードして、デモリンクで使用できます。
出力
上記のコード行は、次の出力を生成します-
標準レンダリングパイプライン
このデモでは、画像 images/GravelPlaza_REF.hdr、images/reflectivity.png、images/albedo.png、images/lensdirt.jpg を使用しました。 画像はimages/フォルダーにローカルに保存され、参照用に以下に貼り付けられます。 任意の画像をダウンロードして、デモリンクで使用できます。 .hdrファイルのサイズは非常に大きいため、ここに貼り付けることは困難です。
Images/reflectivity.png
反射率
Images/albedo.png
アルベド
Images/lensdirt.png
レンズの汚れ
BabylonJS-シェーダー素材
シェーダーマテリアルは、出力としてマテリアルを提供します。 このマテリアルを任意のメッシュに適用できます。 基本的に、シーンからのデータを頂点シェーダーとフラグメントシェーダーに渡します。
シェーダー素材を取得するには、次のクラスが呼び出されます-
パラメーター
シェーダー素材に関連する次のパラメータを考慮してください-
- Name -シェーダーに名前を付ける文字列。
- Scene -シェーダーが使用されるシーン。
- ルート-3つの方法のいずれかでシェーダーコードへのルート-
最後に述べた構文は、indexlフォルダー内の外部ファイルCOMMON_NAME.vertex.fxおよびCOMMON_NAME.fragment.fxで使用されます。
- オプション-属性を含むオブジェクトと、名前を文字列として含むユニフォーム配列。
値を持つシェーダー構文は次のようになります-
属性は配列形式でなければなりません。 これらには、vector3 3D浮動小数点ベクトルである位置、法線、uvが含まれます。
- vec2 -浮動小数点数の2次元ベクトル。
- vec3 -浮動小数点数の3次元ベクトル。
- mat4 -4列4行の浮動小数点数の行列。
- gl_Position -画面座標の位置データを提供します。
- gl_FragColor -画面上のファセットの表現に色データを提供します。
上記はGLSL言語の組み込み変数です。
頂点の位置はできるだけ正確である必要があるため、すべての浮動小数点数は高精度として設定する必要があります。 これは、各シェーダーのコードの開始時に- precision highp float を使用して行われます。 精度highp floatは、floatに使用される精度を決定します。
次のデモは、最初のオブジェクトメソッドに基づいています。
Demo
出力
上記のコード行は、次の出力を生成します-
シェーダー素材
このデモでは、画像 mat.jpg を使用しました。 画像はimages/フォルダにローカルに保存され、参照用に以下に貼り付けられます。 選択した任意の画像をダウンロードして、デモリンクで使用できます。
Images/mat.jpg
マット画像
BabylonJS-骨とスケルトン
Babylonjsは、スケルトンとボーンを作成するAPIを提供します。
構文
さまざまな関数の構文を見てみましょう。
スケルトン用
骨用
Demo
上記のデモリンクでは、Dude.babylonメッシュを使用しています。 Dude.babylonのjsonファイルはここからダウンロードできます-
Dude.babylon
以下に示すように、ファイルをシーンに保存して出力を取得します。
出力
上記のコード行は、次の出力を生成します-
骨格と骨
説明
インポートメッシュには、babylonjsの男メッシュを使用しました。
メッシュはスケルトンを提供します。 たとえば、skeleton = skeletons [0];
スケルトンから骨を取得するには、次のコマンドを実行します-
上記のデモでは、2つの球体を作成し、メッシュに渡しました。 このために、次のコマンドを実行しました-
And,
BabylonJS-物理エンジン
Babylon.jsには、シーンにインタラクションを追加するのに役立つ物理エンジン用のプラグインシステムがあり、2つのオブジェクト間の衝突と跳ね返りを実生活のインタラクションのように表示します。ビリヤードなどのゲームでも同じ動作が見られ、プレーヤーはスティックでボールを打ったり、ボールが他のボールと衝突したりします。ここで、物理エンジンはボールのリアルな表示を試みます。地面にぶつかると衝突して跳ね返ります。 エンジンには、インパルス、フォース、ベロシティの変更、コールバック関数を適用するのに役立つクラスとAPIがあり、必要に応じて、またメッシュが他のメッシュと衝突した場合に特定のアクションを実行する必要があるときに呼び出されます。
使用できる3つの物理プラグインがあります-
- Cannon.js
- Oimo.js *Energy.js
Demo
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>BabylonJs - Ball/Ground Demo</title>
<script type = "text/javascript" src="https://cdn.babylonjs.com/Oimo.js"></script>
<script src = "babylon.js"></script>
<style>
canvas {width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var v3 = BABYLON.Vector3;
var createScene = function () {
//This creates a basic Babylon Scene object (non-mesh)
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera("Camera", 0.86, 1.37, 250, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas);
camera.maxZ = 5000;
camera.lowerRadiusLimit = 120;
camera.upperRadiusLimit = 430;
camera.lowerBetaLimit =0.75;
camera.upperBetaLimit =1.58 ;
new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene);
var randomNumber = function (min, max) {
if (min == max) {
return (min);
}
var random = Math.random();
return ((random* (max - min)) + min);
};
var mat = new BABYLON.StandardMaterial("ground", scene);
var t = new BABYLON.Texture("images/gr1.jpg", scene);
t.uScale = t.vScale = 10;
mat.diffuseTexture = t;
mat.specularColor = BABYLON.Color3.Black();
var g = BABYLON.Mesh.CreateBox("ground", 200, scene);
g.position.y = -20;
g.position.x = 0
g.scaling.y = 0.01;
g.material = mat;
scene.enablePhysics(new BABYLON.Vector3(0, -10, 0), new BABYLON.OimoJSPlugin());
g.physicsImpostor = new BABYLON.PhysicsImpostor(g, BABYLON.PhysicsImpostor.BoxImpostor, {
mass: 0,
restitution: 0.9
}, scene);
var getPosition = function(y) {
return new v3(randomNumber(-100, 100), y, randomNumber(-100, 100));
};
var allspheres = [];
var y = 50;
var max = 50;
for (var index = 0; index < max; index++) {
var redSphere = BABYLON.Mesh.CreateSphere("s" + index, 32, 8, scene);
redSphere.position = getPosition(y);
redSphere.physicsImpostor = new BABYLON.PhysicsImpostor(redSphere, BABYLON.PhysicsImpostor.SphereImpostor,{
mass: 1, restitution:0.9
}, scene);
redSphere.physicsImpostor.applyImpulse(new BABYLON.Vector3(1, 2, -1), new BABYLON.Vector3(1, 2, 0));
var redMat = new BABYLON.StandardMaterial("ground", scene);
redMat.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);
redMat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);
redMat.emissiveColor = BABYLON.Color3.Red();
redSphere.material = redMat;
//push all spheres in the allspheres variable
allspheres.push(redSphere);
y += 10;//increment height
}
scene.registerBeforeRender(function() {
allspheres.forEach(function(obj) {
//if the sphers falls down its updated again over here
//If object falls
if (obj.position.y < -100) {
obj.position = getPosition(200);
}
});
})
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>
出力
上記のコード行は、次の出力を生成します-
物理エンジン
このデモでは、画像 images/gr1.jpg を使用しました。 画像はimages/フォルダーにローカルに保存され、参照用に以下に貼り付けられます。 選択した任意の画像をダウンロードして、デモリンクで使用できます。
images/gr1.jpg
GR1
説明
上記の行は、物理プラグインを有効にします。 任意のプラグインを使用できます。 OimoJsplugin()を使用しました。
相互作用のために、物理エンジンは偽者を使用します。 詐欺師に適用された場合、オブジェクトの形状は変更できません。 変更した場合、新しい詐欺師を作成する必要があります。
球のために、示されているようにバウンス効果のために偽者を設定し、それにインパルスも追加します-
physicsImposterのパラメーター
物理効果のために次のパラメータを考慮してください-
対象
ここで、オブジェクトは、インタラクションを適用する対象です。 たとえば、球体、箱など。
Type
タイプは次のいずれかです-
- BABYLON.PhysicsImpostor.SphereImpostor;
- BABYLON.PhysicsImpostor.BoxImpostor;
- BABYLON.PhysicsImpostor.PlaneImpostor;
- BABYLON.PhysicsImpostor.MeshImpostor;
- BABYLON.PhysicsImpostor.CylinderImpostor;
- BABYLON.PhysicsImpostor.ParticleImpostor;
- BABYLON.PhysicsImpostor.HeightmapImpostor;
Mass
唯一の必須パラメーターは質量であり、これはオブジェクトのkg単位の質量です。 値として0は、静的な詐欺師を作成します-床に適しています。
払戻し
これは、衝突時にボディが「戻す」力の量です。 値が低いとバウンスが発生せず、値が1の場合は非常に弾みのある相互作用になります。
上記のコードは、地面に落ちた球体を戻します。 落下した球体の地面を更新し続けます。 ブラウザで上記のデモを試して、物理効果を確認してください。
BabylonJS-サウンドと音楽の再生
音と音楽がなければ、ゲームは不完全です。 BabylonJSサウンドエンジンには、ゲームにサウンドエフェクトを追加するのに役立つAPIが付属しています。 ゲームで戦闘が発生した場合、銃声を発する必要があります。これは、babylonjsサウンドエンジンを使用してここでも達成できます。 ゲームのキーボード/マウスコントロールの効果に基づいてサウンド効果を取得できます。 サウンドエンジンは、アンビエントサウンド、特殊サウンド、指向性サウンドを提供します。 エンジンは.mp3および.wavサウンド形式をサポートしています。
構文
パラメーター
サウンドエンジンに関連する次のパラメータを考慮してください-
- 名前-サウンドの名前。
- URL -再生されるサウンドのURL。
- シーン-サウンドを再生するシーン。
- Callbackfunction -サウンドを再生する準備ができたときに呼び出されるコールバック関数。現在、nullです。 いくつかの例を見て、その使用方法を学びます。
- * Jsonオブジェクト*-このオブジェクトには、実行する必要があるものの基本的な詳細があります。
- sound.autoplay -これにより、ファイルがダウンロードされるとサウンドが自動的に再生されます。
- loop:true -これは、サウンドがループで連続して再生されることを意味します。
プロジェクトディレクトリにサウンドフォルダーを作成し、サンプルオーディオファイルをダウンロードして出力をテストします。
すでに作成したシーンにサウンドを追加しましょう。
Demo
出力
上記のコード行は、次の出力を生成します-
音のない基本シーン
例えば、
Demo
コールバックでは、setTimeoutを使用します。 つまり、特定の時間後にのみサウンドを再生する必要があります。 5sをタイマーとして追加したため、ファイルScooby.wavがダウンロードされて5sが完了すると、サウンドが再生されます。
キーボードのクリックとキーで音を鳴らす
シーンの任意の場所をクリックすると、爆発的な効果音が聞こえます。矢印キー(左、右、上または下)を押すと、爆発的な効果音が再生されます。
クリックのために、イベントを onmousedown にウィンドウにアタッチし、キーのために、keydownイベントを使用します。 キーコードに基づいて、サウンドが再生されます。
Demo
出力
上記のコード行は、次の出力を生成します-
音のない基本シーン
最初に出会ったjsonオブジェクトのサウンドの音量を制御できます。
例えば、
サウンドファイルがいつ終了したかを知るために、次のように使用できるイベントがあります-
SetVolumeプロパティは、コンストラクター以外にサウンドを制御する場合にも使用できます。
例えば、
シーンで複数のサウンドを再生している場合、作成されたすべてのサウンドにグローバルサウンドを設定できます。
例えば、
空間3Dサウンドの作成
サウンドを空間サウンド(空間サウンドに似たサウンド)に変換する場合は、サウンドコンストラクターにオプションを追加する必要があります。
例えば、
以下は、空間音のさまざまなオプションです-
- DistanceModel -デフォルトでは「線形」方程式を使用しています。 他のオプションは「逆」または「指数」です。
- MaxDistance -100に設定されています。 これは、リスナーがサウンドから100ユニット以上離れると、ボリュームが0になることを意味します。 もう音が聞こえない
- PanningModel -「HRTF」に設定されます。 仕様は、それが人間の被験者から測定されたインパルス応答との畳み込みを使用した高品質の空間化アルゴリズムであると述べています。 ステレオ出力を指します。
- MaxDistance -distanceModelが線形の場合にのみ使用されます。逆関数または指数関数では使用されません。
空間音を使ったデモ
メッシュへのサウンドの付加
BABYLON.Soundを使用して、メッシュにサウンドを添付できます。 メッシュが動いている場合、音はそれに沿って動きます。 * AttachtoMesh(mesh)*は使用する方法です。
Demo
出力
上記のコード行は、次の出力を生成します-
Spatial 3D Sound