WebGPU加载10-bit HDR AVIF至rgba16float纹理失败求助

核心思路：绕过浏览器自动钳制，全程保留HDR数据链路 #

浏览器默认的图像解码/上传流程会自动对HDR内容做色调映射或数值钳制，要完整保留超过1.0的亮度值，必须从解码到纹理上传的每一步都禁用自动色彩转换，并指定浮点格式输出。

方案1：用WebCodecs配置HDR友好的解码参数 #

直接通过ImageDecoder解码AVIF时，明确指定浮点像素格式和HDR色彩空间，避免数据被钳制到[0,1]范围：

async function decodeHdrAvif(blob) {
  const decoder = new ImageDecoder({
    data: blob,
    type: 'image/avif',
    options: {
      colorSpaceConversion: 'none', // 禁用自动色彩转换
      pixelFormat: 'rgba16float',   // 指定输出为RGBA16浮点格式
      colorSpace: 'extended-display-p3' // 匹配AVIF的HDR色彩空间
    }
  });

  const frame = await decoder.decode();
  const imageBitmap = await createImageBitmap(frame.image, {
    colorSpaceConversion: 'none'
  });
  return imageBitmap;
}

注意：部分浏览器需开启实验性Web平台特性（如Chrome的chrome://flags/#enable-experimental-web-platform-features）才能支持rgba16float解码输出。

方案2：正确配置WebGPU纹理上传参数 #

使用copyExternalImageToTexture时，确保源与目标的色彩空间、格式完全匹配，避免转换过程中丢失HDR数据：

// 创建rgba16float格式的WebGPU纹理
const texture = device.createTexture({
  size: [imageBitmap.width, imageBitmap.height],
  format: 'rgba16float',
  usage: GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING
});

// 上传ImageBitmap到纹理
device.queue.copyExternalImageToTexture(
  {
    source: imageBitmap,
    colorSpace: 'extended-display-p3' // 匹配解码时的色彩空间
  },
  {
    texture: texture,
    format: 'rgba16float'
  },
  [imageBitmap.width, imageBitmap.height]
);

方案3：libavif WASM直接解码原始数据（兼容性兜底） #

如果WebCodecs存在兼容性问题，可使用libavif的WASM版本手动解码HDR AVIF：

1. 引入libavif WASM库，解码得到10-bit YUV原始数据；
2. 根据AVIF元数据中的传递函数（PQ/HLG），将10-bit编码值转换为线性浮点值（无需钳制）；
3. 将YUV转成RGBA浮点数据，通过device.queue.writeTexture直接写入rgba16float纹理。

这种方式完全绕过浏览器自动色彩管理，100%保留HDR信息，且文件体积维持AVIF的压缩优势，WASM解码性能远高于纯JS的Float32转Float16循环。

常见问题排查 #

• 解码后出现红色tint：检查pixelFormat是否误设为8位格式（如rgba8），或色彩空间配置不匹配；
• 纹理仍无超过1.0的数值：确认AVIF本身包含HDR内容（可通过工具查看元数据峰值亮度），且未开启colorSpaceConversion: 'default'；
• 浏览器兼容：Chrome 113+、Edge 113+对HDR AVIF的WebCodecs支持较好，Firefox需等待后续版本更新。

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