使用twgl.js创建RG纹理时触发WebGL INVALID_OPERATION错误

问题场景 #

使用twgl.js调用twgl.createTexture创建包含高度、湿度两个分量的RG格式浮点纹理时，持续报错：

WebGL: INVALID_OPERATION: texImage2D: ArrayBufferView not big enough for request

仅使用单通道gl.LUMINANCE格式时功能正常，添加湿度分量后触发错误，尝试过设置UNPACK_ALIGNMENT为1、更换格式为gl.RG32F均无效。

核心原因 #

twgl.js处理TypedArray类型的纹理源数据时，若未明确指定源数据的格式和类型，会默认按8位无符号字节（gl.UNSIGNED_BYTE）计算所需字节数。而你的数据是Float32Array（每个元素4字节）、RG双通道，twgl默认计算的字节数远小于实际数据需求，导致WebGL判定数据不足。

解决步骤 #

修改twgl.createTexture的配置参数，明确指定源数据的格式和类型，与纹理存储的格式、类型保持一致：

修改后的代码 #

this.texture = twgl.createTexture(this.gl, {
    src: this.raw_data,
    width: innerWidth,
    height: innerHeight,
    internalFormat: this.gl.RG32F, // 明确内部纹理为32位浮点RG格式
    format: this.gl.RG, // 纹理对外暴露的格式
    srcFormat: this.gl.RG, // 源数据的格式，必须与format匹配
    type: this.gl.FLOAT, // 纹理存储的数据类型
    srcType: this.gl.FLOAT, // 源数据的类型，必须与type匹配
    // 可选：添加纹理过滤和包裹参数，避免其他潜在问题
    mag: this.gl.LINEAR,
    min: this.gl.LINEAR,
    wrapS: this.gl.CLAMP_TO_EDGE,
    wrapT: this.gl.CLAMP_TO_EDGE
})

关键参数说明 #

• srcFormat：指定源数据的通道格式，这里必须设为gl.RG，与你的双通道数据对应
• srcType：指定源数据的数值类型，这里必须设为gl.FLOAT，与Float32Array匹配
• internalFormat：明确内部纹理存储为gl.RG32F，确保每个通道用32位浮点存储，和你的数据精度一致

额外检查点 #

1. 确认innerWidth和innerHeight是有效的纹理尺寸：部分旧版浏览器要求纹理尺寸为2的幂次，若使用非幂次尺寸，需确保浏览器支持OES_texture_npot扩展
2. 验证raw_data的长度：innerWidth * innerHeight * 2是正确的Float32元素个数，对应总字节数为innerWidth * innerHeight * 2 * 4，与WebGL要求的RG浮点纹理字节数一致

内容的提问来源于stack exchange，提问作者ITDW2