本文使用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/ 该文章有预览图挺不错的