1

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?

Andrii Tsarenko
  • 655
  • 7
  • 21
  • It is the render target clear color you are seeing. This is a bit tricky. You may have to show your "real problem". In any event, I set `material.transparent = false` when rendering to the render target. https://jsfiddle.net/b0r9Lckc/. – WestLangley Nov 29 '17 at 17:19
  • @WestLangley sorry for late reply, but this problem still actual for now https://jsfiddle.net/njetLLz7/210/ here is an example of my issue. – Andrii Tsarenko Sep 26 '18 at 08:11

1 Answers1

2

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

WestLangley
  • 102,557
  • 10
  • 276
  • 276
  • Thanks for help. This works for me till I don't use alphaMap for my mesh with renderTarget texture. If I do I se white color, where should be a transparet. Is it possible to make alphaMap works with custom blending and correct blending of premultiplied alpha? – Andrii Tsarenko Oct 01 '18 at 13:26
  • If you are unable to solve your new use case, please make a new post, and provide a live example so it is clear what you are doing. – WestLangley Oct 01 '18 at 14:13
  • Here is an example of bad working alphaMap with custom blending. https://jsfiddle.net/njetLLz7/217/ I have tried all combinations of src and dist color blending, and it was no use. – Andrii Tsarenko Oct 01 '18 at 15:47
  • That is because of [this line](https://github.com/mrdoob/three.js/blob/master/src/renderers/shaders/ShaderChunk/alphamap_fragment.glsl#L3). You would need to multiply `.rgba` by alpha, instead. Your workaround is to set `alphaTest: 0.5` in your case. – WestLangley Oct 01 '18 at 20:14
  • This workaround will not wok for me because I need an alpha mask with gradient. Thanks for your help and quick reply. – Andrii Tsarenko Oct 02 '18 at 08:08
  • My final solution is to write own shader where I'm dividing mapColor by alpha before apply alpha map. Is it good idea to add parameter divideByAlpha to threejs texture and use it as ifdef directive to divide color by alpha for sutch cases as my? – Andrii Tsarenko Oct 02 '18 at 10:37
  • In the future, if you have additional requirements, please ask a new question so a proper answer can be given.... I think the best solution is for you to inject code into the built-in material's shader using `replace()`. See http://threejs.org/examples/webgl_materials_modified.html. – WestLangley Oct 02 '18 at 11:11