Selective Bloom Not Working in Separate Files

This post was flagged by the community and is temporarily hidden.

It’s been a while but I think I’ve found the issue.

I tried to dial it back and create the whole scene in pure JavaScript however, when I had the post processing and scene setup in different files it wouldn’t work. Moving the two into the same file seems to fix it for pure JavaScript.

I have no idea why this is the case (almost certain it’s my class setup) and this is obviously not a viable solution if there is a lot of scene setup.

Here’s the sandbox. You may have to download it and run it locally since code sandbox is being weird

Any ideas?


Even without any classes, even creating the effect composers in another file (and returning them to the main file) means they don’t work and I cannot figure out why this is the case. There has to be something else I’m missing …

I used the same example of selective bloom to make it work with .emissiveMap

Hi @prisoner849 I tried your solution and still no luck. I can’t get it the bloom to work specifically with Vite + Typescript. Surely typescript should not make any difference here …

Also, I don’t plan on using an emissiveMap, I’d just like to make some spheres glow and others not (no models involved).

The bloom is visible, but for every object. I’m not sure how the “selective” part in your example is working

The issue seems to be with the final ShaderPass - I can darken the non-bloomed objects and then restore their materials, but then trying to render the finalComposer erases the entire bloom effect. Using renderer.render(scene, camera) instead of the finalComposer means the non-bloomed objects stay black.

Using renderer.clearDepth() fixes this but only gives the objects an outline and renders all bloomed objects behind the non-bloomed.

Again, this is extremely confusing because everything works perfectly when everything is in one file, but not when splitting it up. Ideally, I’d need the post processing in a separate file …