# Applying water material to a mesh
**URL:** https://forum.babylonjs.com/t/applying-water-material-to-a-mesh/40234
**Category:** Questions
**Created:** [April 26, 2023, 6:51am UTC](https://forum.babylonjs.com/t/applying-water-material-to-a-mesh/40234 "2023-04-26T06:51:55Z")
**Posts on this page:** 14
**Page:** 1
### Author:  [@Hayden](https://forum.babylonjs.com/u/Hayden)
#### Post date: [April 26, 2023, 6:51am UTC](https://forum.babylonjs.com/t/applying-water-material-to-a-mesh/40234/1 "2023-04-26T06:51:55Z")
Hello all,
I’m creating a scene where a plane with a water material is supposed to fill a number of pools and channels in a ground mesh. My own attempts to create water with a PBR material or import something from Blender were poor, so I tried to use the Babylon.js water material.
When I apply the material to the plane, however, the mesh is simply not visible. From moving the camera, which is subject to gravity and collison checking, I can see that it’s still there and collides with the camera ovoid.
I don’t receive an error message in the console, so I guess my code can’t be too wrong. Here’s the relevant code section:
> var waterMaterial = new BABYLON.WaterMaterial(“water\_material”, scene);
> waterMaterial.bumpTexture = new BABYLON.Texture(“materials/Water\_001\_NORM.jpg”, scene);
>
> var waterPlane = BABYLON.MeshBuilder.CreatePlane(“Water Plane”, scene);
> waterPlane.rotation.x = Math.PI/2;
> waterPlane.position.x = 0;
> waterPlane.position.z = 0;
> waterPlane.position.y = 1.4;
> waterPlane.scaling.x = 88;
> waterPlane.scaling.y = 194;
> waterPlane.material = waterMaterial;
> waterMaterial.addToRenderList(waterPlane);
I assume that I’m missing some general settings of the scene or the render engine. Has somebody hints what I should check?
Many thanks in advance
Hayden
---
### Author:  [@DRLeria](https://forum.babylonjs.com/u/DRLeria)
#### Post date: [April 26, 2023, 9:28am UTC](https://forum.babylonjs.com/t/applying-water-material-to-a-mesh/40234/2 "2023-04-26T09:28:09Z")
Hi @Hayden
Maybe this playground can help you.
> **[Babylon.js Playground](https://playground.babylonjs.com/#78CQ0T)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes
It may be because in the addToRenderList function you are not assigning the objects and the skybox (if you include it)
Also check the Texture path:
```auto
waterMaterial.bumpTexture = new BABYLON.Texture("./materials/Water_001_NORM.jpg", scene);
```
Maybe you need to add ./
---
### Author:  [@mawa](https://forum.babylonjs.com/u/mawa)
#### Post date: [April 26, 2023, 9:38am UTC](https://forum.babylonjs.com/t/applying-water-material-to-a-mesh/40234/3 "2023-04-26T09:38:52Z")
Yes 👍, … but then (just to make this clear) you do not need to push’em one-by-one, of course. You can add them all at once. \*\*
You can also include an identifier in your meshes name or id to have them render as a mirror on the watermat.
* * *
May be you also want to check the other water materials created from NME. There are a few nice ones you could use as a base. Meanwhile, have a great day 🕶
\*\*Edit: Apologies. That does not work. Old material does not have a renderList, only add (Don’t know why)
---
### Author:  [@CodingCrusader](https://forum.babylonjs.com/u/CodingCrusader)
#### Post date: [April 26, 2023, 10:41am UTC](https://forum.babylonjs.com/t/applying-water-material-to-a-mesh/40234/4 "2023-04-26T10:41:23Z")
If your demands on the water are not so high, and you still want to create a nice water effect with foam, here is an example from the good old days:
[simple stylized water shader | Babylon.js Playground (babylonjs.com)](https://playground.babylonjs.com/#UNGKGD#7)
---
### Author:  [@DRLeria](https://forum.babylonjs.com/u/DRLeria)
#### Post date: [April 26, 2023, 10:52am UTC](https://forum.babylonjs.com/t/applying-water-material-to-a-mesh/40234/5 "2023-04-26T10:52:04Z")
Beautiful shader sir! 🤲
---
### Author:  [@CodingCrusader](https://forum.babylonjs.com/u/CodingCrusader)
#### Post date: [April 26, 2023, 11:11am UTC](https://forum.babylonjs.com/t/applying-water-material-to-a-mesh/40234/6 "2023-04-26T11:11:00Z")
Handclaps goes to: [Simple stylized water shader - Demos and projects - Babylon.js (babylonjs.com)](https://forum.babylonjs.com/t/simple-stylized-water-shader/17672)
---
### Author:  [@Hayden](https://forum.babylonjs.com/u/Hayden)
#### Post date: [April 26, 2023, 10:02pm UTC](https://forum.babylonjs.com/t/applying-water-material-to-a-mesh/40234/7 "2023-04-26T22:02:29Z")
Hello all,
thanks for the hints. But I simply can’t get it working.
I added the water plane, the skydome and all ground meshes to the render list, but the material is still invisible.
Could the problem be the bump map? What do I need here? I have used the normal map of a pbr water material, but I’m beginning to think that was wrong. Do I need a greyscale texture?
The water mesh, by the way, is rather large. How do I scale the bump map? Would it work like this:
> waterMaterial.bumpTexture.uScale = 22;
@DRLeria Thanks for the Playground example. I will study this carefully and rework my code. Maybe I find my error.
I knew that this would be difficult …
All the best
Hayden
---
### Author:  [@jeremy-coleman](https://forum.babylonjs.com/u/jeremy-coleman)
#### Post date: [April 27, 2023, 3:27am UTC](https://forum.babylonjs.com/t/applying-water-material-to-a-mesh/40234/8 "2023-04-27T03:27:26Z")
hey this pg is kinda working .[https://playground.babylonjs.com/#101EJ3#18](https://playground.babylonjs.com/#101EJ3#18)
bumpHeight seems to be important
---
### Author:  [@CodingCrusader](https://forum.babylonjs.com/u/CodingCrusader)
#### Post date: [April 27, 2023, 5:22am UTC](https://forum.babylonjs.com/t/applying-water-material-to-a-mesh/40234/9 "2023-04-27T05:22:06Z")
There is still the OceanPostProcess, if the problem with the WaterMaterial still cannot be fixed.
```auto
var oceanPostProcess = new BABYLON.OceanPostProcess("Ocean", camera);
```
---
### Author:  [@Hayden](https://forum.babylonjs.com/u/Hayden)
#### Post date: [April 27, 2023, 7:50pm UTC](https://forum.babylonjs.com/t/applying-water-material-to-a-mesh/40234/11 "2023-04-27T19:50:11Z")
Hello all,
thanks for all the hints. But it’s hopeless. I followed exactly the Playground examples but all that the water material does is that it makes the mesh invisible.
@CodingCrusader: I have tried that. But it seems I can’t assign the effect to a specific mesh. It just creates an moving water surface all over the place.
Many thanks anyway. I will try a workaround, create a PBR material and see if I can make it look halfway convincing.
All the best
Hayden
---
### Author:  [@sebavan](https://forum.babylonjs.com/u/sebavan)
#### Post date: [May 2, 2023, 9:13pm UTC](https://forum.babylonjs.com/t/applying-water-material-to-a-mesh/40234/12 "2023-05-02T21:13:15Z")
@Hayden why not sharing a repro ?
---
### Author:  [@Hayden](https://forum.babylonjs.com/u/Hayden)
#### Post date: [March 16, 2024, 10:27pm UTC](https://forum.babylonjs.com/t/applying-water-material-to-a-mesh/40234/13 "2024-03-16T22:27:28Z")
Hello all,
allow me to reopen this thread. There’s a positive reason: I returned to the problem after a while and finally managed to get the water material working.
My problem was obviously that I had a sky dome in my scene instead of a sky box and applying a reflection map material to the mesh sphere lead to strange results. When I set up a cubic skybox with a reflection map, the water material finally looked as it should. I could even reuse the same skybox texture - it was just a matter of trying out the projection modes.
Still, there’s one thing that I think I don’t understand properly. When I add a mesh to the render list of the water material, what does it actually do? I have a scene with a pavillon standing close to a pool. The skybox is reflected in the pool water, but the pavillon is not. Maybe somebody can give me a hint.
Here’s the code how loaded, set up and added the respective mesh:
```
BABYLON.SceneLoader.ImportMeshAsync("Main Avenue South", "models/",
"ThePersianGarden_MainAvenueSouth.glb", scene).then((result) => {
var mainAvenueSouth = result.meshes[0];
var childMeshes = mainAvenueSouth.getChildMeshes();
for (let mesh of childMeshes) {
mesh.checkCollisions = true;
}
mainAvenueSouth.position.x = 0;
mainAvenueSouth.position.z = 0;
mainAvenueSouth.position.y = -0.8;
poolWater.addToRenderList(mainAvenueSouth);
})
```
Would be too kind if someone experienced could have a look. Thanks in advance!
Hayden
---
### Author:  [@mawa](https://forum.babylonjs.com/u/mawa)
#### Post date: [March 17, 2024, 3:11pm UTC](https://forum.babylonjs.com/t/applying-water-material-to-a-mesh/40234/14 "2024-03-17T15:11:56Z")
Long time I haven’t used this material. Had to open an old project, but yes… I simply added to render list all meshes. As far as I remember (though I could be wrong) you have to do so one by one (or may be from an array). Did you check it with just a mesh?
Like I’m also wondering what is ‘mainAvenueSouth’ (result.meshes[0]); Could it be that this is not a mesh but your parent transformNode? may be…
---
### Author:  [@CodingCrusader](https://forum.babylonjs.com/u/CodingCrusader)
#### Post date: [March 17, 2024, 4:02pm UTC](https://forum.babylonjs.com/t/applying-water-material-to-a-mesh/40234/15 "2024-03-17T16:02:37Z")
When I see a wheat field on land and the wind blowing over it, it reminds me of the sea.
I think you just have to replace the grass with a sea surface, where the peaks look wise.
[GPU Grass Test | Babylon.js Playground (babylonjs.com)](https://playground.babylonjs.com/#44S4NS#20)