颜色管理
+什么是色彩空间？
+ ++ 每一种色彩空间，都是一组经过权衡的设计选择。它们共同目标是： + 在满足精度和显示技术限制的前提下，覆盖尽可能大的颜色范围。 + 在创建 3D 资源或把多个 3D 资源组装进同一场景时， + 理解这些属性及其在不同色彩空间之间的关系非常重要。 +
+ +
+ -
+
- + 色彩原色（Color primaries）：原色（如红、绿、蓝）并非绝对值； + 它们是在有限精度与显示设备能力约束下，从可见光谱中选定的。 + 颜色由各原色的比例来表达。 + +
- + 白点（White point）：大多数色彩空间都会定义： + 当原色满足 R = G = B 时呈现“无色（中性）”。 + 白、灰等中性色的视觉效果依赖人眼感知，而感知又与观察环境相关。 + 因此色彩空间会指定一个“白点”以统一基准。 + sRGB 的白点是 [link:https://en.wikipedia.org/wiki/Illuminant_D65 D65]。 + +
- + 传递函数（Transfer functions）：在确定色域和颜色模型后， + 还要定义数值与颜色空间之间的映射（传递函数）。 + r = 0.5 是表示物理光照比 r = 1.0 少 50%， + 还是表示人眼感知亮度少 50%？两者并不等价， + 差异由数学函数来描述。根据目标不同，传递函数可以是 + 线性或非线性。sRGB 使用非线性传递函数。 + 这些函数有时会近似为伽马函数，但“gamma”一词在这里含义模糊， + 应尽量避免混用。 + +
-
+
- + 颜色模型（Color model）：在既定色域中用数字描述颜色的方式， + 可理解为颜色坐标系。在 three.js 里我们主要使用 RGB 模型， + 坐标为 r, g, b ∈ [0,1]（闭区间）或 + r, g, b ∈ [0,+∞)（开域），每一项都表示某个原色所占比例。 + 其他模型（HSL、Lab、LCH）常用于美术调色。 + +
- + 色域（Color gamut）：当原色与白点确定后，就确定了可见光谱中的一个体积范围， + 这就是“色域”。不在这个体积内的颜色（超出色域）无法用闭区间 [0,1] 的 RGB 表达。 + 在开域 [0,+∞) 中，色域在数学上可以视为无限。 + +
+ 来看两个最常见的色彩空间：`SRGBColorSpace`（sRGB）与 + `LinearSRGBColorSpace`（Linear-sRGB）。两者原色和白点相同， + 因此色域一致，也都使用 RGB 模型。它们只在传递函数上不同： + Linear-sRGB 相对于物理光强是线性的；sRGB 使用非线性传递函数， + 更接近人眼感知与常见显示设备的响应特性。 +
+ ++ 这个差异非常关键。光照计算和大多数渲染运算通常必须在线性色彩空间中完成。 + 但线性颜色在图像或帧缓冲中的存储效率较低，且直接显示给人眼时观感不正确。 + 因此，输入纹理与最终输出图像通常会使用非线性的 sRGB 色彩空间。 +
+ +++ ++ ℹ️ 注意：虽然部分现代显示器支持 Display-P3 等更宽色域， + 但 Web 平台图形 API 仍主要基于 sRGB。 + 当前 three.js 应用通常只会使用 sRGB 与 Linear-sRGB。 +
+
色彩空间在流程中的角色
+ ++ 现代渲染所需的线性工作流通常会涉及不止一种色彩空间， + 每种色彩空间承担不同职责。线性与非线性色彩空间适用于不同环节， + 如下所示。 +
+ +输入色彩空间
+ ++ 传入 three.js 的颜色（来自取色器、纹理、3D 模型等）都带有各自色彩空间。 + 凡是不在 Linear-sRGB 工作色彩空间中的输入，都需要转换； + 纹理也必须正确设置 texture.colorSpace。 + 如果在初始化颜色前启用 THREE.ColorManagement， + 某些转换（如十六进制颜色与 CSS sRGB 颜色）会自动处理： +
+ +
+THREE.ColorManagement.enabled = true;
+
+
+ + THREE.ColorManagement 默认已启用。 +
+ +-
+
- + 材质、灯光与着色器：其颜色数据中的 RGB 分量存储在线性的 + Linear-sRGB 工作空间中。 + +
- + 顶点颜色：`BufferAttribute` 中的 RGB 分量也存储在 + Linear-sRGB 工作空间中。 + +
- + 颜色纹理：包含颜色信息的 PNG/JPEG `Texture` + （如 `.map`、`.emissiveMap`）应使用闭区间 sRGB， + 并标注 texture.colorSpace = SRGBColorSpace。 + OpenEXR 等格式（常用于 `.envMap`、`.lightMap`）则使用 Linear-sRGB， + 标注为 texture.colorSpace = LinearSRGBColorSpace， + 并且可能包含开域 [0,+∞) 的值。 + +
- + 非颜色纹理：不存储颜色信息的纹理（如 `.normalMap`、`.roughnessMap`） + 没有对应色彩空间，一般使用默认标注 + texture.colorSpace = NoColorSpace。 + 在少数场景下，非颜色数据可能因技术原因采用其他非线性编码。 + +
++ ++ ⚠️ 警告：许多 3D 模型格式并未正确或一致地定义色彩空间信息。 + three.js 虽会尽量处理常见情况，但旧格式仍常出现问题。 + 为获得最佳结果，请优先使用 glTF 2.0（`GLTFLoader`）， + 并尽早在在线查看器中验证资源本身是否正确。 +
+
工作色彩空间
+ ++ 渲染、插值及许多其他计算，必须在开域的线性工作色彩空间中进行， + 此时 RGB 分量与物理光照强度成比例。在 three.js 中， + 工作色彩空间是 Linear-sRGB。 +
+ +输出色彩空间
+ ++ 输出到显示设备、图片或视频时，通常需要将开域 Linear-sRGB + 工作空间转换到目标色彩空间。该转换由 + `WebGLRenderer.outputColorSpace` 定义。 + 使用后处理时，需要 `OutputPass`。 +
+ +-
+
- + 显示：写入 WebGL 画布并显示的颜色应使用 sRGB。 + +
- + 图像：写入图像时应使用与格式和用途匹配的色彩空间。 + 完整渲染后保存为 PNG/JPEG 的图片通常使用 sRGB。 + 若图像包含自发光、光照贴图或其他不受 [0,1] 限制的数据， + 通常使用开域 Linear-sRGB，并配合 OpenEXR 等兼容格式。 + +
++ ++ ⚠️ 警告：渲染目标可使用 sRGB 或 Linear-sRGB。 + sRGB 在有限精度下利用率更高：在闭区间内，sRGB 常用 8-bit 即可， + 而 Linear-sRGB 可能需要至少 16-bit（half float）。 + 若后续管线阶段还要求 Linear-sRGB 输入，额外转换会带来一定性能开销。 +
+
+ 基于 `ShaderMaterial` 和 `RawShaderMaterial` 的自定义材质需要自行实现输出色彩空间转换。 + 对于 `ShaderMaterial`，通常在片元着色器 `main()` 中加入 + `colorspace_fragment` shader chunk 即可。 +
+ +使用 THREE.Color 实例
+ ++ 读取或修改 `Color` 的方法默认假设数据已经在 three.js 的工作色彩空间 + （Linear-sRGB）中。RGB 与 HSL 分量都直接对应 `Color` 实例内部数据， + 不会被隐式转换。你可以显式调用 + .convertLinearToSRGB() 或 .convertSRGBToLinear() 进行转换。 +
+ ++// RGB 分量（不发生转换）。 +color.r = color.g = color.b = 0.5; +console.log( color.r ); // → 0.5 + +// 手动转换。 +color.r = 0.5; +color.convertSRGBToLinear(); +console.log( color.r ); // → 0.214041140 ++ +
+ 当设置 ColorManagement.enabled = true（推荐，且默认开启）后， + 某些转换会自动执行。由于十六进制与 CSS 颜色通常属于 sRGB， + `Color` 在 setter 中会把它们从 sRGB 转为 Linear-sRGB； + 在 getter 返回十六进制或 CSS 值时，则会从 Linear-sRGB 转回 sRGB。 +
+ ++// 十六进制转换。 +color.setHex( 0x808080 ); +console.log( color.r ); // → 0.214041140 +console.log( color.getHex() ); // → 0x808080 + +// CSS 颜色转换。 +color.setStyle( 'rgb( 0.5, 0.5, 0.5 )' ); +console.log( color.r ); // → 0.214041140 + +// 通过 'colorSpace' 参数覆盖默认转换。 +color.setHex( 0x808080, LinearSRGBColorSpace ); +console.log( color.r ); // → 0.5 +console.log( color.getHex( LinearSRGBColorSpace ) ); // → 0x808080 +console.log( color.getHex( SRGBColorSpace ) ); // → 0xBCBCBC ++ +
常见错误
+ ++ 当某个颜色或纹理配置错误时，它看起来会比预期更亮或更暗。 + 当渲染器输出色彩空间配置错误时，整张场景都可能偏暗 + （例如遗漏了到 sRGB 的转换）或偏亮（例如后处理中重复转换到 sRGB）。 + 这类问题通常并非全局线性偏差，单纯增减光照并不能真正解决。 +
+ ++ 更隐蔽的问题是：当输入和输出色彩空间都设置错误时， + 整体亮度看似正常，但颜色会在不同光照下异常变化， + 或明暗层次变得过曝、生硬。两个错误不会相互抵消。 + 务必确保工作色彩空间是线性的（scene referred）， + 输出色彩空间是非线性的（display referred）。 +
+ +延伸阅读
+ +-
+
- + GPU Gems 3: The Importance of Being Linear, by Larry Gritz and Eugene d'Eon + +
- + What every coder should know about gamma, by John Novak + +
- + The Hitchhiker's Guide to Digital Color, by Troy Sobotka + +
- + Color Management, Blender + +