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

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.