javascript - 如何释放和垃圾收集 WebGL 上下文？

Question

我正在为 Web 和移动设备开发 WebGL 应用程序。我经常使用硬刷新来测试我的 WebGL 实现的结果。 View 尝试后，出现错误:

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

这不会出现在新启动的浏览器上，而是在多次刷新网站后出现。我猜 WebGL 上下文没有正确完成、释放、销毁、清理、释放。

我该怎么做？

Khronos Group 在此处创建了一个用于释放和垃圾收集 WebGL 上下文的测试套件:https://www.khronos.org/registry/webgl/sdk/tests/conformance/context/context-creation-and-destruction.html (注意:这可能会使您的浏览器崩溃!)

测试以 PASS 和 TEST COMPLETE 运行，因此基本上测试没有检测到任何问题。但是，打开 JavaScript 控制台，它会读取 33 个实例:

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

这是浏览器处理 WebGL 的方式的错误吗？还是我做错了什么？我从未想过释放任何 WebGL 上下文。

我使用的是 Firefox Developer Edition 48.0a2 和 Firefox 46.0.1。

如何释放和垃圾收集 WebGL 上下文？

Answer 1

我想也许我误解了你的问题

你说你正在做硬刷新。意思是你在浏览器中按下刷新？在那种情况下，首先我会禁用所有扩展并查看问题是否仍然存在。如果是，我会向 mozilla 提交错误

否则，如果您正在尝试释放 Canvas 并创建已知 Canvas 并希望很好地进行垃圾回收..这是我在重新阅读您的问题之前写的答案

---

简短的回答是你不能强制垃圾收集。您最好重新使用相同的 Canvas 。

这里有一个释放所有数据并重置 Canvas 的解决方案

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

在您的特定情况下，您是否 100% 确定您没有坚持对 WebGL 上下文或 Canvas 的某些引用？例如，如果你这样做

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

您刚刚制作了一个永远不会被垃圾回收的 Canvas 。它有一个附加的事件监听器功能。您无法删除该功能，因为您没有保留对它的引用。您需要删除所有监听器，这只是您可能泄漏引用的多种方式之一。

There's tons of ways to accidentally keep references to HTML elements like the canvas as well as WebGL objects .保留多于零个引用，它永远不会被垃圾收集。

Here's some hints on finding the leaks

另一方面，如果是我，我会尝试重新使用 Canvas 。为了确保我释放了所有东西，我可能会调用我自己的创建/删除函数来跟踪所有资源。示例

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

现在因为我正在跟踪所有纹理，所以我可以轻松删除所有剩余的纹理

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