Language:
Page Info
Tags:
Skill Level:
Engine Version:

Depth of Field

Choose your OS:

Depth of Field

Depth of Field (DoF) 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.

Depth of Field Types

There are three methods available for performing depth of field effects in Unreal Engine 4: Bokeh, Gaussian and Circle.

Bokeh DoF

Gaussian DoF

Circle DoF

Bokeh DoF

Gaussian DoF

Circle DoF

Gaussian Depth of Field

Gaussian DoF blurs the scene using a standard Guassian blur. The Guassian method is fast and generally well-suited for use in-game, where performance is critical.

Bokeh Depth of Field

Bokeh is the name of the shape that can be seen in photos or movies when objects are out of focus. Bokeh DoF is a method where a textured quad is rendered for each pixel using a texture to define the shape to reproduce the effect produced by camera lenses, which gives a filmic look to the scene. The actual implementation does this performance intensive effect only in half resolution. It also tries to save render performance in areas where this is not that noticeable. See Adaptive DOF for more information.

The Bokeh method is far more costly performance-wise, making cinematics and showcases prime candidates for the Bokeh method as the appealing visuals often outweigh any performance concerns in those situations.

Circle Depth of Field

The Circle DoF is the newest addition and matches real world cameras more closely. Simialar to the Bokeh DoF you can see circular shaped Bokeh with sharp HDR content. Very large Bokeh are a weakness of this algorithm, they appear noisy and not as clear as the BokehDOF can do them. The method has good performance (quite better than Bokeh DoF) and good quality, especially in the transition areas.

The defaults of CircleDOF are intentionally weak to be more pleasant. To get the maximum effect you can tweak settings. Use a low Aperture for a large Bokeh, get close to an object and change the Field of View to be lower. Play with the focal distance to get some scene content in out of focus, ideally in front and behind the focal plane. Using showflag VisualizeDepthOfField might help to find the right settings.

Implementation

Depth of Field is broken up into three layers - Near, Far, and the Focal Region - each of which are processed separately and then later composited together to achieve the final effect. Objects in the near and far layers - that is, objects not in the focal region - are always fully blurred. Then, these layers are blended with the non-blurred scene.

  • Objects within the focal region use the non-blurred scene layer.

  • Objects in the near or far layers, but outside any transition regions, are fully blended to the blurred layer.

  • Objects within a transition region are blended linearly between the non-blurred scene layer and their blurred layer based on their position within the transition region.

These layers, including the transition regions, can be visualized using the Depth of Field Layers show flag ( under Show > Visualize ). The near layer is shown in green, the far layer in blue, and the focal region is black.

Scene

Layer Visualization

We further improved this visualization to also include a lot of interesting information:

Scene

VisualizeDOF

When using the CircleDOF you also can see a crosshair attached to the mouse cursor showing the computed circle of confusion (BokehSize) together with the depth and the pixel size in numbers. Note that the circle size might not always match to the actual effect as the implementation is not well suited / intended for large Bokeh shapes. We might want to improve on that in the future.

Properties

Property

Description

Method

Selects the method, Bokeh, Gaussian or Circular, used for blurring the scene.

Depth Blur km for 50%

todo

Depth Blur Radius

Depth blur radius in pixels at 1920x

Aperture

todo

Focal Distance

The distance in Unreal Units from the camera that acts as the center of the region where the scene is perfectly in focus and no blurring occurs.

DoF Focal Distance - Near

DoF Focal Distance - Mid

DoF Focal Distance - Far

Focal Distance = 400.0

Focal Distance = 1000.0

Focal Distance = 2500.0

Focal Region

The distance in Unreal Units beyond the focal distance where the scene is perfectly in focus and no blurring occurs.

Focal Region

Near Transition Range

The distance in Unreal Units from the focal region on the side nearer to the camera over which the scene transitions from focused to blurred when using Gaussian-based DoF.

Gaussian Near Layer

Far Transition Range

The distance in Unreal Units from the focal region on the side farther from the camera over which the scene transitions from focused to blurred when using Gaussian-based DoF.

Gaussian Far Layer

Scale

An overall scaling factor for Bokeh-based blurring.

DoF Scale - 0.0

DoF Scale - 0.375

DoF Scale - 1.0

Scale = 0.0

Scale = 0.375

Scale = 1.0

Max Bokeh Size

The maximum size (in percent of the view width) of the blur for Bokeh-based DoF (Note: performance cost scales with size*size). An approximate representation of the function used to calculate the size of the Bokeh at any distance is shown below:

Bokeh CoC

DoF Bokeh Size - 2.5

DoF Bokeh Size - 5.0

DoF Bokeh Size - 10.0

Size = 2.5

Size = 7.5

Size = 15.0

Near Blur Size

The maximum size (in percent of the view width) of the near blur for Gaussian-based DoF. (Note: performance cost scales with size)

DoF Near Blur Size - 2.5

DoF Near Blur Size - 5.0

DoF Near Blur Size - 10.0

Size = 0.0

Size = 0.25

Size = 2.5

Far Blur Size

The maximum size (in percent of the view width) of the far blur for Gaussian-based DoF. (Note: performance cost scales with size)

DoF Far Blur Size - 2.5

DoF Far Blur Size - 5.0

DoF Far Blur Size - 10.0

Size = 0.0

Size = 0.25

Size = 2.5

Shape

A texture that defines the shape of the Bokeh when objects get out of focus (cannot be blended).

Occlusion

Controls how much the blurred geometry extends beyond its usual silhouette and its opacity. A value of 0.18 gives a fairly natural occlusion result. A value of 0.4 may be necessary to solve layer color leaking issues. Very small values (less than 0.18) generally result in negating the blur effect, though can work well when objects are very near to the camera.

DoF Occlusion - 0.05

DoF Occlusion - 0.18

DoF Occlusion - 0.4

Occlusion = 0.05

Occlusion = 0.18

Occlusion = 0.4

Color Threshold

Controls the threshold where adaptive DoF switches to using full-resolution based on color. Smaller values cause more of the scene to use full-resolution processing.

Size Threshold

Controls the threshold where adaptive DoF switches to using full-resolution based on size. Larger values cause more of the scene to use full-resolution processing.

Sky Distance

Artificial distance to allow the skybox to be in focus (e.g. 200000), <=0 to switch the feature off, only for GaussianDOF, can cost performance.

Adaptive DoF

Bokeh depth of field is rendered at quarter-resolution (half-res in each direction) by default for performance reasons. In most cases, this downsampling is barely noticeable and is perfectly acceptable; however, it can lead to artifacting and unwanted results in some situations.

Adaptive Resolution - Off

Adaptive Reoslution - On

You can see that the characters being blurred in the background appear blocky when using only the downsampled DoF technique. Also, there is some artifacting around the horns of the character in the foreground. The artifacting is eliminated by using the adaptive DoF, and the background characters have a much smoother appearance.

The adaptive DoF can be visualized using the Adaptive Depth of Field show flag (under Show > Visualize ). When enabled, an overlay is displayed showing where the downsampled effect is being used (in green) and where the full-resolution effect is being used (in red). The regular scene color is shown where no blurring is being applied.

Adaptive DoF Visualization

In general, you want this to display all green. The more red shown by the visualization, the more expensive the scene is to render each frame.

Adaptive Resolution - Optimized

Adaptive Resolution - Expensive