How do I clean up and unload a WebGL canvas context from GPU after use?

Question

How do you clean up a WebGL context program and unload the program, buffers and everything from the GPU and dom-element?

I'd like to make sure we're not littering.

Also it'd be nice to reuse the canvas if possible (and I don't know if it'd be 2d or webgl context).

stack.gl has a nice package called gl-reset. It cleans up the webgl context for re-use. — asdf, Sep 03 '17 at 22:06
@asdf the link to the package is https://github.com/stackgl/gl-reset — Yves M., Aug 30 '22 at 12:21

score 25 · Accepted Answer · edited Aug 30 '22 at 12:28

You can just lose every reference to your gl context and all gl objects and the canvas and remove the canvas from the DOM. Unfortunately, because JavaScript is garbage collected there's no knowing when the browser will actually free the memory. There are some conformance tests to try to test they do this correctly but if you don't want to just hope and pray then ....

To free all your resources by calling gl.deleteXXX on everything you created and unbind all bind points. That means for every texture unit call gl.bindTexture on all targets with null, the same with arrays, framebuffers and renderbuffers.

var numTextureUnits = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS);
for (var unit = 0; unit < numTextureUnits; ++unit) {
  gl.activeTexture(gl.TEXTURE0 + unit);
  gl.bindTexture(gl.TEXTURE_2D, null);
  gl.bindTexture(gl.TEXTURE_CUBE_MAP, null);
}
gl.bindBuffer(gl.ARRAY_BUFFER, null);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
gl.bindRenderbuffer(gl.RENDERBUFFER, null);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);

// Delete all your resources
// Note!!!: You'd have to change this code to delete the resources YOU created.
gl.deleteTexture(someTexture);
gl.deleteTexture(someOtherTexture);
gl.deleteBuffer(someBuffer);
gl.deleteBuffer(someOtherBuffer);
gl.deleteRenderbuffer(someRenderbuffer);
gl.deleteFramebuffer(someFramebuffer);

Because you can't bind null to an attribute you could set the size of all your buffers to 1 (zero is not allowed) before you delete them. Either that or make a new buffer and assign it to all attributes.

Example of the first

// set a buffer to 1 byte before deleting
// NOTE: You'd need to do this for ALL BUFFERS you created.
gl.bindBuffer(gl.ARRAY_BUFFER, someArrayBuffer);
gl.bufferData(gl.ARRAY_BUFFER, 1, gl.STATIC_DRAW);
gl.deleteBuffer(someArrayBuffer);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, someElementArrayBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, 1, gl.STATIC_DRAW);
gl.deleteBuffer(someElementArrayBuffer);

Or make a new buffer and assign it to all attributes

var buf = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buf);
var numAttributes = gl.getParameter(gl.MAX_VERTEX_ATTRIBS);
for (var attrib = 0; attrib < numAttributes; ++attrib) {
  gl.vertexAttribPointer(attrib, 1, gl.FLOAT, false, 0, 0);
}

This will unbind the old buffers from the attributes.

Finally set the canvas size to 1x1 pixel.

gl.canvas.width = 1;
gl.canvas.height = 1;

It's not a perfect solution but it will immediately free all but a few k of memory immediately, no waiting for garbage collection which is out of your control.

As for reusing the canvas from scratch you can't. The canvas will always have the same context you first asked it for.

Also see @Johan's answer about loseContext

Cool, thanks for the thorough answer. Maybe for posterity you could add an example how `gl.deleteXX` looks? — Bartvds, May 13 '14 at 08:23
Good explanation, I used it but I still see the program not getting freed up when we load a new image onto the webgl context and new set of programs are getting attached. You can take a look at it on firefox shader editor — graphics123, Jun 30 '17 at 09:49

score 15 · Answer 2 · edited Jun 27 '22 at 13:15

15

To lose the context, use the extension WEBGL_lose_context as

gl.getExtension('WEBGL_lose_context').loseContext();

See https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context/loseContext

edited Jun 27 '22 at 13:15

Yves M.

29,855
23
108
144

answered Jun 25 '16 at 10:32

Johan van Breda

583
8
13

8

You linked to `restoreContext()` instead of [`loseContext()`](https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context/loseContext). Also, the first two lines suggest this does not do what you want: *"The WEBGL_lose_context.loseContext() method is part of the WebGL API and allows you to* ***simulate*** *losing the context of a WebGLRenderingContext context. It triggers the steps described in the WebGL specification for handling context lost.* ***The context will remain lost until WEBGL_lose_context.restoreContext() is called."*** – Job Dec 07 '16 at 10:37
8

@Job spec isn't the code, it can be interpreted ambiguously. However, there is also the following: _Implementations should destroy the underlying graphics context and all graphics resources when this method is called. **This is the recommended mechanism for applications to programmatically halt their use of the WebGL API.**_ Regarding the word _simulate_ - I guess it was chosen because _This extension exposes new functions which simulate losing and restoring the WebGL context, **even on platforms where the context can never be lost**_ - i.e. simulation takes place when destroying is impossible – Grief Jun 13 '17 at 00:01
4

Thanks for the clarification! – Job Jun 14 '17 at 10:41
1

IE does not support this method. – Nguyen Tran Nov 29 '18 at 12:36

How do I clean up and unload a WebGL canvas context from GPU after use?

2 Answers2

Linked

Related