Something About ClearColor

Questions
1

Hi everyone~
I used to make Babylon to render transparent by scene.clearColor.set(0, 0, 0, 0);
It work well in PG 7.54.0 (Babylon.js Playground)
I always think that engine set clearcolor to all pixel before render, but when I update bbl in my projection from 7.8.0 to 7.54.0, clearcolor works like motion blur. I don’t know what cause this trouble.
scene.clearColor = new Color4(1, 0, 0, 0.1):


scene.clearColor = new Color4(1, 0, 0, 0.001);

1 Like
2

I debug the clear progress:

image
image1174×294 17.9 KB

image
image519×531 4.15 KB

1 Like
3

Could you try scene.autoClear = true; ?

2 Likes
4

Autoclear is true, I think I should generate scene from zero to checkout how this bug triggled

1 Like
5

I find it is a multicanvas bug, when we need to create a multiCanvas engine, we create a canvas element as input param. In this case, clearcolor is not working well.

 if (this.multiCanvas) {
            const canvas = document.createElement("canvas");
            this.engine = new Engine(canvas, true, {}, true);
            this.engine.runRenderLoop(() => {
                this.renderLoopMultiCanvas();
            })
        }
1 Like
6

Seems to be the same issue:

Try to move the camera in the second canvas. Changing the clearColor.a to >0 removes the issue.

It affects both canvases:

Adding { alpha: true } to the Engine constructor options doesn’t make a difference.

@Evgeni_Popov Since it’s your PG, I think you are the right person who can help to solve the issue. Thanks a lot!

1 Like
7

Yes! They are looking the same!
In my project, each canvas means a scene, each scene has a loader to import meshes
I find another trouble that, meshes/materials/etc can imported into 2nd 3rd .., but nothing is render in the scene.

image
image1920×945 82.4 KB

Could resources like meshes/textures/materials be shared with different canvas of same Engine in multi-canvas mode?

8

See if this helps:

2 Likes
9

Ohhh, clearcolor work again, thank you for your helper !!!

image
image1920×1226 164 KB

Do you know the second trouble, I use same code to load model for each canvas, only the first canvas renders models. I check my code and finally find that environmentBRDFTexture cause it. I don’t know how to fix it, do you have any idea?
This is PG about this trouble: https://playground.babylonjs.com/#E6I6PX#3
Case environmentBRDFTexture is not set, model can be renderred:
image
image1291×609 66.3 KB

Case environmentBRDFTexture is set, model can not be renderred:
image
image1311×919 83.4 KB

10

It’s environmentTexture you want to set, not environmentBRDFTexture (the BRDF texture is an internal texture, that you probably never want to change as it’s quite particular). Also, you should use “/” in the url of the environment texture, not “\” (line 33):

1 Like
11

Sorry, it is my missspelling, I find the env file is missing in my project which cause this trouble, like this: https://playground.babylonjs.com/#E6I6PX#7 Thank you for helping me! :grin: