Chrome中WebGL readPixels报错：缓冲区尺寸不足问题咨询

根本原因：像素打包对齐规则 #

WebGL默认采用4字节像素对齐（PACK_ALIGNMENT参数默认值是4），简单说就是readPixels读取每一行像素时，会强制让每行的字节数是4的倍数，不够的话会自动补填充字节。

你遇到的情况里：

• 当宽度是3021时，单通道（RED）每行理论需要3021字节，但对齐后要凑到最近的4的倍数——3024字节
• 总需要的缓冲区大小就是3024 * 2843 = 8607232字节
• 但你只创建了3021 * 2843 = 8588703字节的缓冲区，自然不够用，触发报错
• 而512是4的整数倍，对齐后每行还是512字节，缓冲区大小刚好匹配，所以没问题

两种解决办法 #

方法1：修改对齐规则为1字节 #

在调用readPixels前，把对齐方式改成1字节，这样就不会有额外的填充字节，缓冲区用width*height就够了：

// 设置1字节对齐
gl.pixelStorei(gl.PACK_ALIGNMENT, 1);
gl.readPixels(0, 0, this._width, this._height, gl.RED, gl.UNSIGNED_BYTE, buffer);
// 用完建议改回默认4字节，避免影响其他WebGL操作
gl.pixelStorei(gl.PACK_ALIGNMENT, 4);

方法2：计算对齐后的缓冲区大小 #

如果不想改对齐规则，就按实际需要的大小创建缓冲区：

// 计算对齐后的每行字节数
const alignedRowBytes = Math.ceil(this._width / 4) * 4;
// 创建足够大的缓冲区
const buffer = new Uint8Array(alignedRowBytes * this._height);
gl.readPixels(0, 0, this._width, this._height, gl.RED, gl.UNSIGNED_BYTE, buffer);
// 后续如果需要纯有效数据，可以逐行截取前width个字节

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