庄懂老师TA学习笔记 - 渲染流程

视频链接

庄懂的技术美术入门课(美术向)-直播录屏-第1课_哔哩哔哩_bilibili

首先我们用一张图来看一下基础的渲染流程

第一步：读取模型的结构

大家都知道，在建模软件中，我们是通过创建一个一个顶点，来完成模型的创建的，我们通过连接这一个一个的顶点，就可以得到一些三角面，我们看一下Blender导出的一个正方体的模型结构

我们可以看到，这个正方体有8行是v开头，也就是他的顶点vertex，后面的三个数字也就是他的坐标，下方的f一共有12个，他指的的三角面fragment，对于一个正方体，如果我们把每一个正方形面使用对角线切割为两个三角形，正好可以得到12个三角形，也就是这12个三角面，三角面后面的数据就是他所使用的的顶点的Index，我们所写的Shader也就是读取了这些顶点数据，通过特殊的算法对他们进行处理，得到一些好看的效果。

第二步：定义输入结构

struct a2v {
                float3 vertex : POSITION;
                float3 normal: NORMAL;
            };

这个输入结构，定义的是模型的顶点和法线，冒号后面的是这个变量的类型

第三步：通过顶点函数对获得的顶点和法线进行计算

我们在这个函数中，通过计算，获取到了我们需要的数据并且把它输入进输出结构中

 v2f vert(a2v v) {
                v2f f;
                f.svPos = UnityObjectToClipPos(v.vertex);
                f.normalizedWorldNormal = normalize(UnityObjectToWorldNormal(v.normal));
                return f;
            }

第四步：定义输出结构

对于输出结构，我们必须有一个SV_POSITION类型的变量，也就是裁剪空间的坐标，否则将无法显示我们的自定义效果

struct v2f {
                float4 svPos: SV_POSITION;     
                fixed3 normalizedWorldNormal : COLOR;
            };

第五步：通过片元函数对顶点函数返回的结果进行计算，并进行输出

我们拿到顶点函数处理后得到的数据，将它们转化为屏幕空间的坐标，并且对他们进行像素化的处理。对于三个顶点所形成的三角面，他可能会跨越多个像素点，而我们的计算机都是以像素为单位进行处理和现实的，所以我们需要一个叫光栅化的操作，将三维空间的模型顶点，转换为了二维空间的像素点，之后又通过这个函数，对每一个像素进行单独的处理，从而得到我们最终的效果，下图就是基础光照模型Lambert的代码实现。（PS：光栅化，就是将几何信息转换成一个个的栅格组成的图像的过程。在Unity中，每一个美术模型由顶点和顶点构成的三角面来确定。将3D模型绘制到屏幕上时，根据每个三角面的三个顶点，将这个三角面所覆盖的每一个像素(栅格)进行填充的过程，就叫做光栅化）

 fixed4 frag(v2f f) : SV_TARGET {
                float3 normalizedLightDir = normalize(_WorldSpaceLightPos0.xyz);

                fixed dotValue = max(0, dot(normalizedLightDir, f.normalizedWorldNormal));

                fixed3 diffuse = _LightColor0.rgb * _Diffuse * dotValue;

                return fixed4(diffuse, 1);
            }

第六步：将处理后的图线显示到屏幕中