Question

我在scene1 plane1上添加了半透明texture
我将此场景1渲染到renderTarget，而不是在放置在另一个场景2上的另一个平面2上使用renderTarget.texture。
问题是，我发现纹理的半透明看起来像是与黑色背景混合在一起。见jsfiddle expample。
使用THREE.NoBlending for plane1材料似乎是我的问题的答案，但对我来说不是一个选项。因为pane1可以与scene1上的其他平面重叠。
有谁知道如何避免这种行为？

Answer 1

您正在使用RenderTarget的纹理作为平面网格的漫反射贴图。

请注意，RenderTarget.texture是使用THREE.NormalBlending创建的，因此纹理具有“预乘alpha”。也就是说，RenderTarget.texture中的RGB通道乘以纹理的Alpha通道。

因此，在将渲染目标的纹理用作地图时，需要指定自定义混合功能。当源和目标都预乘了alpha时，合适的混合函数是：

blending: THREE.CustomBlending,

blendEquation: THREE.AddEquation,
blendSrc: THREE.OneFactor,
blendDst: THREE.OneMinusSrcAlphaFactor,
blendSrcAlpha: THREE.OneFactor,
blendDstAlpha: THREE.OneMinusSrcAlphaFactor,

请参阅Wikipedia文章Alpha Compositing中的“ Alpha Blending”。

更新的小提琴：https://jsfiddle.net/njetLLz7/212/

three.js r.97

具有半透明纹理的THREE.js renderTarget似乎与黑色背景混合

1 个答案: