unity版本2022.3.27
先列出本人加上注释的源码:
// Unity built-in shader source. Copyright (c) 2016 Unity Technologies. MIT license (see license.txt)
Shader "UI/Default"
{
Properties
{
[PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
_Color ("Tint", Color) = (1,1,1,1)
_StencilComp ("Stencil Comparison", Float) = 8
_Stencil ("Stencil ID", Float) = 0
_StencilOp ("Stencil Operation", Float) = 0
_StencilWriteMask ("Stencil Write Mask", Float) = 255
_StencilReadMask ("Stencil Read Mask", Float) = 255
_ColorMask ("Color Mask", Float) = 15
[Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0
}
SubShader
{
Tags
{
"Queue"="Transparent"
"IgnoreProjector"="True"
"RenderType"="Transparent"
"PreviewType"="Plane"
"CanUseSpriteAtlas"="True"
}
//模板测试,可单独研究下
Stencil
{
Ref [_Stencil]
Comp [_StencilComp]
Pass [_StencilOp]
ReadMask [_StencilReadMask]
WriteMask [_StencilWriteMask]
}
Cull Off
Lighting Off
ZWrite Off
ZTest [unity_GUIZTestMode]
Blend One OneMinusSrcAlpha
ColorMask [_ColorMask]
Pass
{
Name "Default"
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#pragma target 2.0
#include "UnityCG.cginc"
#include "UnityUI.cginc"
#pragma multi_compile_local _ UNITY_UI_CLIP_RECT
#pragma multi_compile_local _ UNITY_UI_ALPHACLIP
struct appdata_t
{
float4 vertex : POSITION;
float4 color : COLOR;
float2 texcoord : TEXCOORD0;
UNITY_VERTEX_INPUT_INSTANCE_ID
};
struct v2f
{
float4 vertex : SV_POSITION;
fixed4 color : COLOR;
float2 texcoord : TEXCOORD0;
float4 worldPosition : TEXCOORD1;
float4 mask : TEXCOORD2;
UNITY_VERTEX_OUTPUT_STEREO
};
sampler2D _MainTex;
fixed4 _Color;
fixed4 _TextureSampleAdd;
float4 _ClipRect; //位于顶点空间的Rect,(x,y)为左下角位置,(z,w)为右上角位置
float4 _MainTex_ST;
float _UIMaskSoftnessX;
float _UIMaskSoftnessY;
int _UIVertexColorAlwaysGammaSpace;
v2f vert(appdata_t v)
{
v2f OUT;
UNITY_SETUP_INSTANCE_ID(v);
UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);
float4 vPosition = UnityObjectToClipPos(v.vertex);
OUT.worldPosition = v.vertex;
OUT.vertex = vPosition;
/*
float2 pixelSize = vPosition.w;
pixelSize /= abs(mul((float2x2)UNITY_MATRIX_P, _ScreenParams.xy));
*/
float4 clampedRect = clamp(_ClipRect, -2e10, 2e10);
//float2 maskUV = (v.vertex.xy - clampedRect.xy) / (clampedRect.zw - clampedRect.xy); //多余未删的代码
OUT.texcoord = TRANSFORM_TEX(v.texcoord.xy, _MainTex);
//pixelSize几何意义不明,发现去掉也没啥影响的样子,暂不知道用来干啥
//OUT.mask = float4(v.vertex.xy * 2 - clampedRect.xy - clampedRect.zw, 0.25 / (0.25 * half2(_UIMaskSoftnessX, _UIMaskSoftnessY) + abs(pixelSize.xy)));
//xy为顶点相对于clampedRect中心的矢量,zw用来实现边缘羽化的效果,把一些计算从片元提取到顶点
OUT.mask = float4(v.vertex.xy - 0.5 * (clampedRect.xy + clampedRect.zw), 1 / (0.5 * half2(_UIMaskSoftnessX, _UIMaskSoftnessY) ));
if (_UIVertexColorAlwaysGammaSpace)
{
if(!IsGammaSpace())
{
v.color.rgb = UIGammaToLinear(v.color.rgb);
}
}
OUT.color = v.color * _Color;
return OUT;
}
fixed4 frag(v2f IN) : SV_Target
{
//Round up the alpha color coming from the interpolator (to 1.0/256.0 steps)
//The incoming alpha could have numerical instability, which makes it very sensible to
//HDR color transparency blend, when it blends with the world's texture.
const half alphaPrecision = half(0xff);
const half invAlphaPrecision = half(1.0/alphaPrecision);
IN.color.a = round(IN.color.a * alphaPrecision)*invAlphaPrecision;
half4 color = IN.color * (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd);
#ifdef UNITY_UI_CLIP_RECT
//half2 m = saturate((_ClipRect.zw - _ClipRect.xy - abs(IN.mask.xy)) * IN.mask.zw);
//计算顶点与矩形裁剪区域边沿的距离,再乘以缩放系数IN.mask.zw,以实现在0.5倍_UIMaskSoftness距离内的羽化效果
half2 m = saturate((0.5 * (_ClipRect.zw - _ClipRect.xy) - abs(IN.mask.xy)) * IN.mask.zw);
color.a *= m.x * m.y;
#endif
#ifdef UNITY_UI_ALPHACLIP
clip (color.a - 0.001);
#endif
color.rgb *= color.a;
return color;
}
ENDCG
}
}
}
这个shader的难点在于实现RectMask2D的裁剪,作者为了性能,将代码写得不是很直观;
实践时建立如下场景,一个RectMask2D下面两个Image:
(关闭RectMask2D的显示)
首先介绍shader的输入变量:
float4 _ClipRect; //位于顶点空间的Rect,(x,y)为左下角位置,(z,w)为右上角位置
float _UIMaskSoftnessX;
float _UIMaskSoftnessY;
_ClipRect为RectMask2D限定的矩形区域,xy表示矩形区域的左下角,zw表示矩形区域的右上角,_ClipRect位于Canvas中的局部位置,对应Shader中的顶点空间;
_UIMaskSoftnessX和_UIMaskSoftnessY表示边沿羽化区域的大小:
如图所示,_UIMaskSoftnessX设置为200,则x一侧的羽化长度为100,对应红色方块的长度100;
然后我们看顶点着色器计算mask的代码:
/*
float2 pixelSize = vPosition.w;
pixelSize /= abs(mul((float2x2)UNITY_MATRIX_P, _ScreenParams.xy));
*/
float4 clampedRect = clamp(_ClipRect, -2e10, 2e10);
//float2 maskUV = (v.vertex.xy - clampedRect.xy) / (clampedRect.zw - clampedRect.xy); //多余未删的代码
OUT.texcoord = TRANSFORM_TEX(v.texcoord.xy, _MainTex);
//pixelSize几何意义不明,发现去掉也没啥影响的样子,暂不知道用来干啥
//OUT.mask = float4(v.vertex.xy * 2 - clampedRect.xy - clampedRect.zw, 0.25 / (0.25 * half2(_UIMaskSoftnessX, _UIMaskSoftnessY) + abs(pixelSize.xy)));
//xy为顶点相对于clampedRect中心的矢量,zw用来实现边缘羽化的效果,把一些计算从片元提取到顶点
OUT.mask = float4(v.vertex.xy - 0.5 * (clampedRect.xy + clampedRect.zw), 1 / (0.5 * half2(_UIMaskSoftnessX, _UIMaskSoftnessY) ));
原作者为了性能,计算不是很直观,在下修改了下实现,以便于理解几何意义;
OUT.mask.xy保存当前顶点位置相对于裁剪矩形区域中心的矢量:
OUT.mask.zw = 1 / (0.5 * UIMaskSoftness),用于在片元着色器中实现羽化效果,羽化长度为0.5 * UIMaskSoftness;
shader实现还有个pixelSize,暂不理解其几何意义,只知道去掉也没有明显影响的样子,如下:
最后看片元着色器:
#ifdef UNITY_UI_CLIP_RECT
//half2 m = saturate((_ClipRect.zw - _ClipRect.xy - abs(IN.mask.xy)) * IN.mask.zw);
//顶点相对于矩形裁剪区域边沿的距离,再乘以缩放系数IN.mask.zw,以实现在0.5倍_UIMaskSoftness距离内的羽化效果
half2 m = saturate((0.5 * (_ClipRect.zw - _ClipRect.xy) - abs(IN.mask.xy)) * IN.mask.zw);
color.a *= m.x * m.y;
#endif
0.5 * (_ClipRect.zw - _ClipRect.xy) - abs(IN.mask.xy) 用于计算顶点xy分别相对于矩形边沿的距离,再乘以缩放系数IN.mask.zw,实现在长度为0.5 * UIMaskSoftness的区域内羽化效果;
以上就是个人对Unity UI-Default.shader源码阅读理解,另外想看Unity Standard Shader源码的请