本文主要目的来自于在unity符合美术在ps里面的演示效果。
两个图层叠加到一起的效果，废话不多说直接看效果：
图片资源在文章末尾
完整代码也在末尾
目录
目录
Multiply 正片叠底
Screen 滤色
Color Dodge 颜色减淡
Color Burn 颜色加深
Linear Dodge 线形减淡
Linear Burn 线形加深
Overlay 叠加
Hard Light 强光
Soft Light 柔光
亮光 vivid light
Linear Light 线形光
Pin Light 点光
Hard Mix 实色混合
Difference 差值
Excusion 排除
Hue 色相
HSV那几个模式异常说明：
完整代码:
测试效果图片资源：
Multiply 正片叠底
公式：
Ans = A * B;
half4 finalRGBA = half4(colorA.xyz * colorB.xyz,1);
效果对比：
核心代码：
half4 finalRGBA = half4(1 - (1 - colorA.xyz) * (1 -colorB.xyz),1);
Screen 滤色
公式：
Ans = 1 - (1 - colorA ) * (1 - colorB);
效果对比:
核心代码：
half4 finalRGBA = half4(1 - (1 - colorA.xyz) * (1 -colorB.xyz),1);Color Dodge 颜色减淡
公式：
ans=colorA / ( 1 - colorB)；
效果对比：(unity存在些许过曝的情况)
核心代码：
finalRGBA = half4(colorA.xyz * (rcp(1 - colorB.xyz)),1);Color Burn 颜色加深
公式：
ans=1 - (1 - colorA)/ colorB；
效果对比：
核心代码：
finalRGBA = half4(1- rcp(colorB.xyz) * (1 - colorA.xyz),1);Linear Dodge 线形减淡
公式：
Ans = colorA + colorB；
效果对比：
核心代码：
finalRGBA = half4(colorB.xyz + colorA.xyz,1);Linear Burn 线形加深
公式：
Ans = colorA + colorB - 1 ；
效果对比：
核心代码：
finalRGBA = half4(colorB.xyz + colorA.xyz - 1,1);Overlay 叠加
公式：
colorB<=0.5 : Ans=2*colorA*colorB
colorB>0.5: Ans=1 - 2 * (1-colorA) * ( 1 - colorB)
效果对比：
核心代码：
half3 c1 = colorA.xyz * colorB.xyz * 2 *OA ;
half3 c2 = (1 - 2 * (1 - colorA.xyz) *(1 - colorB.xyz)) * (1 - OA);
finalRGBA = half4(c1+ c2,1);Hard Light 强光
公式：
colorA <= 0.5: Ans = 2 * colorA * colorB
colorA > 0.5 : Ans = 1 - 2 * (1 - colorA) * (1 - colorB)
效果对比：
核心代码：
half3 OB = step(colorB.xyz,0.5);
half3 c1 = colorA.xyz * colorB.xyz * 2 *OB ;
half3 c2 = (1 - 2 * (1 - colorA.xyz) *(1 - colorB.xyz)) * (1 - OB);Soft Light 柔光
公式：
colorA <= 0.5 : Ans = ( 2 * A - 1 ) * ( B - B * B ) + B；
colorA > 0.5 : Ans = ( 2 * A - 1 ) * ( sqrt ( B ) - B ) + B；
效果对比:
核心代码：
half3 OB = step(colorB.xyz,0.5);
half3 c1 = ((2 * colorB - 1) * (colorA - colorA * colorA) + colorA) * OB ;
half3 c2 = ((2 * colorB - 1) * (sqrt(colorA)- colorA) + colorA) * (1 - OB);
亮光 vivid light
效果与ps中存在部分差异，但目前没找到原因，盲猜是因为自己没有模拟出图层上下级关系。
公式：
colorB <= 0.5 : Ans = colorA - (1 - colorA) * ( 1 - 2 * colorB) / (2 * colorB);
colorB > 0.5 : Ans = colorA + colorA * (2 * colorB - 1)/(2 * (1 - colorB));
效果对比：
上下层级不同的情况下(unity没有层级)
核心代码：
float3 c1 = colorB - (1 - colorB) * (1 - 2 * colorA) / (2 * colorA);
float3 c2 = colorB + colorB * (2 * colorA - 1) / (2 * (1 - colorA));
float3 OB = step(colorA.xyz,0.5);
c1 *= OB;
c2 *= (1 - OB);
finalRGBA = float4(c1+ c2,1);Linear Light 线形光
公式：
Ans = colorB + 2 * colorA - 1；
效果对比：
核心代码：
finalRGBA = float4(colorA + 2 * colorB) - 1;Pin Light 点光
公式:
colorB < 2 * colorA - 1 : Ans = 2 * colorA - 1；
2 * A - 1 < B < 2 * A : Ans = colorB；
colorB > 2 * colorA : Ans = 2 * colorA；
效果展示：
核心代码：
half3 OB = step(colorA,2 *colorB - 1);
half3 c1 = (2 * colorB - 1) * OB;
half3 OB1 = (1 - OB) * step(colorA , 2 * colorB);
half3 c2 = colorA * OB1;
half3 OB2 = 1 - step(colorA ,2 * colorB);
half3 c3 = 2 * colorB * OB2;
finalRGBA = half4(c1 + c2 + c3,1);Hard Mix 实色混合
公式：
colorA < 1 - colorB : Ans = 0；
colorA > 1 - colorB : Ans = 1；
效果展示：
核心代码：
half3 OA = step(colorB, 1 - colorA);
half3 c1 = 0 * OA;
half3 OA1 = step(1 - colorA,colorB);
half3 c2 = 1 * OA1;
finalRGBA = half4(c1 + c2,1);Difference 差值
公式：
Ans=|colorA-colorB|
效果展示：
核心代码：
finalRGBA = half4(abs(colorB.xyz - colorA.xyz),1);Excusion 排除
公式：
Ans=colorA+colorB-(colorA×colorB) * 2
效果展示：
核心代码：
finalRGBA = half4(colorB + colorA - 2 * colorB * colorA);Hue 色相
公式：
Ans( HSV) =HB SA VA
(HSV空间下) Ans = (colorB.x,colorA.y,colorB.z);
该效果再HSV空间下进行计算(后续需要转化为RGB)
效果展示：
核心代码：
float3 c1 = float3(colorBHSV.x,colorAHSV.yz);
c1 = HSV2RGB(c1);
finalRGBA = half4(c1,1);HSV那几个模式异常说明：
- 这几个模式按照公式去计算并不能正常的得到目标结果所以，复刻不出来但是不是很懂怎么回事经测试转颜色空间并无差别且计算并无问题，具体的的混合算法来源也无差别出自官方文档维基百科等都是显示该结果，或为还有部分转化过程，待查证。
- 饱和度混合模式保留底层的亮度和色调，同时采用顶层的色度。
- 颜色混合模式保留底层的亮度，同时采用顶层的色调和色度。
- 亮度混合模式保留底层的色调和色度，同时采用顶层的亮度。、
颜色混合未完待续。
完整代码:
Shader "Unlit/TestPs"
{
Properties
{
_MainTexA ("TextureA", 2D) = "white" {}
_MainTexB ("TextureB", 2D) = "white" {}
}
SubShader
{
Tags { "RenderType"="Opaque" }
LOD 100
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
// make fog work
#pragma multi_compile_fog
#include "UnityCG.cginc"
struct appdata
{
float4 vertex : POSITION;
float2 uv : TEXCOORD0;
};
struct v2f
{
float4 uv : TEXCOORD0;
float4 vertex : SV_POSITION;
};
float3 RGB2HSV(float3 c)
{
float4 K = float4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
float4 p = lerp(float4(c.bg, K.wz), float4(c.gb, K.xy), step(c.b, c.g));
float4 q = lerp(float4(p.xyw, c.r), float4(c.r, p.yzx), step(p.x, c.r));
float d = q.x - min(q.w, q.y);
float e = 1.0e-10;
return float3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
}
// Official HSV to RGB conversion
float3 HSV2RGB( float3 c ){
float3 rgb = clamp( abs(fmod(c.x*6.0+float3(0.0,4.0,2.0),6)-3.0)-1.0, 0, 1);
rgb = rgb*rgb*(3.0-2.0*rgb);
return c.z * lerp( float3(1,1,1), rgb, c.y);
}
sampler2D _MainTexA;
float4 _MainTexA_ST;
sampler2D _MainTexB;
float4 _MainTexB_ST;
v2f vert (appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv.xy = TRANSFORM_TEX(v.uv.xy, _MainTexA);
o.uv.zw = TRANSFORM_TEX(v.uv.xy, _MainTexB);
UNITY_TRANSFER_FOG(o,o.vertex);
return o;
}
half4 frag (v2f i) : SV_Target
{
float4 colorA = tex2D(_MainTexA, i.uv.xy);
float colorALum = Luminance(colorA.xyz);
float4 colorB = tex2D(_MainTexB, i.uv.zw);
float3 colorAHSV = RGB2HSV(colorA.xyz);
float3 colorBHSV = RGB2HSV(colorB.xyz);
float colorBLum = Luminance(colorA.xyz);
float4 finalRGBA = 0;
// opacity 正片叠底
finalRGBA = float4(colorA.xyz * colorB.xyz,1);
// Screen 滤色
// finalRGBA = float4(1 - (1 - colorA.xyz) * (1 -colorB.xyz),1);
// Color Dodge 颜色减淡
// finalRGBA = float4(colorA.xyz * (rcp(1 - colorB.xyz)),1);
// Color Burn 颜色加深
// finalRGBA = float4(1- rcp(colorB.xyz) * (1 - colorA.xyz),1);
// Linear Dodge 线形减淡
// finalRGBA = float4(colorB.xyz + colorA.xyz,1);
// Linear Burn 线形加深
// finalRGBA = float4(colorB.xyz + colorA.xyz - 1,1);
// overlay 叠加
// float3 OA = step(colorA.xyz,0.5);
// float3 c1 = colorA.xyz * colorB.xyz * 2 *OA ;
// float3 c2 = (1 - 2 * (1 - colorA.xyz) *(1 - colorB.xyz)) * (1 - OA);
// finalRGBA = float4(c1+ c2,1);
// hard light 强光
// float3 OB = step(colorB.xyz,0.5);
// float3 c1 = colorA.xyz * colorB.xyz * 2 *OB ;
// float3 c2 = (1 - 2 * (1 - colorA.xyz) *(1 - colorB.xyz)) * (1 - OB);
// soft light 柔光
// float3 OB = step(colorB.xyz,0.5);
// float3 c1 = ((2 * colorB - 1) * (colorA - colorA * colorA) + colorA) * OB ;
// float3 c2 = ((2 * colorB - 1) * (sqrt(colorA)- colorA) + colorA) * (1 - OB);
// vivid light 亮光///
// float3 c1 = colorB - (1 - colorB) * (1 - 2 * colorA) / (2 * colorA);
// float3 c2 = colorB + colorB * (2 * colorA - 1) / (2 * (1 - colorA));
// float3 OB = step(colorA.xyz,0.5);
// c1 *= OB;
// c2 *= (1 - OB);
// finalRGBA = float4(c1+ c2,1);
// linear Light 线性光
// finalRGBA = float4(colorA + 2 * colorB) - 1;
// 点光(存在等于符号问题)
// B<2*A-1: C=2*A-1
// 2*A-1<B<2*A: C=B
// B>2*A: C=2*A
// float3 OB = step(colorA,2 *colorB - 1);
// float3 c1 = (2 * colorB - 1) * OB;
// float3 OB1 = (1 - OB) * step(colorA , 2 * colorB);
// float3 c2 = colorA * OB1;
// float3 OB2 = 1 - step(colorA ,2 * colorB);
// float3 c3 = 2 * colorB * OB2;
// finalRGBA = float4(c1 + c2 + c3,1);
// 混合实色
// float3 OA = step(colorB, 1 - colorA);
// float3 c1 = 0 * OA;
// float3 OA1 = step(1 - colorA,colorB);
// float3 c2 = 1 * OA1;
// finalRGBA = float4(c1 + c2,1);
// 差值
// finalRGBA = float4(abs(colorB.xyz - colorA.xyz),1);
// Excusion 排除
// finalRGBA = float4(colorB + colorA - 2 * colorB * colorA);
// hue 色相
// float3 c1 = float3(colorBHSV.x,colorAHSV.yz);
// c1 = HSV2RGB(c1);
// finalRGBA = half4(c1,1);
return finalRGBA;
}
ENDCG
}
}
}
测试效果图片资源：
文章来源：https://www.toymoban.com/news/detail-420920.html
文章来源地址https://www.toymoban.com/news/detail-420920.html
到了这里，关于Photoshop图层混合模式公式(Unity，CG实现)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
