Hello Bokeh, My Old Friend
I’ve come to talk with you again…
It’s been a while. The last time we spoke to each other was back at SIGGRAPH 2011 in the Advances in Real-Time Rendering course with John White.
Separable Hexagonal Bokeh Depth-of-Field in Need For Speed: The Run
You’ve Been Around
Back then, we didn’t give out the code on how to achieve this effect. It turns out many developers out there were still able to realize it, solely based on John’s slides and notes!
Watch Dogs – Ubisoft
Ghost Recon Wildlands – Ubisoft
Tom Clancy’s The Division – Ubisoft
Mortal Kombat X – Netherrealm (WB Games)
Sniper Elite 2 – Rebellion
NBA 2K 2014
NBA 2K 2017
Gears of War: Ultimate Edition
Evan Wallace’s – WebGL Lens Filter
We Meet Again?
While the technique presented six years ago has been showcased in a myriad of games and can be easily implemented in a straightforward way, it turns out some of the implementations out there have unfortunate visual artifacts. 😦
Luckily these artifacts can be easily solved! 😀
Back then, for the sake of time John left out information regarding circle-of-confusion management, as well as other details. If not handled correctly, this omission could lead to some unwanted artifacts, like in the images above. Again it’s been six years since the presentation, so I feel it’s time we set everything straight and clear these artifacts out.
The goal behind this post is to provide an “artifact-free” implementation, or rather a code companion complementary to the SIGGRAPH 2011 presentation. The code is hosted on Github.
I’m super busy, I want to blog more and I want to make this manageable, so this post is split in multiple parts. Once the whole series is done, I might collapse all the parts into something more concise.
In the meantime, thanks for stopping by! 🙂
Index
- Part 1 – Basic 3-pass Version
- Part 2 – Improved 2-pass Version
- Part 3 – Additional Features: Rotation
- Part 4 – Managing Visual Artifacts: Rhombi Overlaps
- Part 5 – Managing Visual Artifacts: CoC
- Part 6 – Additional Features: Improved Sampling and Other Tricks
- Part 7 – Putting It All Together: Demo
- Part 8 – Forward-Looking…
Acknowledgements
Thanks to John White for coming up with the original idea of “scatter-gather” separable hexagonal bokeh depth of field by rhomboid decomposition. I really miss the days when we used to work together, back when I was on Battlefield 3 and he was on NFS: The Run. Crazy-but-good times with lots of good exchanges. We shared a lot, and I sure learned a lot. Thanks John! 🙂
References
WHITE, John, and BARRÉ-BRISEBOIS, Colin. More Performance! Five Rendering Ideas From Battlefield 3 and Need For Speed: The Run, Advances in Real-Time Rendering in Games, SIGGRAPH 2011. Available Online.
ZigguratVertigo's Hideout 
Ghost Recon had solved issues, just some screenshots used for loading screens weren’t updated. But either way, separable technique is tricky because depth comparisons fails through multiple passes. Single-pass with hole filling is also questionable and hard to make look good. Will wait for further parts of the series.
Part 4 has helped resolve one of the issues I had with the implementation. Still waiting for the future posts. Thank you!