CubeTexturePass and UnrealBloom in the same scene

Questions
, , ,
1

I asked ChatGPT this and was not able to get it to work. I basically need to add the CubeTexturePass to the EffectComposer in order to create a 3D background image. However, if I add the CubeTexturePass (before or after the UnrealBloomPass), the UnrealBloom effect on my Object3D cube goes away. Is there some properties I should set to make this work? I don’t want the bloom effect to be applied on the background image.

  // Set up Three.js scene
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  $('.container').append(renderer.domElement);

  // Create a cube and add it to the scene
  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 }); // Green color
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  // Set up lighting
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
  scene.add(ambientLight);
  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
  directionalLight.position.set(0, 1, 0);
  scene.add(directionalLight);

  // Set up UnrealBloomPass
  const bloomPass = new UnrealBloomPass();

  bloomPass['strength'] = 4;

  // Create an EffectComposer
  const composer = new EffectComposer(renderer);

  // Create a RenderPass to render the scene
  const renderPass = new RenderPass(scene, camera);
  composer.addPass(renderPass);

  // Add the bloom pass to the composer
  composer.addPass(bloomPass);

  // Adjust camera position and look at the cube
  camera.position.z = 5;
  camera.lookAt(cube.position);

  // Animation loop
  function animate() {
      requestAnimationFrame(animate);

      // Rotate the cube
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;

      // Render the scene through the composer
      composer.render();
  }

  animate();
2

Bloom is a screen-space effect, unless you’d use some masking, it’ll be applied to anything within the scene - including the background.

You could try rendering a bloomed scene into a separate render target, and then render it over the background - but iirc bloom postprocessing does not support transparent scenes atm.