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);
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)
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.
<script src="https://cdn.jsdelivr.net/npm/babylonjs-post-process@4.1.0-beta.3/babylonjs.postProcess.js"></script>
var oceanPostProcess = new BABYLON.OceanPostProcess("Ocean", camera);
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.
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!
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…
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.
, … 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. **
