Introduction

Back in November of 2009, I was met with an interesting challenge. Those of you who frequent the XNA Community Forums have probably heard of Nick Gravelyn. He was an XNA MVP, and now he works for the XNA team. He started a little contest called xna7day, which was designed to challenge developers to make a game in 7 days using a pre-defined theme.

The theme in November was “Text Based” and its rule was that you were only allowed to use text in the visuals of your game. I saw some of the cool stuff other developers were working on, including one that looked like it had text characters that could walk and talk, like people. But my mind immediately went to a different solution: I wanted to make a game that was fully 3D (effectively breaking the rule of rendering text), but then post-process the render into ASCII art, so it would look like it was text.

In this article, I'm going to show you how to do just that:

Setup

Alright, let's dive right in. Open up the base project. It should compile and run as is. It's a simple, if ugly, first-person shooter. Play through the first level. Go ahead, I'll wait. Bonus points to anyone who recognizes the level design!

Okay, got a playthrough? Let's start! I separated this into three projects so the ASCII stuff can be extracted into other games. We'll be doing most of our work in the ASCII_Renderer project, so let's open that up and add a new class to the Source\ascii folder called “Renderer.” I use the namespace “ASCII3D” for all files in this project, so get rid of the extra folder sub-namespaces. Add these using statements, too:

C#

using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.Graphics; 

This is going to be a post-processing effect, so we'll try to make it portable. Add the following empty function declarations:

C#

public Renderer(ContentManager content, int xRes, int yRes)
{ }

public void StartScene()
{ }

public void EndScene()
{ }

The constructor takes three arguments: The ContentManager, which we will use to load in our font and post-processing shader, and the resolution variables, which will basically tell us how many lines of text to draw and how many characters in each line. Since we have these prototyped, we'll make our only edits to the ASCIIFPS project in the Source\Game1.cs file. But first, we need to define and initialize a new Renderer object. Add a new class variable:

C#

/// <summary>
/// This is what handles the ASCII conversion
/// </summary>
private Renderer renderer; 

And at the end of the LoadContent function:

C#

// and initialize our ASCII renderer
// the variables we pass make each character
// appx 10x14 which seems to be the smallest
// readable size
renderer = new Renderer(Content, Global.ScreenWidth/10,Global.ScreenHeight/14);

Finally, call the BeginScene and EndScene functions. Modify Game1's Draw function to look like this:

C#

protected override void Draw(GameTime gameTime)
{
    // notice we only wrap StartScene and
    // EndScene if we are UsingASCII
    if (UsingASCII)
        renderer.StartScene();

    currentState.Draw(gameTime);

    if (UsingASCII)
        renderer.EndScene();

    base.Draw(gameTime);
}

The Boolean variable UsingASCII is defined for us. It defaults to false and can be toggled any time in-game by pressing the [M] key. If you want to default it to true for testing purposes, just change its value in Game1's Initialize function. At this point, the Renderer is all hooked up, so changes will go right in.

I skimmed over the other classes earlier in the article, but I need to touch on a few of them. Almost everything in GlobalModules is fairly standard utility stuff. We'll be using it, so you might want to glance at the Global class. The ASCIIFPS has the FPS engine in it and is almost entirely irrelevant to this article, except that it offers a fun test-bed for our effect. Feel free to go through the code, but I'll warn you: I wrote it for a 7-day contest, so some of it looks like gibberish and is only incidentally functional. Finally, we have the ASCII_Renderer project. This already has two files in it: BitmapFontGenerator and Letter. The latter are for generating a bitmap font map that we'll use in a bit.

The functionality isn't specific to this article, since any artist could easily make this. But I'm no artist, which is why I had the computer do it for me. Basically, BitmapFontGenerator has a static function that will take a texture of letters (see the Content project in ASCII_Renderer), trim them, sort them by how much they fill their space, and print them into a new Texture for our functions. Feel free to read through the code for this process; I commented it pretty well.

Post-Processing Basics

We need to cover the basics of post-processing before we start coding the next part. When post-processing a scene, you first render the entire scene off-screen on a RenderTarget. Then, you can apply any effects you want to the resolved texture before putting it on the screen. That's it. Here's how in XNA:

