1

我正在为一个网站使用glfx.js图像效果库，我有一个画布，而不是渲染一个不断被新图像替换的图像，然后对其应用过滤器。

问题是在运行几分钟后（在加载了大约 2300 个不同的纹理之后）WebGL 会抛出这个错误：

WebGL: INVALID_VALUE: texImage2D: bad image data

我把它缩小到这个功能：

Texture.prototype.loadContentsOf = function(element) {
  this.width = element.width || element.videoWidth;
  this.height = element.height || element.videoHeight;
  gl.bindTexture(gl.TEXTURE_2D, this.id);
  gl.texImage2D(gl.TEXTURE_2D, 0, this.format, this.format, this.type, element);
};

在第 2,300 次调用 gl.texImage2D() 之后，WebGL 抛出一个 INVALID_VALUE 错误，然后页面就崩溃了（Chrome 的“Aw, Snap!”）。

我通过调用这个来破坏纹理：

Texture.prototype.destroy = function() {
  gl.deleteTexture(this.id);
  this.id = null;
};

我可以在一页会话中加载的纹理数量是否有限制？我只需要在内存中保留大约 200 个，其他的我只是在使用后销毁。是不是 WebGL 在我销毁纹理后没有释放内存？

并且为了澄清这不是图像本身的问题，如果我只是多次加载相同的图像，也会发生此错误。

我正在最新的 Chrome Canary 上对其进行测试。

4

1 回答 1

1

我发现了问题。它与 WebGL 无关。问题是加载图像时出现内存泄漏。在我完成它们之后，我将纹理设置为null，但不是Image对象。只需img = null在我完成它们后添加即可解决问题，Chrome 不再崩溃。

令人困惑的是，Chrome 在尝试加载图像时没有抛出错误，并且onload回调被调用得很好，但是在尝试使用该图像时它会崩溃。我将提交一份关于 Chromium 的错误报告，因为我认为这不是正确的行为（当无法加载图像时应该抛出一些其他错误）。

于 2013-11-05T09:00:54.263 回答