在Unity中实现数学坐标系Shader（一）
本节教程为南京字节工坊原创文章，转载请留此信息：https://blog.csdn.net/gcj2450/article/details/104523738
南京字节工坊，专业从事各类互动软件定制开发，三维可视化应用开发定制，VR，AR类互动应用定制开发。
今天我们来学习通过Unity Shader实现数学直角坐标系的Shader，以让大家更加熟悉Unity Shader中常用的数学方法。数学坐标系由XY轴，XY轴方向的箭头以及单位网格构成。最终效果如下图
第一步我们使用基本的数学方法来绘制方格。在Unity中新建一个Unlit Shader。删除_MainTexture属性及相关的变量，定义网格shader所需的属性。属性定义如下所示
Properties
{
//背景色
_BgColor("BgColor",color)=(1,1,1,1)
//十分线颜色
_LinesColor("LinesColor",color) = (0.7, 0.7, 0.7,1.0)
//次级线颜色
_SubLinesColor("SubLinesColor",color)=(0.95, 0.95, 0.95,1.0)
//缩放
_Scale("Scale",range(1,100)) = 10
_Subdiv("Subdiv",range(1,10)) = 10
}
这里的属性分别是背景色，十分线颜色，次级线的颜色，缩放值和最小刻度细分值。
在Fragment Shader中输入如下代码
vec2 pos = i.uv;
定义一个pos变量，并将其缩放。
pos *= _Scale;
通过取余运算，得到重复的值，加入_Scale=10,将在0-1之间重复10次
pos=frac(pos);
vec4 fragColor = _BgColor;
通过step方法，返回左下角的值，这里step方法，相当于if判断，
| step(a, x) | Returns (x >= a) ? 1 : 0 |
vec2 bl = step(0.01,pos); // 左下
vec2 tr = step(0.01,1.0-pos); // 右上
将上面两次运算的结果相乘，就会得到全部>0的位置
float alpha =bl.x * bl.y * tr.x * tr.y;
再通过mix方法，混合线的颜色和基础色。
fragColor = mix(fragColor, _LinesColor, 1-alpha);
将pos放大Subdiv倍，重复上面运算，得到十分位刻度的方格
vec2 bl2 = step(0.01,frac(pos*_Subdiv)); // 左下
vec2 tr2 = step(0.01,1.0-frac(pos*_Subdiv)); // 右上
float alpha2 =bl2.x * bl2.y * tr2.x * tr2.y;
fragColor = mix(fragColor, _SubLinesColor, 1-alpha2);
返回最终颜色。
return fragColor;
得到的最终上述效果完成后，得到最终效果如下：下图_Scale=2,_Subdive=5
完整代码如下：
Shader "Unlit/StepGrid"
{
Properties
{
//背景色
_BgColor("BgColor",color)=(1,1,1,1)
//十分线颜色
_LinesColor("LinesColor",color) = (0.7, 0.7, 0.7,1.0)
//次级线颜色
_SubLinesColor("SubLinesColor",color)=(0.95, 0.95, 0.95,1.0)
//缩放
_Scale("Scale",range(1,100)) = 10
_Subdiv("Subdiv",range(1,10)) = 10
}
SubShader
{
Tags { "RenderType"="Opaque" }
LOD 100
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#define vec2 half2
#define vec3 half3
#define vec4 half4
#define mix lerp
#include "UnityCG.cginc"
struct appdata
{
float4 vertex : POSITION;
float2 uv : TEXCOORD0;
};
struct v2f
{
float2 uv : TEXCOORD0;
float4 vertex : SV_POSITION;
};
float _Scale;
float _Subdiv;
fixed4 _BgColor;
fixed4 _LinesColor;
fixed4 _SubLinesColor;
v2f vert (appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = v.uv;
return o;
}
fixed4 frag (v2f i) : SV_Target
{
vec2 pos = i.uv;
pos *= _Scale;
pos=frac(pos);
vec4 fragColor = _BgColor;
vec2 bl = step(0.01,pos); // 左下
vec2 tr = step(0.01,1.0-pos); // 右上
float alpha =bl.x * bl.y * tr.x * tr.y;
fragColor = mix(fragColor, _LinesColor, 1-alpha);
vec2 bl2 = step(0.01,frac(pos*_Subdiv)); // 左下
vec2 tr2 = step(0.01,1.0-frac(pos*_Subdiv)); // 右上
float alpha2 =bl2.x * bl2.y * tr2.x * tr2.y;
fragColor = mix(fragColor, _SubLinesColor, 1-alpha2);
return fragColor;
}
ENDCG
}
}
}
通过上面的简单Shader，实现了一个基本的带十分刻度网格的Shader。下一节我们将继续对其进行优化。