Ocean/Water Example Question

Based on this example:
https://threejs.org/examples/webgl_shaders_ocean.html

What would be the most performant way to have multiple water planes?

I have it sort of brute force implemented at the moment by creating new Water objects for each plane.

I was wondering if there is a better way to do this so that the separate planes could share materials and not require mirror rendering per object.

1 Like

Will the planes all have the same normal direction?

In my particular case, yes.

Then I suggest creating the Water from a merged geometry where you have carefully set uv coordinates to match those of a global plane geometry. Then they will share a single (complete) reflection rendering. At least that is what I think will happen.

2 Likes

Ah, I feel stupid for not thinking of that lol. I will give that a shot, Thanks a ton Elias!

No problem! I hope it will work. :slight_smile:

1 Like

Actually, it looks like Water doesn’t use uv. It derives texture coordinates from position (and uniforms).

I spent a while thinking of this problem myself. I had, for a while, a piece of logic that would test occlusion of terrain and water plane suspend updates to water. In the end this fancy water is too costly in my use-cases, so I ended up writing a simple custom water shader.

If the water planes all have the same normal - that’s not sufficient to share reflection and refraction renders, sadly. Because of perspective. Respective refraction and reflection cameras are placed relative to the water plane, so normal is not sufficient.

1 Like

Well… crap. Gonna try it anyway just to see what it looks like =]

Would have attempted earlier but I wanted to use the latest THREE.Water version. I’ve been patching in an old one due to a possible bug in the current version that I’ve probably spent 30+ hours pinpointing.

I’ve got it working but yea, the issue Unsul mentioned is probably causing the issue where reflections can only be seen from a certain perspective. I think translating the geometry position instead of setting the Object3D position is messing it up. I also had to rotate the geometry directly instead of the Object3D (plane). Had to modify Water.js to use a normal of (0,1,0) instead of (0,0,1) to compensate. Sucks being so close but so far lol.

Oh well good enough for now.

Close (incorrect perspective I suppose, wrong reflections):

Far (everything appears correct):

5 Likes

Oh, I had this image in my head where all the water planes would also be on the same altitude (on the ocean level). But surely, if the planes are on different altitudes, it doesn’t help that they have the same normal.

Still, if most of the water patches are on the same level, at least they should be able to share material, and then you can use frustum culling on the smaller individual ones? Or another water shader for the small ones? It would be natural that a small pond does not look like a deep ocean.

Water doesn’t like tricks with z-up etc… I think that may be a better explanation for some problems with reflections.

Your game looks great, BTW!

2 Likes