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

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">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Two Object3Ds with Unreal Bloom Example</title>
        body { margin: 0; }
        canvas { display: block; }
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <script src=""></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);

        // 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;

        // 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;

        // 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);

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

        // Animate
        const animate = function () {

            // 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


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

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:

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