Questions about the WaterMaterial

Hi Forum.

I got two questions when I using the WaterMaterial:

In the playground example of the WaterMaterial, the skybox and the ground are blended nicely on the water surface.But in my scene,I can only see the reflections of the sky!

Secondly,I found if the water surface is lower than the river bank,when the camera
comes close to the water the reflections of the sky is disappeared,then more closer,a radiant halo appears on the surface of water:

I’m very curious about how to solve these two problems.Can anyone help me?

Thank you!

1 Like

For your first problem, that’s because ground1.ground_sand is undefined, so water.addToRenderList(ground1.ground_sand); won’t work as expected.


About the second one, it might be related to the normals of the water mesh.


I’ve got a hierarchy wrong on the ground object!It’s really a low-level mistake.
After correcting it the water reflect right.Thank you very much!
And I also found that, set the third param of the WaterMaterial’s constructor to a larger value can make the reflections clearer.

In my scene I use the following code to calculate the normals(in FrameGround.js)

var normals=[];
BABYLON.VertexData.ComputeNormals(data_pos2, data_index2, normals);
BABYLON.VertexData._ComputeSides(0, data_pos2, data_index2, normals, data_uv2);
var vertexData= new BABYLON.VertexData();
vertexData.indices = data_index2;
vertexData.positions = data_pos2;
vertexData.normals = normals;
vertexData.uvs = data_uv2;

var mesh=new BABYLON.Mesh(name,scene);
vertexData.applyToMesh(mesh, true);

In the runtime scene,I find the normals attribute of vertexData is [0, 1, 0, 0, 1, 0…] all pointing to the sky.Did I do anything wrong?How could I correct it?

If those are the normals of the water mesh then it’s expected they all point toward the sky (0,1,0) as your water mesh is a horizontal plane (I think?).

Yup it should be correct. let s summon @julien-moreau to see if he s got an idea ?

By the way,I find a new question(third).I already know the third param of the WaterMaterial’s constructor can determine the clarity of the water reflection,but I don’t know what is the appropriate value.
Besides if the water mesh is not a square, how can I assignment the Vector2’s ratio?
summoning @julien-moreau

I’m sorry to ask so many questions about the water material.But I find two new :sweat_smile:
When I add the river bank into the render list of water,I found the high ground of river bank disappeared!I wonder how the water changes other mesh’s rendering!
To show this phenomenon better I made another test scene
before add:

after add:


The fifth,I find the backside of mesh may Impact the water refraction!It will makes strange effects at some angles.Like this:

We can see two shadows here,and one of them break away from the ground.
Then I try to use back face culling( in FrameGround2.js line 14),the second shadow become smaller,but there still left a green thin line.

Maybe these problems are hard to solve,but I still hope to have a better water in this scene.Thank you!

I suppose your water is a non-flat mesh, i.e. a mesh with a back face (looks like it’s exported from a 3D program, please correct me if I’m mistaken!)

I have had the exact same issue. The fix is to use a plane or any other mesh without a back face. Even with back face culling there will be artifacts as you have noticed. I haven’t found anything in the docs about this, so I’m not sure if this is a bug or just an innate limitation of the WaterMaterial…

btw. This problem with backfaceCulling extends to all uses of alpha channels. This is somewhat obvious, because in real life you would also notice if someone took out the back side of the glass you’re drinking from :wink: It’s best to always deactivate it in such cases to get the right effect. For water however there is the overlapping issue with back faces in general.

1 Like

Thank you for your reply.
I export the water mesh with my own code(myCreateRibbon2 and MakeLandtype1 in FrameGround2.js).After creating by my code the water mesh was a flat plane,then may be the water material give it fluctuation.
Now I set backfaceCulling true,and use overrideMaterialSideOrientation to clear back completely,but there still a thin line left.May be I have to get used to it?

In addition do you have any idea on why the high ground disappeared?This problem is the one must be solved.

I just looked at it in Firefox and Chrome and I don’t have those lines even when zoomed in… Dunno if that helps.

I would just get rid of the waves or replace them with a custom vertex shader since they are static. It looks a bit jagged. I think if it was completely flat/calm it would look better probably.

By the way this reminds me a lot of Sim City 3000:


I loved that game… Still play it sometimes. Am I on the right track here?

1 Like

For easier completion,I will use static water texture instead of water material in my scene.If there is a better edition of water material I may change back.
I’m trying to create a small game by Babylon.js all by myself.I want to combine changeable terrain,simple AI,websocket network,physical effects in it.Now I have created my own CreateRibbon function for the changeable terrain.
In my opinion,WebGL has some advantages than the traditional game programming besides easy to use.Such as we can change the program when the game is running,so we can create dynamic game rules and highly complex control instructions.Another example, with the help of web browser,we can play one game together with different drives or open a lot of clients on one computer,

1 Like