以下の記事を書いた際に扱った、Babylon.js の Procedural Texture をさらに試して記事を書いてみます。
具体的には、公式ドキュメントに 7つ掲載されているもののうち、「Fire Procedural Texture 以外のもの」を 2つほど選んで試してみようと思います。
●Babylon.js の Procedural Texture のアニメーションする炎のテクスチャ（Fire Procedural Texture）を試す - Qiita
https://qiita.com/youtoy/items/0ec43be190f9ebc24aa3
今回試す内容
前回の記事の以下の部分で、Procedural Texture は Fire Procedural Texture を含めて 7つある、ということを書いていました。
Fire Procedural Texture 以外の 6つは、以下のとおりです。
- Brick Procedural Texture
- Cloud Procedural Texture
- Grass Procedural Texture
- Marble Procedural Texture
- Road Procedural Texture
- Wood Procedural Texture
今回、この中の 2つ「Brick Procedural Texture」と「Cloud Procedural Texture」を試してみます。
Brick Procedural Texture
最初は Brick Procedural Texture です。
●Brick Procedural Texture | Babylon.js Documentation
https://doc.babylonjs.com/toolsAndResources/assetLibraries/proceduralTexturesLibrary/brick
Brick Procedural Texture について、変更可能なパラメータを見てみます。
パラメータは「numberOfBricksHeight」「numberOfBricksWidth」「jointColor」「brickColor」の 4つがあるようです。
上記のサンプルのパラメータを変更して、見た目の変化を確認してみます。
numberOfBricksHeight を 10、numberOfBricksWidth を 20 と、デフォルトより値を大きくしてみます。以下のように、ブロックの数が縦横方向の両方と増えたのが確認できました。
また色の変更も試してみます。
色の選定が適当ですが、とりあえず以下を設定してみました。
- jointColor ⇒ BABYLON.Color3.Red();
- brickColor ⇒ BABYLON.Color3.Blue();
Cloud Procedural Texture
次は Cloud Procedural Texture です。
●Cloud Procedural Texture | Babylon.js Documentation
https://doc.babylonjs.com/toolsAndResources/assetLibraries/proceduralTexturesLibrary/cloud
設定可能なパラメータの確認と、パラメータの変更をサクッと試してみます。
設定可能なパラメータは skyColor と cloudColor の 2つがあるようです。
以下のサンプルで、パラメータの変更を試してみます。
cloudColor を new BABYLON.Color3(0.2, 0.3, 0.5) とし、また skyColor を new BABYLON.Color3(0.5, 0.5, 1.0) に変更してみました。
変更後、色が指定した色に変わっていることが確認できました。