I have a problem with webgl context lost/restored.

My application is very heavy with allot of information, graphs, lists, ... and map.

In the map i'm using webGL in order to get the best performances. My code is handling context lost and restored properly.

I'm starting a big operation that causes loading data from the server, parsing it,... This sometimes making the browser loose my webgl context. The problem is that the context is never restored. When I do again this big operation, then i got the restore event.

In my opinion it is related to memory and the garbage collector freeing time.

But I don't really know what to do, and how to solve this.

I have a problem with webgl context lost/restored.

My application is very heavy with allot of information, graphs, lists, ... and map.

In the map i'm using webGL in order to get the best performances. My code is handling context lost and restored properly.

I'm starting a big operation that causes loading data from the server, parsing it,... This sometimes making the browser loose my webgl context. The problem is that the context is never restored. When I do again this big operation, then i got the restore event.

In my opinion it is related to memory and the garbage collector freeing time.

But I don't really know what to do, and how to solve this.

• javascript
• memory
• webgl

2 Answers 2

An approach to handling the lost could be to recreate the canvas and re-initialize your application for the GL parts. In the end, all resources are gone, so the added overhead for context re-creation should not be too troubling and you can take action immediately when the webglcontextlost event arrived.

(not sure if that's the best idea though...)

Commenting on the Answer by Raziza regarding WEBGL_lose_context:

Don't use this one like you proposed there. This extension is merely a debugging tool and should only be used to simulate this behavior.

See also here: https://www.khronos/registry/webgl/extensions/WEBGL_lose_context/

Found a way to call restore context manually. Don't know if it is good/smart to do, but it is working for me.

We do it by using the extension WEBGL_lose_context. MDN reference

// Loading the extension
var ext = gl.getExtension("WEBGL_lose_context"); 

...
// This code in the context lost event, wait 3 secs for forcing 
// restore context
var restoreTimeout = setTimeout(function() { 
     ext.restoreContext(); 
}, 3000);

...
// This code in restore context event
// incase we got restore not from my timeout, i'm canceling it
restoreTimeout && clearTimeout(restoreTimeout);