Why imageProcessing leads unexpected translucent effect

enable imageprocessing, sphere and ground’s nodematerial has translucent effect. the node material just add two color4.

and if change sphere and ground node material with same color, such as:

sphere.material = createNM(“sphere”, new BABYLON.Color4(1, 0, 0, 1));
ground.material = createNM(“ground”, new BABYLON.Color4(1, 0, 0, 1));

the scene will be like performing boolean operations on the sphere and ground.

cc @sebavan

This is a fun one !!! let me have a look ASAP can not wait to figure what it is :slight_smile:

1 Like

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