新智元原創
來源：Github
編輯：元子
【新智元導讀】這篇教程是今日GitHub趨勢榜第一，一天便達到了1500星。主要介紹了通過使用Panda3D遊戲引擎和OpenGL著色語言來為3D遊戲添加紋理，法線貼圖，泛光，環境遮擋等等。教程內容十分豐富，動圖也非常生動。
Shader，是運行在GPU上的程序，中文稱為著色器。它的主要用途是對三維物體進行著色處理，對光與影進行計算，以及控制紋理顏色的呈現等，最終，將遊戲引擎中的幾何數據轉化為屏幕上的模型、場景以及特效。
吃雞、農藥、戰地、塞爾達…都離不開著色器，著色器被譽為照亮虛擬世界的"魔法"。 著色器還可以用來做後期處理，類似PS。
著色程序是一整套編譯好並連結在一起的著色器的集合。著色器shader的編寫需要使用著色語言GL Shader Language（GLSL），GLSL的語法與C語言很類似。
著色器編程不光是對開發技能的考驗，更是對程式設計師想像力的挑戰，以至於有說法稱會寫Shader的程式設計師是站在食物鏈頂端的人。想成為遊戲開發高手，著色器編程是必備技能。
有興趣在3D遊戲中添加紋理，光照，陰影，法線貼圖，環境光遮蔽了嗎？好極了！今天新智元為大家帶來一個Github項目，從零開始教會大家進行3D遊戲著色。
以下一系列著色技術，都是具有高可移植的技巧，無論是Godot還是Unity都將適用。通過這些技術，你的遊戲視覺效果將提升到新的高度。
對於著色器之間的粘合劑，作者選擇了神器Panda3D遊戲引擎和OpenGL著色語言（GLSL）。
Panda3D是一個強大的渲染引擎。核心渲染模塊基於C++開發。Panda3D提供了Python的腳本化實用接口。
本項目code在以下環境下測試通過。
Linux manjaro 4.9.135-1-MANJAROOpenGL renderer string: GeForce GTX 970/PCIe/SSE2OpenGL version string: 4.6.0 NVIDIA 410.73g++ (GCC) 8.2.1 20180831Panda3D 1.10.1-1
本文只對該repo做一個大致介紹，具體代碼及講解請參閱項目地址：
https://github.com/lettier/3d-game-shaders-for-beginners.git
運行示例代碼需要先build
如果你想運行示例代碼，首先要先build。根據不同平臺安裝對應版本的Panda3D。其次，Clone項目repo，進入目錄，開始編譯。
Linux：
g++\ -c main.cxx \ -o 3d-game-shaders-for-beginners.o \ -std=gnu++11 \ -O2 \ -I/usr/include/python2.7/ \ -I/usr/include/panda3d/
編譯完成後執行：
g++\ 3d-game-shaders-for-beginners.o \ -o 3d-game-shaders-for-beginners \ -L/usr/lib/panda3d \ -lp3framework \ -lpanda \ -lpandafx \ -lpandaexpress \ -lp3dtoolconfig \ -lp3dtool \ -lp3pystub \ -lp3direct \ -lpthread
Mac：
clang++\ -c main.cxx \ -o 3d-game-shaders-for-beginners.o \ -std=gnu++11 \ -g \ -O2 \ -I/usr/include/python2.7/ \ -I/Developer/Panda3D/include/
編譯完成後執行：
clang++\ 3d-game-shaders-for-beginners.o \ -o 3d-game-shaders-for-beginners \ -L/Developer/Panda3D/lib \ -lp3framework \ -lpanda \ -lpandafx \ -lpandaexpress \ -lp3dtoolconfig \ -lp3dtool \ -lp3pystub \ -lp3direct \ -lpthread
坐標系統
開始插手著色器代碼之前，需要對3D物體的坐標系統有所了解。和在立體幾何的坐標系意義，繪製3D物體也是需要x、y、z三個坐標軸的值。
將定義好的坐標軸的值轉換為實際繪製的坐標，需要經過五個坐標系統的轉換。
模型空間
相對於原點 (0,0,0) 而自定義的起始坐標點。
世界空間
世界空間就是當所有物體一起繪製、仍然相對於原點的、更大的一個坐標系。可以防止模型出現扎堆兒情況。
觀察空間
將世界空間的坐標轉化為攝像機的視角所觀察到的空間坐標。
裁剪空間
根據我們的需要來裁剪一定範圍內的物體，而在這個範圍之外的坐標就會被忽略掉，實質上還是進行坐標的操作。
屏幕空間
將坐標投射到屏幕上。
渲染到紋理
渲染到紋理(Render To Texture, RTT)是現在很多特效裡面都會用到的一項很基本的技術，實現起來很簡單，也很重要。
渲染到紋理是為了實現一些特殊的效果，比如一個光滑的球體，它應該是可以反射周圍環境的，這個時候就需要先渲染到紋理。
在此設置中，示例代碼執行以下操作:
存儲幾何數據（如頂點位置或法線）供以後使用存儲材料數據（如漫反射顏色）供以後使用UV映射各種紋理（漫反射，普通，陰影等）計算環境光，漫反射光，鏡面光和發光光呈現霧
紋理和光照（Lighting）
紋理涉及使用UV坐標將一些顏色或一些其他類型的矢量映射到片段。 U和V的範圍從0到1。每個頂點都獲得一個UV坐標，並在頂點著色器中輸出。
完成lighting涉及到計算和組合環境光、漫反射光、鏡面光和發射光方面。示例代碼使用Phong lighting。Diffuse代碼：
// ...float diffuseIntensity = max(dot(normal, unitLightDirection), 0.0);if (diffuseIntensity > 0) {// ... }// ...
法線貼圖
法線貼圖（英語：Normal mapping）是一種模擬凹凸處光照效果的技術，是凸凹貼圖的一種實現。法線貼圖可以在不添加多邊形的前提下，為模型添加細節。常見的使用場景是為低多邊形模型改善外觀、添加細節，此時的法線貼圖一般根據高多邊形模型或高度貼圖生成。
頂點代碼：
// ...uniform mat3 p3d_NormalMatrix;// ...in vec3 p3d_Normal;// ...in vec3 p3d_Binormal;in vec3 p3d_Tangent;// ... vertexNormal = normalize(p3d_NormalMatrix * p3d_Normal); binormal = normalize(p3d_NormalMatrix * p3d_Binormal); tangent = normalize(p3d_NormalMatrix * p3d_Tangent);// ...
描邊
描邊著色器需要一個輸入紋理，用於檢測邊緣中的顏色。此輸入紋理的候選者包括材質的漫反射顏色、漫反射貼圖的顏色、頂點法線，甚至法線貼圖的顏色。
uniformstruct {vec4diffuse;}p3d_Material;outvec4 fragColor;voidmain() {vec3diffuseColor = p3d_Material.diffuse.rgb;fragColor = vec4(diffuseColor, 1);}
霧化、全屏泛光
霧（fog，或在Blender中稱為mist）將霧氣效果添加到場景中，提供神秘感和柔化。
// ...uniform structp3d_FogParameters { vec4 color ; float start ; float end ; } p3d_Fog;// ...
Panda3D提供了一個很好的數據結構，可以保存所有fog參數，你也可以手動將其傳遞給著色器。
Bloom有時候也叫Glow效果，中文一般叫做「全屏泛光」，可以使得發光物體看起來更逼真。
屏幕空間環境光遮蔽（SSAO）
環境光遮蔽（AO，ambient occlusion），大致上指的是幾何物體的拐角處，因為受光不全面（被相鄰的面擋光／遮蔽），導致變暗。屏幕環境光遮蔽技術使用了屏幕空間場景的深度而不是真實的幾何體數據來確定遮蔽量。這一做法相對於真正的環境光遮蔽不但速度快，而且還能獲得很好的效果，使得它成為近似實時環境光遮蔽的標準。
下面動圖展示了用AO和沒用AO的區別。用了AO，物體拐角的地方會變暗看起來就更逼真。
景深
景深（英語：Depth of field, DOF）景深是指相機對焦點前後相對清晰的成像範圍。在光學中，尤其是錄影或是攝影，是一個描述在空間中，可以清楚成像的距離範圍。
雖然透鏡只能夠將光聚到某一固定的距離，遠離此點則會逐漸模糊，但是在某一段特定的距離內，影像模糊的程度是肉眼無法察覺的，這段距離稱之為景深。
景深淺則模糊範圍大，虛化效果明顯。反之則虛化效果減弱。焦外代碼示例：
//...vec4result = vec4(0);for(int i = 0; i < size2; ++i) {x = size - xCount;y = yCount - size;result+=texture(blurTexture,texCoord+vec2(x * separation, y * separation));xCount-= 1;if(xCount < countMin) { xCount = countMax; yCount -= 1; }}result = result / size2;//...
色調分離和像素化
色調分離是指一幅圖像原本是由緊緊相鄰的漸變色階構成，被數種突然的顏色轉變所代替。這一種突然的轉變，亦稱作「跳階」。色調分離其實就是用來製造分色效果。
將3D遊戲像素化使他看起來很有趣，並可以節省時間，不必手動創建所有的像素藝術。和色調分離相結合，可以打造真正的復古外觀。
參考連結：
https://github.com/lettier/3d-game-shaders-for-beginners.git