Why imageProcessing leads unexpected translucent effect

It has been a long time I did not see smthg as interesting from a bug TL/DR: Basically it is all expected :slight_smile:

Let me explain what is happening.

The only difference with and without is the render target relying on an offscreen texture to render: https://playground.babylonjs.com/#J9H084#360

Now if look into the properties of this texture compared to the canvas back buffer we noticed it is a half float texture. We can actually disable this by not placing the image processing in hdr mode and the problem goes away: https://playground.babylonjs.com/#J9H084#361

So lets look at the maths from the materials. Both are in blend mode ground and sphere and both are using a material summing the colors (here two full opaque red) so the rendered color is R: 2, G: 0, B: 0 A: 2

So the result looks this with blending (oneMinusSrcAlpha * dest + srcAlpha * src):

  • when first rendering the ground: (1-2) * clearColor + (2) * R: 2, G: 0, B: 0, A: 2 → R: 3.8, G: -0.2, B: -0.3, A: 3
  • when first rendering the ground: (1-2) * R: 3.8, G: -0.2, B: -0.3, A: 3 + (2) * R: 2, G: 0, B: 0, A: 2 → R: 0.2, G: 0.2, B: 0.3, A: 5

So we end up with the clear color again \o/

In your case you need to clamp the alpha value in your node material between 0 and 1

5 Likes