Search code examples
javascriptthree.jstexturesrendertarget

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

I've added on scene1 plane1 with semi transparent texture
I'm rendering this scene1 into renderTarget and than using renderTarget.texture on another plane2 that placed on another scene2.
The problem is that I see that texture's semitransparancy looks like it mixed with black background. See jsfiddle expample.
Use THREE.NoBlending for plane1 material is seems like an answer of my issue but is not an option for me. Because pane1 can overlaps other planes on scene1.
Do anyone know how to avoid such behavior?

Solution

  • You are using the texture of a RenderTarget as the diffuse map for your plane mesh.

    Note that RenderTarget.texture was created using THREE.NormalBlending, and as a result, the texture has "premultiplied alpha". That is, the RGB channels in RenderTarget.texture are multiplied by the texture's alpha channel.

    Consequently, you need to specify a custom blending function when you use the render target's texture as a map. The appropriate blending function when the source and destination both have premultiplied alpha is:

    blending: THREE.CustomBlending,

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

    See "Alpha Blending" in the Wikipedia article Alpha Compositing.

    updated fiddle: https://jsfiddle.net/njetLLz7/212/

    three.js r.97