Error when creating WebGLRenderer on background tabs

Questions
1

Hi people,

I’m working on a three.js project.
I use typescript and webpack and as you may know when you use webpack dev server and change your code it is rebuilt and the webpage is reloaded.

Lately, I have notice an issue with Chrome, when the webpage is reloaded while the window/tab is not focused, the context creation fail (which is all the time when you are focuses on the code editor and webpack reloads).
I tested it with other content than mine (loading tabs in background) and it seems to fail to.

I use Chrome, Version 77.0.3865.35 (Official Build) beta (64-bit)
It doesn’t happen in Edge or Firefox.

So, 1st of all, I’d like to check is anybody else has this issue?

And also, What do you think is the right way to deal with that?
For now I do this:

if ( document.hasFocus() )
this.createRenderer();
else
window.onfocus = ( fe:FocusEvent ) => { this.createRenderer(); window.onfocus = null; };

Simple enough, I consider I need the rendered only to render, and I can still load the assets even while in background (although not having access to capabilities is an issue).
But I still get some errors occasionally.
If you noticed the same issue, how do you deal with this new “optimisation” from Chrome?

Thanks a lot.
Regards.

2

I’ve never experienced an issue like this with Chrome. In any event, using the Page Visibility API is probably the better way to detect an active tab.

3

I just tested my Chrome on MacOS, and Webpack reloading doesn’t give me any WebGL context issues. I have Chrome version 76.0.3809, and Whatismybrowser says that as of today, Aug 20, the latest Chrome version is 76.0 across all operating systems. How did you get Chrome 77.0? Are you using a dev or beta version?

4

@marquizzo Thanks for testing. Yes, as I wrote the version I use is the Beta version (I’m on Windows, though).
If it isn’t just my setup, a lot of three.js devs will soon get complains… I looked for three.js apps in the showcase category and they would all fail unless the tab was launched on focus.
If you want to give it a try, maybe try by installing Canary? It can be installed alongside Chrome.

@Mugen87
I’ll check this API, Thanks. What about getting the capabilities without having to instanciate WebGLRenderer? Is it possible? Could it be put as a static parameter?

EDIT: I had the same issues with the visibility API, so I tried both canary and reinstalling stable Chrome, and in both versions it seams to work just fine even on a background tab.
I might have been a bug in the Beta that has been fixed…
Anyway, happy this isn’t a new optimisation policy from Chrome or something.
Thanks for your feedbacks.

1 Like
5

No, this is not possible. You need an instance of WebGLRenderer to access WebGLCapabilities since this class internally requires the WebGL rendering context.