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 reason for this is the way BokehPass works – it uses MeshDepthMaterial to render the tDepth input for BokehShader. Its result looks like this:
While 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:
If someone knows of better solution, please leave a comment below.