如何获取索引PNG的颜色索引？WebGL调色板交换实现问询

可以将索引PNG加载为代表颜色索引的整数数组，以下是具体实现方案：

1. 提取PNG的索引数据 #

• 用FileReader读取PNG文件为ArrayBuffer，借助纯JS的PNG解析库（如pngjs）直接解析文件结构，提取IDAT块中的像素索引值。解析后会得到一个Uint8Array类型的数组，每个元素对应0-255的调色板索引。
• 若不想依赖第三方库，也可以自行实现基础PNG解析逻辑，重点读取PLTE调色板块和IDAT像素索引块。

2. 在WebGL中传入并使用索引数组 #

• 将索引数组作为纹理数据传入WebGL：创建LUMINANCE格式（WebGL1）或RED格式（WebGL2）的纹理，把索引数组传入。采样时得到的颜色通道值就是原始索引。

  // 假设已获取索引数组indexData（Uint8Array）、图片宽width、高height
  const gl = canvas.getContext('webgl');
  const indexTexture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, indexTexture);
  // WebGL1用LUMINANCE，WebGL2用RED
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, width, height, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE, indexData);
  // 必须设置为NEAREST过滤，避免索引值被插值模糊
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  

• 着色器中采样索引并实现调色板交换：

  // 顶点着色器
  attribute vec2 a_position;
  varying vec2 v_uv;
  void main() {
    v_uv = a_position * 0.5 + 0.5;
    gl_Position = vec4(a_position, 0.0, 1.0);
  }
  
  // 片段着色器
  precision mediump float;
  varying vec2 v_uv;
  uniform sampler2D u_indexTex;
  uniform sampler2D u_paletteTex; // 自定义调色板纹理（横向排列256个颜色像素）
  
  void main() {
    // 将采样得到的浮点值转换为整数索引
    float index = texture2D(u_indexTex, v_uv).r * 255.0;
    // 计算调色板纹理的UV坐标
    vec2 paletteUV = vec2((index + 0.5) / 256.0, 0.5);
    // 采样调色板得到最终颜色
    gl_FragColor = texture2D(u_paletteTex, paletteUV);
  }
  

3. 补充说明 #

• 若要使用PNG自带的调色板，解析时可同时提取PLTE块中的RGB数据，转换成纹理作为默认调色板传入。
• 确保索引纹理的尺寸与原始图片一致，避免采样坐标错位。

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