使用twgl和framebuffers会导致GPU中的内存泄漏并使浏览器崩溃（已附加plunkr）

Question

我正在使用twgl.js库在webgl中编写直方图应用程序。 我已经成功实现了。但这很容易使浏览器崩溃。

我在https://plnkr.co/edit/hK9YXyT0Cj9BEUowYiKVSubH?p=info处添加了插件。

大多数渲染部分位于renderer.js中。

请在您的本地计算机上浏览jpeg，并在启用GPU内存后使用SHIFT + ESC监视chrome GPU内存。 加载图像后，它将计算图像中该区域的直方图，并会自动缩小/放大，并且每次缩放都会增加内存。

问题是仅使用单个图像就使GPU崩溃。 为了尽快解决问题，我添加了setInterval，每100毫秒调用一次setInterval以重新渲染图像并计算直方图。

代码：

`

planingsOfEmployee

}
`

Answer 1

代码通过调用twgl.createFramebufferInfo在每个间隔分配多个大纹理，因此代码最终用尽了内存。

如果可能的话，您应该在初始化时分配纹理。换句话说，在初始化时调用twgl.createFrameBufferInfo，如果您需要它们具有不同的大小，请稍后再调用twgl.resizeFramebufferInfo来更改其大小。

否则，由您决定分配它们

function freeFramebufferInfoResources(gl, fbi) {
  for (const attachment of fbi.attachments) {
    if (attachment instanceof WebGLTexture) {
      gl.deleteTexture(attachment);
    } else {
      gl.deleteRenderbuffer(attachment);
    }
  }
  gl.deleteFramebuffer(fbi.framebuffer);
}

关于twgl不包含此功能的原因，是因为twgl只是WebGL的助手。它创建的数据可以在您的应用需要使用该数据的任何时候使用。不知道是否要跨帧缓冲区共享附件（常见），因此它无法为您管理资源。这取决于你。