three.js - 如何阻止 EffectComposer 破坏我的透明背景？

Question

我想要一个带有透明背景的 Threejs Canvas 。我正在创建一个这样的渲染器:

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

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