very impressive！！after playing it many times，i decide to learn the code carefully。it will be painful without ideas or algorithms guidance。 the most mysterious is how you simulate water。i am not sure you use terrain simulation，or more complex theory like Navier-Stokes equations。can you give me some reference on water simulation，please？

This is a very beautiful example. I do not understand the algorithm of IntersectCube, when I read this example source code, can you give me some ideas?

vec2 intersectCube(vec3 origin, vec3 ray, vec3 cubeMin, vec3 cubeMax) {
vec3 tMin = (cubeMin - origin) / ray;
vec3 tMax = (cubeMax - origin) / ray;
vec3 t1 = min(tMin, tMax);
vec3 t2 = max(tMin, tMax);
float tNear = max(max(t1.x, t1.y), t1.z);
float tFar = min(min(t2.x, t2.y), t2.z);
return vec2(tNear, tFar);
}

Beautiful work!! ... Would like to create a version where the bowl is a hemispherical fishbowl shape and get the reflection maths right... polar coordinates, or quaternions or just bespoke sin and pi maths...? Any ideas to help perchance? Thank you so much!! Jez.

With too much continuous click holding under ripple to make a wave this happens overtime :
Screenshots

very beautiful work.

i having been looking at your shader code in water.js and am wondering what addition i would need to make so the water ripples do not bounce of the edges of the pool, but rather die there?

i have been looking at this water ripple approach so far:
http://jsfiddle.net/esteewhy/5Ht3b/6/

thanks for your advice.

In the cube vertex shader, the code below flips the inside and outside faces of the cube. So when enable GL_CULL_FACE, we can see the inside faces instead of the outside faces.
position = gl_Vertex.xyz;\ position.y = ((1.0 - position.y) * (7.0 / 12.0) - 1.0) * poolHeight;\

But why does the top face of the cube disappear when I look up from the bottom of the cube ?
What's the trick here ? I just cannot find it.

Sorry for out-of-topic, but http://madebyevan.com/webgl-water/ site now offers wrong TLS certificate:

SSL_ERROR_BAD_CERT_DOMAIN
Common Name: *.nfshost.com

Also when opened w/o TLS it contains embedded iframes with irrelevant Ad.

Shouldn't their be some effect if the ball moves underwater, especially if close to surface? Regrettably I was unable to find a reference on the subject. Though I think it would be fair to assume for each circular section n perpendicular to the axis of the motion. Causes a compression, positive on the forward and negitive on the aft, of it's area equally in all directions.

The behaviour of the water is different when running on mobile hardware compared to what is seen on desktop h/w.

On desktop, the movement of the water is dampened over time and relatively quickly returns to a smooth surface.

On both ios and android the surface appears to be perturbed by additional velocities which stop the water from ever settling back to a smooth state.

One obvious difference is that the pixel ratio, when run on the desktop h/w, is 1.0 but on the mobile h/w it varies (on the examples I have tried it on) - 2.0 on an iPhone and 2.75 on an Android. Not sure if this is related - but it struck me that the "averaging of neighbour pixels" may be looking "further away" than expected and picking a velocity that is higher than an immediate neighbour - causing the wrong average to be calculated. But that's a wild stab in the dark.

I'm struggling to debug the shaders - to compare the actual calculated values on the different h/w - but I'll continue trying...

Any thoughts/fixes would be appreciated.

Hi, i try to make a tank level indicator based on your work, do you think it's easy to make water height dynamic (as a parameter)? (0-100% for example)
I need also change cube's width, height, depth (as parameters also)!

I'm really awesome by your animation on http://madebyevan.com/webgl-water/
The only detail which I do not get why it is missing, is when the ball is fully immersed in the water and you move it, it is not propagate to the fluid.

This is by far one of the best examples that I've found on water/fluids on a container.

We've been struggling to change the container to be a cylinder (to simulate a glass of water) rather than a cube. I see you're using Mesh.cube to accomplish this, but we haven't been able to change it to an actual Cylinder. Any guidance would be greatly appreciated... thanks and congrats on the demo!

Mostly a joke -- but the sphere doesn't feel nearly as fun to work with as other objects would. =(