gl.readPixels获取鼠标点击点像素值全为0的问题求助

我实现了一个彩色小圆逐渐生长的动画，希望获取鼠标点击位置的RGB值。尝试了[-1,1]归一化坐标以及原始像素坐标两种方式，但调用gl.readPixels后返回的所有像素值均为0。以下是相关代码片段：

var VSHADER_SOURCE =
'attribute vec4 a_Position;\n' +
'uniform float u_SizeChange;\n' +
'void main() {\n' +
'  gl_Position.x = u_SizeChange * a_Position.x;\n' +
'  gl_Position.y = u_SizeChange * a_Position.y;\n' +
'  gl_Position.z = u_SizeChange * a_Position.z;\n' +
'  gl_Position.w = 1.0;\n' +
'}\n';

var FSHADER_SOURCE =
'precision mediump float;\n' +
'uniform vec4 u_FragColor;\n' +
'void main() {\n' +
'  gl_FragColor = u_FragColor;\n' +
'}\n';

function main() {
  var canvas = document.getElementById('webgl');
  var gl = getWebGLContext(canvas);
  if (!gl) {
    console.log('Failed to get the rendering context for  WebGL');
    return;
  }

  if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
    console.log('Failed to intialize shaders.');
    return;
  }    
  
  var tick = function() {
    canvas.onmousedown = function(ev){click(ev,canvas,random_location,gl);};
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);   
    draw_circle(gl, 0, 0, disk_radius/400,[1.0,1.0,1.0,1.0]);
    if (game_running==true){requestAnimationFrame(tick, canvas);}      
  };
        
  tick();
}

function click(ev,canvas,random_location,gl) {
  var x = ev.clientX;
  var y = ev.clientY;
  var rect = ev.target.getBoundingClientRect() ;

  x = ((x - rect.left) - canvas.width/2)/(canvas.width/2);
  y = (canvas.height/2 - (y - rect.top))/(canvas.height/2);

  var x = ev.clientX - canvas.offsetLeft;
  var y = ev.clientY - canvas.offsetTop;
  const pixel = new Uint8Array(4);
  gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixel);
  console.log(x,y);
  console.log(pixel);
  
  for (var i=0; i<=random_location.length;i++){
    if (bacteria_alive[i]==false){continue;}
    distance_to_center = cal_distance(x,y,0+disk_radius*Math.sin(random_location[i])/400,0+disk_radius*Math.cos(random_location[i])/400);  

    if (distance_to_center < radius/400){
      bacteria_alive[i]=false;
      break;
    }
  }
}

1. 鼠标Y轴坐标未适配WebGL原点规则 #

WebGL的readPixels方法原点在画布左下角，但浏览器鼠标事件的clientY是从左上角开始计算的，你未对Y轴做翻转处理，导致读取的是画布外或错误区域的像素（对应全黑背景的0值）。

修正后的坐标转换逻辑：

var rect = ev.target.getBoundingClientRect();
// 转换为画布内像素坐标，同时翻转Y轴适配WebGL原点
var x = ev.clientX - rect.left;
var y = canvas.height - (ev.clientY - rect.top);

2. 变量重复赋值覆盖正确坐标 #

你的click函数中先将x转换为归一化坐标，随后又重新赋值为原始偏移坐标，导致之前的转换无效，且未处理Y轴的核心问题。

3. 绘制时机与缓冲区同步问题 #

在tick函数中，每次先执行gl.clear清除画布再绘制图形。如果点击事件触发时，当前帧的绘制还未完成，读取到的就是刚被清除的黑色画布，自然返回全0。

可以在读取前手动触发一次绘制，确保缓冲区是最新的画面：

// 在readPixels前先绘制当前帧内容
gl.clear(gl.COLOR_BUFFER_BIT);
draw_circle(gl, 0, 0, disk_radius/400,[1.0,1.0,1.0,1.0]);
gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixel);

完整修正后的click函数 #

function click(ev, canvas, random_location, gl) {
  var rect = ev.target.getBoundingClientRect();
  // 适配WebGL原点的像素坐标
  var x = ev.clientX - rect.left;
  var y = canvas.height - (ev.clientY - rect.top);

  const pixel = new Uint8Array(4);
  // 确保读取最新绘制的画面
  gl.clear(gl.COLOR_BUFFER_BIT);
  draw_circle(gl, 0, 0, disk_radius/400,[1.0,1.0,1.0,1.0]);
  gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixel);
  
  console.log(x, y);
  console.log(`RGB值: R=${pixel[0]}, G=${pixel[1]}, B=${pixel[2]}`);

  // 原逻辑适配坐标修正
  for (var i = 0; i < random_location.length; i++) {
    if (bacteria_alive[i] === false) continue;
    var circleX = disk_radius * Math.sin(random_location[i]) / 400;
    var circleY = disk_radius * Math.cos(random_location[i]) / 400;
    // 将像素坐标转换为归一化坐标用于距离计算
    var normX = (x / canvas.width) * 2 - 1;
    var normY = (y / canvas.height) * 2 - 1;
    var distance_to_center = cal_distance(normX, normY, circleX, circleY);
    
    if (distance_to_center < radius/400) {
      bacteria_alive[i] = false;
      break;
    }
  }
}

额外注意事项 #

• 确保canvas的实际像素尺寸与显示尺寸一致，避免CSS缩放导致坐标错位：可以设置canvas.width和canvas.height等于其CSS宽高，或用devicePixelRatio适配高清屏。
• 如果小圆是动态生长的，读取时要确保u_SizeChange等uniform变量是当前帧的正确值，否则绘制状态错误会导致读取颜色异常。

内容的提问来源于stack exchange，提问作者Leo