simulating the water with normal map and du/dv map

Hi
I want to use normal map and Du/Dv map to simulate the water effect. It’s important for me to add the refraction and reflection effects( The user must see the reflected objects inside the water ).
There are some articles on the internet about it:

Water1

Water2
I don’t know if anyone has used this method, so I can ask him some questions about the implementation phase?
Note that these articles are old and have many problems.
Note that I don’t need to draw the actual waves, I just need this simpler method which is appropriate for a fantasy game.
First of all , are there any free examples on the internet to use this method?
Thanks

After a quick look, the first link seem quite good, complete with the GLSL fragment shader.

Here’s the algorithm of the suggested link:

Draw a quad as water surface rendered in three stages
Render reflection and store it as texture
Render refraction and store it as texture
Render scene with water shader turned on for water
surface
– Use a normal map for bump mapping (in tangent
space)
– Use a du/dv map (derivative of normal map) for
refraction and how light will react and bend on the
object (in tangentspace)
(blur normal map for generation and blur du/dv map again to get
rid of sharp features)
– Use reflection and refraction texture on water surface

First of all I have some problems with the first step: “Render reflection and store it as texture”

glViewport (0, 0, 512, 512);
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glMatrixMode (GL_MODELVIEW);
glLoadIdentity (); gluLookAt (...)
glScalef(1.0, 1.0, -1.0);
world (1); glFlush ();
glBindTexture(GL_TEXTURE_2D,
water_tex_names[WATER_REFLECTION_TEX]);
glCopyTexSubImage2D(GL_TEXTURE_2D,0,0,0,0,0,512,512);

The tutorial suggest us to use this texture as a water texture. For example we get something like this:
Render To texture
So if we want to use this as a texture, there are black colors and the image is stretched on the water surface.So how do they get something like this:
Final result
Images are from this quick overview of an engine:
Decade Engine

So if people can’t help me in this advanced forum,where can I ask my question?
Water is one of the most important features of a game and this method is also used in many games, so nobody has used this method before? It’s frustrating

I do not understand, you already have all the info needed.

Can you at least be specific in what problems do you have ?

If the problem is the black color you can copy a larger image to include some of the terrain below the water. Or…

You can make a copy and flip your current image to fill in the top part of the texture.

If you want it to be sharper you need to capture a higher resolution image to use. For example, the current res of the screen instead of 512x512.

Hi,
the tutorial in the first link you posted is based on a tutorial by gametutorials.com which is based on the tutorial in the second link you posted (which was written by me). So it’s all the same and basically all other water shaders work more or less in the same way.
I admit the tutorial isn’t perfect, but it works, it was implemented by a lot of people and is also featured in a few indie games/game engines.
If you have any questions you can ask them here or on my forum, I’m sure there are enough people who can help you.

As Z-buffer said, you haven’t stated your specific problem. You’ve just stated that you “have” a problem.

Fire away with specific questions. This is the Advanced forum, but we don’t read minds I and no doubt others here have done reflection rendering.

Thank you very much
I have asked a question here. How to project the reflection texture to the water?

The shader of the gametutorials.com uses this code to sample the reflection texture:

<vertex shader>
varying vec4 viewCoords
...
viewCoords = gl_ModelViewProjectionMatrix * gl_Vertex;

</vertex shader>

<fragment shader>
varying vec4 viewCoords
...
vec4 projCoord = viewCoords / viewCoords.q;
projCoord = (projCoord + 1.0) * 0.5;
...
vec4 reflectionColor  = texture2D(reflection, projCoord.xy);
...
</fragment shader>

So projCoord is responsible for sampling the texture. But what’s the meaning of it? Without it, we get many repeated textures on the water surface, but with this, we see correct reflection. How does it manipulate the texture?

Note that I’m currently able to add water to my engine without understanding the code, but I want to understand the code and algorithm.

I know what you are talking about.

Ehsan, as the tutorial suggests, you have to use ‘projective’ texture mapping. That way, the black part will not get mapped, and only the colours will get mapped onto the water. You should read some more about projective texture-mapping. It will all make sense.

Try this:
http://www.ozone3d.net/tutorials/glsl_texturing_p08.php

Thanks, But it seems that it’s a special method to project the textures.
in usual projective texture mapping, We build a texture matrix and use this matrix to sample the texture. But here it has just used vertex positions to sample the textures.

The reflection texture contains the exact reflection as seen from the viewer/camera. To get the reflection texture onto the water you have to project it back from the viewer onto the water surface. The projection/texture matrix is in this case the gl_ModelViewProjectionMatrix, and the vertices are transformed in the vertex shader. In the pixel shader the only thing you have to do is to divide the transformed and interpolated vertex positions by the w-coordinate to get the projection right. Doing this in the vertex shader gives wrong results due to interpolation.

^Exactly.

Ehsan, I think you are misunderstanding projective texture mapping. Its not a special method to project textures, it is projective texture mapping.