如何阻止 EffectComposer 破坏我的透明背景? [英] How do I stop EffectComposer from destroying my transparent background?

问题描述

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

I want a threejs canvas with a transparent background. I'm creating a renderer like this:

# coffeescript
r = new THREE.WebGLRenderer alpha: true

当我调用 r.render() 时，它按预期工作，对象出现在透明背景上.但是，当我尝试使用 EffectComposer 添加后处理时:

When I call r.render(), it works as expected, with the objects appearing over a transparent background. However, when I attempt to add post-processing with EffectComposer like so:

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

新的结果是场景按预期渲染(对象正确应用了电影效果)，除了背景不再按需要透明……而是黑色和不透明.为什么?如何防止后期处理篡改我的透明背景?

the new result is that the scene renders as expected (objects have the Film effect correctly applied), EXCEPT the background is no longer transparent as desired...instead it's black and opaque. Why? How can I prevent post-processing from tampering with my transparent background?

推荐答案

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.

If you don't specify a rendertarget then it will create one with THREE.RGBFormat which will make you lose alpha.

这篇关于如何阻止 EffectComposer 破坏我的透明背景?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！