Documentation/Articles/Overview of Full-Screen Effects

From NeoAxis 3D Engine Wiki

Jump to: navigation, search
Go to higher level

Contents

Introduction

Post effects are tools for processing rendered frames of scenes using shaders. Blur or imitating thermal vision are good examples of post effects. NeoAxis Engine has lots of implemented post effects which could be used in user's projects, too. The tutorial of creating of a new post-effect can also be interesting for programmers.

Depth of field post effect

Configuring Effects in Map Editor

There is a special type MapCompositorManager.type for setting post effects in the Map Editor. In order to add the instance of this entity type to the map you should select MapCompositorManager type in Base/Type folder of Entity Types window and left-click on the workspace.

PostEffects 02.jpg

In order to add a post effect to the map at first you need to select the created object in the Objects window.

PostEffects 03.jpg

and then click the "..." button next to the Items property of the Properties window.

PostEffects 04.jpg

You can edit the parameters of post effects in the open window. Add and Remove buttons should be used for adding or removing post effects. Note, that post effects can be applied to the scene in the same order that was used while pointing them in the Members list. To change the order number of the post effect you need to select it in the list and press Up or Down buttons.

PostEffects 05.jpg

Options and roles of each given post effect is provided in the post effects description.

Controlling Effects in the Game

If you want to have a brief look at a certain post effect in action, you do not have to configure it in the Map Editor. All you need is simply to use the Profiler menu from the Game.exe application.

To get to the post effects configuration window, you need to press the Escape key after you launch the game and select the Profiler option in the menu.

PostEffects 06.jpg

Through the Profiler menu go to the Full-Screen Effects page where you will find the list of accessible Post effects. To configure post effects manually put a checkmark in the Manual Control box in there.

PostEffects 07.jpg

In order to enable the required post effect, check the correspondent boxes in the list with effects. Once you select a post effect, its properties become available for configuration in the right panel.

The order in which the post effects are applied to the scene is displayed at the bottom left side of the window in the Queue of enabled post effects list. The order of the post effects application follows the same sequence in which those effects were enabled (the sequence the corresponding boxes were checked). For example, if you need to move an already enabled effect to the end of the queue, you have to turn it off and on again. This rule is valid for all the post effects except for HDR, which is always first in the queue, since HDR is not just a post effect, but also a special scene rendering technique.


PostEffects 08.jpg

Ready to Use Effects

This section describes the post effects, included to the SDK with a description of their purpose, features, and examples of use.

All the post effects have one common option Enabled. This flag defines whether the post effect is currently applied to the scene or not.

SSAO

SSAO or Screen Space Ambient Occlusion is a technique, which approximately simulates global illumination and which actually is a modified and improved version of the “Ambient Occlusion” method. The SSAO algorithm works in real-time and simulates diffused indirect illumination along with corresponding shading in three-dimensional virtual space. This technique is resource intensive and thus has high requirements to the graphic card performance.

In order to work properly, this effect requires the depth buffer access, which can be enabled in the Configurator.

Example of a scene without post effects (on the left) and with SSAO enabled (on the right)
Property Description
Intensity Intensity of the effect.
Downsampling Size of textures used during effect rendering. The lower the number, the faster the post effect is processed, but the lower the quality becomes. It is highly recommended to pick the optimal performance/quality ratio.
SampleLength Length of the sample ray.
OffsetScale Distance of the first sample.
DefaultAccessibility Intensity of the effect for those samples that were identified as incorrect.
MaxDistance Maximum distance from the camera, within which the effect can be applied.
BlurSpread Determines the effect of texture blur produced by Ambient Occlusion.
ShowAO Enables/Disables display of the intermediate texture with calculated values of ​​Ambient Occlusion. Debug property.

HDR

HDR or High-dynamic-range imaging - this is not only a post effect, but also a special rendering technique that allows rendering scenes in an extended color range.

An example of a scene without post effects (on the left) and using the HDR (on the right)

This post effect includes the Bloom effect that searches for heavily overexposed pixels and lights adjacent pixels accordingly.

