How to render a scene with 2 different UnrealBloom effects applied on2 different Object3D?

Questions
, ,
1

I have asked ChatGPT this many times and none of the solutions works. This one here seems to apply the last UnrealBloom for all Object3Ds in the scene. We have 2 UnrealBlooms here, each with its own strength:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Two Object3Ds with Unreal Bloom Example</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/js/postprocessing/EffectComposer.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/js/postprocessing/RenderPass.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/js/postprocessing/ShaderPass.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/js/shaders/UnrealBloomPass.js"></script>

    <script>
        // Create the scene
        const scene = new THREE.Scene();

        // Create a camera
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 5;

        // Create a renderer
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // Create cube1
        const geometry1 = new THREE.BoxGeometry();
        const material1 = new THREE.MeshBasicMaterial({ color: 0xff0000 });
        const cube1 = new THREE.Mesh(geometry1, material1);
        cube1.position.x = -2;
        scene.add(cube1);

        // Create cube2
        const geometry2 = new THREE.BoxGeometry();
        const material2 = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        const cube2 = new THREE.Mesh(geometry2, material2);
        cube2.position.x = 2;
        scene.add(cube2);

        // Create Unreal Bloom passes
        const bloomPass1 = new THREE.UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);
        const bloomPass2 = new THREE.UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);

    bloomPass1['threshold'] = 0;
    bloomPass1['strength'] = 10;

        bloomPass2['threshold'] = 0;
        bloomPass2['strength'] = 1;

        // Add cube1 to bloomPass1
        bloomPass1.selectedObjects = [cube1];

        // Add cube2 to bloomPass2
        bloomPass2.selectedObjects = [cube2];

        // Create render pass
        const renderPass = new THREE.RenderPass(scene, camera);

        // Create effect composer for cube1
        const composer1 = new THREE.EffectComposer(renderer);
        composer1.addPass(renderPass);
        composer1.addPass(bloomPass1);

        // Create effect composer for cube2
        const composer2 = new THREE.EffectComposer(renderer);
        composer2.addPass(renderPass);
        composer2.addPass(bloomPass2);

        // Animate
        const animate = function () {
            requestAnimationFrame(animate);

            // Rotate cubes
            cube1.rotation.x += 0.01;
            cube1.rotation.y += 0.01;

            cube2.rotation.x += 0.01;
            cube2.rotation.y += 0.01;

            // Render each composer
            composer1.render();
            composer2.render();
        };

        animate();
    </script>
</body>
</html>
2

Bloom is a screen-space effect — trying to apply it per-object is going to be a lot of trouble, particularly with a threshold of 0. Instead of two passes with different strengths, consider making these materials (much) brighter …

material1.color.setRGB( 1000, 0, 0 );
material2.color.setRGB( 0, 500, 0 );

… then use a single bloom pass and set the threshold to something larger than one. The goal here is to choose color intensities and a threshold high enough that non-emissive objects (even if they are white) do not exceed the threshold under normal lighting.

1 Like
3

ok, I see. I shall forget my quest to use UnrealBloom to apply that for specific Object3D as it was meant to be used to affect en entire scene/space. Cheers! :alien:

4

Here’s a more complete explanation on why and how that works: