Instancing + DoF Artifacts

Hey there :wave:
I’ve been trying to use the THREE.BokehPass alongside with instanced geometry, however I’ve been running into some strange artifacts.
Take a look at this stack of oranges :tangerine::tangerine:

There are 2 things that concern me:

  • The ground floor plane messes up the result of oranges, despite being behind them. There is an option to make it invisible just to showcase the difference
  • [Regarding instancing] When you move the camera around, you’ll notice that in the middle of the stack, there is a “glitched” orange. I think that is actually where the original one would be placed if it wasn’t instanced.
    Edit: forgot to add, that the shape of the “glitched” object is always the same as the instanced mesh.

The bokeh was the last step for my project, so this setback is rather irritating. Does anyone have explenation for this? I would appreciate any help :gift_heart:

1 Like

Not sure. But I would suggest looking inside the implementation of Bokeh, it’s possible that it is drawing the geometry from the scene internally using a special material.

2 Likes

@Usnul thanks for the reply. It turns out you are correct and BokehPass is using this depth material to draw the objects
image

I tried applying this material as scene.overrideMaterial with renderer.render() (override material doesn’t work with EffectComposer and RenderPass ? ) and here are the results:


I guess that material doesn’t support instancing, renders only the original orange, but then blurs the instances as well, because they were passed through the tDiffuse. Since it doesn’t “see” them, the floor’s depth blends “through” them, which might explain my first point of confusion.
image

Gonna try to patch the depth material in the BotehPass next and see what I get

1 Like

YAY! :fist:
Depth material after patching:

I’ve modified the BokehPass to use an optional custom depth material as an additional fourth argument, if needed.
Code: https://codepen.io/Ordomo/pen/xxKYbOV?editors=0010

Personally I like better the default material.depthPacking (THREE.BasicDepthPacking), rather than the THREE.RGBADepthPacking, which seems to produce “wavy” results :confounded:

Here is the end effect, I guess:

My main app is coming soon :smiley:
Big thanks to Alex @Usnul for the suggestion :star_struck: :gift_heart:
and cheers to Paul @prisoner849 for the likes :smile::beers:

3 Likes

Yay! You’re welcome :smiley::beers:

3 Likes