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

Question

我在scene1 plane1 上添加了半透明纹理
，我将此scene1 渲染到另一个plane2 上renderTarget，而不是renderTarget.texture在另一个scene2 上使用。
问题是我看到纹理的半透明看起来像是与黑色背景混合在一起。请参阅 jsfiddle示例。
用于THREE.NoBlendingplane1 材料似乎是我问题的答案，但不是我的选择。因为pane1 可以与scene1 上的其他平面重叠。
有谁知道如何避免这种行为？

Answer 1

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

请注意，它RenderTarget.texture是使用 创建THREE.NormalBlending的，因此，纹理具有“预乘 alpha”。即 RGB 通道RenderTarget.texture乘以纹理的 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/

三.js r.97