# Water Material

> The Babylon.js materials library water effect.

Source: https://doc.babylonjs.com/toolsAndResources/assetLibraries/materialsLibrary/waterMat

![Water material](https://doc.babylonjs.com/img/extensions/materials/water.webp)

# Using the water material

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

> [!WARNING]
> **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: [Playground: Water Material](https://playground.babylonjs.com/#1SLLOJ#20) - Example of water material

# Water material demos

- PG: [Playground: Water Material](https://playground.babylonjs.com/#1SLLOJ#15) - Calm lake
- PG: [Playground: Water Material](https://playground.babylonjs.com/#1SLLOJ#17) - Ocean, play with waves
- PG: [Playground: Water Material](https://playground.babylonjs.com/#1SLLOJ#18) - Deep water, play with water color
- PG: [Playground: Water Material](https://playground.babylonjs.com/#1SLLOJ#19) - Beach

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

```javascript
var ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 512, height: 512, subdivisions: 32 }, scene);

var waterMaterial = new BABYLON.WaterMaterial("water_material", scene);
waterMaterial.bumpTexture = new BABYLON.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:

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

That's all.

# Customize the water material

You can customize the material with these properties:

```javascript
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 BABYLON.Vector2(1.0, 1.0); // The wind direction on the water surface (on width and height)
waterMaterial.waterColor = new BABYLON.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
```