Another property of this post effect is Adaptation. When used, this property simulates adaptation of a human eye to bright light. For example, coming out of a dark room on a well-lit street, the picture seems to be very bright, but then the brightness decreases gradually. This is the way the effect of eye adaptation is simulated. This option is disabled by default.

Property Description
Adaptation Enable/Disable the simulation of adaptation to the bright light.
AdaptationVelocity Speed of adaptation.
AdaptationMiddleBrightness The value of middle brightness of the scene, where adaptation is simulated.
AdaptationMinimum Minimum threshold of adaptation.
AdaptationMaximum Maximum threshold of adaptation.
BloomBrightThreshold An intensity threshold of pixels, around which the adjacent pixels are to be overexposed.
BloomScale Degree of influence on the brightness of pixels that are to be overexposed.

LDRBloom

LDRBloom (Low Dynamic Range Bloom) is a post effect, which is a simplified version of the HDR. The algorithm finds the brightest pixel and increases the brightness of the neighboring areas.

An example of a scene without post effects (on the left) and the same scene using LDRBloom (on the right)

The example of the LDRBloom post effect (on the right) compared with the usual scene (on the left) shown with 2x zoom:

PostEffects24.jpg
Property Description
BloomBrightThreshold An brightness threshold of pixels, around which the adjacent pixels are to be overexposed.
BloomScale Degree of influence on the brightness of pixels that are to be overexposed.

DepthOfField

Depth of Field is an effect that blurs the part of the image which is beyond the focus. Can be used to focus the player on the object and to defocus the background.

In order to work properly, this effect requires the depth buffer access, which can be enabled in the Configurator.

The available adjustment options make the Tilt-shift effect easily reproducible.

An example of a scene without post effects (on the left) and the same scene using DepthOfField (on the right)

Depth of Field effect virtually divides the scene into 3 parts

  • objects at a distance closer than the focal length,
  • objects in focus,
  • objects at a distance farther than the focal length.

When enabled, the post effect blurs objects that are out of focus (that are closer or farther than a focal distance). The post effect performs calculation with the following parameters taken into account – focal length, focus range, the distance to the near and farther transitions. The dependence of the image sharpness on these parameters is shown in the following graph:

PostEffects15.jpg

The graph shows how sharpness gets increased or decreased as the distance between the object and the camera changes.

It is often required to blur background only, without blurring the nearby objects. For such cases the DepthOfField post effect has a BlurForeground property. If this flag is set, the objects that are close to the camera are blurred. If BlurForeground is disabled, no blur occurs for those objects. In the latter case, the object sharpness graph becomes like this:

PostEffects16.jpg

This post effect may work in the auto-focus mode. You need to enable the AutoFocus property for this.

Property Description
FocalDistance Focal length.
AutoFocus Enable/Disable the AutoFocus mode. If set to True' the focal length is calculated automatically.
FocalSize Focal range.
BlurSpread The intensity of the blur effect for objects beyond the focus.
BlurTextureResolution Resolution of textures used for blurring. The lower the number, the faster the post effect is processed and the more blur is. It is highly recommended to pick the optimal performance/quality ratio.
BackgroundTransitionLength The length of increasing blurring intensity of background objects. If the object is farther from the focal range, than within the given distance, this object is rendered with a maximum blur.
BlurForeground Enable/Disable the Blurring of the objects that are near the camera. If the value is set to True, the nearby objects are blurred.
ForegroundTransitionLength The length of increasing blurring intensity of nearby objects. Use if the BlurForeground property is enabled. If the object is nearer to the focal range than the given distance, this object is rendered with a maximum blur.
AutoFocusRange.Minimum Minimum focal distance in the auto-focus mode.
AutoFocusRange.Maximum Maximum focal distance in the auto-focus mode.
AutoFocusTransitionSpeed Speed of focal range alteration in the auto-focus mode.

FXAA

FXAA (Fast Approximate Anti-Aliasing) is a pixel smoothing algorithm. Anti-Aliasing removes sharp edges making the curves on the screen look smoother. This effect is achieved by blurring the boundaries of objects with sharp drops of distance from the camera.

