// 混合模式的代入式:
// 颜色的数据类型可以使用float4,有些shader language中,使用COLOR之类的宏定义,其实也就是float4,里头分另有(RGBA/XYZW)的分量组合在一起,
// 与单个标量的运算时:未指定分量运算时,那么默认将是每个分量与标量逐个运算
// 如:color:float4, brightness = 2;
// color.rgb = color.rgb * brightness =>
// color.r *= brightness;
// color.g *= brightness;
// color.b *= brightness;
// 如果不写指定分量去处
// color = color* brightness =>
// color.r *= brightness;
// color.g *= brightness;
// color.b *= brightness;
// color.a *= brightness; // 这里头就会再多一次:alpha的运算,明显,如果只是要调节brightness的话,alpha的运算是没有必要的,所以这里看个人的使用情况了
float4(RGBA/XYZW)
// 旧的已绘制出来的图层颜色
// 也叫:DESTINATION COLOR(个人觉得:OLD COLOR BUFFER可读性会好N多,想不明白这命名怎么回事)
var oldBuffer:float4;
// 新绘制出来的图层颜色
// 也叫:SOURCE COLOR(个人觉得:NEW COLOR BUFFER可读性会好N多,想不明白这命名怎么回事)
var newBuffer:float4;
// FACTOR:因子(枚举)
// macros
ONE = 1;
ZERO = 0;
ONE_MINUS_DESTINATION_ALPHA = 1 - oldBuffer.a;
ONE_MINUS_DESTINATION_COLOR = 1 - oldBuffer.rgb;
ONE_MINUS_SOURCE_ALPHA = 1 - newBuffer.a;
ONE_MINUS_SOURCE_COLOR = 1 - newBuffer.rgb;
DESTINATION_ALPHA = oldBuffer.a;
DESTINATION_ALPHA = oldBuffer.rgb;
// oldBuffer使用的因子
factor1 = ONE_MINUS_SOURCE_ALPHA;
// newBuffer使用的因子
factor2 = ONE;
// factor1 == ONE_MINUS_SOURCE_ALPHA
// factor2 == ONE;
// 意味着:factor2中的颜色的alpha越大,factor1就越小,就可以实现PhotoShop“正常”的图层混合效果
blendResult = newBuffer * factor1 + oldBuffer * factor2;
如果说项目中以上的因子枚举不足于实现想要的效果,那么就得自己写shader处理新的混合颜色处理了,如下面即将说到的:PhotoShop中的图层混合效果中使用到的公式,简单的BlendMode已不能满足了,那就自己写shader实现吧
以下的参考资料来源于PS中的混合公式
先来张一目了然的图(参考别人的)注释: 1.混合模式的数学计算公式,另外还介绍了不透明度。 2.这些公式仅适用于RGB图像,对于Lab颜色图像而言,这些公式将不再适用。 3.在公式中 A 代表下面图层的颜色值; B 代表上面图层的颜色值; C 代表混合图层的颜色值; d 表示该层的透明度。 rgb表示光色三原色; HSB表示色相、饱和度、亮度; 反相表示255减去颜色值。 混合色表示上层图层的颜色值; 基色表示下层图层的颜色值。 【混合时是对每通道进行颜色值的计算,然后再将三个通道混合显示最终效果。为便于理解,可以打开 窗口–信息 面板,在RGB模式下使用黑、白和中性灰图层进行验证,将灰色任一通道的颜色值套入公式计算即可。】
1.Opacity 不透明度 C=d×A+(1-d)×B 相对于不透明度而言,其反义就是透明度。 这两个术语之间的关系就类似于正负之间的关系:100%的不透明度就是0%的透明度。 该混合模式相对来说比较简单,在该混合模式下, 如果两个图层的叠放顺序不一样,其结果也是不一样的(当然50%透明除外)。 该公式也应用于层蒙板,在这种情况下,d代表了蒙板图层中给定位置图层的亮度(d=颜色值/255), 下同,不再叙述。
2.Darken 变暗 B=A 则 C=A 该模式通过比较上下层像素后取相对较暗的像素作为输出, 注意,每个不同的颜色通道的像素都是独立的进行比较,色彩值相对较小的作为输出结果。 下层表示叠放次序位于下面的那个图层, 上层表示叠放次序位于上面的那个图层,下同,不再叙述。
3.Lighten 变亮 B=A 则 C=B 该模式和前面的模式是相似,不同的是取色彩值较大的(也就是较亮的)作为输出结果。 【这两个也没啥说的,最简单的比大小,小学知识~】
4.Multiply 正片叠底 C=(A×B)/255 该效果将两层像素的标准色彩值(基于0…1之间)相乘后输出 其效果可以形容成:两个幻灯片叠加在一起然后放映, 透射光需要分别通过这两个幻灯片,从而被削弱了两次。 【从公式可以看出,C会比A和B都要暗,多个同色图层连续正片叠底会越来越暗。任何颜色和黑色正片叠底还是黑色,黑色之外其他颜色和白色正片叠底颜色不变。】
5.Screen 滤色 C=255-(A反相×B反相)/255 【 =A+B-(A×B)/255 】 该模式和上一个模式刚好相反, 上下层像素的标准色彩值反相后相乘后输出, 输出结果比两者的像素值都将要亮 (就好像两台投影机分别对其中一个图层进行投影后,然后投射到同一个屏幕上)。 从右边公式中我们可以看出,如果两个图层反相后,采用Multiply模式混合, 则将和对这两个图层采用Screen模式混合后反相的结果完全一样。
6.Color Burn 颜色加深 C=A-(A反相×B反相)/B 如果上层越暗,则下层获取的光越少,加深效果越明显。 【如果上层为全黑色,则下层颜色值不是255的像素全变成0】, 如果上层为全白色,则根本不会影响下层。 结果最亮的地方不会高于下层的像素值。
7.Color Dodge 颜色减淡 C=A+(A×B)/B反相 该模式和上一个模式刚好相反。 该模式下,上层的亮度决定了下层的暴露程度。 如果上层越亮,下层获取的光越多,也就是越亮。 如果上层是纯黑色,也就是没有亮度,则根本不会影响下层, 【如果上层是纯白色,则下层颜色值不是0的像素全变成255】。 结果最黑的地方不会低于下层的像素值。
8.Linear Burn 线性加深 C=A+B-255 如果上下层的像素值之和小于255,输出结果将会是纯黑色。 如果将上层反相,结果将是纯粹的数学减。
9.Linear Dodge 线性减淡 C=A+B 将上下层的色彩值相加。结果将更亮。
10.Overlay叠加 A128则 C=255-(A反相×B反相)/128 依据下层色彩值的不同,该模式可能是Multiply(正片叠底),也可能是Screen (滤色)模式。 上层决定了下层中间色调偏移的强度。 如果上层为50%灰,则结果将完全为下层像素的值。 如果上层比50%灰暗,则下层的中间色调的将向暗地方偏移, 如果上层比50%灰亮,则下层的中间色调的将向亮地方偏移。 对于上层比50%灰暗,下层中间色调以下的色带变窄(原来为02×0.4×0.5,现在为02×0.3×0.5), 中间色调以上的色带变宽(原来为2×0.4×0.51,现在为2×0.3×0.51)。 反之亦然。
11.Hard Light 强光 B128则 C=255-(A反相×B反相)/128 该模式完全相对应于Overlay(叠加)模式下,两个图层进行次序交换的情况。 如过上层的颜色高于50%灰,则下层越亮,反之越暗。 【如果将上层图层设为叠加,下层设为强光,则改变图层顺序不影响结果。】
12.Soft Light柔光 B128则 C=(A×B反相)/128+sqrt(A/255)×(2B-255) 使颜色变暗或变亮,具体取决于混合色。 此效果与发散的聚光灯照在图像上相似。如果混合色(光源)比50% 灰色亮,则图像变亮,就像被减淡了一样。如果混合色(光源)比 50%灰色暗,则图像变暗,就像被加深了一样。使用纯黑色或纯白色上色,可以产生明显变暗或变亮的区域,但不能生成纯黑色或纯白色。 该模式类似上层以Gamma值范围为2.0到0.5的方式来调制下层的色彩值。 结果将是一个非常柔和的组合。
13.Vivid Light 亮光 B128则 C=A+A×(2B-255)/(2×B反相) 该模式非常强烈的增加了对比度,特别是在高亮和阴暗处。 可以认为是阴暗处应用ColorBurn(颜色加深)和高亮处应用Color Dodge(颜色减淡)。 如果混合色(光源)比 50%灰色亮,则通过减小对比度使图像变亮。如果混合色比 50% 灰色暗,则通过增加对比度使图像变暗。
14.Linear Light 线性光 C=A+2×B-255 通过减小或增加亮度来加深或减淡颜色,具体取决于混合色。 如果混合色(光源)比 50%灰色亮,则通过增加亮度使图像变亮。如果混合色比 50% 灰色暗,则通过减小亮度使图像变暗。 其类似于LinearBurn(线性加深),只不过是加深了上层的影响力。 【由于将上层颜色值加倍,所以结果比线性加深亮很多。】
15.Pin Light 点光 B128 则C=Min(A,2B-255) 根据混合色替换颜色。如果混合色(光源)比50% 灰色亮,则替换比混合色暗的像素,而不改变比混合色亮的像素。如果混合色比 50%灰色暗,则替换比混合色亮的像素,而比混合色暗的像素保持不变。这对于向图像添加特殊效果非常有用。 该模式结果就是导致中间调几乎是不变的, 但是两边是Darken(变暗)和Lighten(变亮)模式的组合。
16.Hard Mix 实色混合 A+B>=255 则 C=255 A+B
最近更新
- 深拷贝和浅拷贝的区别(重点)
- 【Vue】走进Vue框架世界
- 【云服务器】项目部署—搭建网站—vue电商后台管理系统
- 【React介绍】 一文带你深入React
- 【React】React组件实例的三大属性之state,props,refs(你学废了吗)
- 【脚手架VueCLI】从零开始,创建一个VUE项目
- 【React】深入理解React组件生命周期----图文详解(含代码)
- 【React】DOM的Diffing算法是什么?以及DOM中key的作用----经典面试题
- 【React】1_使用React脚手架创建项目步骤--------详解(含项目结构说明)
- 【React】2_如何使用react脚手架写一个简单的页面?