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

【问题标题】：THREE.js renderTarget with semi transparent texture have seems mixed with black background具有半透明纹理的 THREE.js renderTarget 似乎与黑色背景混合
【发布时间】：2018-05-13 03:26:24
【问题描述】：

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

【问题讨论】：

这是您看到的渲染目标清除颜色。这有点棘手。您可能必须展示您的“真正问题”。无论如何，我在渲染到渲染目标时设置了material.transparent = false。 jsfiddle.net/b0r9Lckc.
@WestLangley 抱歉回复晚了，但这个问题现在仍然存在jsfiddle.net/njetLLz7/210 这是我的问题的一个例子。

标签： javascript three.js textures rendertarget

【解决方案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 混合”。

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

three.js r.97

【讨论】：

感谢您的帮助。这对我有用，直到我不将 alphaMap 用于具有 renderTarget 纹理的网格。如果我这样做，我会选择白色，哪里应该是透明的。是否可以使 alphaMap 与自定义混合和预乘 alpha 的正确混合一起工作？
如果你无法解决你的新用例，请发一个新帖子，并提供一个活生生的例子，以便清楚你在做什么。
这是一个使用自定义混合的 alphaMap 工作不佳的示例。 jsfiddle.net/njetLLz7/217src和dist混色的所有组合我都试过了，没用。
那是因为this line。您需要将 .rgba 乘以 alpha。您的解决方法是在您的情况下设置alphaTest: 0.5。
这个解决方法对我来说不起作用，因为我需要一个带渐变的 alpha 蒙版。感谢您的帮助和快速回复。