Three.js’ depth-of-field effect and transparent objects

Last month I had to create spine runtime for three.js for one of the projects. Basically, animating a number of planes with transparent texture(s), nothing fancy. But, new year brings new challenge – the client wants these animations to work with dof effect. However, adding dof effect in the project “as is” did this:
The cat warps space around itselfThe reason for this is the way BokehPass works – it uses MeshDepthMaterial to render the tDepth input for BokehShader. Its result looks like this:

original tDepthWhile you can replace MeshDepthMaterial with custom TexturedDepthMaterial there, it does not help much if you have 2+ textures – scene.overrideMaterial is unaware of any textures that original materials use. So, to work around that, I had to change BokehPass itself and traverse the scene to override mesh materials one by one. This is not really efficient or generic solution, but it results in this:

better tDepthIf someone knows of better solution, please leave a comment below.

5 Responses to “Three.js’ depth-of-field effect and transparent objects”


  1. 1 Erik November 20, 2015 at 14:16

    I had the exact same problem myself and was just about to start writing my own shader to modify the bokeh pass myself when I stumbled onto this. Thanks for the effort, will give it a try!

    PS, I noticed you create new textures each time you traverse the scene (ie every frame). I think it would be much more efficient to do it when you create the objects (ie myObject.overrideBokehMaterial = myMaterial; or similar) and then switch between those in the bokeh renderer. Then you wouldn’t have to pass all the textures in the scene to the gpu every frame.

  2. 3 Erik November 20, 2015 at 14:44

    Oh sorry, you’re absolutely right. Read a bit too fast and missed the “child.depthMaterial ||” part. Didn’t try it myself yet, but will give it a go soon. Good work!


  1. 1 Improving BokehShader in three.js’ depth-of-field effect | Coding on acid. Trackback on January 15, 2015 at 20:49

Ask a Question

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




Old stuff

January 2015
M T W T F S S
« Nov   Mar »
 1234
567891011
12131415161718
19202122232425
262728293031  

Oh, btw…


%d bloggers like this: