Monday, 14 April 2025

Shader Tool Week 4 - Post Processing

    Happens after we've rendered the main image.

    A render target is a memory buffer. It's a place that you can render an image to and then store it to the side so you can use it at a later time.

    Full Screen Quad: Instead of rendering the first pass to the screen buffer (the actual screen) first, You create two tris to make a rectangle that represents the screen. Then apply the current render target to the quad as a texture map. Then you re-render the full screen quad with a new FX shader on top of it. 


    Types of Post Process Operations

  • Matrix Operators: each pixel multiplied by a constant matrix
  • Convolution/kernel Operator: Pixel Value derived by neighboring input
  • Functional operators: pixel value calculated by a standard function

Grey Scale Filtering:

    You'd think we could just add up the rgb and divide by 3 to get the average grey. But actually the human eye sees reds, greens, and blues differently and need to adjust the weights accordingly. The equation is: 
    Intensity = (0.299*R + 0.587*G + 0.114*B)
    Use these values as a vector and use a dot product against the color vector of your scene
float intensity = dot(color.rgb, GreyScaleIntensity);

Inverse Filter

    For an inverse filter you'd just have to take the color and subtract it from one. 

Sepia Filtering

    Like old timey photographs, more brown than greyscale. 
    SepiaR = 0.393*R+0.769*G+0.189*B
    SepiaG = 0.349*R+0.686*G+0.168*B
    SepiaB = 0.272*R+0.534*G+0.131*B
    Use these values to create a matrix, and just multiple the matrix with your color vector. 
return float4(mul(color.rgb, SepiaFilter), color.a)

Generic Filter

You can really create a matrix for any filter. 

Bloom

    For bloom, you're calculating a threshold of the brightest area of your image, blurring that and then using that to add on top of the original image. 

Convolution Filter

    Often called kernel operator. A current pixel's value is an aggregate of it's neighboring values. You use a for loop to calculate offsets to the current pixel's coordinates and sample the pixel nearby to impact the current pixel's value. 
    Examples include box blur, gaussian blur, a sobel operator. 
    For gaussian blur it is more expensive but looks better. It's a two pass filter, first horizontally blurred and then vertically blurred. 

Sobel Operator

    Edge Detection, it looks for contrasts in adjacent pixels. It works on pixel illumination instead of color. It's a two pass filter (horizontal and vertical), if the sum of the two passes exceed a threshold Return white, else return black. 

Dithering

    Create for achieving that 90's 16 bit color look. 


No comments:

Post a Comment

Shader Tool Week 5 - Shadow Mapping

      Shadow Mapping in 4 steps Projection Texture Mapping Occlusion Depth Mapping  Projection With Occlusion Shadow Mapping Projection Text...