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

Question

我正在使用 WebGL 在传单地图上生成点。根据数据的属性绘制三种颜色：红色、橙色和绿色。（颜色是浮动的，即 0.0 -> 1.0）被推送到数组中：points.push(point.x, point.y, 1, 0, 0, 0); //for redpoints.push(point.x, point.y, 1, 0.67, 0, 0); //for orangepoints.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 colorsthis.gl.enableVertexAttribArray(vertLoc);      // -- offset for color bufferthis.gl.vertexAttribPointer(colorLoc, 4, this.gl.FLOAT, false, fsize*6, fsize*2); //offset ignore 2 verticesthis.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() {

   gl_FragColor = v_color;

}

或将其更改为没有混合

precision mediump float;

varying vec4 v_color;

void main() {

    float radius = 0.5;

    vec2 m = gl_PointCoord.xy - vec2(0.5, 0.5);

    float dist = radius - sqrt(m.x * m.x + m.y * m.y);

    gl_FragColor = dist < 0.0 ? vec4(0) : v_color;

}