Dream Hills – PostFX

The term Post Process is used in the video/film business for image quality improvement. Also, post-processing is commonly used in 3D rendering, especially for video games. Instead of rendering 3D objects directly to the display, the scene is first rendered to a buffer. Pixel Shaders and optionally Vertex Shaders are then used to apply post-processing filters to the image buffer before displaying it to the screen. Some PostFX also require multiple-passes, gamma inputs, vertex manipulation and depth buffer access.

Dream Hills

On Dream Hills I have implemented some PostFX to improve the quality of the final image. I will try to explain how they are implemented and why we have decided to implement them, and will see a frame comparison between a vanilla frame (without any PostFX) and a frame with the PostFX active. The following image is a comparison with the frame of the released version of Dream Hills.

Blur

Blurring the frame is a technique that I used for the pause menu and also to implement other FX (bloom, DOF, Outline, etc) that require to blur part of the frame or use a blurred frame as input. This blur effect is made using a Gaussian function in two passes, horizontal and vertical

Gray Scale

The gray scale is a very basic effect that together with a slow-motion effect adds drama to the death sequence when Timmy dies. The implementation is a simple using an average color function.

Chromatic Aberration

The chromatic aberration happens in low quality or old cameras with warped lenses that can’t focus colors to a precise point. The result is a a multicolored blurring around the edges of objects, marked by a red/green/blue separation. This effect adds an extra layer of abstraction between you and the game world. Instead of being a Timmy trying to recover Teddy’s ear, you’re participating in a movie about a kid recovering his Teddy Bear’s ear. To make this effect I sampled the RGB colors from the pixels around and interpolating by distance to the center of the frame, the farther from the center, the more chromatic aberration. The image below of the chromatic effect is a bit exaggerated comparing with the released frame.

Vignetting

Vignetting is a reduction of an image’s brightness or saturation at the periphery compared to the image center, and I decide to implement this effect for artistic reasons. The implementation is applying a mask (the closer to the center, the lighter) to the frame.

Depth Of Field

Depth of Field applies a blur to the scene based on distance in front of or behind a focal point. This is to simulate what happens in real-world cameras. The effect can be used to draw the viewer’s attention and to make the rendering appear more like a photograph or like a movie.

For this effect I use a full blurred frame at the blue zones (in the debug mode, next image), a clear frame without blur at the red zone, and interpolate between at the transition zones. You can see the fire hydrant in the near zone, Timmy in the transition near to clear zone, the traffic signal in the clear zone, the telephone cabin in the transition clear to far zone, and the yellow house in the far zone.

Distance Fog

Distance Fog is a technique used in 3D computer graphics to enhance the perception of distance by simulating fog. I used a linear interpolation with a start and end distance to the camera to add the Fog using the Depth Buffer.

Cinematic

The Cinematic effect just adds two bands to the frame to simulate a panoramic frame of a movie. I just set to black the pixel if is out of the Y limits.

Color Grading

Color grading is a powerful way to add character to a game. Subtle color changes make day-night cycling much more atmospheric. Different areas can have their own signature based on how saturated the colors are. Dark games can shift the unlit areas of an environment to cool bluish tint that can remain visible but still feel like darkness. This effect is achieved by sampling a 3D Texture with the color of the vanilla frame pixel as coordinate.

Bloom

Bloom is a real world light phenomena that can greatly add to the perceived realism of a rendered image at a moderate render performance cost. Bloom can be seen by the naked eye when looking at very bright objects that are on a much darker background. To create this effect I just added to the color the blurred emissive layer multiplied by the intensity.

Specular Bloom

Specular Bloom is what we call it when the bright objects in your scene glow. To create this effect first I heighten the contrast, reduce the brightness and saturate to get an image buffer that represents just the bright parts of the frame. Next I blur the brightness image buffer and use it like the emissive layer in the Bloom Effect.

Sun Glare

To recreate the Sun in the sky I used a lens flare algorithm to simulate the light scattering in the sky. The implementation is taken from this Shadertoy.

Volumetric Light Scattering

Given the initial image, sample coordinates are generated along a ray cast from the pixel location to the screen-space light position. The light position in screen space is computed by the standard world-view-project transform and is scaled and biased to obtain coordinates in the range [-1, 1]. Successive samples in the summation are scaled by both the weight constant and the exponential decay attenuation coefficients for the purpose of parameterizing control of the effect. The separation between samples’ density may be adjusted and as a final control factor, the resulting combined color is scaled by a constant attenuation coefficient exposure. Algorithm and explanation from GPU Gems 3.