Water and Glass material

Question

I try to simulate light reflection, refraction, etc. in a fish tank and I need water material and glass material.

Actually I use no water and a phong material for the glass because I haven't found better for now, a testing demo can be see here: http://ledohm.free.fr/test_webgl/

For the water I don't need to simulate the waves, which means I can use the same material as the glass but with differents values for opacity, reflexion and refractive index.

I've found this example which seems to perfectly simulate glass but I don't understand how to adapt the material for my needs. From what I understood the refraction is computed from the envMap but I've no texture. I just want a wall of glass which simulate reflexion/refraction/... like in the reality as much as possible. How I can create (or find) a material like this?

Edit 1:

green: water total internal reflection
red: glass reflection

1: refracted by water
2: refracted by water + glass
3 & 4: lost

Edit 2:

Thanks to this tutorial I've unsdertood how shaders works and more specifically this example but, if I understand correctly, I can't use a shader to simulate light in a material with a thickness because shaders apply only on the surfaces of a mesh, I'm right?

Christhood

You should include an image of what you're trying to achieve in your question. – Medlock

I've added images and explanations of what I want, thanks for your suggestion. – Christhood

You mean as in madebyevan.com/webgl-water -- or do you just want to post-process your scene so it looks like you are looking through glass? – Horseplay

This demo isn't like "post-process your scene so it looks like you are looking through glass" ? the main goal is to simulate the reality for light reflection and refraction. If I put a spot light I need to have the light from it reflected and refracted in the water and glass. – Christhood

Like this madebyevan.com/webgl-water but I don't need to simulate waves and water displacement, just reflection and refraction in the water and the glass. – Christhood

Unfortunately there is no easy way to do raytracing in realtime in a general way. – Medlock

But how he do it on this demo madebyevan.com/webgl-water ? all the physics and the optical properties of the water are perfectly simulated and moreover it doesn't lag. – Christhood

You have to basically write a raytracer to do what evan does. Is not an easy thing to do yet. – Medlock

@Medlock Ok, thanks. But if I give up the refraction in the glass, keep juste the reflection and just the refraction at the water/air interface it's possible to do it with a "classic" shader? – Christhood

You'll have to render the inside into a renderTarget. Then use that renderTarget in a shader that does the reflection and refraction out of the normal of the fish tank. – Medlock

@Medlock I'll read doc and tutorials on renderTarget, tanks a lot. – Christhood