Selective Bloom Effect with Three.js Layers

To achieve selective bloom on specific objects while keeping the rest of your scene without bloom, you need to modify your approach. The issue in your current code is that the EffectComposer is overwriting your previous render when you call composerBloom.render().

Here's a better approach to implement selective bloom using layers:

Solution

You need to use two separate render targets and then combine them:

1. Render your bloom objects to a separate render target
2. Apply bloom effect to that render target
3. Combine the bloomed render with your main scene

Here's how to modify your code:

JAVASCRIPTCopied
export function buildScene() {
  initScene();
  initRenderer();
  initCamera();
  initCSSRenderer();
  initSkybox();
  initLights();
  initControls();
  loadModels();
  addEventListeners();

  // Create render targets
  const renderScene = new RenderPass(scene, camera);
  
  // Main composer for final output
  const finalComposer = new EffectComposer(renderer);
  finalComposer.addPass(renderScene);
  
  // Bloom composer for layer 1 objects only
  const bloomComposer = new EffectComposer(renderer);
  bloomComposer.renderToScreen = false;
  
  // Setup bloom render pass
  const bloomPass = new UnrealBloomPass(
    new THREE.Vector2(window.innerWidth, window.innerHeight),
    1.5,   // Intensity
    0.5,   // Radius
    0.1    // Threshold
  );
  
  // Create a special render pass that only renders layer 1
  const bloomLayer = new THREE.Layers();
  bloomLayer.set(1);
  
  const bloomRenderPass = new RenderPass(scene, camera);
  bloomRenderPass.clear = true;
  
  // Only render layer 1 in this pass
  bloomRenderPass.clearDepth = true;
  bloomRenderPass.selectedObjects = scene.children.filter(obj => {
    // Check if object is in layer 1
    return obj.layers.test(bloomLayer);
  });
  
  bloomComposer.addPass(bloomRenderPass);
  bloomComposer.addPass(bloomPass);
  
  // Add a shader pass to combine both renders
  const combinePass = new ShaderPass(
    new THREE.ShaderMaterial({
      uniforms: {
        baseTexture: { value: null },
        bloomTexture: { value: bloomComposer.renderTarget2.texture }
      },
      vertexShader: `
        varying vec2 vUv;
        void main() {
          vUv = uv;
          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }
      `,
      fragmentShader: `
        uniform sampler2D baseTexture;
        uniform sampler2D bloomTexture;
        varying vec2 vUv;
        void main() {
          vec4 base = texture2D(baseTexture, vUv);
          vec4 bloom = texture2D(bloomTexture, vUv);
          gl_FragColor = base + bloom; // Simple additive blending
        }
      `,
      defines: {}
    }), "baseTexture"
  );
  combinePass.needsSwap = true;
  
  finalComposer.addPass(combinePass);
  
  // Store composers for use in animate
  this.bloomComposer = bloomComposer;
  this.finalComposer = finalComposer;
}

function animate() {
  requestAnimationFrame(animate);
  if (controls) controls.update(0.01);

  // Render bloom composer first
  renderer.autoClear = true;
  bloomComposer.render();
  
  // Then render the final composer
  renderer.autoClear = true;
  finalComposer.render();

  if (cssRenderer && scene && camera) 
    cssRenderer.render(scene, camera);
}

Key Points

1. Two Composers: We use two separate EffectComposer instances - one for the bloom effect and one for the final output.

2. Selective Rendering: The bloom composer only renders objects on layer 1.

3. Combining Results: We use a custom shader pass to combine the regular scene with the bloomed objects.

4. Render Order: It's important to render the bloom composer first, then the final composer.

Make sure you've properly set up your objects' layers:

JAVASCRIPTCopied
// For objects that should have bloom:
object.layers.set(1);

// For regular objects (default):
object.layers.set(0);

This approach gives you the selective bloom effect you're looking for, with objects on layer 0 rendered normally and objects on layer 1 rendered with the bloom effect.