UnityShader 从入门到盖棺(一)

朱雀 2023-03-14 10:44 107阅读 0赞

![GTA5][]

### 前言 ###

笔者我是一个最近在入门UnityShader的菜鸡⊙﹏⊙∥。写点东西巩固自己的认知，顺便看看能不能帮助到其他和我一样想入门的人。

我是以冯乐乐的《Unity Shader入门精要》来作为我的入门教程的。在接下来的正文里面，我会跳过一些前置知识相关。但这些东西十分重要，所以我会尽量给出一些链接，让大家去了解。我主要是围绕一个个实例，让大家快速做出效果。

所以如果大家有图形学相关底子，也了解Unity的基础操作，会更方便下面的学习。大家有疑问的，或者我有错误的，欢迎大家评论，一起学习进步。

另外，我会把整个工程上传到github。大家可以去下载到完整的项目。

### 前期准备 ###

*  Unity 2019.3.9 (这是我现在使用的版本)
 *  一个编辑器(Rider, Sublime, VS甚至记事本都可以(￣▽￣)")

### 初识Unity Shader ###

来到正文了，废话不多说，我们先看一下本节完成后，你会得到一个怎样的结果。

![colorSphere1][]

好了，让我们打开Unity。然后在Window->Rendering->Lighting Settings打开光照设置，把天空盒去掉(暂时不希望它影响我们)。在SkyBox Material那里选择None即可。

![CloseSkyBox][]

我们直接创建一个Shaders文件夹，然后在里面新建一个Unity Shader文件(右键->Create->Shader->Unlit Shader)，命名为1\_SampleShader。Unlit Shader是一种无关照Shader，它暂时更适合我们入门学习。

![CreateShader][]

然后我们用我们准备好的编辑器打开我们创建的Shader文件。来看一下Unity Shader的结构。

![ShaderStruct][]

接下来，我们动手写一个最简单的Shader，先把Shader文件里原来的内容**全部删掉**。

接着起个我们的名字(**先按我的名字来**，想秀的等看完教程╰(￣ω￣ｏ))。

Shader "Unity Shader/C1/1_SimpleShader" {
    	
    }

然后直接定义一个SubShader和Pass语义块(我们暂时不需要Properties块，因为我们暂时不需要在面板里输入任何变量)

SubShader {
    		Pass {
    			
    		}
    	}

我们开始CG代码片段的编写。先定义一个由CGPROGRAM和ENDCG所包围的片段(可以理解成前面都是在做设置，下面才是真正的Shader代码。CG意味着一种语法，它更像DX的HLSL Shader语法)

CGPROGRAM
    			
    			ENDCG

然后我们进行两个预处理指令，指定哪个函数是顶点着色器，哪个函数是片段着色器。

#pragma vertex vert // 指定vert函数是顶点着色器
    #pragma fragment frag // 指定frag函数是片段着色器

然后我们定义顶点着色器函数。我们先让这个函数只做普通的MVP变换。(MVP变换是渲染管线很重要的一个概念，我会在最后给出一些阅读材料让读者去了解)

// float4是指一个4个分量的float类型
    // 输入一个float4,这个参数来源于POSITION
    // 输出一个float4,这个参数将会写到SV_POSITION
    float4 vert(float4 position:POSITION) : SV_POSITION {
    	return UnityObjectToClipPos(position); //MVP变换
    }

上面提到的POSITION和SV\_POSITION大家可以理解为是一块存储空间，Unity会把这段存储空间里的值赋值给你的变量，或者把你变量的值复制到对应存储空间中。其中顶点着色器必须输出SV\_POSITION用于后续处理，片段着色器也必须输出SV\_Target来指定一个片段颜色。

然后我们定义一个不管怎样都输出红色的片段着色器。

// fixed比float的精度要小，会更省内存。一般(-2,2)范围的浮点数可以用fixed。
    // 输出一个fixed4，写到SV_Target里
    fixed4 frag() : SV_Target {
        // 浅绿色，为什么要这种颜色。别问，我朋友说他喜欢绿。
    	return fixed4(0.2, 1.0, 0.5, 1.0);
    }

好了，现在我们一个最最最简单的UnityShader已经写完了。我们创建一个Material(右键->Create->Material), 然后在这个材质(Material)的控制面板里选择我们的Shader。(Unity Shader->C1->1\_Sample), 我们可以看到这个路径就是我们上面的Shader名字。

![SelectShader][]

然后我们在场景里创建一个球体，记得**先reset**一下。

![resetSphere][]

把材质拖到球体上，我们就可以看到一个浅绿色的球体了。

![GreenSphere][]

会不会发现有点成就感，但又没意思(这垃圾效果，不写也罢╰（‵□′）╯)。别急，毕竟我们还在入门嘛，都还没盖棺。

接下来我们用一下Properties，起码可以让我们指定颜色。在SubShader语义块前面加回我们的属性块。

Properties {
    	_MainColor ("main color", COLOR) = (0.2, 1.0, 0.5, 1.0)
    }

*  \_MainColor 是我们后面代码里面要用的变量名
 *  “main color” 是Unity控制面板中能看到的名字
 *  COLOR 是这个属性的类型，COLOR是一个Float4
 *  = 后面接的是默认值，用户不选的话，默认就是绿色。没错，那种绿色

你会发现这时候，那个材质的控制面板已经允许我们选颜色了，但只是选了没用而已，接着我们就把这个颜色用上去。

我们在预定义语句的后面加上我们的变量声明

#pragma vertex vert
    #pragma fragment frag
    
    fixed4 _MainColor;

然后片段着色器里，我们直接输出我们这个颜色。

fixed4 frag() : SV_Target {
    	return _MainColor;
    }

好了，现在可以在材质面板里选择颜色来控制我们球体的颜色了。大家可以去选一下看看效果。

![pickcolor][]

我选了一个我朋友更喜欢的深绿色。

当然，顶点着色器是可以给片段着色器传递参数的。  
我们先在**顶点着色器函数前**定义一个结构体。

struct v2f { // vertex to fragment, 顶点着色器输出到片段着色器
    	float4 position : SV_POSITION;
    	float3 worldPos : TEXCOORD0; // 世界空间下的顶点坐标 
    };

然后我们修改顶点着色器的输出为v2f，并且为每一个分量赋值。

v2f vert(float4 position:POSITION) {
    	v2f output;  // 声明一个v2f变量
    	output.position = UnityObjectToClipPos(position);
    	// 用位置右乘一个model矩阵转换到世界空间
    	output.worldPos = mul(unity_ObjectToWorld, position).xyz;
    	return output;
    }

接着只要把片段着色器的输入定义为v2f变量，我们就可以用上顶点着色器输出的值了(当然是经过插值的)。

// 把世界空间的位置当成颜色输出，这也是Shader的一种Debug方法
    fixed4 frag(v2f input) : SV_Target {
    	return fixed4(input.worldPos, 1.0) * 2;
    }

我们可以看到现在的效果是，我们得到了一个五彩斑斓的球。

![ColorSphere][]

如果出现问题的，可以到GitHub上[查看源码。][Link 1]

### 结语 ###

这里我就结束了我的第一篇入门分享，之后的节奏大概是每周一更，也有可能多更，但尽量不停更 - -。大家有疑问的也欢迎评论怼我，我会尽量认真看，我写错的地方也会去纠正。

另外，我一直相信，只要人人都付出一点爱，我就会O(∩\_∩)O嘿嘿嘿。

![vxpay][]

### 链接 ###

MVP变换：[https://learnopengl-cn.github.io/01%20Getting%20started/08%20Coordinate%20Systems/][https_learnopengl-cn.github.io_01_20Getting_20started_08_20Coordinate_20Systems]

github地址：[https://github.com/gjbian/Unity-Shader-Study][https_github.com_gjbian_Unity-Shader-Study]

下一篇：[UnityShader 从入门到盖棺(二)][UnityShader]

[GTA5]: /images/20230312/e5a1793acc7349e48f2d6e433eff674c.png
[colorSphere1]: /images/20230312/34d2ee807f06405d93f3f28f0aecffe2.png
[CloseSkyBox]: /images/20230312/53842cc93cf94cdfbb8c0dfa0abf6b21.png
[CreateShader]: /images/20230312/6207a523091643878eb3f1d1ac87e642.png
[ShaderStruct]: /images/20230312/84b49a3b54cf4364aeec740a897dbbb5.png
[SelectShader]: /images/20230312/58f26546538146a9aaa45bc6ab8765b2.png
[resetSphere]: /images/20230312/22eacf23950a41edab763711642e666e.png
[GreenSphere]: /images/20230312/e503f70576ac48d298cb45d4ae1f2d5c.png
[pickcolor]: /images/20230312/96345bd735b947d1b759e53b9bd5efe7.png
[ColorSphere]: /images/20230312/513c3c6a8f6840ab89ca4332b01eeec7.png
[Link 1]: https://github.com/gjbian/Unity-Shader-Study/blob/master/Assets/Shaders/1_SampleShader.shader
[vxpay]: /images/20230312/2b29bac2a4a94845bf70fa1a31b8cf32.png
[https_learnopengl-cn.github.io_01_20Getting_20started_08_20Coordinate_20Systems]: https://learnopengl-cn.github.io/01%20Getting%20started/08%20Coordinate%20Systems/
[https_github.com_gjbian_Unity-Shader-Study]: https://github.com/gjbian/Unity-Shader-Study
[UnityShader]: https://blog.csdn.net/qa1041335855/article/details/106318380