眼眸繁星
2022-06-16 17:09:15
我正在使用 WebGL 在傳單地圖上生成點(diǎn)。根據(jù)數(shù)據(jù)的屬性繪制三種顏色:紅色、橙色和綠色。(顏色是浮動(dòng)的,即 0.0 -> 1.0)被推送到數(shù)組中: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這個(gè)數(shù)組被傳遞給我的 webgl 繪圖函數(shù),設(shè)置頂點(diǎn)和著色器顏色的代碼的關(guān)鍵部分如下: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緩沖區(qū)在渲染之前被調(diào)用gl.clearColor(0, 0, 0, 0);gl.clear(this.gl.COLOR_BUFFER_BIT);這些點(diǎn)都繪制在正確的位置和正確的顏色上。最終目標(biāo)是記錄用戶點(diǎn)擊了哪個(gè)點(diǎn)。當(dāng)用戶單擊一個(gè)點(diǎn)時(shí),將調(diào)用此代碼。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);}這就是問(wèn)題所在,例如,如果我單擊一個(gè)紅點(diǎn),我會(huì)得到輸出:Uint8Array(4) [229, 0, 0, 207]橙子:Uint8Array(4) [229, 154, 0, 207]綠色的:Uint8Array(4) [0, 229, 0, 207]這些大致是正確的值,但我將 alpha(通道 4)設(shè)置為 0,紅色應(yīng)該是 255、0、0、0 橙色 255、165、0、0 和綠色 0、255、0、0。我試圖返回一個(gè)Float32Array從readPixels但得到INVALID_ENUM: readPixels: invalid type一個(gè)gl.FLOAT。也是我點(diǎn)擊沒(méi)有點(diǎn)的地方,我得到 [0, 0, 0, 0] 是黑色的,這是正確的。有人知道為什么會(huì)這樣嗎?并且可能是一個(gè)解決方案。謝謝 :)
1 回答

繁花如伊
TA貢獻(xiàn)2012條經(jīng)驗(yàn) 獲得超12個(gè)贊
很明顯,片段著色器正在生成不同的顏色。它正在繪制圓圈并且在 (r, g, b, 0.9) 和 (0, 0, 0, 0) 之間混合
如果您想獲得顏色,請(qǐng)將其更改為
precision mediump float;
varying vec4 v_color;
void main() {
gl_FragColor = v_color;
}
或?qū)⑵涓臑闆](méi)有混合
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;
}
添加回答
舉報(bào)
0/150
提交
取消