XNA for C#
DirectX 9 for C#
DirectX 9 for C++
DirectX 9 for VB
My XNA Book
       Go to section on this site

Additional info

Latest Forum posts

 Account settings
  Posted by: Anonymous
  When: 07/05/2014 at 09:48:39

 forced subtitle
  Posted by: Applefly
  When: 07/05/2014 at 06:00:48

 convert DVD into PMS
  Posted by: Applefly
  When: 07/05/2014 at 05:55:25

 DVD to Digital Copy easily
  Posted by: VIKIVannessa
  When: 05/05/2014 at 06:52:29

 DVD on Xbox 360/Xbox One Console
  Posted by: VIKIVannessa
  When: 05/05/2014 at 06:51:47

 Extract .Srt Subtitles
  Posted by: Applefly
  When: 04/05/2014 at 03:54:38

 Encode Movie collection
  Posted by: Applefly
  When: 04/05/2014 at 03:52:41

 Convert DVD to WMV
  Posted by: Applefly
  When: 29/04/2014 at 05:53:50

 rip DVDs into digital files
  Posted by: Applefly
  When: 29/04/2014 at 05:51:20

 iTunes movies/music to Kindle Fire
  Posted by: ciciyu80
  When: 29/04/2014 at 05:10:20


The water technique

Now we have removed every single pixel of solid background color in our screen, itís time we move on to the most complex technique of this series: the water. Itís not the most difficult one; it just takes a few steps to get it right. But itís more than worth the effort: the addition of realistic water to a 3D scene will greatly enhance its reality.

Because there are quite a few steps involved, instead of jumping into the first step I think itís a better idea to first quickly go through the whole sequence of steps, to get a better overview.

For 3D games, you roughly have 2 kinds of water: ocean water and lake water. The difference of course is the height and length of the waves: for ocean water, you need a lot of vertices of which the height is adjusted in the vertex shader.

See Recipe 5-17 on how to create a compelling 3D ocean.

For lake water, as in our case, we will do with a completely flat surface, in which we create the illusion of ripples. Because of this, to draw the flat surface of our water weíll only need 2 triangles! The effect of water is completely created in the pixel shader, as weíll see below.

Remember, in the pixel shader, the main question weíre after is: for each pixel of the water, what will its color be? You could simply take a texture of some waves, and put it over the surface. But in reality, the color of water depends completely on its surroundings: it is partly a mirror, so we see the reflections of the surrounding scene in the water. But it is also partly transparent, so we also see a bit of the underlying sand shining through, which is called the refractive color. So the final color of the water is a smart combination of the reflective and the refractive color.

Iíve made a flowchart of the steps weíll go through in the process, so each chapter you can situate it in the bigger picture:

To start with, weíll need to know the reflective and refractive color for each pixel, so weíll start by rendering these maps into 2 textures. Now imagine for each pixel we would only take the reflection color. This would give a perfect mirror. But real water never looks like a real mirror, it is always deformed by ripples. So before our pixel shader will sample the color from both maps, we will add a small deformation to the texture coordinates of each pixel, which will simulate these ripples.

Next, both colors are blended together, in such a way that when you look straight into the water, all you see is the refractive color (the underlying sand). And when you look over the water, all you see is the reflective color. The blendfactor is called the Fresnel term.

The color we get at this moment would be the color of perfectly pure and clean water. To make it a bit more realistic, at the end weíll blend in a bit of gray-blue. (As a small extension, you can also sample the heightmap of the terrain in the pixel shader, so deeper patches of water only have deep-blue as refractive color.)

Thatís it for the start, but weíll go a bit further and throw in some kind of bump mapping, so we can add specular reflections (where the sunlight is directly reflected in the water).

But thatís for later, letís first try to finish the flowchart displayed above. In the screenshot below, you can see the different steps: close to the camera, where we look directly into the water, we see the refractive color (the sand). When the angle at which we look into the water gets more sharp, we see that reflections are getting more important.

Also important to note, is how the reflections of the mountain are deformed by the ripples. And as a last note: the water very close to the border is a bit blue-ish, which is due to the last step.

DirectX Tutorial 7 - The water technique

If you appreciate the amount of time I spend creating and updating
these pages, feel free to donate -- any amount is welcome !

Click here to go to the forum on this chapter!

Or click on one of the topics on this chapter to go there:
  • Terrain water
          well I have spent the last 2 days studing the chap...

    Donít worry if youíre not too sure about the whole process; each step will be explained in greater detail in the following chapters. Letís go!


    If you appreciate the amount of time I spend creating and updating
    these pages, feel free to donate -- any amount is welcome !

    - Website design & XNA + DirectX code : Riemer Grootjans -
    ©2003 - 2011 Riemer Grootjans
  • Translations

    This site in English
    This site in Korean
    This site in Czech

    Microsoft MVP Award

    2007 - 2011 MVP Award
    DirectX - XNA


    XNA 2.0 Recipes Book (8)
    XNA 3.0 Recipes Book (8)
    Extra Reading (3)
    Matrices: geometrical
    Matrix Mathematics
    Homogenous matrices
    Community Projects (1)
    Tutorials (160)
    XNA 4.0 using C# (89)
    2D Series: Shooters (22)
    3D Series 1: Terrain (13)
    3D Series 2: Flightsim (14)
    3D Series 3: HLSL (18)
    3D Series 4: Adv. terrain (19)
    Starting code
    Mouse camera
    Textured terrain
    Adding detail
    The water technique
    Refraction map
    Reflection map
    Perfect mirror
    The Fresnel term
    Moving water
    Specular highlights
    Region growing
    Billboarding renderstates
    Perlin noise
    Gradient skybox
    Short Tuts (3)
    DirectX using C# (54)
    DirectX using C++ (15)
    DirectX using VB (2)
    -- Expand all --

    Thank you!

    Support this site --
    any amount is welcome !

    Stay up-to-date

    I don't have the time to keep a News section, so stay informed about the updates by clicking on this RSS file!