webgl 读取的像素没有返回正确的值

Question

我正在使用 WebGL 在传单地图上生成点。根据数据的属性绘制三种颜色：红色、橙色和绿色。（颜色是浮动的，即 0.0 -> 1.0）被推送到数组中：

points.push(point.x, point.y, 1, 0, 0, 0); //for red

points.push(point.x, point.y, 1, 0.67, 0, 0); //for orange

points.push(point.x, point.y, 0, 1, 0, 0); // green

这个数组被传递给我的 webgl 绘图函数，设置顶点和着色器颜色的代码的关键部分如下：

let vertArray = new Float32Array(verts);

let fsize = vertArray.BYTES_PER_ELEMENT;

this.gl.bindBuffer(this.gl.ARRAY_BUFFER, vertBuffer);

this.gl.bufferData(this.gl.ARRAY_BUFFER, vertArray, this.gl.STATIC_DRAW);

this.gl.vertexAttribPointer(vertLoc, 2, this.gl.FLOAT, false, fsize*6, 0); //2 vertices & 4 colors

this.gl.enableVertexAttribArray(vertLoc);

      // -- offset for color buffer

this.gl.vertexAttribPointer(colorLoc, 4, this.gl.FLOAT, false, fsize*6, fsize*2); //offset ignore 2 vertices

this.gl.enableVertexAttribArray(colorLoc);

clearColor和clear缓冲区在渲染之前被调用

gl.clearColor(0, 0, 0, 0);

gl.clear(this.gl.COLOR_BUFFER_BIT);

这些点都绘制在正确的位置和正确的颜色上。最终目标是记录用户点击了哪个点。当用户单击一个点时，将调用此代码。

if (mouseclick !== null) {

    let pixel = new Uint8Array(4);

    this.gl.readPixels(mouseclick.layerX, this.canvas.height - mouseclick.layerY, 1, 1, this.gl.RGBA, 

    this.gl.UNSIGNED_BYTE, pixel);

}

这就是问题所在，例如，如果我单击一个红点，我会得到输出：

Uint8Array(4) [229, 0, 0, 207]

橙子：

Uint8Array(4) [229, 154, 0, 207]

绿色的：

Uint8Array(4) [0, 229, 0, 207]

这些大致是正确的值，但我将 alpha（通道 4）设置为 0，红色应该是 255、0、0、0 橙色 255、165、0、0 和绿色 0、255、0、0。我试图返回一个Float32Array从readPixels但得到INVALID_ENUM: readPixels: invalid type一个gl.FLOAT。也是我点击没有点的地方，我得到 [0, 0, 0, 0] 是黑色的，这是正确的。有人知道为什么会这样吗？并且可能是一个解决方案。谢谢 ：）

Answer 1

很明显，片段着色器正在生成不同的颜色。它正在绘制圆圈并且在 (r, g, b, 0.9) 和 (0, 0, 0, 0) 之间混合如果您想获得颜色，请将其更改为precision mediump float;varying vec4 v_color;void main() {&nbsp; &nbsp;gl_FragColor = v_color;}或将其更改为没有混合precision mediump float;varying vec4 v_color;void main() {&nbsp; &nbsp; float radius = 0.5;&nbsp; &nbsp; vec2 m = gl_PointCoord.xy - vec2(0.5, 0.5);&nbsp; &nbsp; float dist = radius - sqrt(m.x * m.x + m.y * m.y);&nbsp; &nbsp; gl_FragColor = dist < 0.0 ? vec4(0) : v_color;}