最近qq上有朋友问我shader遮罩处理怎么写,想着mask遮罩挺常用的,顺便水一篇博客。
我们小时候都戴过面具吧,面具遮住脸,露出我们的眼睛鼻子,就是一个现实中遮罩的效果。
而计算机中呢?qq微信头像的选择也是遮罩,选取一张矩形图片,叠加qq微信的头像遮罩模板(也就是矩形“面具”上面开一个圆形的“眼睛鼻子”空洞),把矩形图片的非圆形“边角料”遮罩掉。
原理也很简单,用一张R通道图片当作遮罩图片,R通道的值<阈值则discard或者transparent,R通道的值>阈值则正常采样主纹理渲染(反之也行,判断写法随意,没有要求)。
首先我们用ps做一张遮罩图片,如下:
然后丢到unity中写shader了,如下:
Shader "Custom/MaskShader"
{
Properties
{
_MainTex ("Texture", 2D) = "white" {}
_MaskTex("Mask Tex",2D) = "white" {}
}
SubShader
{
Tags { "RenderType"="Opaque" }
LOD 100
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
struct appdata
{
float4 vertex : POSITION;
float2 uv : TEXCOORD0;
};
struct v2f
{
float2 uv : TEXCOORD0;
float4 vertex : SV_POSITION;
};
sampler2D _MainTex;
float4 _MainTex_ST;
sampler2D _MaskTex;
v2f vert (appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = TRANSFORM_TEX(v.uv, _MainTex);
return o;
}
fixed4 frag (v2f i) : SV_Target
{
fixed4 mcol = tex2D(_MaskTex,i.uv);
if (mcol.r < 0.5)
{
discard;
}
fixed4 col = tex2D(_MainTex, i.uv);
return col;
}
ENDCG
}
}
}
效果如下:
当然改成transparent也行,顺便可以控制一下混合效果,如下:
Shader "Custom/MaskShader"
{
Properties
{
_MainTex ("Texture", 2D) = "white" {}
_MaskTex("Mask Tex",2D) = "white" {}
_Alpha("Mask Alpha",Range(0,1)) = 0.3
}
SubShader
{
Tags { "RenderType"="Transparent" "Queue"="Transparent" }
LOD 100
Pass
{
Blend SrcAlpha OneMinusSrcAlpha
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
struct appdata
{
float4 vertex : POSITION;
float2 uv : TEXCOORD0;
};
struct v2f
{
float2 uv : TEXCOORD0;
float4 vertex : SV_POSITION;
};
sampler2D _MainTex;
float4 _MainTex_ST;
sampler2D _MaskTex;
float _Alpha;
v2f vert (appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = TRANSFORM_TEX(v.uv, _MainTex);
return o;
}
fixed4 frag (v2f i) : SV_Target
{
fixed4 col = tex2D(_MainTex, i.uv);
fixed4 mcol = tex2D(_MaskTex, i.uv);
if (mcol.r < 0.5)
{
col.a = _Alpha;
}
return col;
}
ENDCG
}
}
}
效果如下:
嗯,比较简单也比较常用。