Question

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

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

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);

如果你没有指定一个rendertarget，那么它将使用THREE.RGBFormat创建一个，这将使你失去alpha。

Answer 2

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

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

2 个答案: