WebGL中gl.readPixels()能否从RGBA转换为仅保留红色通道？

WebGL确实没有OpenGL的glPixelTransfer()接口，但可以通过以下几种方式实现仅保留红色通道的需求，分版本说明：

WebGL 2.0：直接读取红色通道 #

WebGL 2.0原生支持GL_RED作为gl.readPixels()的格式参数，直接调用即可提取红色通道数据，每个像素对应一个字节的红色分量：

const width = gl.drawingBufferWidth;
const height = gl.drawingBufferHeight;
const redData = new Uint8Array(width * height);

// 读取红色通道
gl.readPixels(0, 0, width, height, gl.RED, gl.UNSIGNED_BYTE, redData);

WebGL 1.0：两种替代方案 #

WebGL 1.0不支持GL_RED格式，可选择以下两种方案：

1. GPU端预处理（性能优先） #

在读取帧缓冲前，先通过着色器将原帧缓冲内容转换为仅保留红色通道的纹理，再读取该纹理：

• 创建临时帧缓冲，绑定一个2D纹理作为颜色附件；
• 编写片段着色器，仅输出红色通道：

precision mediump float;
varying vec2 v_texCoord;
uniform sampler2D u_sourceTex;

void main() {
    vec4 srcColor = texture2D(u_sourceTex, v_texCoord);
    // 仅保留红色通道，其余通道设为0（也可将红色复制到所有通道，简化后续读取）
    gl_FragColor = vec4(srcColor.r, 0.0, 0.0, 1.0);
}

• 将原帧缓冲的纹理作为输入，渲染到临时帧缓冲；
• 最后读取临时帧缓冲的内容，此时用gl.RGBA或gl.RGB格式读取后，提取每个像素的第一个分量即可。

2. CPU端后处理（实现简单） #

先读取完整的RGBA数据，再遍历数组提取红色通道：

const width = gl.drawingBufferWidth;
const height = gl.drawingBufferHeight;
const rgbaData = new Uint8Array(width * height * 4);
const redData = new Uint8Array(width * height);

// 读取完整RGBA数据
gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, rgbaData);

// 提取红色通道
for (let i = 0; i < rgbaData.length; i += 4) {
    redData[i / 4] = rgbaData[i];
}

这种方法无需额外GPU操作，但大分辨率场景下会占用较多CPU资源，适合小数据量场景。

内容的提问来源于stack exchange，提问作者Sébastien Bémelmans