7

我想要一个带有透明背景的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

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

4

2 回答 2

6 
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。

于 2014-01-03T15:42:00.877 回答
1

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

于 2018-09-25T01:53:19.063 回答