How to Create a Custom Miniature-Style Depth of Field Effect in UE5 with HLSL

Creating a custom Depth of Field (DoF) effect can transform your Unreal Engine projects into visually striking experiences. In this guide, you’ll learn how to build a miniature-style DoF using HLSL shaders, overcome practical limitations of unreal cameras, and implement creative bokeh shapes.

Why Use Post-Process DoF Instead of Native Camera Effects?
Unreal Engine’s Cine Camera can create beautiful cinematic bokeh with telephoto lenses and low F-stops. However, this often forces the camera too far from subjects, breaking gameplay immersion. A post-process DoF solution solves this by applying selective blur after rendering, maintaining optimal camera positioning.

The Heart of DoF: Circle of Confusion (CoC) Simplified
All DoF effects rely on calculating the Circle of Confusion (CoC), which determines how out-of-focus areas appear. While the physically accurate CoC formula works for realism, we can simplify it for artistic control:

CoC = (Aperture * |Depth - FocusDistance|) / (FocusDistance * Depth)

Where:
– Aperture: Controls blur intensity (similar to F-stop)
– FocusDistance: The perfect focus distance
– Depth: Pixel depth from depth buffer

This modified formula lets you create exaggerated miniature effects without complex optics math.

Implementing Custom DoF in HLSL – Step by Step
1. Get Depth Buffer Data
Use SceneTexture:CustomDepth to sample depth values:
float Depth = SceneTextureLookup(UV, SCENE_TEXTURE_CUSTOM_DEPTH);

2. Calculate CoC Radius
Convert depth to linear space and calculate blur:
float LinearDepth = ConvertToLinearDepth(Depth);
float CoC = (Aperture * abs(LinearDepth - FocusDistance)) / (FocusDistance * LinearDepth);

3. Create the Blur Pass
Iterate through nearby pixels using the CoC radius:
for(int i = -Samples; i <= Samples; i++) {
float2 OffsetUV = UV + float2(i * PixelSize, 0);
FinalColor += SampleSceneColor(OffsetUV) * Weight;
}

Pro Tip: Use a Gaussian or Box filter kernel for smooth blur transitions.

Designing Custom Bokeh Shapes
The default circular blur gets boring. Try these techniques:

Hexagonal Bokeh:
float Angle = 2 * PI / 6;
for(int i = 0; i < 6; i++) {
float2 Direction = float2(cos(i*Angle), sin(i*Angle));
SampleUV = UV + CoC * Direction * PixelSize;
}

Star Bokeh:
Combine multiple rotated samples with different CoC multipliers for sparkling effects.

Performance Optimization Tips
1. Use Half-Res Pass: Render DoF at 50% resolution
2. Limit Samples: 16-32 samples often provide optimal quality/balance
3. Variable Blur Quality: Reduce samples for distant objects
4. Temporal Accumulation: Blend between frames for smoother results

Common Pitfalls to Avoid
– Gamma Correction Issues: Always work in linear space
– Depth Buffer Precision: Use reversed Z-buffer for better accuracy
– Edge Bleeding: Use clamp or mirror addressing at screen edges

By mastering these techniques, you’ll create unique visual signatures for your projects, from dreamy landscapes to stylized miniature worlds. Experiment with CoC curves and bokeh patterns to develop your own artistic DoF language.

Next Steps: Try combining your DoF with chromatic aberration or lens distortion effects for even more atmospheric results. Remember to tweak parameters based on scene scale – miniature effects work best with exaggerated blur on small objects.