如何在WebGL画布中修改单个像素？

你好！我明白你的困惑——WebGL和2D Canvas的工作方式确实差得挺多，2D里直接改像素数组的爽快感在WebGL里没有直接对应的路子，因为WebGL是靠渲染管线吃饭的，画布内容是渲染操作的输出结果，不是一个能直接编辑的像素缓冲区。所以你确实得通过绘制来更新像素，但我们可以把这个过程简化到极致，不用你之前代码里那些复杂的VBO操作（而且你之前的代码还缺了关键的着色器部分，这也是它没生效的原因）。

为什么不能直接修改底层缓冲区？ #

WebGL的画布对应的是帧缓冲区，它是渲染管线最终输出的地方，没有提供直接编辑帧缓冲区像素的API——帧缓冲区的内容是由顶点着色器、片段着色器等渲染步骤生成的，想要修改它，必须通过渲染流程来写入数据，而不是直接修改某个数组。

正确的修改单个像素的方法 #

要把修改后的像素值放回画布，你需要一套最基础的WebGL渲染环境（简单的着色器），然后绘制一个1像素大小的点到目标位置。下面是完整的可运行示例：

首先，我们需要创建最基础的着色器（WebGL必须有着色器才能进行任何绘制操作）：

// 顶点着色器：把像素坐标转成WebGL能识别的标准化设备坐标
const vertexShaderSource = `
attribute vec2 a_position;
uniform vec2 u_resolution;
void main() {
  // 将像素坐标（比如98,122）转换为0-1范围的坐标
  vec2 zeroToOne = a_position / u_resolution;
  // 再转换为-1到1的标准化设备坐标
  vec2 zeroToTwo = zeroToOne * 2.0;
  vec2 clipSpace = zeroToTwo - 1.0;
  // WebGL的Y轴是从下到上的，和Canvas的Y轴（从上到下）相反，所以翻转Y
  gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
  // 设置点的大小为1像素，确保只修改目标位置
  gl_PointSize = 1.0;
}
`;

// 片段着色器：输出我们修改后的颜色
const fragmentShaderSource = `
precision mediump float;
uniform vec4 u_color;
void main() {
  gl_FragColor = u_color;
}
`;

然后是整合了你原有逻辑的JS代码：

const canvas = document.getElementById('your-canvas-id'); // 替换成你的canvas元素
const gl = canvas.getContext('webgl');

// 工具函数：创建并编译着色器
function createShader(gl, type, source) {
  const shader = gl.createShader(type);
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    console.error('着色器编译失败:', gl.getShaderInfoLog(shader));
    gl.deleteShader(shader);
    return null;
  }
  return shader;
}

// 工具函数：创建并链接着色器程序
function createProgram(gl, vertexShader, fragmentShader) {
  const program = gl.createProgram();
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);
  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
    console.error('程序链接失败:', gl.getProgramInfoLog(program));
    gl.deleteProgram(program);
    return null;
  }
  return program;
}

// 初始化着色器程序
const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
const program = createProgram(gl, vertexShader, fragmentShader);
gl.useProgram(program);

// 获取着色器中的属性和uniform变量位置
const positionAttribLocation = gl.getAttribLocation(program, 'a_position');
const resolutionUniformLocation = gl.getUniformLocation(program, 'u_resolution');
const colorUniformLocation = gl.getUniformLocation(program, 'u_color');

// 告诉WebGL画布的分辨率，用于坐标转换
gl.uniform2f(resolutionUniformLocation, canvas.width, canvas.height);

// 启用顶点属性
gl.enableVertexAttribArray(positionAttribLocation);

// --- 你的原有逻辑：读取像素并修改 ---
const targetX = 98;
const targetY = 122;
const out = new Uint8Array(4);
// 注意：WebGL的readPixels Y轴是从下到上，所以要转换为Canvas的反向Y
const webglY = canvas.height - targetY;
gl.readPixels(targetX, webglY, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, out);
out[0] = 255; // 修改红色通道为最大值

// --- 将修改后的颜色输出到画布 ---
// WebGL颜色需要0-1范围的浮点数，所以把Uint8的0-255转成0-1
const color = new Float32Array(out.map(v => v / 255));
gl.uniform4fv(colorUniformLocation, color);

// 准备目标位置的坐标数据
const positionData = new Float32Array([targetX, targetY]);
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, positionData, gl.STATIC_DRAW);
gl.vertexAttribPointer(positionAttribLocation, 2, gl.FLOAT, false, 0, 0);

// 绘制1个点，精准修改目标像素
gl.drawArrays(gl.POINTS, 0, 1);

针对你的EDIT2：在toDataURL/convertToBlob前修改画布 #

如果你的场景是在调用toDataURL或convertToBlob前修改像素，还有一种更直接的方法（适合画布尺寸不大的情况）：

1. 用readPixels读取整个画布的像素数据
2. 直接修改数组中对应的像素位置（计算方式：index = (targetY * canvas.width + targetX) * 4，然后修改index到index+3的RGBA值）
3. 创建一个纹理，把修改后的像素数据上传到纹理
4. 绘制一个覆盖整个画布的四边形，使用这个纹理作为输入
5. 现在画布的内容就是修改后的，你可以正常调用toDataURL或convertToBlob

这种方法的好处是不用处理单个点的渲染，适合批量修改或整个画布的修改。

总结 #

WebGL没有2D Canvas那样的putImageData，必须通过渲染流程来更新画布内容，但你可以用非常简单的着色器和绘制操作来实现单个像素的修改，不需要复杂的设置。关键是要理解WebGL的渲染管线逻辑，它和2D Canvas的即时模式绘图是完全不同的设计思路。

备注：内容来源于stack exchange，提问作者Andreas Toresäter