第一个shader练习项目

首先，搭建好shade学习环境

我的环境是用团结引擎，版本2022.3.48t4，可以在自行在团结官网下载Tuanjie Hub和Tuanjie引擎。

1. 打开Tuanjie Hub，点击右上角的新项目，修改项目名称和项目位置即可。

2. 创建一个材质，材质的命名就为TestMaterial。

3. 创建2D的Panel。

4. 将Panel的材质改成我们刚刚创建的材质TestMaterial，这样我们后面写的shader应用到TestMaterial上，就能在Panel上看到效果。

接下来，开始动手写shader吧

我写shader的编辑器是visual code，可以自行在官网下载使用。这次实现的shader是一个简单的练习，最终的效果是实现将Plane分割成四个部分，每个部分有不同的颜色。

1. 创建Shader脚本，此时得到的unity给的shader模板代码。shader的命名就叫TestShader

2. Unlit Shader类型的shader是最简单的Shader，但我们也将它在简化一下，如下所示：

Shader "Unlit/TestShader" { Properties { } 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; UNITY_FOG_COORDS(1) float4 vertex : SV_POSITION; }; v2f vert (appdata v) { v2f o; o.vertex = UnityObjectToClipPos(v.vertex); o.uv = v.uv; return o; } fixed4 frag (v2f i) : SV_Target { fixed4 col = i.uv; return col; } ENDCG } } }

2.1. 第1步实验：根据uv.x是大于0.5还是小于0.5来给像素不同的颜色。主要是改片元着色器，代码如下：

fixed4 frag (v2f i) : SV_Target { fixed4 col = fixed4(1.0, 0.0, 0.0, 1.0); if(i.uv.x > 0.5) { col = fixed4(0.0, 0.0, 1.0, 1.0); } return col; }

修改完之后，现在到untiy中看一下效果，发现没有变化。噢！TestMaterial创建好之后没有将其Shader改成我们自己写的TestShader。选择TestMaterial之后，在InSpector中的Shader一栏中选择TestShader。修改之后在看Game/Scene窗口看到效果。Plane的左边一半是红色，右边一半是蓝色。

2.2. 第2步实验：在2.1的实验基础上，增加y坐标的判断，使得Plane被拆分成四种颜色，依然会改着色器代码，如下：

fixed4 frag (v2f i) : SV_Target { fixed4 col = fixed4(0.0, 0.0, 1.0, 1.0); if(i.uv.x > 0.5) { if(i.uv.y > 0.5) { col = fixed4(1.0, 1.0, 0.0, 1.0); } else { col = fixed4(1.0, 0.0, 0.0, 1.0); } } else { if(i.uv.y > 0.5) { col = fixed4(0.0, 1.0, 0.0, 1.0); } else { col = fixed4(0.0, 0.0, 0.0, 1.0); } } return col; }

修改完之后，现在到untiy中看一下效果，发现Plane被分成四种颜色。

2.3. 在实验2.2中我们的if语句显得有些臃肿，我们可以用step函数来替换臃肿的if语句，并且在某显卡或者Shader编译器，使用内置的step函数性能可能更高。step函数接收两个参数的输入，它的意义是：如果第二个参数大于第一个参数，函数返回1，否则返回0。

fixed4 frag (v2f i) : SV_Target { float r = step(0.5, i.uv.x); float g = step(0.5, i.uv.y); float b = 0.0; return fixed4(r, g, b, 1.0); }

完整的项目地址放在github上，可以自行下载(https://github.com/evazhuang/Shader.git)。

到这里，我们一个Shader小练习就结束了,感谢观看，预告下一次将练习如何用Shader实现一个圆，敬请期待！