In my HTML5 application, I am utilizing three canvases. Two of these canvases hold a WebGL 3D scene that is rendered using Three.js.
These canvases are contained within a custom slider that displays only one canvas at a time in full window size. The issue I am facing is that even though I load all three views during initialization, there is something that is not loaded in the non-visible WebGL canvas until I slide to it. Once I slide to the canvas, it is then loaded and displayed. By "loaded," I mean that something in the render is not occurring until it becomes visible, even though the scene and methods are functioning correctly from the beginning.
I noticed this issue when sliding to the div for the first time, it takes some time to load and the controls freeze during this period. The user is unsure if they clicked properly because the "slide next" button's active state is not activated until the end of this unknown loading time. The slide animations are also skipped, presumably because the loading process takes longer than the sliding animation. Once the canvas has been displayed once, the behavior is correct and slides quickly from one view to the next.
Is there an option in the render or possibly the browser to force this loading to occur even when the canvas is off-screen? Ideally, I would like this loading to only happen during initialization because I do not want the GPU to render things that are not displayed, just preload them.