Babylon.js EditorでWater materialを使ってみる

この投稿はBabylon.js Advent Calendar 2025の内容です。

以前から何度か書いていたBabylon.js Editorについて、できることを何度かに分けて書いてみたいと思います。

今回はWater Materialです。

こういうものを作ってみました。

使用した環境

1. Babylon.js Editorの基本的な情報、使い方

ここからダウンロードします。

公式ドキュメントはこちらです。

以前、簡単な紹介を書いたことがあります。

こちらの動画では、わかりやすく紹介されています。

なんでもよかったのですが、たまたま見つけたこちらを使用しました。11MB程度と軽量なので簡単に試せます。

Babylon.jsに対応している3Dモデルはglb, gltf, objのいずれかです。glb形式を取得したのですがそのままではうまく読み込めませんでした。そこで、いったんBlenderで開いてglbに再度出力したものを使いました。

Babylon.js Editorで新規プロジェクトを作ったら、[1] 画面左下のProject > [2] Assetsというフォルダを開きます。[3] ここでImportボタンを押して、上記のglb形式の3Dモデルを指定します。

この辺りは、以下の公式ドキュメントにも記載されています。

この工場？みたいなアセットは水が流れそうな箇所があります。しかし、当然インポートした直後は水面になっていません。

そこで、水面部分にWater Materialを対応させます。

まずはWater MaterialをAssetフォルダに作ります。Asset フォルダで右クリック＞Add > Material Library > Water Materialと選択することで、Water Materialのファイルを作ります。

すると、New Water Material.materialという名前のファイルができます。Graph ViewからObject4というオブジェクトを選択 > New Water Material.materialをマテリアルにドラッグします。

これだけだと水面にはなりません。ゆらゆらと揺れる透明な水を再現するには、こちらのPlaygroundの記述を参考にします。

まずはbumpTextureを設定します。以下のURLからwaterbump.pngを入手して、Assetフォルダにインポートします。

次に、Babylon.js Editorでobject4を選びInspectorのNormal Textureにwaterbump.pngをドラッグします。

すると、反射対象を選ぶエリアが追加されるので、反射させるオブジェクトを選びます。

屋根に相当するObject8、屋根についている管？のObject5、ついでに初期から存在しているboxなどを選ぶと、水面に反射します。

あとはWater materialのInspectorをいろいろ調整して、好みの状態を作ります。

たとえばcolorを調整すると、錆びついた水面や緑色の水面を作れます。

また、OptionsではWind force, lengthなどを調整して水面の波打つ力や速さを調整できます。

コードで書かなくても作れるのは便利ですね。Babylon.js Editorは色々機能があるので、よかったら試してみてください。