Babylon.js の公式ドキュメントの「Asset Libraries」を見ていた際に「Procedural Texture Library」という項目が目にとまり、それが気になったので、少し試して記事にしてみました。
●Asset Libraries | Babylon.js Documentation
https://doc.babylonjs.com/toolsAndResources/assetLibraries
公式ドキュメント上の「Procedural Texture」のページは以下になります。
●Procedural Texture Library | Babylon.js Documentation
https://doc.babylonjs.com/toolsAndResources/assetLibraries/proceduralTexturesLibrary
Procedural Texture
Procedural Texture とは
Procedural Texture Library の説明を見てみると、「A library of procedural textures, coded textures to run and enhance your scene.」という説明が書かれています。
Babylon.js のシーンの中で利用可能な「coded textures」となるようです。
どんなテクスチャがあるのか、ページの表示を縮小して、一覧で見てみます。
どうやら、掲載されているテクスチャの種類は 7つのようでした。
具体的には、以下の 7つがあります。
- Brick Procedural Texture
- Cloud Procedural Texture
- Fire Procedural Texture
- Grass Procedural Texture
- Marble Procedural Texture
- Road Procedural Texture
- Wood Procedural Texture
Fire Procedural Texture を見てみる
試しに 7つある中の「Fire Procedural Texture」をピックアップして見てみます。
●Fire Procedural Texture | Babylon.js Documentation
https://doc.babylonjs.com/toolsAndResources/assetLibraries/proceduralTexturesLibrary/fire
サンプルページを開いてみると、良い感じに表面がアニメーションするテクスチャのようです。
パラメータを変更してみる
ページの説明のほうに戻って、記載された内容を見ていくと、見た目に関わる以下の 4つのパラメータを変更・指定できるようです。
その中の色に関わるパラメータである「fireColors」は、「BABYLON.Color3/4」を使った指定もでき、それ以外では「PurpleFireColors, GreenFireColors, RedFireColors, BlueFireColors」というあらかじめ準備された内容で指定することもできるようです。
試しに、 fireTexture.fireColors = BABYLON.FireProceduralTexture.BlueFireColors; を試してみます。
そうすると、以下のように炎の色が青になりました。
さらに、4種類の既定の内容を「RedFireColors ＞ BlueFireColors ＞ PurpleFireColors ＞ GreenFireColors」という順で変えてみて、その様子を動画にしてみました。
これは手軽に使えて、見た目も良い感じです！