EffectComposer with scene background

Hi,

I have been trying for nearly 3 days now to get my page to render the way I want it to. What I want is to render 1 set of geometries with BloomPass and the other to render without it. I also want a rotating background which is setup using CubeTextureLoader. I have rummaged through tons of three.js and stackoverflow questions and answers but I still cannot figure this out.
The closest I got was getting the background and the 2nd set of geometry to be rendered with BloomPass, not the set that I actually want rendered. I know I am close but perhaps the order that I am rendering the scenes might be incorrect. I have tried playing around with 2 scenes and 2 layers, but I still can’t manage to solve it.
I would highly appreciate it if someone could pinpoint what I’m missing out or doing wrong. I am linking the simplified version of the codepen here. It consists of the geometry I want BloomPass on, and a background colour which should render normally without any effects. Thank you.

Hi!

Seems, Selective Bloom is your choice: three.js examples

Upd
Works as expected

1 Like

it seems to me bloompass is generally misunderstood. even the official examples. all you need to do is set up a single bloom pass, no extra shaders no copy pass no layers no traversal no double rendering.

  1. set up bloom with a threshold of 1 (nothing gets bloomed)
  2. push material colors into hd range, so what previously used to be color.set(1, 0, 0) for red now could be .set(10, 0, 0) or higher/lower for more or less intense glow.
  3. disable tonemapping

and that is it, every material whose color goes into hd range now glows, every other material won’t!

this works even for bright scenes which i guess is what you’re after, it does not affect it as long as it’s in 0-1 range bloom hdr workflow, high key - CodeSandbox

1 Like

Hi, thanks for the quick response!

I did check out selective bloompass, to be honest I was confused by the vertex and fragment shaders. I thought it would have been much simpler than that. Also, why is the finalpass with the final shader required in this case? The picture that you’ve attached, has it been done the same way? Thank you once again!

Hi,

Interesting, I’ll definitely give this a try. By the way, I tried disabling and enabling tonemapping in the sandbox that you’ve attached, the glowing effect still remains, why is that?

However, if I have a background texture using CubeTexture, I can’t really set the colour ‘intensity’ to be 0 or 1, isn’t the bloompass still going to enhance the glowing effect of the scene background? Or is that the reason why the threshold is set to 1? Thank you!

Not quite the same way, but the same principle.
I don’t traverse the scene to set black material to non-bloomed parts, instead, I use a global uniform and some modifications in materials’ shaders, making them pure black, when the uniform’s value is 1, and show their real colour, when the uniform’s value is 0.

It adds/sums two results: bloomed (all non-bloomed parts are black, including background), and usual (when all parts have their real colours).

1 Like

I see, I need to read up on the different shaders and uniforms as you’ve mentioned. I’ll try updating my code according to the example and see what I can come up with. Thank you for the insights.

the envmap works the same way, colors are 0-1 so it wont bloom, but you can actually stretch colors so that regions will become light sources. it’s a super interesting thing actually: Live envmaps and getting realistic studio lighting almost for free

as for enabling tonemapping, i believe it would take a needsupdate or a refresh to take effect. but from what ive learned, tonemapping clamps, so it cant be used. i like to use tonemapping overall, it looks good, but i switch it off for glowing materials.

I tried the solution but I’ve no experience in React so I couldn’t grasp what was happening. Plus I haven’t read up on the HDR workflow yet.

I checked out your comment on another post “How to use bloom effect not for all object in scene?” and the solution that you provided. I adapted that to my code and it worked on codepen, I just need to implement that on my actual project which is different. Could you please briefly explain what uniforms are and what the scripts that you’ve added in html do? Even better if you could also provide some material on that. Thank you!