Black flash: accessing the renderer before first render?

[taseenb]

What if you wanted to use alpha=false and autoClear=false in Canvas?

The default clear color is black in Three. So if you set a custom background color ( gl.setClearColor( 'yellow' ) ) you will see a black flash before the yellow background appears.

The only way to avoid this that I could find in R3F was to activate the alpha. In Three we can call gl.setClearColor before the first rendering so I suppose that's why we can avoid this black flash.

Is it possible to set the clear color in R3F (without activating the alpha) without the black flash?

You can see the problem here: https://codesandbox.io/s/canvas-test-84xuf?file=/src/App.js

[dangrabcad]

Just to tell you something that didn't work: I want alpha={false} for performance reasons, but the black flash is clearly unacceptable for a full-screen canvas. I tried making the canvas invisible in CSS and then using the onCreated callback to make it visible only when it was ready to render and I'd set the clear color to my application's background, but it didn't work, because R3F doesn't create the GL context until the canvas is visible on screen.

For now I'm just accepting the performance hit of alpha={true} but this is something I'd like to come back to later.

[drcmda]

oh ok, i get it. could you check if the solution works with the render function api? https://codesandbox.io/s/v6-adaptive-regression-gf5dn?file=/src/index.js

you have full control over the canvas here and you could make the canvas invisible first and show it in a requestAnimationFrame after onCreated.

[drcmda]

i will add this behaviour after running some tests - i hope it wont mess with visual regression testing or csb auto thumbnail, things like that

[taseenb]

yes, i think it could be a bug. the problem is i dont know what im looking at. i see no black flash in that demo :-/

If you click on the refresh button you should see the black screen

[taseenb]

(Not an R3F thing, just how canvases work.)

I believe that the black comes from the default clearColor in Three.js that is black

https://github.com/mrdoob/three.js/blob/d4aa9e00ea29808534a3e082f602c544e5f2419c/src/renderers/webgl/WebGLBackground.js#L12

[dangrabcad]

I believe that the black comes from the default clearColor in Three.js that is black

Check this CSB. It doesn't even load three.js but you still get the black canvas. This is just what color you get when you first create the webgl context, until you render something into it.