I came across this post and had been porting existing depth of field shader code to cinder and found out the whole process of setting up to be really error prone, so I wrote a wrapper for easily adopting depth of field effect in an existing project. In the wrapper I also added a bunch of parameters for tweaking the shader’s uniforms, as well as support for cinder’s high density display option on Retina displays.

With depth data taken from depth buffers, the algorithm has no information about object boundaries and thus couldn’t separate neighbor pixels that has distinct depths. Thus, there are noticible distortion around the foreground. This effect is less obvious in a darker environment.

I fixed this color leaking problem the other day by adding in a logic that compares a pixel’s depth with other pixels in its kernel. Once I was able to mark the leaking pixels, I can discard the influences of pixels with distinct depth and reduce the leaking effect.

Identifying affected pixels Fixed leaking problem

These pictures shows the difference between this algorithm and a more basic one. This algorithm brings up highlights in blurred areas and adds fringe and dithering to the blur, but is about twice as expensive as the basic one.

Basic algorithm Advanced algorithm

This is another demo scene using techniques such as skybox, cube map reflection, multitexture, obj and mtl files for demonstration purpose.

Scene Box map reflection Depth of Field Depth of Field Depth of Field

The code for the demo projects are available on Github: Spaceship Monkey.


If this filter doesn’t work on your project, that’s probably because it has to do with the depth buffer’s value ranges. The depth buffer is nonlinear and the nonlinearity is greatly influenced by the camera’s near clipping distance.