计算机图形学 Unity ShaderLab 颜色混合运算相关计算方法

本文使用shader语法

已知颜色A与颜色B，颜色B覆盖在颜色A上，最终输出的结果为颜色C。
A为缓存色，B为当前色，C为输出色

【正常透明度混合】-

描述：正常透明度混合
公式：当前颜色 x 当前透明度 +（1 - 当前透明度）x 缓存颜色
shader：fixed4 C = B x B.a + A x (1 - B.a);

【正片叠底】-

描述：颜色叠加，使像素重合部分的颜色更暗。像素覆盖顺序随意调换不会改变结果
公式：当前颜色 x 缓存颜色
shader：fixed4 C = A * B;

【滤色】-

描述：与正片叠底相反，重合部分的像素更亮
公式：1 - （1-当前颜色）x （1-缓存颜色）
shader代码：fixed4 C = 1 - (1 - A) * (1 - B);

【叠加】 - -

描述：结合滤色与正片叠底，基色的像素重合部分比较亮的会更亮，比较暗的会跟暗
公式：如果当前颜色 <= 0.5 返回1，否则返回 0 该值记做 w;
w x 缓存色 x 当前色 x 2 + (1 - w) x (1 - (1 - 缓存色) x (1 - 当前色) x 2)
shader代码：
if(A > 0.5){
fixed4 C = 1 - 2 * (1 - A) * (1 - B);
}else{
fixed4 C = 2AB;
}

【反色】

描述：取得与缓存色相反的颜色
公式：1 - 缓存颜色
shader代码：fixed4 C = 1 - A;

【变暗】-

描述：缓存颜色 x 缓存颜色与当前颜色中最小的那个
公式：缓存颜色 x min(缓存颜色，当前颜色)
shader代码：fixed4 C =A * min(A,B) ;

【变亮】-

描述：缓存颜色 x 缓存颜色与当前颜色中最大的那个
公式：缓存颜色 x max(缓存颜色，当前颜色)
shader代码：
fixed4 C =A * max(A, B) ;

【减色】

描述：缓存颜色减掉当前颜色的值
公式：缓存颜色 - 当前颜色
shader代码：fixed4 C = A - B;

【划分】

描述：缓存颜色除当前颜色的值
公式：缓存颜色 / 当前颜色
shader代码： fixed4 C = A / B ;

【颜色加深】

描述：
公式：缓存颜色 - ((1 - 缓存颜色) x (1 - 当前颜色)) / 缓存颜色
shader代码：fixed4 C = A - ((1-A) * (1-B)) / B;

【颜色减淡】

描述：
公式：缓存颜色 + ((缓存颜色 x 当前颜色) / (1 - 当前颜色))
shader代码：fixed4 C = A + (A * B) / (1 - B);

【线性加深】

描述：
公式：当前颜色 + 缓存颜色 - 1
shader代码：fixed4 C = B + A -1;

【线性减淡】

描述：
公式：缓存颜色 + 当前颜色
shader代码：fixed4 C = A + B;

【强光】

描述：
公式：如果当前色 <= 0.5 返回1，否则返回0，记作w;
w x 缓存色 x 当前色 x 2 + (1 - w) x (1 - (1 - 缓存色) x (1 - 当前色) x 2);
shader代码：
fixed4 ifFlag= step(B, fixed4(0.5, 0.5, 0.5, 0.5));
fixed4 C = ifFlag * A * B * 2 + (1 - ifFlag) * (1 - (1 - A) * (1 - B) * 2);

【柔光】

描述：
公式：如果当前色 <= 0.5 返回1，否则返回0，记作w;
w x 缓存色 x 当前色 x 2 + (1 - w) x (1 - (1 - 缓存色) x (1 - 当前色) x 2);
shader代码：
fixed4 ifFlag = step(B, fixed4(0.5, 0.5, 0.5, 0.5));
fixed4 C = ifFlag * (A * B * 2 + A * A * (1 - B * 2)) + (1 - ifFlag) * (A * (1 - B) * 2 + sqrt(A) * (2 * B - 1));

【亮光】

描述：
公式：如果当前色 <= 0.5 返回1，否则返回0，记作w;
w x (缓存色 - (1 - 缓存色) x (1 - 2 x 当前色) / (2 x 当前色)) + (1 - w) x (缓存色 + 缓存色 x (2 x 当前色 - 1) / (2 x (1 - 当前色)));
shader代码：
fixed4 ifFlag = step(B, fixed4(0.5, 0.5, 0.5, 0.5));
fixed4 C = ifFlag * (A - (1 - A) * (1 - 2 * B) / (2 * B)) + (1 - ifFlag) * (A + A * (2 * B - 1) / (2 * (1 - B)));

【点光】

描述：
公式：如果当前色 <= 0.5 返回1，否则返回0，记作w;
w x (min(缓存色, 2 x 当前色)) + (1 - w) x (max(缓存色, ( 当前色 x 2 - 1)));
shader代码：
fixed4 ifFlag = step(B, fixed4(0.5, 0.5, 0.5, 0.5));
fixed4 C = ifFlag * (min(A, 2 * B)) + (1 - ifFlag) * (max(A, ( B * 2 - 1)));

【线性光】

描述：
公式：缓存色,+ 2 x 当前色 - 1;
shader代码： fixed4 C=A+2*B-1;

【实色混合】

描述：
公式：如果当前色 + 缓存色 <= 1 返回1，否则返回0，记作w;
w x (0) + (1 - w) x (1);
shader代码：
fixed4 ifFlag = step(A + B, fixed4(1, 1, 1, 1));
fixed4 C = ifFlag * (fixed4(0, 0, 0, 0)) + (1 - ifFlag) * (fixed4(1, 1, 1, 1));

【深色】

描述：
公式：如果当前色的rgb分量 + 缓存色 <= 1 返回1，否则返回0，记作w;
w x (0) + (1 - w) x (1);
shader代码：
fixed4 ifFlag = step(B.r + B.g + B.b, A.r + A.g + A.b);
fixed4 C = ifFlag * (B) + (1-ifFlag)*(A);

颜色制式

RGBA ：红、绿、蓝、透明度
HSL： hue（色相）、saturation（饱和度）、lightness（亮度）
HSV： hue（色相）、saturation（饱和度）、value(色调)
HSB： hue（色相）、saturation（饱和度）、brightness（明度）

颜色转换

参考文章 https://www.bilibili.com/read/cv1874791/ 该文章有预览图挺不错的