如何阻止 EffectComposer 破坏我的透明背景？

Posted 2023-02-22

【中文标题】如何阻止 EffectComposer 破坏我的透明背景？

【英文标题】：How do I stop EffectComposer from destroying my transparent background?

【发布时间】：2014-01-20 20:49:30

【问题描述】：

我想要一个带透明背景的threejs 画布。我正在创建这样的渲染器：

# coffeescript
r = new THREE.WebGLRenderer alpha: true

当我调用r.render() 时，它按预期工作，对象显示在透明背景上。但是，当我尝试像这样使用 EffectComposer 添加后处理时：

cmp = new THREE.EffectComposer r
cmp.addPass new THREE.RenderPass scene, camera

effect = new THREE.FilmPass 0.9, 2, 2048, true
effect.renderToScreen = true
cmp.addPass effect

cmp.render 3

新结果是场景按预期渲染（对象正确应用了电影效果），除了背景不再按需要透明...而是黑色和不透明。为什么？如何防止后期处理篡改我的透明背景？

【参考方案1】：

var width = window.innerWidth || 1;
var height = window.innerHeight || 1;
var parameters =  minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat, stencilBuffer: false ;

var renderTarget = new THREE.WebGLRenderTarget( width, height, parameters );

cmp = new THREE.EffectComposer(r, renderTarget);

如果你不指定渲染目标，那么它会创建一个带有 THREE.RGBFormat 的渲染目标，这会让你失去 alpha。

【讨论】：

哇，谢谢。因为 EffectComposer 是 nowhere to be found in the docs，所以我很难学习像 renderTarget 这样的东西……直到现在我才知道它的存在。您是如何了解 EffectComposer 及其参数的？

@dman 查看我关于 renderpass 和使用 renderPass.clear=false 的评论

【参考方案2】：

RenderPass 默认清除你的渲染目标！！！！！！如果您不小心，也会清除您的 alpha。因此，将设置清晰的颜色，而不是来自您的原始渲染器，而是来自 RenderPass 函数本身，并且可能默认为完全不透明度。您应该查看一些选项：clear、clearAlpha、clearColor、clearDepth。对我有用的是设置 renderPass.clear=false 。我还手动清除了渲染器，所以我的renderer.autoClear=false 如果您开始执行大量通道，它有助于精确控制您希望渲染器何时清除并手动调用它们。