BabylonJS doesn't seem to respect uiScene.clearColor

I have mentioned that in another post but bugs category seems to be more appropriate so reposting here.

BabylonJS doesn’t seem to respect uiScene.clearColor set as Color4 with alpha value, regardless of autoClear value.

Here is sample code illustrating that.

uiScene.clearColor = new BABYLON.Color4(1,0,0,0.5);   // potential bug ?
uiScene.autoClear = false

Shouldn’t the first line make ui scene background red with 50% opacity when for uiScene.autoClear = true?

Copying my answer from the other thread:

The clearing is not a blending with the already existing content of the framebuffer (coming from the main scene rendering), it will write the color value you provide to the framebuffer. If alpha < 1, there will be a blending between the framebuffer and what is behind the canvas (if any) but not between two scene rendering. You can use a post process if you want to apply a color blending after the first scene is rendered.

1 Like

Thanks @Evgeni_Popov. I read the words but cant comprehend them. :confused:
I am still super new to all this.

I understood it is intentional, not a bug.

it will write the color value you provide to the framebuffer, there will be a blending between framebuffer and what is behind the canvas

What I am struggling with is the reason why would we need alpha in clearColor if it has no effect on how the scene is rendered.

You can use a post process if you want to apply a color blending after the first scene is rendered.

Does it have any practical use? Any chance for a dummy example please? It would greatly help.

It has some effect when the browser is blending the canvas with what is behind it in the web page:

https://playground.babylonjs.com/#NH46MH

The background color of the canvas is set to yellow in this PG. You can see the blue color is blended with the yellow color. If you set alpha=1 instead of 0.75 in the clear color, the clear color will be full blue.

Post processes can be used to apply some processing to the full scene. See How To Use Post Processes | Babylon.js Documentation

You can apply a filtering color like this:

https://playground.babylonjs.com/#DAC1WM#29

1 Like

WOAH! Got it! It makes perfect sense now.
@Evgeni_Popov I absolutely love your responses! :heart_eyes: Thank you VERY VERY much!

1 Like