How do you gently intiailize a WebGL context?

Question

I have a WebGL context in a web application, whenever it intializes it's visible for ~50 000µs as a black square before the (HTML5 appcache) textures become visible and the background becomes transparent.

This using Firefox, which is the sole platform for my application.

How do I get rid of this behaviour? If impossible; how do I work around it?

Answer 1

You can hide canvas with CSS before showing it up. After textures are loaded and you are ready to render.

Use requestAnimFrame for loops it will prevent reflow or redraw before callback function will return execution cursor. So when you are ready to render, start this looping, and in first callback show by css your canvas and render webgl stuff. Once function is done - it will show canvas and render in one single reflow, so no blinks or black frames should appear.