How to get Selective Bloom to work without layers?

[tabetVercetti]

Hello I am teaching myself three js (currently using r150) so that I can prepare a 3d portfolio website for my car designs. When I export a car model from blender, I will name certain parts as lightsFront_glow or lightsRear_glow for example and then apply selective blooming to these parts so that I can mimic the glow of front and rear lights.

I have noticed that selective blooming is something that people are struggling with (me included). However, I understand that selective blooming can be done without the use of layers thanks to @drcmda ‘s helpful comments hereand here.

To test this method, I apply it on a test cube which I try to glow in Red. Heres a snippet of the code based on @drcmda 's tips:

        const target = new THREE.WebGLRenderTarget(window.innerWidth,window.innerHeight, {
            type: THREE.HalfFloatType,
            format: THREE.RGBAFormat,
            encoding: THREE.sRGBEncoding,
          })
        target.samples = 8

        const renderScene = new RenderPass( scene, camera );
        const bloomPass = new UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1, 1, 1 ); // strength, radius ,threshold

        composer = new EffectComposer( renderer );
        composer.addPass( renderScene );
        composer.addPass( bloomPass );

    //test cube
    const geometry = new THREE.BoxGeometry( 1, 1, 1 ); 
    const cube = new THREE.Mesh( geometry, 
        new THREE.MeshStandardMaterial({
          toneMapped: false,
          emissive: "red",
          emissiveIntensity: 10
        }) 
       
        ); 
    cube.position.y = 1;
    cube.position.x = 3;
    cube.castShadow = true;
    scene.add( cube );

The result doesnt look good though. I’ve included screenshots of how it looks while also changing the tonemapping and HDR options. Any ideas what could be the issue? let me know if i should upload more information which could help the troubleshooting process. I appreciate anyones help

note: the scene goes dark is i turn off HDR maps since theres no other light source in the scene.

[tabetVercetti]

extra note: when i lower the bloom threshold to 0.1, heres what it looks like:

Basically the red glow in the last picture is what Id like to achieve, but ofcourse while having the rest of the scene render normally (without any glow)

[donmccurdy]

I would suggest using a bloom threshold greater than 1. Maybe 2, for example. And make sure that your render target uses HalfFloatType or FloatType (yours already does) with THREE.LinearEncoding (or colorSpace: LinearSRGBColorSpace in newer three.js versions). Then set the emissive to be greater than the threshold. This will also make it easier to upgrade to newer three.js versions.

I believe this is often easier and more efficient than trying to do selective bloom. Rather than worry about which #FFFFFF values are emissive white and which are just normal white surfaces, raise the emissive so it’s unambiguous. This has the added bonus of giving nice subtle bloom for strong reflections on metallic surfaces, if you choose a compatible thresholds and lighting intensities.

Then tone-mapping and gamma correction should happen at the end of the effect stack, after bloom, so your emissive isn’t clamped beforehand. How to do this depends on what version of three.js you’re using, and whether you have three/addons/postprocessing or the postprocessing npm package.

[tabetVercetti]

Thank you @donmccurdy for your swift reply !
Based on your answer, i tried the following:

• Changing the threshold from 1 to 2 (while keeping the emissiveIntensity of test cube’s material at 10)
• Trying encoding type THREE.LinearEncoding instead of THREE.sRGBEncoding for the Render Target properties

Unfortunately, the result hasn’t changed. It still looks exactly like the pictures I uploaded in the first post.

As for your comment about the effects of tone-mapping on the emissive property, one of the pictures I uploaded has tone-mapping turned off, however we still see no bloom effect happening. Isnt it then safe to say the issue is not related to tone-mapping ?

Also I am using three.js’s postprocessing, and not the npm package

[donmccurdy]

Is it possible to share the full code somewhere, or a demo? This depends on how the renderer is configured as well. Just for the sake of simplifying the test, I would keep tone-mapping disabled until everything else is working.

[tabetVercetti]

I am realizing that it is generally quite helpful to have my code ready on Github and ready to share. I’ll work on that in the coming days, cz i need to do a looot of cleaning up I am aware that my code is very cluttered and probably “spaghetti code” since i started learning three js the same day i started this code. But as soon as its share-able, i’ll let you know

As for the tone-mapping, i tried omitting the line which sets the tone-mapping setting and still no change.

[tabetVercetti]

okay so i didnt manage to do any cleaning up for the folder or the code, but i managed to set up a github repository. Here it is: GitHub - tabetVercetti/theRidesWeMake

Theres a lot of stuff in there to ignore, but the main files are " mainShadowsSkyGUIBloom.js" and " indexGUI.html"

[donmccurdy]

More code here than I’m going to dig through, sorry – my suggestion if you’re having trouble getting bloom to work correctly would be to create a very simple example with just a 1-2 objects and < 300 lines of code. Then once that’s working, bring it back into your project.

It does look like the WebGLRenderTarget you’re creating is not being used anywhere though – it needs to be used by the EffectComposer. So I would just double check that guidelines in my earlier post are all set up.

[tabetVercetti]

Yeah i understand I really appreciate your feedback though! After you pointed out the issue with the WebGLRenderTarget, i had another look and noticed that I was missing something:
I created the composer as such:

        composer = new EffectComposer( renderer );

when i shouldve also included the rendertarget as such:

        composer = new EffectComposer( renderer , target);

this solved the issue