Hi.
I`m trying to do it using official ocean examples (three.js examples ).
This is fiddle which is based on official ocean examples.https://jsfiddle.net/grano/zj8thmLf/
This is a limitation of all water shader implementation right now. The following GitHub issue tracks this:
opened 01:36PM - 30 Aug 19 UTC
Examples
##### Description of the problem
The calculation which blends reflection and re… fraction fragment color assumes a default Y-up coordinate system to determine the blend amount. As a result, the transition between reflectance and refractance in a Z-up scene (or if the water surface doesn't lie in the xz-plane) happens while the camera is orbited around the scene, instead of while being tilted up and down. I was able to adjust the shader by trial and error, adding the following to line 339 of `examples/jsm/objects/Water2.js`:
```glsl
vec3 adjustedEye = vec3(toEye.x, toEye.z, toEye.y);
float theta = max( dot( adjustedEye, normal ), 0.0 );
```
Which simply swaps the z and y coordinates for this calculation only. It would be nice if the shader works for any camera-up and plane orientation by taking into account the normal of the surface to which it is applied, however my lack of GLSL knowledge prevents me from coming up with a solution.
##### Three.js version
- [x] r106
##### Browser
- [x] All of them
##### OS
- [x] All of them
Thanks.
sdog_m
December 11, 2024, 8:57am
4
Hello, how did you solve it?