详解Unity3D Shader开发之渲染管线

笔者介绍：姜雪伟，IT公司技术合伙人，IT高级讲师，CSDN社区专家，特邀编辑，畅销书作者，国家专利发明人;已出版书籍：《手把手教你架构3D游戏引擎》电子工业出版社和《Unity3D实战核心技术详解》电子工业出版社等。

Shader编程对于图形学渲染来说非常重要，为了让读者理解Shader编程的原理，文章会结合着可编程流水线原理与Shader编程一起给读者介绍，游戏场景中的物体渲染都是基于可编程流水线实现的，大家可以想象一下游戏开发使用的是美术制作的3D模型然后将其加入到游戏场景中进行渲染，其实就是把绘制的3D物体通过可编程流水线绘制在2D的屏幕上的过程，为了能让读者真正的了解其实现原理，下面文字会结合着图片一起讲解，首先介绍流程图如下所示：

图中流程是将3D模型通过渲染绘图管线处理也就是中间显示的黑盒子，最后在屏幕上绘制出2D图片。接下来给读者介绍渲染管线流程，它可以细分为：顶点处理，面处理，光栅化，像素处理，图示如下所示：

先介绍渲染管线的中的顶点处理，顶点处理就是通过一系列的坐标系转换，将模型的顶点在摄像机前进行位移，并最终将模型投影到摄像机的屏幕上。坐标系的流程图如下所示：

这一系列变换会涉及到各个坐标系中的矩阵变换，再将顶点变换给读者完整的展现一次，效果如下所示：

在这一阶段包括顶点的坐标变换、逐顶点雾化、材质属性和光照属性处理。接下来介绍面处理，面处理主要包括：

面的组装，面截取，面剔除，整个流程如下所示:

以3D模型为例，3D模型就是有点组成的，然后程序将点连成线，然后对其进行裁剪处理。在3D中模型的组装方式有很多种，效果如下所示：

这些点和线的绘制在DX中都有现成的接口调用。点线绘制完成后接下来开始对面进行剔除操作，在使用Unity开发中使用摄像机使可以很容易观察到物体的裁剪，效果如下所示：

面剔除完成后，接下来就需要进行光栅化操作了，先把效果图给读者展示一下：

其实在进行光栅化操作时，我们显示的物体都是有材质渲染的，这就涉及到像素处理，像素处理主要包括：对每个像素区域进行着色，对像素贴上贴图，最后形成最终的画面。

讲了这么多，我们需要知道面剔除操作是在渲染管线的哪个部分进行的，将渲染管线中的处理细化一下，效果如下所示：

渲染管线的流程是在GPU中进行的，展示效果如下所示：

如果读者使用DirectX开发过Demo，对3D调用接口应该比较熟悉，下面结合着图片把在CPU中调用的接口对应到GPU使用的接口，展示效果如下所示：

渲染管线主要分为四个步骤：顶点变换，图元装配，光栅化，像素处理，再结合着图片给读者介绍如下：

Shader编程主要是分为两部分：一部分是顶点处理，一部分是像素处理。

顶点处理：

顶点渲染的作用是对三维图元的顶点进行坐标变换和光照计算，生成可用于渲染到投影空间的顶点坐标、颜色和纹理坐标。顶点渲染就是定义了一系列针对顶点的渲染指令或渲染语句，当Direct3D处理图元顶点时，自动使用这些渲染指令或者渲染语句对每一个顶点逐一进行处理，完成顶点数据的处理工作。

再说说像素处理：

对每个像素的颜色斤西瓜混合纹理采样，包括迭代颜色和纹理坐标、纹理采样以及将纹理采样与灯光和材质的颜色进行混合。比如：Alpha测试、深度测试、模版测试、计算每个像素的雾化值、Alpha混合等。

下面把DirectX的完整代码给读者展示一下，使用的都是DX的接口，完整代码如下所示：

[cpp]  view plain  copy