An example of a scene without post effects (on the left) and the same scene using FXAA (on the right)

An example of an image without smoothing (on the left) and with smoothing (on the right) shown with 2x zoom:

PostEffects18.jpg

Glass

Post effect Glass creates illusion of viewing the scene through a window.

An example of a scene without post effects (on the left) and the same scene with Glass (on the right)

Grayscale

Grayscale allows you to draw the scene in shades of gray (i.e., make it black and white). Furthermore, you can adjust the intensity of this post effect so, that the scene can look, for instance, just a little less saturated or purely black and white.

An example of a scene without post effects (on the left) and the same scene using the Grayscale (on the right)
Property Description
Intensity The intensity of the effect, given as a value from 0 to 1. When set to 0, the post effect does not have any impact on the scene, while being set to 1, the scene is rendered entirely in shades of gray.

Blur

Blur creates an effect of a blurred fuzzy picture.

An example of a scene without post effects (on the left) and with Blur (on the right)
Property Description
Fuzziness Blurring multiplier.

HeatVision

HeatVision (thermal vision/heat imaging) - simulates the look at the scene through the thermal vision camera.

An example of a scene without post effects (on the left) and the same scene using HeatVision (on the right)

Invert

The Invert post effect renders a scene, inverting pixel colors

An example of a scene without post effects (on the left) and the same scene with Invert (on the right)

ColorCorrection

ColorCorrection adjustment of image color with the help of color multiplier.

An example of a scene without post effects (on the left) and the same scene using ColorCorrection (on the right)
Property Description
Red Red component of a color multiplier.
Green Green component of a color multiplier.
Blue Blue component of a color multiplier.

LightScattering

LightScattering (also referred to as God Rays) is the effect of scattering light when looking directly at its source. For this post effect to be reproduced, the type of the mapped object should be Sun.type.

In order to work properly, this effect requires the depth buffer access that can be enabled in the Configurator.

An example of a scene without post effects (on the left) and the same scene using LightScattering (on the right)
Property Description
Color.Red The red component of the color of the light source rays.
Color.Green The green component of the color of the light source rays.
Color.Blue The Blue component of the color of the light source rays.
Intensity The intensity of light produced by the light source.
Decay Intensity of beams brightness fading.
Density The length of the rays.
BlurFactor Blurring rate.
Resolution Resolution of textures that are used for blurring. The lower the number, the faster the post effect is processed and the more blur is. It is highly recommended to pick the optimal performance/quality ratio.

MotionBlur

MotionBlur is the effect of blurring images in motion.

An example of a scene without post effects (on the left) and the same scene using MotionBlur (on the right)
Property Description
Blur Blur intensity.

OldTV

OldTV (old TV-set) is a post effect that imitates noise on the screen when receiving a signal.

An example of a scene without post effects (on the left) and using OldTV (on the right)

RadialBlur

RadialBlur (Radial Blur) is a special blurring method. The effect takes place in the center of a certain blur instance and increases while distancing from its center.

An example of a scene without post effects (on the left) and the same scene using ShowDepth (on the right)
Property Description
Center.X The horizontal coordinate of the center of the blur instance.
Center.Y The vertical coordinate of the center of the blur instance.
BlurFactor Blurring rate.

ShowDepth

ShowDepth can be called a post effect for technical needs. It displays the contents of the depth buffer converting the distance from the object to the camera to gray scale gamma.

In order to work properly, this effect requires the depth buffer access, which can be enabled in the Configurator.

An example of a scene without post effects (on the left) and the same scene using ShowDepth (on the right)
Property Description
Muliplier A multiplier that converts a value from the buffer into a color on the screen.

Tiling

Tiling is a post effect, used for displaying scenes as a tiled mosaic.

An example of a scene without post effects (on the left) and the same scene using the Tiling (on the right)

Vignetting

Vignetting is a post effect that adds a dark frame to the screen edges. It can be used in the game to insert short cinematic intros built on this engine.

An example of a scene without post effects (on the left) and the same scene with Vignetting (on the right)
Property Description
Radius Frame corner radius.
Intensity The blackout intensity.