WebGL:INVALID_OPERATION:readPixels:ArrayBufferView 尺寸不够大

WebGL: INVALID_OPERATION: readPixels: ArrayBufferView not large enough for dimensions

基本上我有 200 X 200 像素 canvas,一个 20 X 20 X 20 像素的体素。所以我有 100 个体素。当我在 canvas 上绘制时,我想查看绘制了哪个像素,如果该像素位于其中一个体素内,那么我将显示该体素。

下面的voxelWidthPixel是体素宽度的像素数,voxelHeightPixel是体素高度的像素数。我正在使用一个循环,以便我读取从 (0,0) 到 (20,20) 然后 (0, 20) 到 (20, 40) 然后 (0, 40) 到 (20, 60) 的像素值,最后到 (180, 160) 到 (200, 180) 然后 (180, 180) 到 (200, 200).

for (var i =bottomleft.x, px =0 ; i < topRight.x; i = i + voxelSize, px = px + pixWidthVoxel){
    for (var j = bottomleft.y, py =0 ; j < topRight.y ; j = j + voxelSize, py = py + pixHeightVoxel){

        var pixelValues = new Uint8Array(voxelWidthPixel * voxelHeightPixel * 4);
        gl.readPixels( startPixelX, startPixelY, endPixelX, endPixelY, gl.RGBA, gl.UNSIGNED_BYTE, pixelValues);
    }
}

pixelValues 不应该是大小为 20 * 20 * 4 = 1600 的 arrayBuffer 吗?因为我只读取 (0,0) 到 (20,20),然后是 (0, 20) 到 (20,40),所以从 (0,0) 到 (20,20) 的正方形将包含 400像素。像素值不应该足以获得所有 RGBA 值吗?

gl.readPixels 的第 3 个和第 4 个参数是宽度和高度值。将 endPixelXendPixelX 这两个值替换为 endPixelX-startPixelXendPixelY - startPixelY