1. //============================================================================  
2. // Desc: 纹理阶段混合状态  
3. //============================================================================  
4. #include <d3dx9.h>  
5.   
6.   
7. //-----------------------------------------------------------------------------  
8. // Desc: 全局变量  
9. //-----------------------------------------------------------------------------  
10. LPDIRECT3D9               g_pD3D        = NULL;  //Direct3D对象  
11. LPDIRECT3DDEVICE9         g_pd3dDevice  = NULL;  //Direct3D设备对象  
12. LPDIRECT3DVERTEXBUFFER9   g_pVB         = NULL;  //顶点缓冲区对象  
13. LPDIRECT3DTEXTURE9        g_pTexture    = NULL;  //纹理对象  
14.   
15.   
16. //-----------------------------------------------------------------------------  
17. // Desc: 顶点结构  
18. //-----------------------------------------------------------------------------  
19. struct CUSTOMVERTEX  
20. {  
21.     D3DXVECTOR3 position;   //顶点位置  
22.     D3DXVECTOR3 normal;     //顶点法线  
23.     FLOAT       tu, tv;     //顶点纹理坐标  
24. };  
25. #define D3DFVF_CUSTOMVERTEX (D3DFVF_XYZ|D3DFVF_NORMAL|D3DFVF_TEX1)  
26.   
27.   
28. //-----------------------------------------------------------------------------  
29. // Desc: 设置变换矩阵  
30. //-----------------------------------------------------------------------------  
31. VOID SetupMatrices()  
32. {  
33.     //建立并设置世界矩阵  
34.     D3DXMATRIXA16 matWorld;  
35.     D3DXMatrixIdentity( &matWorld );  
36.     g_pd3dDevice->SetTransform( D3DTS_WORLD, &matWorld );  
37.   
38.     //建立并设置观察矩阵  
39.     D3DXVECTOR3 vEyePt( 0.0f, 3.0f,-5.0f );  
40.     D3DXVECTOR3 vLookatPt( 0.0f, 0.0f, 0.0f );  
41.     D3DXVECTOR3 vUpVec( 0.0f, 1.0f, 0.0f );  
42.     D3DXMATRIXA16 matView;  
43.     D3DXMatrixLookAtLH( &matView, &vEyePt, &vLookatPt, &vUpVec );  
44.     g_pd3dDevice->SetTransform( D3DTS_VIEW, &matView );  
45.   
46.     //建立并设置投影矩阵  
47.     D3DXMATRIXA16 matProj;  
48.     D3DXMatrixPerspectiveFovLH( &matProj, D3DX_PI/4, 1.0f, 1.0f, 100.0f );  
49.     g_pd3dDevice->SetTransform( D3DTS_PROJECTION, &matProj );  
50. }  
51.   
52.   
53. //-----------------------------------------------------------------------------  
54. // Desc: 初始化Direct3D  
55. //-----------------------------------------------------------------------------  
56. HRESULT InitD3D( HWND hWnd )  
57. {  
58.     //创建Direct3D对象, 该对象用于创建Direct3D设备对象  
59.     if( NULL == ( g_pD3D = Direct3DCreate9( D3D_SDK_VERSION ) ) )  
60.         return E_FAIL;  
61.   
62.     //设置D3DPRESENT_PARAMETERS结构, 准备创建Direct3D设备对象  
63.     D3DPRESENT_PARAMETERS d3dpp;  
64.     ZeroMemory( &d3dpp, sizeof(d3dpp) );  
65.     d3dpp.Windowed = TRUE;  
66.     d3dpp.SwapEffect = D3DSWAPEFFECT_DISCARD;  
67.     d3dpp.BackBufferFormat = D3DFMT_UNKNOWN;  
68.     d3dpp.EnableAutoDepthStencil = TRUE;  
69.     d3dpp.AutoDepthStencilFormat = D3DFMT_D16;  
70.   
71.     //创建Direct3D设备对象  
72.     if( FAILED( g_pD3D->CreateDevice( D3DADAPTER_DEFAULT, D3DDEVTYPE_HAL, hWnd,  
73.                                       D3DCREATE_SOFTWARE_VERTEXPROCESSING,  
74.                                       &d3dpp, &g_pd3dDevice ) ) )  
75.     {  
76.         return E_FAIL;  
77.     }  
78.   
79.     //设置渲染状态  
80.     g_pd3dDevice->SetRenderState( D3DRS_CULLMODE, D3DCULL_NONE ); //剔除模式设置  
81.     g_pd3dDevice->SetRenderState( D3DRS_ZENABLE, TRUE );          //启用深度测试  
82.     g_pd3dDevice->SetRenderState(D3DRS_SPECULARENABLE, TRUE);     //启用镜面反射光照模型  
83.   
84.     //设置纹理渲染状态  
85.     g_pd3dDevice->SetTextureStageState( 0, D3DTSS_COLOROP,   D3DTOP_MODULATE );  //默认设置  
86.     g_pd3dDevice->SetTextureStageState( 0, D3DTSS_COLORARG1, D3DTA_TEXTURE );  
87.     g_pd3dDevice->SetTextureStageState( 0, D3DTSS_COLORARG2, D3DTA_DIFFUSE );  
88.       
89.     g_pd3dDevice->SetTextureStageState( 0, D3DTSS_ALPHAOP,   D3DTOP_DISABLE );  
90.   
91.     //设置纹理过滤方式  
92.     g_pd3dDevice->SetSamplerState( 0, D3DSAMP_MINFILTER, D3DTEXF_LINEAR );  
93.     g_pd3dDevice->SetSamplerState( 0, D3DSAMP_MAGFILTER, D3DTEXF_LINEAR );  
94.   
95.     //设置变换矩阵  
96.     SetupMatrices();  
97.   
98.     return S_OK;  
99. }  
100.   
101.   
102. //-----------------------------------------------------------------------------  
103. // Desc: 设置材质和灯光  
104. //-----------------------------------------------------------------------------  
105. VOID SetupLight()  
106. {  
107.      //设置材质  
108.     D3DMATERIAL9 mtrl;  
109.     ZeroMemory( &mtrl, sizeof(D3DMATERIAL9) );  
110.     mtrl.Diffuse.r = mtrl.Ambient.r = 1.0f;  
111.     mtrl.Diffuse.g = mtrl.Ambient.g = 1.0f;  
112.     mtrl.Diffuse.b = mtrl.Ambient.b = 1.0f;  
113.     mtrl.Diffuse.a = mtrl.Ambient.a = 1.0f;  
114.     g_pd3dDevice->SetMaterial( &mtrl );  
115.   
116.     //设置灯光  
117.     D3DXVECTOR3 vecDir;  
118.     D3DLIGHT9 light;  
119.     ZeroMemory( &light, sizeof(D3DLIGHT9) );  
120.     light.Type       = D3DLIGHT_DIRECTIONAL;  
121.     light.Diffuse.r  = 1.0f;  
122.     light.Diffuse.g  = 1.0f;  
123.     light.Diffuse.b  = 1.0f;  
124.     vecDir = D3DXVECTOR3(cosf(timeGetTime()/350.0f),  
125.                          1.0f,  
126.                          sinf(timeGetTime()/350.0f) );  
127.     D3DXVec3Normalize( (D3DXVECTOR3*)&light.Direction, &vecDir );  
128.     light.Range       = 1000.0f;  
129.     g_pd3dDevice->SetLight( 0, &light );  
130.     g_pd3dDevice->LightEnable( 0, TRUE );  
131.     g_pd3dDevice->SetRenderState( D3DRS_LIGHTING, TRUE ); //默认设置  
132.   
133.     //设置环境光  
134.     g_pd3dDevice->SetRenderState( D3DRS_AMBIENT, 0x00808080 );  
135. }  
136.   
137.   
138. //-----------------------------------------------------------------------------  
139. // Desc: 创建场景图形(纹理和顶点缓冲区)  
140. //-----------------------------------------------------------------------------  
141. HRESULT InitGeometry()  
142. {  
143.     //创建纹理对象  
144.     if( FAILED( D3DXCreateTextureFromFile( g_pd3dDevice, L"texture.jpg", &g_pTexture ) ) )  
145.     {  
146.        MessageBox(NULL, L"创建纹理失败", L"Texture.exe", MB_OK);  
147.        return E_FAIL;  
148.     }  
149.   
150.     //创建顶点缓冲区  
151.     if( FAILED( g_pd3dDevice->CreateVertexBuffer( 50*2*sizeof(CUSTOMVERTEX),  
152.                                                   0, D3DFVF_CUSTOMVERTEX,  
153.                                                   D3DPOOL_DEFAULT, &g_pVB, NULL ) ) )  
154.     {  
155.         return E_FAIL;  
156.     }  
157.   
158.     //填充顶点缓冲区  
159.     CUSTOMVERTEX* pVertices;  
160.     if( FAILED( g_pVB->Lock( 0, 0, (void**)&pVertices, 0 ) ) )  
161.         return E_FAIL;  
162.     for( DWORD i=0; i<50; i++ )  
163.     {  
164.         FLOAT theta = (2*D3DX_PI*i)/(50-1);  
165.         pVertices[2*i+0].position = D3DXVECTOR3( sinf(theta),-1.0f, cosf(theta) );  
166.         pVertices[2*i+0].normal   = D3DXVECTOR3( sinf(theta), 0.0f, cosf(theta) );  
167.         pVertices[2*i+0].tu       = ((FLOAT)i)/(50-1);  
168.         pVertices[2*i+0].tv       = 1.0f;  
169.   
170.         pVertices[2*i+1].position = D3DXVECTOR3( sinf(theta), 1.0f, cosf(theta) );  
171.         pVertices[2*i+1].normal   = D3DXVECTOR3( sinf(theta), 0.0f, cosf(theta) );  
172.         pVertices[2*i+1].tu       = ((FLOAT)i)/(50-1);  
173.         pVertices[2*i+1].tv       = 0.0f;  
174.     }  
175.     g_pVB->Unlock();  
176.   
177.     return S_OK;  
178. }  
179.   
180.   
181. //-----------------------------------------------------------------------------  
182. // Name: 释放创建的对象  
183. //-----------------------------------------------------------------------------  
184. VOID Cleanup()  
185. {  
186.     //释放纹理对象  
187.      if( g_pTexture != NULL )  
188.         g_pTexture->Release();  
189.   
190.     //释放顶点缓冲区对象  
191.     if( g_pVB != NULL )  
192.         g_pVB->Release();  
193.   
194.     //释放Direct3D对象  
195.     if( g_pd3dDevice != NULL )  
196.         g_pd3dDevice->Release();  
197.   
198.     //释放Direct3D对象  
199.     if( g_pD3D != NULL )  
200.         g_pD3D->Release();  
201. }  
202.   
203.   
204. //-----------------------------------------------------------------------------  
205. // Desc: 渲染图形   
206. //-----------------------------------------------------------------------------  
207. VOID Render()  
208. {  
209.     //清除后缓冲区和深度缓冲区  
210.     g_pd3dDevice->Clear( 0, NULL, D3DCLEAR_TARGET|D3DCLEAR_ZBUFFER,  
211.                          D3DCOLOR_XRGB(45, 50, 170), 1.0f, 0 );  
212.   
213.     //开始在后台缓冲区绘制图形  
214.     if( SUCCEEDED( g_pd3dDevice->BeginScene() ) )  
215.     {  
216.         //设置材料和灯光, 因为灯光属性不断变化,所以在此设置  
217.         SetupLight();   
218.   
219.         //在后台缓冲区绘制图形  
220.         g_pd3dDevice->SetTexture( 0, g_pTexture );  //设置纹理  
221.         g_pd3dDevice->SetStreamSource( 0, g_pVB, 0, sizeof(CUSTOMVERTEX) );  
222.         g_pd3dDevice->SetFVF( D3DFVF_CUSTOMVERTEX );  
223.         g_pd3dDevice->DrawPrimitive( D3DPT_TRIANGLESTRIP, 0, 2*50-2 );  
224.   
225.         //结束在后台缓冲区绘制图形  
226.         g_pd3dDevice->EndScene();  
227.     }  
228.   
229.     //将在后台缓冲区绘制的图形提交到前台缓冲区显示  
230.     g_pd3dDevice->Present( NULL, NULL, NULL, NULL );  
231. }  
232.   
233.   
234. //-----------------------------------------------------------------------------  
235. // Desc: 消息处理  
236. //-----------------------------------------------------------------------------  
237. LRESULT WINAPI MsgProc( HWND hWnd, UINT msg, WPARAM wParam, LPARAM lParam )  
238. {  
239.     switch( msg )  
240.     {  
241.     case WM_DESTROY:  
242.         Cleanup();  
243.         PostQuitMessage( 0 );  
244.         return 0;  
245.     }  
246.   
247.     return DefWindowProc( hWnd, msg, wParam, lParam );  
248. }  
249.   
250.   
251. //--------------------------------------------------------  
252. // Desc: 入口函数  
253. //--------------------------------------------------------  
254. INT WINAPI WinMain( HINSTANCE hInst, HINSTANCE, LPSTR, INT )  
255. {  
256.     //注册窗口类  
257.     WNDCLASSEX wc = { sizeof(WNDCLASSEX), CS_CLASSDC, MsgProc, 0L, 0L,  
258.                       GetModuleHandle(NULL), NULL, NULL, NULL, NULL,  
259.                       L"ClassName", NULL };  
260.     RegisterClassEx( &wc );  
261.   
262.     //创建窗口  
263.     HWND hWnd = CreateWindow( L"ClassName", L"纹理阶段混合状态",  
264.                               WS_OVERLAPPEDWINDOW, 200, 100, 500, 500,  
265.                               GetDesktopWindow(), NULL, wc.hInstance, NULL );  
266.   
267.     //初始化Direct3D  
268.     if( SUCCEEDED( InitD3D( hWnd ) ) )  
269.     {  
270.         //创建场景图形  
271.         if( SUCCEEDED( InitGeometry() ) )  
272.         {  
273.             //显示窗口  
274.             ShowWindow( hWnd, SW_SHOWDEFAULT );  
275.             UpdateWindow( hWnd );  
276.   
277.             //进入消息循环  
278.             MSG msg;  
279.             ZeroMemory( &msg, sizeof(msg) );  
280.             while( msg.message!=WM_QUIT )  
281.             {  
282.                 if( PeekMessage( &msg, NULL, 0U, 0U, PM_REMOVE ) )  
283.                 {  
284.                     TranslateMessage( &msg );  
285.                     DispatchMessage( &msg );  
286.                 }  
287.                 else  
288.                 {  
289.                     Render();  //渲染图形  
290.                 }  
291.             }  
292.         }  
293.     }  
294.   
295.     UnregisterClass( L"ClassName", wc.hInstance );  
296.     return 0;  
297. }  

