ThreeJS 选择性辉光如何排除对scene.background背景的影响

问题根源 #

你使用的选择性辉光实现采用双场景渲染逻辑：

• 第一次渲染（globalBloom=1）仅输出模型自发光内容，用于生成辉光层
• 第二次渲染（globalBloom=0）输出正常场景画面，最后叠加辉光层

你现在的问题是第一次渲染辉光层时，scene.background绑定的HDR环境贴图也会被渲染进辉光层，环境贴图的亮部被误判定为需要加辉光的区域，最终导致背景过亮溢出。

实现方案 #

仅需两步修改即可解决，完全兼容你现有代码逻辑：

1. 全局存储环境纹理 #

修改createEnvironment函数，将背景使用的HDR纹理存储为全局变量，方便后续切换：

// 全局新增两个变量存储环境纹理
let envBackgroundTexture;
let envMapTexture;

function createEnvironment( hdr ) {
    new RGBELoader().setDataType( THREE.UnsignedByteType ).load( hdr, function ( texture ) {        
    
        const pmremGenerator = new THREE.PMREMGenerator( renderer )
        pmremGenerator.compileEquirectangularShader()
        
        const envMap = pmremGenerator.fromEquirectangular( texture ).texture
        // 存储纹理到全局变量
        envBackgroundTexture = texture;
        envMapTexture = envMap;
        scene.background = texture;
        scene.environment = envMap
        
        texture.dispose()
        pmremGenerator.dispose()
    } );
}

2. 渲染循环中同步切换背景状态 #

修改动画渲染逻辑，渲染辉光层时临时隐藏背景，渲染正常画面时恢复背景：

renderer.setAnimationLoop( _ => {
    
  renderer.setClearColor(0x000000);
  uniforms.globalBloom.value = 1;
  // 渲染辉光层时隐藏背景，避免环境贴图被计入辉光计算
  scene.background = null;
  
  bloomComposer.render();
  
  renderer.setClearColor(0x404040);
  uniforms.globalBloom.value = 0;
  // 渲染正常画面时恢复背景
  scene.background = envBackgroundTexture;
  
  finalComposer.render();
})

注意事项 #

scene.environment仅作用于模型材质的环境反射计算，不会直接渲染到画面，无需切换，保留全局赋值即可。该方案适配你使用的ThreeJS 0.127版本，无额外依赖。

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