Home

Awesome

Bokeh Depth Of Field

Implementing Different Algorithms to mimic Bokeh Depth Of Field: A Physical Camera Effect created due to Focal Length, Aperture size, shape

This Project is using The Forge Rendering API, a cross-platform rendering, and targeted for these devices: PC, Android, macOS, IOS, IPad OS devices.

❗️❗️ This Project is Further Developed on The Forge Rendering API as a UnitTest and no longer maintained in this repository page. But you can still learn something from reading the shaders ❗️❗️

Motivation

To mimic the physical camera in real-time in an efficient way to reduce postfx overheads.

Sample Real Camera Effects

<p align="center"> <img src="https://github.com/Erfan-Ahmadi/BokehDepthOfField/raw/master/screenshots/real/newyork_maybe.jpg" alt="" width="300"/> <img src="https://github.com/Erfan-Ahmadi/BokehDepthOfField/raw/master/screenshots/real/beauty.jpg" alt="" width="300"/> </p>

Here is the 3 different methods implemented explained briefly:

I will soon write a blog post with a lot more detail and pros-and-cons on it.

Techniques Brief Description:

1. Circular Seperable Depth of Field

Circular Sperable DOF by Kleber Garcia at Frostbite EA which was shipped with FIFA17 , NHS, Mass Effect Andromeda, Anthem and is going to be shipped with the new Need For Speed Heat.

This technique is a seperable convolution filter like the Gaussian Filter and this makes it super faster than the "1-Pass 2D Kernel".

Derivation of the Kernel Weights and the Math includes Complex Numbers and Fourier Transforms explained in Olli Niemitalo's blog post.

In his paper some important notes were missing like how we do the "blending" so I had to get creative and do a lot of thinking myself.

This method is operating on Near, Far Field Seperatly on multiple passes

<p align="center"> <img src="https://github.com/Erfan-Ahmadi/BokehDepthOfField/raw/master/screenshots/simulation/circular-dof/1.jpg" alt="" width="400"/> <img src="https://github.com/Erfan-Ahmadi/BokehDepthOfField/raw/master/screenshots/simulation/circular-dof/2.jpg" alt="" width="400"/> </p>

2. Practical Gather-based Bokeh Depth of Field

Practical Gather-Based Depth of Field which is fully described in GPU-Zen Book.

This approach is also Gather-Based but the sampling and computation is not seperable and is circular sampling with 48 samples.

<p align="center"> <img src="https://github.com/Erfan-Ahmadi/BokehDepthOfField/raw/master/screenshots/simulation/gather-based/1.jpg" alt="" width="400"/> <img src="https://github.com/Erfan-Ahmadi/BokehDepthOfField/raw/master/screenshots/simulation/gather-based/3.jpg" alt="" width="400"/> </p>

3. Single Pass Depth of Field

Depth of Field in a Single Pass which is described in Dennis Gustafsson awsome blog post.

This Depth of Field effect is done in a Single Pass.

Due to this technique being in full-res and needing a lot more sample and calculations It performance is now worse than the other two.

There are a lot of optimizations for this technique but since I forced it to be in a single pass my hands were tight (by myself).

<p align="center"> <img src="https://github.com/Erfan-Ahmadi/BokehDepthOfField/raw/master/screenshots/simulation/single-pass/2.jpg" alt="" width="400"/> <img src="https://github.com/Erfan-Ahmadi/BokehDepthOfField/raw/master/screenshots/simulation/single-pass/4.jpg" alt="" width="400"/> </p>

Implemented Techniques

Build

Issues

Report any bug on your devices with most detail here

Resources

All Bokeh Links and Book Chapters gathered for R&D are in this github gist; for detailed resources and links see below:

Built and Tested Devices (See UnitTest 29_DepthOfField in TheForge)