C#

public class Renderer
{
    private RenderTarget2D SrcImage;

    public Renderer(ContentManager content, int xRes, int yRes)
    {
        SrcImage = new RenderTarget2D(Global.Graphics, 
            xRes, yRes, 1, SurfaceFormat.Color);
    }

    public void StartScene()
    {
        Global.Graphics.SetRenderTarget(0, SrcImage);
        Global.Graphics.Clear(Color.Black);
    }

    public void EndScene()
    {
        Global.Graphics.SetRenderTarget(0, null);
        Global.Graphics.Clear(Color.Black);

        // TODO: draw the texture from the RenderTarget
    }
}

We create the RenderTarget2D we need in the constructor. Notice that the size of the RenderTarget is the same as the number of ASCII characters we plan to draw on screen. I'll explain that in the next section. In the StartScene function, we set the RenderTarget on the device so that all draw calls will actually draw to it. Then we clear the buffer, because RenderTargets' content from frame to frame is undefined. In EndScene, the RenderTarget is set to null, which is DirectX's way of saying “use the screen's framebuffer.” Now we need to actually draw the rendered image. XNA requires shaders for all draw calls, even if they're veiled by BasicEffect and SpriteBatch. We need to create a very simple shader to draw the texture to screen. Create a new Effect file in ASCII_Renderer's Content project and name it TextEffect. We'll start it out with this:

HLSL

texture2D sourceTex;
sampler2D SourceTextureSampler = sampler_state
{
    Texture = <sourceTex>;
    MinFilter = point;
    MagFilter = point;
    MipFilter = point;
    AddressU = wrap;
    AddressV = wrap;
};

struct VertexShaderInput
{
    float4 Position : POSITION0;
    float2 TexCoords : TEXCOORD0;
};

struct VertexShaderOutput
{
    float4 Position : POSITION0;
    float2 TexCoords : TEXCOORD0;
};

VertexShaderOutput VertexShaderFunction(VertexShaderInput input)
{
    VertexShaderOutput output;
    
    output.Position = input.Position;
    output.TexCoords = input.TexCoords;

    return output;
}

float4 PixelShaderFunction(VertexShaderOutput input) : COLOR0
{
    float4 sourceColor = tex2D(SourceTextureSampler,input.TexCoords);
    
    return sourceColor;
}

technique Technique1
{
    pass Pass1
    {
        VertexShader = compile vs_2_0 VertexShaderFunction();
        PixelShader = compile ps_2_0 PixelShaderFunction();
    }
}

There are a couple things I want to note about the base shader. First, notice that we use point filtering. I'll explain why in the next section, but it's important to see where we did it. Next, notice that we took out all the default transformation matrices. We're going to be drawing a single full screen quad, so we can just pass in the coordinates in screen-space—no processing required. Now we need to make a few changes to the Renderer class to use this Effect and draw the rendered game. First, we need to add some new class variables:

C#

private Effect effect;

private VertexPositionTexture[] verts;
private VertexDeclaration vd;

The vertices are going to be for a simple quad that takes up the whole screen. They should be initialized in the LoadContent function like this:

C#

effect = content.Load<Effect>("TextEffect");

verts = new VertexPositionTexture[6];
verts[0] = new VertexPositionTexture(
    new Vector3(-1, -1, 0), new Vector2(0, 1));
verts[1] = new VertexPositionTexture(
    new Vector3(1, -1, 0), new Vector2(1, 1));
verts[2] = new VertexPositionTexture(
    new Vector3(-1, 1, 0), new Vector2(0, 0));
verts[3] = verts[1];
verts[4] = verts[2];
verts[5] = new VertexPositionTexture(
    new Vector3(1, 1, 0), new Vector2(1, 0));

vd = new VertexDeclaration(
    Global.Graphics, VertexPositionTexture.VertexElements);

And finally, we add our draw code to the Draw function:

C#

effect.Begin();
effect.CurrentTechnique.Passes[0].Begin();

effect.Parameters["sourceTex"].SetValue(SrcImage.GetTexture());
effect.CommitChanges();
Global.Graphics.RenderState.CullMode = CullMode.None;

