学习Shader(着色器)必须先要了解渲染管线。如果不了解,那么就不能说你了解Shader
Shader分类
顶点着色器 像素着色器 这两种着色器都是需要通过渲染管线来进行工作的!
1-什么是渲染管线?
我们通过屏幕看到的画面,都是二维的。即便他是3D物体。所以渲染管线就是生成或者渲染一张二维纹理。
2-渲染管线的分类
管线分为固定管线和可编程管线,现在的设备基本都配备可编程管线的GPU(即显卡)。
3-什么是渲染管线图
3D物体从自身的数据送入开始到最后呈现在屏幕上的所有历程。
顺着箭头方向,数据一步一步被处理,最后写到显示缓冲区(Framebufffer)
OpenGL官网管线图
4-渲染管线的组成
4-1:顶点处理
- 通过一系列的坐标转换,将模型的顶点在摄像机前进行位移,并最终投影到摄像机的投影屏幕上
就是相机投影
在这个阶段进行了坐标转换,逐顶点雾化,材质属性和光照属性处理。
4-2: 面处理
- 面的组装 一般由引擎来处理。美术资源其实就是顶点的集合,根据索引的顺序进行面的集合,然后就展示出模型的效果了。
面的组合,这些点都是有顺序的
常见的点组合
- 面截取 这些集合的面,由于摄像机的视口大小进行删减顶点。 这种删减方式大都通过算法进行截取
面的截取
- 面剔除 面的剔除,例如Unity中的正面剔除,反面剔除, 视锥剔除(去掉视锥外的面的部分,如下图),遮挡剔除(去掉被遮挡的物体)等
image.png
通过硬件提供的深度缓存(Depth Buffer/z-buffer)来判断。
DX内部的剔除
4-3:光栅化
将以向量为基本结构的面转换称一个个点阵形式的像素
光栅化
使用算法,最普通的就是Bresenhamis算法(特点:只使用整数运算,不使用round()函数,适用于线段和圆弧,获得最优化,最接近的结果。)
4-4:像素处理
对每个像素区域进行着色,对像素贴上贴图,形成最终的画面 这里分两部分
- 输入:像素的位置,深度,贴图坐标,法线,切线,颜色等
- 输出:每个像素的颜色,透明度 将通过显卡完成的像素颜色之,存入显存中。
渲染绘图管线流程图
4-4:顶点处理
顶点渲染的作用是对三维图元的顶点进行坐标变换和光照计算,生成可用于渲染到投影空间的顶点坐标/颜色和纹理坐标。 顶点渲染就是定义了一系列针对 顶点的渲染指令和渲染语句,当Direct3D处理顶点时,会自动使用这些渲染指令和渲染语句对每一个顶点逐一进行处理,完成顶点数据的处理工作。
5-Unity3D中的顶点Shader
代码语言:javascript复制Shader "Custom/Leichao886" {
Properties {
_Color ("Main Color", Color) = (1, 1, 1, 1)
_MainTex ("Base (RGB)", 2D) = "white" {}
}
SubShader {
Pass{
// Dont write to the depth buffer
ZWrite off
// Set up alpha blending
Blend SrcAlpha OneMinusSrcAlpha
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
sampler2D _MainTex;
float4 _Color;
struct v2f{
float4 pos:SV_POSITION;
float4 texcoord : TEXCOORD0;
};
v2f vert(appdata_base v)
{
v2f o;
// 获得Unity全局变量(模型坐标到世界坐标的矩阵) * 拿到顶点
o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
o.texcoord = v.texcoord;
return o;
}
half4 frag(v2f i):COLOR0
{
half4 col = _Color * tex2D(_MainTex, i.texcoord.xy);
return col;
}
ENDCG
}
}
FallBack "Diffuse"
}