我正在使用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]是黑色的,这是正确的。有人知道为什么会这样吗?并可能是一种解决方案。谢谢:)
编辑:着色器代码:
<script id="vshader" type="x-shader/x-vertex">
uniform mat4 u_matrix;
attribute vec4 a_vertex;
attribute float a_pointSize;
attribute vec4 a_color;
varying vec4 v_color;
void main() {
gl_PointSize = a_pointSize;
gl_Position = u_matrix * a_vertex;
v_color = a_color;
}
</script>
<script id="fshader" type="x-shader/x-fragment">
precision mediump float;
varying vec4 v_color;
void main() {
float border = 0.05;
float radius = 0.5;
vec4 color0 = vec4(0.0, 0.0, 0.0, 0.0);
vec4 color1 = vec4(v_color[0], v_color[1], v_color[2], 0.9);
vec2 m = gl_PointCoord.xy - vec2(0.5, 0.5);
float dist = radius - sqrt(m.x * m.x + m.y * m.y);
float t = 0.0;
if (dist > border)
t = 1.0;
else if (dist > 0.0)
t = dist / border;
gl_FragColor = mix(color0, color1, t);
}
</script>
很明显,片段着色器正在生成不同的颜色。它绘制圆并在(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;
}