Question

I’m trying to create a depth of field post process, but have no idea where to start (except render depth map, which I’m currently at). All the tutorials for it are either for XNA3.1, don’t actually give you an explanation, or part of a book.

So, can you go through a detailed, step-by-step process on how DOF is rendered?

Answer 1

Here’s a description on how to achieve a basic approximation of it using the “out of the box” features provided by XNA within the Reach profile.

Once you’re across how to do it in C# using the inbuilt stuff, achieving it in HLSL will hopefully be a little more obvious.

Also, should you ever wish to produce a game for Windows Phone 7, you’ll where to start (as Windows Phone 7 doesn’t support custom shaders at this point in time).

First we’ll define some instance level variable to hold the bits and pieces we need to produce the look:

BasicEffect effect;
List<Matrix> projections;
List<RenderTarget2D> renderTargets;
SpriteBatch spriteBatch;

Next, in the LoadContent() method, we’ll start loading them up. Starting with a SpriteBatch that’ll we’ll use to render the final scene:

spriteBatch = new SpriteBatch(GraphicsDevice);

Followed by an instance of BasicEffect:

effect = new BasicEffect(GraphicsDevice);
effect.EnableDefaultLighting();
effect.DiffuseColor = Color.White.ToVector3();
effect.View = Matrix.CreateLookAt(
            Vector3.Backward * 9 + Vector3.Up * 9,
            Vector3.Zero,
            Vector3.Up);
effect.World = Matrix.Identity;

effect.Texture = Content.Load<Texture2D>("block");
effect.TextureEnabled = true;
effect.EnableDefaultLighting();

The specifics of how the Basic Effect are configured aren’t important here. Merely that we have an effect to render with.

Next up we’re going to need a few projection Matrices:

projections = new List<Matrix>() {
        Matrix.CreatePerspectiveFieldOfView(
        MathHelper.ToRadians(60f),
        GraphicsDevice.Viewport.AspectRatio,
        9f,
        200f),
    Matrix.CreatePerspectiveFieldOfView(
        MathHelper.ToRadians(60f),
        GraphicsDevice.Viewport.AspectRatio,
        7f,
        10f),
    Matrix.CreatePerspectiveFieldOfView(
        MathHelper.ToRadians(60f),
        GraphicsDevice.Viewport.AspectRatio,
        0.2f,
        8f)};

If you examine the last two parameters of each projection, you’ll notice what we’re effectively doing here is splitting the world up into “chunks” with each chunk covering a different range of distances from the camera.

e.g. everything from 9 units beyond, anything between 7 units and 10 units from the camera and finally anything closer then 8 units.

(You’ll need to tweak these distances depending on your scene. Please note the small amount of overlap)

Next we’ll create some render targets:

var pp = GraphicsDevice.PresentationParameters;

renderTargets = new List<RenderTarget2D>()
{
    new RenderTarget2D(GraphicsDevice,
        GraphicsDevice.Viewport.Width / 8,
        GraphicsDevice.Viewport.Height / 8,
        false, pp.BackBufferFormat, pp.DepthStencilFormat),

        new RenderTarget2D(GraphicsDevice,
        GraphicsDevice.Viewport.Width / 4,
        GraphicsDevice.Viewport.Height / 4,
        false, pp.BackBufferFormat, pp.DepthStencilFormat),

    new RenderTarget2D(GraphicsDevice,
        GraphicsDevice.Viewport.Width,
        GraphicsDevice.Viewport.Height,
        false, pp.BackBufferFormat, pp.DepthStencilFormat),
};

Each render target corresponds to an aforementioned “chunk”. To achieve a really simplistic blur effect, each render target is set to a different resolution with the “furthest” chunk being a low resolution and the closest chunk being a high resolution.

Jumping across to the Draw() method, we can render our scene chunks:
(Being sure not to render the background in each chunk)

        effect.Projection = projections[0];
        GraphicsDevice.SetRenderTarget(renderTargets[0]);
        GraphicsDevice.Clear(Color.Transparent);
        // render scene here

        effect.Projection = projections[1];
        GraphicsDevice.SetRenderTarget(renderTargets[1]);
        GraphicsDevice.Clear(Color.Transparent);
        // render scene here

        effect.Projection = projections[2];
        GraphicsDevice.SetRenderTarget(renderTargets[2]);
        GraphicsDevice.Clear(Color.Transparent);
        // render scene here

        GraphicsDevice.SetRenderTarget(null);

So now we’ve got our scene, broken up and blurred by distance, all that’s left is to recombine it back together for our final image.

First step, render the (awesome) background:

    GraphicsDevice.Clear(Color.CornflowerBlue);

Next render each chunk, from further to closest:

    spriteBatch.Begin(
        SpriteSortMode.Deferred, 
        BlendState.AlphaBlend, 
        SamplerState.AnisotropicClamp, 
        null, null);

    spriteBatch.Draw(renderTargets[0], GraphicsDevice.Viewport.Bounds, Color.White);
    spriteBatch.Draw(renderTargets[1], GraphicsDevice.Viewport.Bounds, Color.White);
    spriteBatch.Draw(renderTargets[2], GraphicsDevice.Viewport.Bounds, Color.White);

    spriteBatch.End();

And viola! We have a, albeit a little rough around the proverbial edges, approximation of Depth Of Field.

Now if you’re planning to stay within the confines of the Reach profile, you can improve the blur effect by rendering each chunk at multiple resolutions and combining the resulting images together using something like the Additive BlendState.

If, on the other hand, you’re planning to branch out into writing custom shaders in the HiDef profile, the concepts are roughly the same, just the method of execution changes.

For example, swapping the low resolution rendering for a more authentic Gaussian style blur… or… ditching the course grained idea of chunks and moving to the relatively fine grained method of blurring based off a depth map.