如何释放和垃圾收集WebGL上下文？ [英] How to free and garbage collect a WebGL context?

问题描述

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

I'm developing a WebGL application for web and mobile. I often use hard-refreshs to test the results of my WebGL implementation. After a view tries, I get the error:

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

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

This does not appear on a fresh started browser, but after refreshing the site multiple times. I guess the WebGL contexts are not finished, released, destroyed, cleaned up, freed correctly.

我该怎么做？

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

Khronos Group created a test suite for freeing and garbage collecting WebGL context here: https://www.khronos.org/registry/webgl/sdk/tests/conformance/context/context-creation-and-destruction.html (Note: This might crash your browser!)

测试通过 PASS 和 TEST进行COMPLETE ，所以基本上测试没有检测到任何问题。但是，打开JavaScript控制台，它会读取以下33个实例：

The test runs through with PASS and TEST COMPLETE, so basicly the test does not detect any issues. However, opening the JavaScript console, it reads 33 instances of:

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

这是浏览器处理WebGL的错误吗？或者我做错了什么？我从未考虑过释放任何WebGL上下文。

Is this a bug in how WebGL is handled by the browser? Or am I doing anything wrong? I never thought about freeing any WebGL contexts.

我正在使用Firefox Developer Edition 48.0a2和Firefox 46.0.1。

I'm using Firefox Developer Edition 48.0a2 and Firefox 46.0.1.

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

How to free and garbage collect a WebGL context?

推荐答案

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

I think maybe I misunderstood your question

你说你正在努力刷新。这意味着你在浏览器中按下刷新？在这种情况下，我首先禁用所有扩展，看看问题是否仍然存在。如果它是我提交mozilla的错误

You say you're doing hard refreshes. Meaning you're pressing refresh in the browser? In that case first I'd disable all extensions and see if the issue is still there. If it is I'd file a bug with mozilla

否则，如果你试图释放画布并创建知名的并希望垃圾收集好......这就是答案我在我重新阅读你的问题之前写的

Otherwise if you are trying to free canvases and create knew ones and hoping for garbage collection well.. here's the answer I wrote before I re-read your question

简短的回答是你不能强迫垃圾收集。你最好重新使用相同的画布。

The short answer is you can't force garbage collection. You'd be better off re-using the same canvases.

这里有一个解决方案可以释放所有数据并重置画布

There's a solution here to freeing all the data and resetting the canvas

如何在使用后从GPU清理和卸载WebGL画布上下文？

在您的特定情况下，您是100％确定您'我没有坚持对WebGL上下文或画布的一些引用？例如，如果你这样做

In your particular case though are you 100% sure you're not holding on to some reference to the WebGL context or canvas? For example if you do this

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

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

You've just made a canvas that can NEVER be garbage collected. It has an event listener function attached. You have no way to remove that function since you didn't keep a reference to it. You need to remove all listeners as just one example of many ways you might be leaking references.

有很多方法可以意外地保持对画布以及WebGL对象等HTML元素的引用。保留超过零的引用，它永远不会被垃圾收集。

There's tons of ways to accidentally keep references to HTML elements like the canvas as well as WebGL objects. Keep more than zero references and it will never be garbage collected.

这里有一些关于发现泄漏的提示

关于另一方面，如果是我，我会尝试重新使用画布。为了确保我释放了一切，我可以称之为我自己的创建/删除功能，以跟踪所有资源。示例

On the other hand if it was me I'd try to re-use the canvases. To make sure I freed everything I might call my own creation/deletion functions that track all the resources. 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 because I'm tracking all the textures I can easily delete all the remaining ones

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

这篇关于如何释放和垃圾收集WebGL上下文？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！