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

我正在为web和移动设备开发一个WebGL应用程序。我经常使用硬刷新来测试WebGL实现的结果。视图尝试后，我得到错误：

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

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

我该怎么做

Khronos Group在此处创建了一个测试套件，用于释放和垃圾收集WebGL上下文：（注意：这可能会使浏览器崩溃！）

测试通过

通过

和

测试完成

，因此基本上测试不会检测到任何问题。但是，打开JavaScript控制台，它会读取以下33个实例：

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

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

我使用的是Firefox开发者版48.0a2和Firefox 46.0.1

---

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

我想我可能误解了你的问题

你说你在努力复习。意思是你在浏览器中按刷新？在这种情况下，我首先禁用所有扩展，看看问题是否仍然存在。如果是的话，我会向mozilla提交一个bug

否则，如果你试图释放画布，创建熟悉的画布，并希望垃圾收集好。。这是我在重读你的问题之前写下的答案

---

简而言之，你不能强制垃圾收集。你最好还是用同样的画布

这里有一个释放所有数据和重置画布的解决方案

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

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

你刚刚制作了一幅永远不会被垃圾收集的画布。它附加了一个事件侦听器函数。您无法删除该函数，因为您没有保留对它的引用。您需要删除所有侦听器，这只是泄漏引用的许多方法中的一个示例

。保留超过零的引用，它将永远不会被垃圾收集

另一方面，如果是我，我会尝试重新使用画布。为了确保释放了所有内容，我可以调用自己的创建/删除函数来跟踪所有资源。范例

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