javascript - 如何使用 gl.readPixels 读取点大小 > 1 的绘制 gl.POINTS？

Question

我的目标是在画布上读取一个大点的像素。目前我什至无法在 pointSize = 1 处绘制像素。这是一个链接：https ://codepen.io/issabln/pen/LYEGWyO

代码片段：

function drawOneBlackPixel( gl, x, y ) {
    // Fills the buffer with a single point?
    gl.bufferData( gl.ARRAY_BUFFER, new Float32Array([
      x,     y]), gl.STATIC_DRAW );

    // Draw one point.
    gl.drawArrays( gl.POINTS, 0, 1 );
}

gl.clearColor(1.0, 1.0, 1.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

// These tests are supposed to be x,y coordinates from top left.
drawOneBlackPixel( gl, 1, 0 );

const pix = new Uint8Array(4);
gl.readPixels(1, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pix);
console.log(pix)

任何想法？

标签： javascriptglslwebgl

Answer 1

翻转 Y 坐标就可以了（请注意，-1否则您会在视口之外阅读）

gl.readPixels(1, gl.drawingBufferHeight-1, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pix);