Global.Graphics.VertexDeclaration = vd;
Global.Graphics.DrawUserPrimitives<VertexPositionTexture>
     (PrimitiveType.TriangleList, verts, 0, 2);

effect.CurrentTechnique.Passes[0].End();
effect.End();

We set the texture we got from the RenderTarget, turn off culling (what would be culled in this geometry?), and draw it. Run the project. You should be able to toggle a difference in-game with the [M] key.

Drawing Some Text

“Okay,” you say, “it runs at a lower resolution with the [M] key. So what?” Remember what we set the resolution to in the RenderTarget? Yes, every pixel on this low-resolution version will be a character in the final image. How do we turn these big pixels into characters? First we need to define a texture bitmap font. Let's add a Texture2D class variable to Renderer and a const int for the BitmapFontGenerator:

C#

public Texture2D text; 
private const int NUM_SLOTS = 256;

Then we'll use the BitmapFontGenerator to construct this texture:

C#

text = BitmapFontGenerator.GenerateTextTexture(content, NUM_SLOTS);

Okay, that's all for now. Let's go back to the TextEffect.fx. We need to add a few variables:

HLSL

float2 dstLetterSize;

int numLetters;

texture2D textTex;
sampler2D TextTextureSampler = sampler_state
{
    Texture = <textTex>;
    MinFilter = point;
    MagFilter = point;
    MipFilter = point;
    AddressU = wrap;
    AddressV = wrap;
};

The variable “dstLetterSize” will tell us how big the letters on the screen are. The “numLetters” variable will tell us how many letters are in the font texture. And then there's the font texture itself. Here's how we draw actual characters in the Pixel Shader:

HLSL

float4 PixelShaderFunction(VertexShaderOutput input) : COLOR0
{
     float4 sourceColor = tex2D(SourceTextureSampler,input.TexCoords);
    
     float2 texCoords = float2(
          input.TexCoords.x-((int)
               (input.TexCoords.x/dstLetterSize.x)*dstLetterSize.x),
          input.TexCoords.y-((int)
               (input.TexCoords.y/dstLetterSize.y)*dstLetterSize.y));
     texCoords /= dstLetterSize;
     texCoords.x /= numLetters;
    
     float4 letterColor = tex2D(TextTextureSampler,texCoords);
    
     return letterColor;
}

We've already seen the source color line. The next line will get the offset into the letter in letter size by subtracting the rounded-down (or integer-casted) texture coordinates scaled down. The line after that scales it back up to a 0-1 range. So now we have the new variable texCoords that is filled with the texture coordinates of the letter in 0-1 terms. We divide the x by numLetters because our texture is one long horizontal line of letters. Finally we get the letter color with these new texture coordinates. This letter color is grayscale, and when multiplied by the source color, we've assured that each letter is rendered in its own slot with the color from the original 3D render. The last thing we have to do is set those effect variables we defined from Renderer's EndScene function. Where we once just set the source texture, we now set these:

C#

effect.Parameters["dstLetterSize"].SetValue(
     new Vector2(1.0f/(float)SrcImage.Width, 1.0f/(float)SrcImage.Height));
effect.Parameters["numLetters"].SetValue(NUM_SLOTS);
effect.Parameters["sourceTex"].SetValue(SrcImage.GetTexture());
effect.Parameters["textTex"].SetValue(text);
effect.CommitChanges();

Most of these are self explanatory, but the dstLetterSize is a bit more complicated. To get the size of the letter in the 0-1 texture space, you take the total size (0 to 1) divided by the number of letters in that axis which, in our case, is the RenderTarget size.

Wheel of Fortune

‘M's aren't very interesting. In traditional ASCII art, the whole point is that you use characters that take more space or less space to handle shading. Let's add this code after the multiplication of the texCoords.x:

HLSL

float lum = (sourceColor.r+sourceColor.g+sourceColor.b)/3.0; 
float val = max(fullValueColor.r,
     max(fullValueColor.g,fullValueColor.b));
    
int ind = ((numLetters-1)-
     max(0,min((numLetters-1),(int)(lum*numLetters))));

texCoords.x += ind*(1.0/numLetters);