这些操作都是在CPU中进行的，下面对应的是在Unity3D shader中的代码，Shader代码如下所示：

[cpp]  view plain  copy

1. Shader "Custom/RenderPipeline" {  
2.       
3.     Properties {  
4.         _Color ("Main Color", Color) = (1, 1, 1, 1)  
5.         _MainTex ("Base (RGB)", 2D) = "white" {}  
6.     }  
7.     SubShader {  
8.   
9.         Pass{  
10.         // Dont write to the depth buffer  
11.         ZWrite off  
12.   
13.         // Set up alpha blending  
14.         Blend SrcAlpha OneMinusSrcAlpha  
15.   
16.         CGPROGRAM  
17.         #pragma vertex vert  
18.         #pragma fragment frag  
19.         #include "UnityCG.cginc"  
20.   
21.         sampler2D _MainTex;  
22.         float4 _Color;  
23.   
24.         struct v2f{  
25.             float4 pos:SV_POSITION;  
26.             float4 texcoord : TEXCOORD0;  
27.         };  
28.   
29.         v2f vert(appdata_base v)  
30.         {  
31.             v2f o;  
32.             o.pos = mul(UNITY_MATRIX_MVP, v.vertex);  
33.             o.texcoord = v.texcoord;  
34.             return o;  
35.         }  
36.   
37.         half4 frag(v2f i):COLOR0  
38.         {  
39.             half4 col = _Color * tex2D(_MainTex, i.texcoord.xy);  
40.             return col;  
41.         }  
42.   
43.         ENDCG  
44.         }  
45.     }   
46.     FallBack "Diffuse"  
47. }  

关于渲染管线的介绍，就讲到这里，主要是通过图片的描述让读者知道渲染管线是如何工作的。结合着DirectX和Unity3D Shader也是告诉读者CPU和GPU之间的对应关系，文中展示的Unity3D Shader相对来说比较简单，Shader中的模型视图投影矩阵的表示为UNITY_MATRIX_MVP，mul表示的是将模型顶点转换到投影矩阵中。。。。。。