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

Question

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

Answer 1

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

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

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

blending: THREE.CustomBlending,

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

请参阅维基百科文章 "Alpha Blending" Alpha Compositing。

已更新 fiddle：https://jsfiddle.net/njetLLz7/212/

three.js r.97

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

THREE.js renderTarget with semi transparent texture have seems mixed with black background

javascript

three.js

textures

rendertarget