The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Post-Processing Effects

Next ►
►

Post-processing effects are techniques applied to the final rendered image to enhance its visual quality. These effects are typically implemented in a separate rendering pass after the main scene has been rendered. This module will cover the basics of post-processing effects, including common techniques and how to implement them in DirectX.

Key Concepts

  1. Render Targets: Intermediate textures where the scene is rendered before applying post-processing effects.
  2. Screen-Space Effects: Effects that operate on the entire screen image rather than individual objects.
  3. Shader Programs: Custom shaders used to apply post-processing effects.

Common Post-Processing Effects

  1. Bloom: Simulates the way light bleeds around bright areas.
  2. Motion Blur: Simulates the blurring of moving objects.
  3. Depth of Field: Simulates the focus effect of a camera lens.
  4. Color Grading: Adjusts the colors of the final image for stylistic purposes.

Setting Up Post-Processing in DirectX

Step 1: Create Render Targets

Render targets are textures where the scene is rendered before applying post-processing effects.

// Create a render target texture
ID3D11Texture2D* renderTargetTexture = nullptr;
D3D11_TEXTURE2D_DESC textureDesc = {};
textureDesc.Width = screenWidth;
textureDesc.Height = screenHeight;
textureDesc.MipLevels = 1;
textureDesc.ArraySize = 1;
textureDesc.Format = DXGI_FORMAT_R8G8B8A8_UNORM;
textureDesc.SampleDesc.Count = 1;
textureDesc.Usage = D3D11_USAGE_DEFAULT;
textureDesc.BindFlags = D3D11_BIND_RENDER_TARGET | D3D11_BIND_SHADER_RESOURCE;

HRESULT hr = device->CreateTexture2D(&textureDesc, nullptr, &renderTargetTexture);
if (FAILED(hr)) {
    // Handle error
}

Step 2: Create Render Target View and Shader Resource View

// Create a render target view
ID3D11RenderTargetView* renderTargetView = nullptr;
hr = device->CreateRenderTargetView(renderTargetTexture, nullptr, &renderTargetView);
if (FAILED(hr)) {
    // Handle error
}

// Create a shader resource view
ID3D11ShaderResourceView* shaderResourceView = nullptr;
hr = device->CreateShaderResourceView(renderTargetTexture, nullptr, &shaderResourceView);
if (FAILED(hr)) {
    // Handle error
}

Step 3: Render Scene to Render Target

// Set the render target
context->OMSetRenderTargets(1, &renderTargetView, depthStencilView);

// Clear the render target
float clearColor[4] = { 0.0f, 0.0f, 0.0f, 1.0f };
context->ClearRenderTargetView(renderTargetView, clearColor);
context->ClearDepthStencilView(depthStencilView, D3D11_CLEAR_DEPTH, 1.0f, 0);

// Render the scene
RenderScene();

Step 4: Apply Post-Processing Effects

Example: Applying a Simple Grayscale Effect

  1. Vertex Shader: Passes through the vertex positions and texture coordinates.
// Vertex Shader
struct VS_OUTPUT {
    float4 Pos : SV_POSITION;
    float2 TexCoord : TEXCOORD0;
};

VS_OUTPUT VS(float4 Pos : POSITION, float2 TexCoord : TEXCOORD0) {
    VS_OUTPUT output;
    output.Pos = Pos;
    output.TexCoord = TexCoord;
    return output;
}
  1. Pixel Shader: Converts the image to grayscale.
// Pixel Shader
Texture2D sceneTexture : register(t0);
SamplerState samplerState : register(s0);

float4 PS(float2 TexCoord : TEXCOORD0) : SV_TARGET {
    float4 color = sceneTexture.Sample(samplerState, TexCoord);
    float gray = dot(color.rgb, float3(0.299, 0.587, 0.114));
    return float4(gray, gray, gray, 1.0);
}
  1. Rendering the Post-Processed Image:
// Set the shader resource view
context->PSSetShaderResources(0, 1, &shaderResourceView);

// Set the post-processing shaders
context->VSSetShader(postProcessVertexShader, nullptr, 0);
context->PSSetShader(postProcessPixelShader, nullptr, 0);

// Draw a full-screen quad
context->Draw(6, 0);

Practical Exercise

Exercise: Implementing a Bloom Effect

  1. Create a render target for the bright pass.
  2. Extract bright areas from the scene.
  3. Blur the bright areas.
  4. Combine the blurred bright areas with the original scene.

Solution Outline

  1. Bright Pass Shader: Extracts bright areas.
// Bright Pass Pixel Shader
float4 PS_BrightPass(float2 TexCoord : TEXCOORD0) : SV_TARGET {
    float4 color = sceneTexture.Sample(samplerState, TexCoord);
    float brightness = dot(color.rgb, float3(0.299, 0.587, 0.114));
    if (brightness > 0.8) {
        return color;
    } else {
        return float4(0, 0, 0, 1);
    }
}
  1. Blur Shader: Applies a Gaussian blur.
// Blur Pixel Shader
float4 PS_Blur(float2 TexCoord : TEXCOORD0) : SV_TARGET {
    float4 color = float4(0, 0, 0, 1);
    float2 offsets[9] = {
        float2(-1, -1), float2(0, -1), float2(1, -1),
        float2(-1,  0), float2(0,  0), float2(1,  0),
        float2(-1,  1), float2(0,  1), float2(1,  1)
    };
    float weights[9] = { 1, 2, 1, 2, 4, 2, 1, 2, 1 };
    for (int i = 0; i < 9; ++i) {
        color += sceneTexture.Sample(samplerState, TexCoord + offsets[i] * 0.002) * weights[i];
    }
    return color / 16.0;
}
  1. Combine Shader: Combines the original scene with the blurred bright areas.
// Combine Pixel Shader
float4 PS_Combine(float2 TexCoord : TEXCOORD0) : SV_TARGET {
    float4 original = sceneTexture.Sample(samplerState, TexCoord);
    float4 bloom = bloomTexture.Sample(samplerState, TexCoord);
    return original + bloom;
}

Summary

In this module, we covered the basics of post-processing effects in DirectX. We discussed common effects such as bloom, motion blur, depth of field, and color grading. We also walked through the steps to set up post-processing in DirectX, including creating render targets, rendering the scene to a render target, and applying post-processing shaders. Finally, we provided a practical exercise to implement a bloom effect, reinforcing the concepts learned.

Next, we will delve into more advanced topics, such as tessellation and ray tracing, to further enhance your DirectX programming skills.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved