我可以在一个页面会话中加载的WebGL纹理数量是否有限制?

时间:2013-10-04 19:09:54

标签: javascript google-chrome memory-leaks textures webgl

我正在使用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上测试它。

1 个答案:

答案 0 :(得分:1)

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

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