1

I have an HTML5 application using 3 canvases, two of which contain a WebGL 3D scene rendered using Three.js

These three canvases are located inside a custom slidder that only displays one canvas at the time in full window size. The problem I have is that even if I load the three views during initialization, there is something that is not loaded in the non-visible webgl canvas until I slide to it, then it is loaded and displayed. When I say loaded I mean something in the render because the scene and all the methods work correctly from the start.

I detected this because during the first slide to this div, it takes some time and the controls get frizzed during this time, the user doesn't really know if he clicked properly because the active state of the "slide next" button is not activated until the end of this unknown loading. The slide animations are also skipped probably because this loading take more time than the slidding. Once it has been displayed once, the behavior is the correct one and it slides quickly from one view to the next one.

Is there an option in the render or maybe the browser to force this loading to occur even if the canvas is off screen? Ideally only during initialization because I dont want the GPU to render things that are not displayed, just preload them.

gman
  • 100,619
  • 31
  • 269
  • 393
XaviGG
  • 171
  • 2
  • 19
  • not an answer to your question but you might be interested in this. https://github.com/greggman/requestanimationframe-fix.js – gman Feb 28 '15 at 12:20
  • Actually you made me realise the answer. I has going to answer that I already have a system in place to prevent rendering the non-visible canvases when I thought that this might be the problem. My "first rendering" flag was not working properly and therefore not rendering at least once each canvas after site loading. If you know what's internally the difference between the first rendering and the rest, and why it takes longer, you could post an answer telling to allow the first rendering at loading. – XaviGG Mar 01 '15 at 12:07

1 Answers1

0

If you are using some blocking flags to avoid updating and rendering a scene when some conditions are met, make sure that during initialization of the site you allow at least one requestAnimationFrame cycle of each renderer. During this first cycle, some time consuming initializations are done, if we wait to render the scene for the first time until the moment that we need it, it will have to initialize at that moment and this can perturb the responsiveness of your site:

e.g. a slider of 3 scenes where only one is displayed at each time; using a blocking system to only update the currently displayed scene. If we do not allow the initialization of all three scenes, only the one displayed at site loading will be already initialized, that means that if we slide to one of the other scenes, they will have to initialize at the same time as the sliding animation is triggered. Since the initialization is longer than the animation, the sliding effect is lost and a flicker happens when displaying that scene for the first time; after that, the behavior will be the correct one because that scene is already initialized.

XaviGG
  • 171
  • 2
  • 19