The first line gets the luminosity of the source color. The next gets the value. The next line gets the letter index from the luminosity. Subtracting it from (numLetters-1) reverses the index, because we want luminosity=1 to equate to index=0, because that has the letter that takes up the most space. Run the game. You'll see it now shows value, but it's still pretty hard to tell what's on the screen:

The last thing we can do is colorize it. You could just multiply it by the source color and get something like this…

…but everything looks too dark because the source color still has its value. Plus we're already practically multiplying it by choosing the letter. So we need to get the full value color first:

HLSL

float4 fullValueColor = sourceColor * (1.0/val);

We just multiply the original color by the inverse of the value. And then multiply that fullValueColor by the letter color in the return:

HLSL

return fullValueColor * letterColor;

That should produce a nice result:

Conclusion

And there it is! We have a real-time 3D render transformed into ASCII art. It's difficult to see and it's not very useful, but it's sure neat, eh? Why not add it as an unlockable easter egg in your next XBL Indie Game? I'm looking forward to seeing how people use this effect! If you use it, please send me an email with a screenshot!

About The Author

Louis Ingenthron is a Game Developer in Orlando, FL. He works on commercial Console and PC titles, but runs his own Indie Games company, FV Productions, on the side. He is best known for his open source XNA rhythm game Unsigned and specializes in real-time Graphics programming. He has been working with XNA since the 2.0 Beta and with .NET C# for just as long. He is also familiar with several other development languages, such as C, C++, and Java. Occasionally, he can even be found doing web development and Flash. Louis also writes for MSDN's Coding4Fun website, contributing articles on a monthly basis.

Introduction

Every game needs boundaries, such as a window separating the player from space or a brick wall. When I first played Splinter Cell: Double Agent's Cozumel Cruise level, I spent a good 5 minutes just looking at the ocean that kept the player in bounds. It was a beautiful sunset with waves moving across the ocean endlessly outward... and it was neat.

When I was tasked with creating a great ocean for a Caribbean pirate game, I knew it had to look great, like Splinter Cell's. Too many games, especially indie games, just put a cheap texture or two on a blue quad. But in my opinion, having a great looking boundary like an ocean can really tie your environment together and add a layer of polish.

Now, just to clarify: we aren't going for the ocean in Crysis here. We want something that looks good and seems to be endless, so most of our work will be in the DirectX 9 Shaders. We will be using C# and XNA to build a project around it (XNA is fantastic for rapid development and tech demos, as well as its full Indie Games Distribution system).

Getting Started

Let's take a look at the base project. You should be able to compile and run it on the spot. When you get in, you will be able to turn the camera with the mouse and move with WASD (or use the first gamepad with standard FPS controls if you converted to run on Xbox360), but all that's there is the skybox at an infinite distance away. I won't go into rendering skyboxes in this article because there are many articles about it already. But you should be familiar with the concept of Cube Maps, which are basically six square textures representing the six faces of a cube.

So, let's get right into the code. We'll start with a big blue plane. Open up Ocean.cs. You will notice that we already have some code in here. We have some vertices set up in the Load() function and a vertex declaration created (Again, in this article I assume you have a basic understanding of 3D rendering). These vertices will create two triangles that make a very large XZ plane at Y=0. Since our ocean will be processed only in the pixel shader, the plane should be much larger than your far-clip plane set up in your projection matrix. So let's draw the plane. In the Ocean's Draw() function, add these lines:

C#

Global.Graphics.VertexDeclaration = OceanVD;
Global.Graphics.DrawUserPrimitives<VertexPositionNormalTexture>
    (PrimitiveType.TriangleList, OceanVerts, 0, 2);

This code tells the graphics device what kind of vertex we are using, and tells it to draw two consecutive triangles. But XNA uses only Shaders; it doesn't support fixed function.

Let's go over to our Solution Explorer. Right click on the Content project in our game project, and click Add -> New Item. Choose the "Effect File" template and name it OceanShader.fx. We are just testing to get the quads on there now, so we won't do much in this effect file yet. I cleaned up the pre-generated comments and changed the pixel shader return value to float4(0,0,1,1) to make it blue instead of red.

