Javascript 如何使用gl.readPixels读取pointsize>；绘制的gl.POINTS；1.

我的目标是在画布上读取一个大点的像素。目前我甚至无法在pointSize=1处绘制像素。这里有一个链接：

代码片段：

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)

---

有什么想法吗？

翻转Y坐标就可以了（注意

-1

，否则你会在视口外阅读）

---

翻转Y坐标就可以了（请注意

-1

，否则您会在视口外阅读）

让我们试试看

const gl=document.querySelector（'canvas'）.getContext（'webgl'）；
常数vs=`
属性向量4位置；
void main（）{
gl_位置=位置；
gl_PointSize=1.0；
}
`;
常数fs=`
精密中泵浮子；
vec4颜色均匀；
void main（）{
gl_FragColor=颜色；
}
`;
常量prg=twgl.createProgram（gl[vs，fs]）；
德国劳埃德船级社使用计划（prg）；
const posLoc=gl.getAttriblLocation（prg，“位置”）；
常量colorLoc=gl.getUniformLocation（prg，“color”）；
函数drawPixel（gl、px、py、颜色）{
//计算剪辑空间中像素的中心
常量clipX=（px+0.5）/gl.canvas.width*2-1；
常数clipY=（py+0.5）/gl.canvas.height*2-1；
gl.vertexAttrib2f（posLoc、clipX、clipY）；
gl.uniform4fv（colorLoc，color）；
总图绘制阵列（总图点，0,1）；
}
功能检查像素（gl、px、py、预期、msg）{
常数像素=新的UINT8阵列（4）；
gl.readPixels（px，py，1，1，gl.RGBA，gl.UNSIGNED_字节，pixel）；
const-actual=Array.from（pixel.map）（v=>v/255）；
让同样的假设成立；
对于（设i=0；相同&&i<4；++i）{
相同=实际[i]==预期[i]；
}
如果（相同）{
log（`pass:${px}，${py}是${actual.join（'，'）}`）；
}否则{
console.error（`fail:${px}，${py}为${actual.join（'，'）}应为${expected.join（'，'）}）；
}
}
绘图像素（gl，0，0，[1，0，0，1]）；
drawPixel（gl，299,0，[0,1,0,1]）；
绘图像素（gl，0，149，[0，0，1，1]）；
drawPixel（gl，299149，[0,1,1,1]）；
检查像素（gl，0，0，[1，0，0，1]）；
检查像素（gl，299,0，[0,1,0,1]）；
检查像素（gl，0，149，[0，0，1，1]）；
检查像素（gl，299149，[0,1,1,1]）
body{背景：#444；}

让我们试试看


const gl=document.querySelector（'canvas'）.getContext（'webgl'）；
常数vs=`
属性向量4位置；
void main（）{
gl_位置=位置；
gl_PointSize=1.0；
}
`;
常数fs=`
精密中泵浮子；
vec4颜色均匀；
void main（）{
gl_FragColor=颜色；
}
`;
常量prg=twgl.createProgram（gl[vs，fs]）；
德国劳埃德船级社使用计划（prg）；
const posLoc=gl.getAttriblLocation（prg，“位置”）；
常量colorLoc=gl.getUniformLocation（prg，“color”）；
函数drawPixel（gl、px、py、颜色）{
//计算剪辑空间中像素的中心
常量clipX=（px+0.5）/gl.canvas.width*2-1；
常数clipY=（py+0.5）/gl.canvas.height*2-1；
gl.vertexAttrib2f（posLoc、clipX、clipY）；
gl.uniform4fv（colorLoc，color）；
总图绘制阵列（总图点，0,1）；
}
功能检查像素（gl、px、py、预期、msg）{
常数像素=新的UINT8阵列（4）；
gl.readPixels（px，py，1，1，gl.RGBA，gl.UNSIGNED_字节，pixel）；
const-actual=Array.from（pixel.map）（v=>v/255）；
让同样的假设成立；
对于（设i=0；相同&&i<4；++i）{
相同=实际[i]==预期[i]；
}
如果（相同）{
log（`pass:${px}，${py}是${actual.join（'，'）}`）；
}否则{
console.error（`fail:${px}，${py}为${actual.join（'，'）}应为${expected.join（'，'）}）；
}
}
绘图像素（gl，0，0，[1，0，0，1]）；
drawPixel（gl，299,0，[0,1,0,1]）；
绘图像素（gl，0，149，[0，0，1，1]）；
drawPixel（gl，299149，[0,1,1,1]）；
检查像素（gl，0，0，[1，0，0，1]）；
检查像素（gl，299,0，[0,1,0,1]）；
检查像素（gl，0，149，[0，0，1，1]）；
检查像素（gl，299149，[0,1,1,1]）
body{背景：#444；}


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