How to garbage and collect WebGL context for free?

I am developing a WebGL application for the web and mobile devices. I often use hard updates to check the results of my WebGL implementation. After trying to view, I get an error message:

Error: WebGL: Exceeded 16 live WebGL contexts for this principal, losing the least recently used one. 

This does not appear in the newly launched browser, but after updating the site several times. I think WebGL contexts are not finished, released, destroyed, cleaned up, freed correctly.

How can i do this?

The Khronos Group has created a test suite for emptying and collecting garbage in the context of WebGL here: https://www.khronos.org/registry/webgl/sdk/tests/conformance/context/context-creation-and-destruction.html (Note: this may crash your browser!)

The test passes through PASS and TEST COMPLETE , so basically the test does not detect any problems. However, opening the JavaScript console, it reads 33 instances:

 Error: WebGL: Exceeded 16 live WebGL contexts for this principal, losing the least recently used one. 

Is this a mistake in how WebGL is handled by the browser? Or am I doing something wrong? I never thought about freeing up WebGL contexts.

I am using Firefox Developer Edition 48.0a2 and Firefox 46.0.1.

How to garbage and collect WebGL context for free?

+6
source share
1 answer

I think maybe I misunderstood your question.

You say you are making hard updates. So you are updating the update in the browser? In this case, first I disable all extensions and see if there is still a problem. If it is me, I would file an error with mozilla

Otherwise, if you are trying to free the canvases and make friends and hope to collect garbage well. here is the answer i wrote before rereading your question


Short answer: you cannot force garbage collection. You would be better off using the same canvases again.

There is a decision here to free all data and reset the canvas

How to clear and unload WebGL canvas context from GPU after use?

In your particular case, although you are 100% sure that you are not following some contextual link or WebGL canvas? For example, if you do this

 canvas.addEventListener('click', function(..) {}); 

You have just created a canvas that NEVER can be collected from garbage. It has an event listener function. You cannot remove this function because you did not provide a link to it. You need to remove all listeners as one example of many ways to leak links.

There are many ways to randomly reference HTML elements such as canvas, as well as WebGL objects . Keep more than null links and it will never collect garbage.

Here are some tips for finding leaks.

On the other hand, if it were me, I would try to reuse the canvases. To make sure I release everything that my own create / delete functions that track all resources could call. Example

 var textures = []; function createTexture(gl) { var tex = gl.createTexture(); textures.push(txt); } function deleteTexture(gl, tex) { gl.deleteTexture(tex); textures.splice(textures.indexOf(tex), 1); } 

Now that I am tracking all textures, I can easily remove all the rest

 while (textures.length) { gl.deleteTexture(textures.pop()); } 
+2
source

All Articles