Now, let's go back to Ocean.cs. We need to add a new class variable for the shader. This is encompassed by the Microsoft.Xna.Framework.Graphics.Effect class. We add this to the top of the class:

C#

// the ocean's required content
private Effect oceanEffect; 

And we actually link that to our FX file in the load function with this:

C#

// load the shader
oceanEffect = Content.Load<Effect>("OceanShader"); 

Now we just need to set the shader variables in the draw function and tell the shader to begin and end. Our draw function now looks like this:

C#

public void Draw(GameTime gameTime, Camera cam, 
        TextureCube skyTexture, Matrix proj)
{
    // start the shader
    oceanEffect.Begin();
    oceanEffect.CurrentTechnique.Passes[0].Begin();

    // set the transforms
    oceanEffect.Parameters["World"].SetValue(Matrix.Identity);
    oceanEffect.Parameters["View"].SetValue(cam.GetViewMatrix());
    oceanEffect.Parameters["Projection"].SetValue(proj);

    oceanEffect.CommitChanges();

    // draw our geometry
    Global.Graphics.VertexDeclaration = OceanVD;
    Global.Graphics.DrawUserPrimitives<VertexPositionNormalTexture>
        (PrimitiveType.TriangleList, OceanVerts, 0, 2);

    // and we're done!
    oceanEffect.CurrentTechnique.Passes[0].End();
    oceanEffect.End();
}

Before we draw, we must first begin an Effect and an EffectPass. Since we only have one pass in our shader, we can just begin the first one. Next, we set the Transform matrices defined in the shader (Read here for more information on the transform matrices). Then we tell the Effect to CommitChanges(), which basically flushes the parameter changes down the tube to the graphics card so we can draw. Now we see our old code to draw the plane. Finally, we end the EffectPass and the Effect. The program should run now, with a big blue plane where your ocean is.

Skymap Reflections

One of the best ways to make water look really neat is to add reflection. Ever seen a snow-covered mountain reflected on the surface of a lake? It's gorgeous. Let's make our ocean reflect the sky. Go back to the OceanShader.fx file. This is where we will do the majority of our work. We need to give the shader the sky cubemap. Add this parameter to the top of the FX file:

HLSL

textureCUBE cubeTex;
samplerCUBE CubeTextureSampler = sampler_state
{
    Texture = <cubeTex>;
    MinFilter = anisotropic;
    MagFilter = anisotropic;
    MipFilter = anisotropic;
    AddressU = wrap;
    AddressV = wrap;
};

Next, we need to replace the Vertex structures with ones that match the actual vertices. They should look something like this:

HLSL

struct VertexShaderInput
{
    float3 Position            : POSITION0;
    float3 normal              : NORMAL0;
    float2 texCoord            : TEXCOORD0;
};

struct VertexShaderOutput
{
    float4 Position            : POSITION0;
    float2 texCoord            : TEXCOORD0;
    float3 worldPos         : TEXCOORD1;
};

We've now added two variables. The texCoord is pretty simple. We just pass it along (and multiply it). The worldPos is already calculated for us, so we can just assign it. Since it's an ocean, we can just assume that the normal vector is straight up (why would we have a slanted ocean?). Our vertex shader should look like this:

HLSL

VertexShaderOutput output;

float4 worldPosition = mul(float4(input.Position,1), World);
float4 viewPosition = mul(worldPosition, View);
output.Position = mul(viewPosition, Projection);
    
output.texCoord = input.texCoord*100;
output.worldPos = worldPosition.xyz;

return output;

To do reflections, we need one more variable. A reflection off a surface requires a source vector and a surface normal vector. We can create our source vector by subtracting the camera position from the input's world position. To get the camera position, we could extract it from the View Matrix, but that's a pain. Instead, we'll just add a float3 variable to the top of our FX file like so:

HLSL

float3 EyePos; 

Now we update our pixel shader function:

HLSL

float3 diffuseColor = float4(0,0,1,1);
float3 normal = float3(0,1,0);
float3 cubeTexCoords = reflect(input.worldPos-EyePos,normal);
float3 cubeTex = texCUBE(CubeTextureSampler,cubeTexCoords).rgb;

return float4((cubeTex*0.8)+(diffuseColor*0.2),1); 

