Why imageProcessing leads unexpected translucent effect

Questions
1

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.

截屏2022-08-03 12.10.02
截屏2022-08-03 12.10.021986×1222 58.1 KB

2

cc @sebavan

3

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

1 Like
4

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

4 Likes