Bloom and bokeh shader v2

Hi! I trying to use bokeh shader with bloom effect, but its doesnt work together. What can i do? My codepen

One issue is that the unreal bloom applies the effect to the background and everything starts to blur together. This is because the BloomPass doesn’t take the alpha channel (transparent) into consideration and applies the effect just like any other object.

It’s been an open issue for over a year, so I have been looking for workarounds. For your codepen, if you simply comment out line 59 where the skybox is added, it will solve this issue, as long as you’re OK with a black background. Looking at the BokehPass, it seems that it has no effect. This looks like BokehPass 2, which doesn’t have the bug of the first BokehPass, but the implementation is a lot more complicated, at least in the example.

It looks like the bloom is working, but the bokeh is not. My best guess is that you might have missed something in getting the BokehPass working with the renderer or composer. If I remember correctly, Bokeh 2 example does not use the effects composer, but uses the renderer more directly. This makes it difficult to plug into a composer-based workflow, which I think is the problem you’re having (as do I).

If there is a more specific compatibility issue between Bokeh shader and UnrealBloomPass, I would want to know because those are the two that I have been trying to figure out as well.

1 Like

Hi! First of all, thank you for your reply. I commented out line 59 what you said, and added
renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setClearColor(0xFF0000, 0);

to renderer. Yes, anfortunately this have no effect. I dont now how to acheive my goal. In shader code i dont work. You said you had the same problem. Have you manage to solve it?

I have managed to achieve unreal bloom + bokeh, but it was bokeh1. Are you sure you need bokeh2 ?

Yes, because i want to change depth calculation by click on objects

Here’s the bokeh 1 bug I mentioned.