Three.js中PNG sRGB颜色渲染异常问题咨询

问题根源 #

你遇到的颜色偏差核心原因是：Canvas导出的PNG缺少sRGB ICC标识，导致Three.js默认将其当作线性颜色空间处理。0和255这类极端色值在两种空间下差异极小，但中间色（如rgb(0,128,255)）会出现明显偏差。

方案一：给导出的PNG添加sRGB标识 #

canvas.toDataURL()本身不支持直接嵌入sRGB元数据，需要通过PNG处理工具手动添加sRGB chunk。以轻量库pngjs为例：

1. 将Canvas转为Blob后解析，添加sRGB标识再重新生成资源：

import { PNG } from 'pngjs';

// 把Canvas转成Blob
temCanvas.toBlob(async (blob) => {
  const reader = new FileReader();
  reader.onload = function(e) {
    const pngData = PNG.sync.read(new Uint8Array(e.target.result));
    
    // 添加sRGB chunk：类型码为0x73524742，值0x01代表标准sRGB
    pngData.chunks.push({
      name: 'sRGB',
      data: new Uint8Array([0x00, 0x00, 0x00, 0x01])
    });
    
    // 重新生成带sRGB标识的PNG，转为可用于Three.js的资源地址
    const newPngBuffer = PNG.sync.write(pngData);
    const newTex1 = URL.createObjectURL(new Blob([newPngBuffer], { type: 'image/png' }));
    
    // 后续用该地址创建纹理
    const texture = new THREE.TextureLoader().load(newTex1);
    texture.encoding = THREE.sRGBEncoding;
    // ... 材质相关设置
  };
  reader.readAsArrayBuffer(blob);
}, 'image/png');

方案二：通过Three.js纹理/材质设置修正颜色 #

如果不想修改PNG文件，可直接在Three.js中强制指定纹理的颜色空间，跳过PNG标识检测：

1. 加载纹理时明确设置编码格式：

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load(newTex1);
// 强制将纹理按sRGB空间解析
texture.encoding = THREE.sRGBEncoding;
// Three.js r152及以上版本，可补充设置colorSpace
// texture.colorSpace = THREE.SRGBColorSpace;

2. 匹配材质的颜色空间设置（以MeshStandardMaterial为例）：

const material = new THREE.MeshStandardMaterial({
  map: texture,
  // r152+版本需设置材质颜色空间
  // colorSpace: THREE.SRGBColorSpace
});

注意：若你的Three.js版本低于r152，材质无colorSpace属性，仅需保证纹理encoding设为sRGBEncoding，同时保留renderer.outputEncoding = THREE.sRGBEncoding的原有设置即可。

额外提示 #

你给Canvas 2D上下文设置colorSpace: "srgb"的操作是正确的，这保证了SVG绘制到Canvas时颜色处于sRGB空间，只需解决后续导出或Three.js识别的问题即可。

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