THREE.js 使用EffectComposer渲染双场景并统一应用Bloom后期效果的方案咨询

问题原因 #

你之前的两种实现错误根源分别是：

• 双Composer方案：EffectComposer默认执行render()时会主动清空画布颜色缓冲，即便你设置了renderer.autoClear = false，后运行的composerHUD渲染会直接覆盖前一个Composer的输出结果
• 单Composer多RenderPass方案：RenderPass默认开启了清空缓冲配置，第二个场景的RenderPass运行时会清除第一个场景的渲染内容，因此只能看到最后一个场景的效果

正确实现方案（单Composer统一叠加后应用Bloom） #

该方案会先把两个场景的内容叠加渲染到同一帧缓冲，再统一应用Bloom等后期效果，完全符合你的需求：

// 渲染器初始化
const renderer = new THREE.WebGLRenderer({
  alpha: true,
  antialias: _basic.config.antialias
});
renderer.autoClear = false;

// 后期 composer 初始化
const composer = new THREE.EffectComposer(renderer);

// 第一个背景场景的RenderPass，默认开启清空，清除上一帧的旧内容
const backgroundRenderPass = new THREE.RenderPass(scene, camera);
composer.addPass(backgroundRenderPass);

// 第二个HUD场景的RenderPass，*核心配置：关闭清空缓冲，叠加到背景场景的渲染结果上*
const hudRenderPass = new THREE.RenderPass(sceneHUD, cameraHUD);
hudRenderPass.clear = false;
composer.addPass(hudRenderPass);

// 添加Bloom泛光通道，作用于两个场景叠加后的完整内容
const bloomPass = new THREE.UnrealBloomPass(
  new THREE.Vector2(window.innerWidth, window.innerHeight),
  1.2, // 泛光强度，可自行调整
  0.4, // 泛光半径
  0.8 // 泛光阈值
);
composer.addPass(bloomPass);

// 部分版本Three.js需要添加OutputPass做颜色空间转换
const outputPass = new THREE.OutputPass();
composer.addPass(outputPass);

// 动画循环
function animate() {
  requestAnimationFrame(animate);
  // 不需要手动清理缓冲，直接调用composer渲染即可
  composer.render();
}

注意事项 #

• HUD场景sceneHUD不要设置background属性（保持默认null即可），如果设置了纯色背景会直接覆盖底层的背景场景
• 如果HUD元素始终要保持在最上层，可以给HUD场景内的所有材质设置depthTest: false，避免被背景场景的物体遮挡
• 如果需要两个场景的Bloom效果独立控制，可以分别给两个场景做渲染+Bloom处理后，再通过ShaderPass把两个纹理做透明混合，实现更灵活的效果控制

内容的提问来源于stack exchange，提问作者Martin