Applying water material to a mesh

Questions
1

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

2

Hi @Hayden

Maybe this playground can help you.

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:

waterMaterial.bumpTexture = new BABYLON.Texture("./materials/Water_001_NORM.jpg", scene);

Maybe you need to add ./

2 Likes
3

Yes :+1:, … 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 :sunglasses:

**Edit: Apologies. That does not work. Old material does not have a renderList, only add (Don’t know why)

4

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)

1 Like
5

Beautiful shader sir! :palms_up_together:

6

Handclaps goes to: Simple stylized water shader - Demos and projects - Babylon.js (babylonjs.com)

1 Like
7

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

8

hey this pg is kinda working .https://playground.babylonjs.com/#101EJ3#18

bumpHeight seems to be important

9

There is still the OceanPostProcess, if the problem with the WaterMaterial still cannot be fixed.

image
image853×542 59.5 KB 

<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);
11

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

12

@Hayden why not sharing a repro ?