ThreeJS使用THREE.WebGLMultisampleRenderTarget做后期处理报GL_INVALID_OPERATION错误

错误原因 #

你遇到的报错是因为 THREE.WebGLMultisampleRenderTarget 生成的多重采样帧缓冲无法直接被后期处理的着色器采样使用。WebGL标准要求多重采样的帧缓冲必须先执行解析（resolve）操作，把多采样的像素数据合并为普通的单采样纹理后，才能被着色器读取采样，直接对多重采样帧缓冲做采样操作就会抛出 GL_INVALID_OPERATION 错误。

解决方案 #

r130及以上版本的Three.js已经内置了EffectComposer的多重采样支持，不需要手动实例化WebGLMultisampleRenderTarget传入，直接在EffectComposer的配置项中指定采样数即可，框架会自动处理多采样的创建、解析逻辑，兼容WebGL2和降级场景。

修复后的代码如下：

// 无需手动判断并创建多采样RenderTarget，直接初始化EffectComposer
const composer = new EffectComposer(renderer, {
  width: 800,
  height: 600,
  minFilter: THREE.LinearFilter,
  magFilter: THREE.LinearFilter,
  format: THREE.RGBAFormat,
  encoding: THREE.sRGBEncoding,
  samples: 4 // 这里指定多重采样数，WebGL1环境会自动降级
})

如果使用的是r130之前的旧版本Three.js，需要手动执行解析操作：

• 先将场景正常渲染到你创建的WebGLMultisampleRenderTarget
• 调用renderer.resolveRenderTarget(yourMultisampleRT, yourOrdinaryRT)方法，将多采样缓冲解析到普通的WebGLRenderTarget
• 将解析完成的普通RenderTarget传入EffectComposer进行后续的后期处理运算

注意事项 #

• 多重采样数建议设置为2或4即可，过高的采样数会带来明显的GPU性能损耗
• 不要给WebGLMultisampleRenderTarget设置generateMipmaps: true属性，多重采样缓冲不支持生成Mipmap，也会触发相同的WebGL报错

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