Water Material

Water material

The water material can be found here: https://cdn.babylonjs.com/materialsLibrary/babylon.waterMaterial.js

Warning

The CDN should not be used in production environments. The purpose of our CDN is to serve Babylon packages to users learning how to use the platform or running small experiments. Once you've built an application and are ready to share it with the world at large, you should serve all packages from your own CDN.

A demo can be found here: PG: Water Material

PG: Water Material
PG: Water Material
PG: Water Material
PG: Water Material

The water material needs only a bump texture to render properly. Just create a new instance of the material and assign its bump texture:

import { Texture } from "@babylonjs/core/Materials/Textures/texture";
import { MeshBuilder } from "@babylonjs/core/Meshes/meshBuilder";
import { WaterMaterial } from "@babylonjs/materials/water/waterMaterial";
var ground = MeshBuilder.CreateGround("ground", { width: 512, height: 512, subdivisions: 32 }, scene);
var waterMaterial = new WaterMaterial("water_material", scene);
waterMaterial.bumpTexture = new Texture("bump.png", scene); // Set the bump texture
ground.material = waterMaterial;

To reflect and refract the world, you just have to add the desired meshes to the render list:

waterMaterial.addToRenderList(skybox);
waterMaterial.addToRenderList(mesh1);
waterMaterial.addToRenderList(mesh2);
// ... etc.

That's all.

You can customize the material with these properties:

import { Color3 } from "@babylonjs/core/Maths/math.color";
import { Vector2 } from "@babylonjs/core/Maths/math.vector";
waterMaterial.windForce = 45; // Represents the wind force applied on the water surface
waterMaterial.waveHeight = 1.3; // Represents the height of the waves
waterMaterial.bumpHeight = 0.3; // According to the bump map, represents the pertubation of reflection and refraction
waterMaterial.windDirection = new Vector2(1.0, 1.0); // The wind direction on the water surface (on width and height)
waterMaterial.waterColor = new Color3(0.1, 0.1, 0.6); // Represents the water color mixed with the reflected and refracted world
waterMaterial.colorBlendFactor = 2.0; // Factor to determine how the water color is blended with the reflected and refracted world
waterMaterial.waveLength = 0.1; // The lenght of waves. With smaller values, more waves are generated