The effect of aperture shape on an image, known in photography as "bokeh", is an important characteristic of depth of field in real-world cameras. However, most real-time depth of field techniques produce Gaussian bokeh rather than the circular or polygonal bokeh that is almost universal in real-world cameras. "Scattering" (i.e. point-splatting) techniques provide a flexible way to model any aperture shape, but tend to have prohibitively slow performance, and require geometry-shaders or significant engine changes to implement. This paper shows that simple post-process "gathering" depth of field shaders can be easily extended to simulate certain bokeh effects. Specifically we show that it is possible to efficiently model the bokeh effects of square, hexagonal and octagonal apertures using a novel separable filtering approach. Performance data from a videogame engine test demonstrates that our shaders attain much better frame rates than a naive non-separable approach.

McIntosh, L., Riecke, B. E. and DiPaola, S. (2012), Efficiently Simulating the Bokeh of Polygonal Apertures in a Post-Process Depth of Field Shader. Computer Graphics Forum, 31: 1810-1822. doi: 10.1111/j.1467-8659.2012.02097.x

WebGL Demo:

The following is a live demo of the technique using WebGL (you'll need a modern browser like Chrome or Firefox to view it). This version of the technique produces a hexagonal bokeh effect. Please see the javascript source or read the paper for more info.

Acknowledgements:

• three.js library by Mr.doob
• Swedish Royal Castle cubemap by Emil Persson
• Models by ingoenius, bmf and danilius courtesy of blendswap.com