WebGL2 compressedTexSubImage2D超出范围错误求永久解决方法

错误信息 #

RangeError: 无法在'WebGl2RenderingContext'上执行'compressedTexSubImage2D'：ArrayBuffer/ArrayBufferView大小超出支持范围

问题背景 #

开发多人赌场扑克游戏时，初始玩4轮触发该错误；缩小/压缩纹理后，错误延迟到6-7轮出现，仅实现延迟效果未根治。已尝试手动缩小纹理最大尺寸、更改纹理压缩类型，效果有限。

核心原因 #

该错误本质是WebGL 2上下文处理纹理时，传入的ArrayBuffer/ArrayBufferView数据大小超过GPU或浏览器支持的单纹理数据上限，且游戏轮次增加时，纹理资源未被正确释放导致内存累积，最终触发阈值。

针对性修复方案 #

1. 严格管理纹理生命周期 #

• 每轮扑克结束后，主动销毁不再使用的纹理对象，避免内存累积：

  function disposeTexture(gl, texture) {
    gl.deleteTexture(texture);
    texture = null; // 解除引用，帮助垃圾回收
  }
  

• 采用按需加载+即时销毁模式，不全局缓存大量临时纹理，每轮结束清空当前轮次的纹理资源。

2. 控制单纹理数据尺寸 #

• 提前获取GPU支持的最大压缩纹理尺寸，确保纹理数据不超限：

  const maxCompressedTexSize = gl.getParameter(gl.MAX_COMPRESSED_TEXTURE_SIZE);
  console.log("GPU支持的最大压缩纹理尺寸：", maxCompressedTexSize);
  

• 对超尺寸纹理，拆分成分块纹理集（Texture Atlas），避免单纹理数据过载。

3. 优化纹理更新逻辑 #

• 避免频繁调用compressedTexSubImage2D更新大纹理，改用帧缓冲对象（FBO）批量更新：

  // 用FBO批量更新纹理示例
  const fbo = gl.createFramebuffer();
  gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, targetTexture, 0);
  // 渲染内容到FBO
  // ...
  // 解绑FBO完成更新
  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
  

4. 排查内存泄漏 #

• 用浏览器DevTools的Memory面板录制内存快照，对比每轮游戏前后的纹理对象数量，定位未释放资源。
• 检查是否存在闭包引用纹理对象，导致垃圾回收无法回收的情况。

额外验证 #

• 在不同浏览器、设备上测试，排查是否为特定GPU驱动限制问题；针对低性能设备做降级处理（如禁用纹理压缩，改用普通RGBA纹理）。

内容的提问来源于stack exchange，提问作者Narendra Kumar jha