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

问题描述

我想threejs画布透明背景。我创建一个渲染器是这样的：

 ＃CoffeeScript的
R =新THREE.WebGLRenderer阿尔法：真
 

当我称之为 r.render（），它按预期工作，与出现在一个透明背景的对象。然而，当我尝试添加后处理与EffectComposer像这样：

  CMP =新THREE.EffectComposerř
cmp.addPass新THREE.RenderPass的场景，相机

效果=新THREE.FilmPass 0.9，2，2048，真
effect.renderToScreen =真
cmp.addPass效果

cmp.render 3
 

新的结果是，该场景呈现为预期的（对象具有电影效果正确应用），除背景不再透明按需要...代替它的黑色，不透明。为什么？我怎样才能prevent后处理从我的背景透明篡改？

解决方案

  VAR WIDTH = window.innerWidth || 1;
VAR HEIGHT = window.innerHeight || 1;
VAR参数= {minFilter：THREE.LinearFilter，magFilter：THREE.LinearFilter，格式：THREE.RGBAFormat，stencilBuffer：假};

变种的RenderTarget =新THREE.WebGLRenderTarget（宽度，高度，参数）;

CMP =新THREE.EffectComposer（R，的RenderTarget）;
 

如果您不指定的RenderTarget那么它会创建一个与THREE.RGBFormat这将使你失去阿尔法。

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

# coffeescript
r = new THREE.WebGLRenderer alpha: true

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

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

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