THREE.WebGLRenderTarget带alpha通道颜色过暗问题

这个问题的核心是渲染到RenderTarget时的背景设置和alpha通道配置错误，导致透明像素和黑色背景混合后，再叠加到主场景时颜色被暗化。我们来一步步拆解原因和解决办法：

为什么会偏暗？ #

HTML的opacity:0.5是直接让品红色和页面白色背景做混合，公式是：
最终颜色 = 品红 * 0.5 + 白色 * 0.5

而你原来的WebGL流程中：

1. RenderTarget默认使用黑色不透明背景（alpha=1）
2. 着色器里的半透明品红会和黑色背景混合，得到品红*0.5 + 黑色*0.5的颜色
3. 这个纹理再和主场景的白色背景混合，最终颜色变成(品红*0.5 + 黑色*0.5)*0.5 + 白色*0.5，自然比预期暗很多

修复步骤 #

1. 开启RenderTarget的Alpha通道 #

创建WebGLRenderTarget时，必须显式开启alpha: true，让目标缓冲区能够存储alpha信息：

const target = new THREE.WebGLRenderTarget(width, height, {
  minFilter: THREE.LinearFilter,
  magFilter: THREE.LinearFilter,
  format: THREE.RGBAFormat,
  type: THREE.FloatType,
  alpha: true // 关键：开启alpha通道支持
});

2. 设置透明的清除背景 #

渲染到RenderTarget前，把清除颜色设为完全透明的黑色，这样discard的区域不会留下黑色底色：

// 在renderer.render前添加
renderer.setClearColor(0x000000, 0); // 颜色黑色，alpha=0
renderer.render(scene, camera, target, true);

// 可选：渲染完后恢复主场景的清除颜色（比如白色），避免影响后续渲染
renderer.setClearColor(0xffffff, 1);

3. 完整修改后的makeTexture函数 #

const makeTexture = (renderer, width, height) => { 
  const target = new THREE.WebGLRenderTarget(width, height, {
    minFilter: THREE.LinearFilter, 
    magFilter: THREE.LinearFilter, 
    format: THREE.RGBAFormat, 
    type: THREE.FloatType,
    alpha: true // 新增alpha支持
  }); 
  const scene = new THREE.Scene(); 
  const camera = new THREE.PerspectiveCamera(90, 1, 0.1, 100000); 
  const geometry = new THREE.PlaneGeometry(2, 2); 
  const material = new THREE.ShaderMaterial({ 
    transparent : true, 
    vertexShader : simpleVert, 
    fragmentShader : texFrag, 
  }); 
  const mesh = new THREE.Mesh(geometry, material); 
  camera.position.set(0, 0, 1); 
  scene.add(camera); 
  scene.add(mesh); 

  // 设置透明清除色
  renderer.setClearColor(0x000000, 0);
  renderer.render(scene, camera, target, true); 

  // 恢复主场景清除色
  renderer.setClearColor(0xffffff, 1);
  return target.texture; 
}

这样修改后，RenderTarget里的半透明品红就会直接和主场景的白色背景混合，效果和HTML的opacity:0.5完全一致了。

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