Wednesday, April 14, 2010

Screen Space Effects

Well, Screen Space Effects are those effects which basically takes place on Image, in our case this image is nothing but the Back Buffer which gets presented as front buffer & eventually this is what we see on the screen.

The basic idea is to treat Back Buffer content as a texture or image & then processing that image using standard Image Processing algorithms to achieve the desired results.Unlike, other shaders where there is immense amount of transformations involved, say like going into the Tangent Space to the Normal Mapping & all, this shaders acts just before the presenting the actual scene onto the scene, so this gets acted on Pixel basis, rather than Vertices. Important step is to get content of Back buffer & treating it as a texture which am not planning to explain here. That comes under DirectX or OpenGL, which ever API is comfortable for you.

Enough said, First I will try to apply an Sobel Edge detection filter to detect.. well, as it says detect Hard Edges in the Image. This can be used in Non Photo Realistic Rendering like toon rendering to achieve bordering effect.

Main idea is to render the scene as a depth information into the backbuffer & then apply soble edge detection filter to it to detect edges in the image. I will explain this as per why only depth pass & all in some time. Here is how each pass produces the output.

Depth Pass :

This pass mainly consists of passing on the depth information from the scene to the pixel shader, where based on Far Plane, Near Plane & Point of focus it produces the output in desired color. Though the most important part of this step is to render the output into the texture Using Render To Texture method. This texture is sampled in the next pass of the shader where it is treated as Normal Image.

Final Sobel Edge Detection Pass :

Once we have the image to be processed, its just a matter of time to apply Sobel Edge detection filter on the image.
Here is what I used as a reference for my Sobel filter.

There are obviously other bunch of White papers on the net discussing Sobel Edge detection filter in detail. To explain in short, what this filter does is, for the current pixel, it samples the neighboring pixels, Here in Sobel filter, it samples around, Eight neighboring pixels based on the Kernel value. 

So, First sample neighboring pixel by taking offset from the current pixel in all eight directions & then applying filter in both X & Y direction. Some thresholding parameter can be used to determine the thickness of the edge.

P.S : Shader code available on request.

No comments: