javascript - 使用后如何从 GPU 清理和卸载 WebGL Canvas 上下文？

Question

如何清理 WebGL 上下文程序并从 GPU 和 dom 元素卸载程序、缓冲区和所有内容？

我想确保我们没有乱扔垃圾。

此外，如果可能的话，重用 Canvas 会很好(我不知道它是 2d 还是 webgl 上下文)。

Answer 1

您可以只丢失对 gl 上下文和所有 gl 对象以及 Canvas 的所有引用，并从 DOM 中删除 Canvas 。不幸的是，因为 JavaScript 是垃圾回收的，所以不知道浏览器何时会真正释放内存。有一些一致性测试试图测试他们是否正确地做到了这一点，但如果你不想只是希望和祈祷，那么......

通过对您创建的所有内容调用 gl.deleteXXX 释放您的所有资源并取消绑定(bind)所有绑定(bind)点。这意味着对于所有具有 null 的目标，每个纹理单元调用 gl.bindTexture，数组、帧缓冲区和渲染缓冲区也是如此。

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);

因为您不能将 null 绑定(bind)到一个属性，所以您可以在删除它们之前将所有缓冲区的大小设置为 1(不允许为零)。或者创建一个新缓冲区并将其分配给所有属性。

第一个例子

// 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);

或者创建一个新的缓冲区并将其分配给所有属性

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);
}

这将从属性中解除旧缓冲区的绑定(bind)。

最后将 Canvas 大小设置为 1x1 像素。

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

这不是一个完美的解决方案，但它会立即释放除几 k 内存之外的所有内存，无需等待您无法控制的垃圾回收。

至于从头开始重复使用 Canvas ，您不能。 Canvas 将始终具有您最初要求的相同上下文。

另见 @Johan's answer关于loseContext