WebGL2渲染高比特深度P3纹理至屏幕的实现问题

嘿，我帮你分析下这个问题的核心，其实主要是两个关键点：纹理上传的参数匹配和WebGL上下文的色域配置，咱们一步步来解决。

1. 解决texImage2D的INVALID_ENUM错误 #

你之前用RGBA16F作为texFormat是不对的——WebGL2中，texImage2D的format参数需要匹配你上传的源数据格式，而RGBA16F是浮点纹理的内部格式，不是源数据的格式。

对于16bit PNG来说，它的每个通道是16位无符号整数，所以正确的上传方式应该是：

• 先用createImageBitmap加载图像，指定获取16位的P3色域数据（这样能保留原始的10位色彩信息，因为10位是存在16位容器里的）
• 然后调用texImage2D时，使用format: gl.RGBA、type: gl.UNSIGNED_SHORT，和internalFormat: gl.RGBA16F搭配

修改后的加载代码大概是这样：

const texture = gl.createTexture();
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);

// 设置纹理过滤参数（先暂时关闭mipmap，避免额外问题）
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
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);

const image = new Image();
image.src = "10bitTest.png";
image.crossOrigin = "anonymous"; // 图片跨域时需要添加这个

image.addEventListener('load', async () => {
  try {
    // 创建16位P3格式的ImageBitmap
    const bitmap = await createImageBitmap(image, {
      colorSpace: 'display-p3',
      pixelFormat: 'uint16'
    });
    
    gl.bindTexture(gl.TEXTURE_2D, texture);
    // 上传纹理：内部格式RGBA16F，源格式RGBA，类型UNSIGNED_SHORT
    gl.texImage2D(
      gl.TEXTURE_2D, 0, gl.RGBA16F, gl.RGBA, gl.UNSIGNED_SHORT, bitmap
    );
  } catch (err) {
    console.error('加载图像失败:', err);
  }
});

2. 配置WebGL2上下文支持P3色域 #

Chrome能直接显示P3测试图，是因为<img>标签默认支持读取图片的色域信息并正确渲染，但WebGL2上下文默认是用sRGB色域的——如果不配置P3，P3颜色中超出sRGB范围的部分会被截断，就会出现你看到的纯红色。

所以创建WebGL2上下文时，一定要指定colorSpace: 'display-p3'：

const canvas = document.getElementById('your-canvas-id');
const gl = canvas.getContext('webgl2', {
  colorSpace: 'display-p3',
  // 可选：关闭不需要的缓冲，部分浏览器需要这个才能启用10位输出
  alpha: false,
  depth: false,
  stencil: false
});

3. 着色器的颜色处理 #

确保你的片元着色器直接输出纹理采样的颜色即可，因为上下文已经配置为P3色域，不需要额外的颜色空间转换：

#version 300 es
precision highp float;

uniform sampler2D u_texture;
in vec2 v_uv;
out vec4 o_fragColor;

void main() {
  o_fragColor = texture(u_texture, v_uv);
}

额外注意点 #

• 不是所有浏览器都支持16bit PNG的createImageBitmap参数，Chrome是支持的，和你测试的环境一致
• 如果要生成mipmap，RGBA16F纹理需要启用EXT_color_buffer_float扩展，否则generateMipmap会失败，建议先测试不生成mipmap的情况，确保纹理正常显示后再处理
• 确认你的显示器确实支持10位P3输出，并且Chrome的显示设置中已经开启了扩展色域（比如Mac的「显示」设置里勾选「显示色域：P3」）

这样调整后，应该就能在WebGL2中正确显示你的10bit P3纹理了，和Chrome显示测试图的效果一致。

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