So what is this actually doing? First we set up the diffuseColor, which is the color of the ocean itself, blue, which keeps it from looking like a big mirror. Next we assume the normal is straight up (We'll change this later). Then we need to get the texture coordinates for the skymap. We will reflect the vector from the eye off of the surface normal. Cubemaps take 3-component vectors, and don't even need them to be normalized, so that's all we need there. Then we use those coordinates and actually store the texture lookup's RGB values (what sky has an alpha?). Finally, we combine 80% of the reflected sky color with 20% of the diffuse color. Can we run it now? Well, no. We defined those variables up top, but never set them. Let's go back to the Ocean.cs and add in some more parameter mutators:

C#

oceanEffect.Parameters["EyePos"].SetValue(cam.Position);
// set the sky texture
oceanEffect.Parameters["cubeTex"].SetValue(skyTexture); 

Now we can run it! You should see a big flat body of blue water that reflects the sky. Cool, huh? But it's not very watery yet, is it?

Normal Mapping

Let's add some chop to the surface. Four normal maps are already be included in the Content project, so we just need to add a Texture2D array to our Ocean class and load in these textures. We'll call the texture array OceanNormalMaps:

C#

private Texture2D[] OceanNormalMaps; 

And load them in the Load() function like this:

C#

// load the normal maps
OceanNormalMaps = new Texture2D[4];
for (int i = 0; i < 4; i++)
    OceanNormalMaps[i] = Content.Load<Texture2D>("Ocean" + (i + 1) + "_N");

What are we going to do with these textures? It's simple really: we'll lerp between them. Switch to the FX file and add two new texture registers (we'll only be lerping between two at any given time) and a float for the actual lerping value:

HLSL

float textureLerp;

texture2D normalTex;
sampler2D NormalTextureSampler = sampler_state
{
    Texture = <normalTex>;
    MinFilter = anisotropic;
    MagFilter = anisotropic;
    MipFilter = anisotropic;
    AddressU = wrap;
    AddressV = wrap;
};

texture2D normalTex2;
sampler2D NormalTextureSampler2 = sampler_state
{
    Texture = <normalTex2>;
    MinFilter = anisotropic;
    MagFilter = anisotropic;
    MipFilter = anisotropic;
    AddressU = wrap;
    AddressV = wrap;
};

Next, we change our pixel shader code:

HLSL

float3 diffuseColor = float4(0,0,1,1);
    
float4 normalTexture1 = tex2D(NormalTextureSampler, input.texCoord);
float4 normalTexture2 = tex2D(NormalTextureSampler2, input.texCoord);
float4 normalTexture = (textureLerp*normalTexture1)+
            ((1-textureLerp)*normalTexture2);
    
float3 normal = ((normalTexture)*2)-1;
normal.xyz = normal.xzy;
normal = normalize(normal);
    
float3 cubeTexCoords = reflect(input.worldPos-EyePos,normal);
    
float3 cubeTex = texCUBE(CubeTextureSampler,cubeTexCoords).rgb;
    
return float4((cubeTex*0.8)+(diffuseColor*0.2),1); 

Alright, let's take a look at this. The first new thing we do is sample the new normal maps and lerp between them with the value declared earlier. Nothing too complex there. But then we need to convert the RGB value into a normal. You'll notice that we take the RGB, multiply by 2 and subtract by one. This simply takes the compressed RGB [0:1] value and converts it to [-1:1] for a full range of normals. The next line re-orders the normal's components. This is because the normal map is traditionally on the XY plane, but our ocean is on the XZ plane—so we swap the Y and Z components. Finally, we normalize our normal. Always normalize your normals! Everything after that is the same as before. Let's go set these variables we defined and get this thing working. Go back to Ocean.cs and add this code to the draw:

C#

// choose and set the ocean textures
int oceanTexIndex = ((int)(gameTime.TotalGameTime.TotalSeconds) % 4);
oceanEffect.Parameters["normalTex"].SetValue(
    OceanNormalMaps[(oceanTexIndex + 1) % 4]);

oceanEffect.Parameters["normalTex2"].SetValue(
    OceanNormalMaps[(oceanTexIndex) % 4]);

oceanEffect.Parameters["textureLerp"].SetValue(
    (((((float)gameTime.TotalGameTime.TotalSeconds) - 
    (int)(gameTime.TotalGameTime.TotalSeconds)) * 2 - 1) * 0.5f) 
    + 0.5f); 

You can do the math on this if you want, but basically it just cycles through the four textures and sets the lerp value so it's a continuous shift. After all that, you should have an interesting image when you run the program!

Animate and Blend

Now we have something that resembles water. But when was the last time you saw water that just moved up and down—especially in the ocean? Let's animate this a bit! The first thing we'll do is make the texture coordinates scroll based on time. Let's add a time float to the top of the FX file:

HLSL

float time = 0;

Next, let's scroll the texture coordinates in the normal map lookup:

HLSL

float4 normalTexture1 = tex2D(NormalTextureSampler, 
    input.texCoord+float2(time,time));
float4 normalTexture2 = tex2D(NormalTextureSampler2, 
    input.texCoord+float2(time,time));

Now, simply set the time parameter in the Ocean.cs's Draw():

C#

// set the time used for moving waves
oceanEffect.Parameters["time"].SetValue(
    (float)gameTime.TotalGameTime.TotalSeconds * 0.02f);

Your water should be moving now if you run it.

There is one more enhancement we can do. What's better than having one moving surface? How about two? It's basically parallax normal mapping. We will change our pixel shader code to look like this:

HLSL

float3 diffuseColor = float4(0,0,1,1);
    
float4 normalTexture1 = tex2D(NormalTextureSampler, 
    input.texCoord*0.1+float2(time,time));

float4 normalTexture2 = tex2D(NormalTextureSampler2, 
    input.texCoord*0.1+float2(time,time));

float4 normalTexture = (textureLerp*normalTexture1) +
    ((1-textureLerp)*normalTexture2);

float4 normalTexture3 = tex2D(NormalTextureSampler, 
    input.texCoord*2+float2(-time,-time*2));

float4 normalTexture4 = tex2D(NormalTextureSampler2, 
    input.texCoord*2+float2(-time,-time*2));

float4 normalTextureDetail = (textureLerp*normalTexture3) +
    ((1-textureLerp)*normalTexture4);
    
float3 normal = (((0.5*normalTexture) + 
    (0.5*normalTextureDetail))*2) - 1;

normal.xyz = normal.xzy;
normal = normalize(normal);
    
float3 cubeTexCoords = reflect(input.worldPos-EyePos,normal);
    
float3 cubeTex = texCUBE(CubeTextureSampler,cubeTexCoords).rgb;
    
return float4((cubeTex*0.8)+(diffuseColor*0.2),1); 

What we did here is add two separate, lerping texture coordinates together. The 1 and 2 have been scaled by 0.1, making the waves much larger. The 3 and 4 lookups are scaled by 2 so they are much smaller, and move much faster in the opposite direction. This makes it look like the ocean has an overall current and some smaller waves simulating wind. The pixels are then combined before being converted to normals. Go ahead and run it. You should see your nice, new ocean!

Conclusion

And there you have it: a nice, infinite ocean! Since the majority of the work is done in the pixel shader, it will go on to the very end of the depth buffer and tile infinitely. Also, this is best when you are only looking out at it. It becomes somewhat apparent to the user if you are looking at the level on the ocean and only the sky, not the level, reflects properly. You may also notice that the ocean looks a bit cartoony in our example, but the good news is that this is merely an effect of the skybox being done in a soft pastel style. A more realistic skybox means a more realistic ocean.

I'm looking forward to seeing how people use this effect! If you use it, please send me an email with a screenshot.

About The Author

Louis Ingenthron is a Game Developer in Orlando, FL. He works on commercial Console and PC titles, but runs his own Indie Games company, FV Productions, on the side. He is best known for his open source XNA rhythm game Unsigned and specializes in real-time Graphics programming. He has been working with XNA since the 2.0 Beta and with .NET C# for just as long. He is also familiar with several other development languages, such as C, C++, and Java. Occasionally, he can even be found doing web development and Flash. Louis also writes for MSDN's Coding4Fun website, contributing articles on a monthly basis.