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

Question

我希望你能够创建一个具有透明背景的three.js画布。我正在创建一个渲染器，如下所示：

# 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

新的结果是场景如预期地渲染（对象已正确应用Film效果），但背景不再是所需的透明，而是黑色和不透明。为什么？我如何防止后处理影响我的透明背景？

- zakdances

Answer 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通道。

- Gero3

---

哇，谢谢。因为EffectComposer在文档中找不到，所以我很难学习renderTarget之类的东西...直到现在我甚至都不知道它的存在。你是怎么学习EffectComposer及其参数的呢？ - zakdances

@dman，请看一下我的关于renderpass和使用renderPass.clear=false的评论。 - yeahdixon

Answer 2

默认情况下，RenderPass 会清除您的渲染目标，并且如果不小心，它还会清除您的 alpha。因此，清除颜色将不是从原始渲染器设置的，而是从 RenderPass 函数本身设置的，并且可能默认为完全不透明。有一些选项您应该查看：clear、clearAlpha、clearColor、clearDepth。我使用的方法是将 renderPass.clear=false。我还手动清除了渲染器，所以我的 renderer.autoClear=false。如果您开始执行大量的传递，最好精确控制何时要清除渲染器并手动调用它们。

- yeahdixon