WebGL读取PNG纹理像素颜色与Python结果不一致问题排查

我尝试将一张PNG纹理加载到WebGL中并读取其像素颜色（最终用于着色器）。在Python中读取坐标(70,70)的像素时，得到预期的(255,0,0,255)，但在WebGL中读取该位置像素却得到(255,38,0,255)。请问我忽略了什么？

相关代码 #

Python代码 #

import requests
from io import BytesIO
from PIL import Image

response = requests.get('https://i.sstatic.net/90BwS.png')
im = Image.open(BytesIO(response.content))
pixels = im.load()
print(pixels[70,70])

WebGL读取像素的JavaScript代码 #

const canvas = document.createElement('canvas');
document.body.appendChild(canvas);

const gl = canvas.getContext("webgl", {"antialias": true});

function loadTexture(){
  const texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);

  const level = 0;
  const internalFormat = gl.RGBA;
  const width = 1;
  const height = 1;
  const border = 0;
  const srcFormat = gl.RGBA;
  const srcType = gl.UNSIGNED_BYTE;
  const pixel = new Uint8Array([0, 0, 255, 255]);  // 不透明蓝色
  gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
                width, height, border, srcFormat, srcType,
                pixel);

  const image = new Image();
  image.crossOrigin = "";  // 或"anonymous"，效果相同
  image.onload = () => {
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
                  srcFormat, srcType, image);

    let width = 1;
    let height = 1;
    let x = 70;
    let y = 70;
    var fb = gl.createFramebuffer();
    gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
    if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) == gl.FRAMEBUFFER_COMPLETE) {
      var pixels = new Uint8Array(width * height * 4);
      gl.readPixels(x, y, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
      document.getElementById("test").textContent = pixels;
    }
  };
  image.src = 'https://i.sstatic.net/90BwS.png';
}

loadTexture();

问题原因及解决方法 #

1. Y轴坐标方向不匹配 #

图片的坐标系Y轴原点在左上角，向下为正；而WebGL的纹理/帧缓冲区坐标系Y轴原点在左下角，向上为正。你传入的y=70在WebGL中对应图片从下往上数第70行，和Python中从上往下数的第70行不是同一位置，导致读取到错误像素。

解决：计算正确的Y坐标，公式为正确Y = 图片高度 - 1 - 原Y值，修改代码中的Y值：

let y = image.height - 1 - 70;

2. 未设置纹理过滤参数 #

WebGL默认要求纹理尺寸为2的幂次，且默认过滤方式可能导致像素插值。即使图片尺寸符合要求，显式设置过滤参数能避免采样偏差。

解决：在加载图片到纹理后添加以下参数设置：

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

gl.NEAREST过滤会直接取最接近的像素，避免插值导致的颜色偏移。

3. 视口尺寸不匹配 #

读取像素时，WebGL的视口尺寸需要与纹理尺寸一致，否则会导致坐标映射错误。

解决：绑定帧缓冲区后设置视口：

gl.viewport(0, 0, image.width, image.height);

修改后的核心代码片段 #

image.onload = () => {
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
                srcFormat, srcType, image);
  
  // 设置纹理过滤参数
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

  let width = 1;
  let height = 1;
  let x = 70;
  // 修正Y轴坐标
  let y = image.height - 1 - 70;
  var fb = gl.createFramebuffer();
  gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
  if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) == gl.FRAMEBUFFER_COMPLETE) {
    // 设置视口与纹理尺寸一致
    gl.viewport(0, 0, image.width, image.height);
    var pixels = new Uint8Array(width * height * 4);
    gl.readPixels(x, y, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
    document.getElementById("test").textContent = pixels;
  }
};

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