從零開(kāi)始學(xué)3D著色器編程

這篇教程是今日GitHub趨勢(shì)榜第一，一天便達(dá)到了1500星。主要介紹了通過(guò)使用Panda3D游戲引擎和OpenGL著色語(yǔ)言來(lái)為3D游戲添加紋理，法線貼圖，泛光，環(huán)境遮擋等等。教程內(nèi)容十分豐富，動(dòng)圖也非常生動(dòng)。

Shader，是運(yùn)行在GPU上的程序，中文稱(chēng)為著色器。它的主要用途是對(duì)三維物體進(jìn)行著色處理，對(duì)光與影進(jìn)行計(jì)算，以及控制紋理顏色的呈現(xiàn)等，最終，將游戲引擎中的幾何數(shù)據(jù)轉(zhuǎn)化為屏幕上的模型、場(chǎng)景以及特效。

吃雞、農(nóng)藥、戰(zhàn)地、塞爾達(dá)…都離不開(kāi)著色器，著色器被譽(yù)為照亮虛擬世界的"魔法"。 著色器還可以用來(lái)做后期處理，類(lèi)似PS。

著色程序是一整套編譯好并鏈接在一起的著色器的集合。著色器shader的編寫(xiě)需要使用著色語(yǔ)言GL Shader Language（GLSL），GLSL的語(yǔ)法與C語(yǔ)言很類(lèi)似。

著色器編程不光是對(duì)開(kāi)發(fā)技能的考驗(yàn)，更是對(duì)程序員想象力的挑戰(zhàn)，以至于有說(shuō)法稱(chēng)會(huì)寫(xiě)Shader的程序員是站在食物鏈頂端的人。想成為游戲開(kāi)發(fā)高手，著色器編程是必備技能。

有興趣在3D游戲中添加紋理，光照，陰影，法線貼圖，環(huán)境光遮蔽了嗎？好極了！今天新智元為大家?guī)?lái)一個(gè)Github項(xiàng)目，從零開(kāi)始教會(huì)大家進(jìn)行3D游戲著色。

以下一系列著色技術(shù)，都是具有高可移植的技巧，無(wú)論是Godot還是Unity都將適用。通過(guò)這些技術(shù)，你的游戲視覺(jué)效果將提升到新的高度。

對(duì)于著色器之間的粘合劑，作者選擇了神器Panda3D游戲引擎和OpenGL著色語(yǔ)言（GLSL）。

Panda3D是一個(gè)強(qiáng)大的渲染引擎。核心渲染模塊基于C++開(kāi)發(fā)。Panda3D提供了Python的腳本化實(shí)用接口。

本項(xiàng)目code在以下環(huán)境下測(cè)試通過(guò)。

Linux manjaro 4.9.135-1-MANJARO

OpenGL renderer string: GeForce GTX 970/PCIe/SSE2

OpenGL version string: 4.6.0 NVIDIA 410.73

g++ (GCC) 8.2.1 20180831

Panda3D 1.10.1-1

運(yùn)行示例代碼需要先build

如果你想運(yùn)行示例代碼，首先要先build。根據(jù)不同平臺(tái)安裝對(duì)應(yīng)版本的Panda3D。其次，Clone項(xiàng)目repo，進(jìn)入目錄，開(kāi)始編譯。

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/

編譯完成后執(zhí)行：

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/

編譯完成后執(zhí)行：

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坐標(biāo)系統(tǒng)

開(kāi)始插手著色器代碼之前，需要對(duì)3D物體的坐標(biāo)系統(tǒng)有所了解。和在立體幾何的坐標(biāo)系意義，繪制3D物體也是需要x、y、z三個(gè)坐標(biāo)軸的值。

將定義好的坐標(biāo)軸的值轉(zhuǎn)換為實(shí)際繪制的坐標(biāo)，需要經(jīng)過(guò)五個(gè)坐標(biāo)系統(tǒng)的轉(zhuǎn)換。

模型空間

相對(duì)于原點(diǎn) (0,0,0) 而自定義的起始坐標(biāo)點(diǎn)。

世界空間

世界空間就是當(dāng)所有物體一起繪制、仍然相對(duì)于原點(diǎn)的、更大的一個(gè)坐標(biāo)系。可以防止模型出現(xiàn)扎堆兒情況。

觀察空間

將世界空間的坐標(biāo)轉(zhuǎn)化為攝像機(jī)的視角所觀察到的空間坐標(biāo)。

裁剪空間

根據(jù)我們的需要來(lái)裁剪一定范圍內(nèi)的物體，而在這個(gè)范圍之外的坐標(biāo)就會(huì)被忽略掉，實(shí)質(zhì)上還是進(jìn)行坐標(biāo)的操作。

屏幕空間

將坐標(biāo)投射到屏幕上。

渲染到紋理

渲染到紋理(Render To Texture, RTT)是現(xiàn)在很多特效里面都會(huì)用到的一項(xiàng)很基本的技術(shù)，實(shí)現(xiàn)起來(lái)很簡(jiǎn)單，也很重要。

渲染到紋理是為了實(shí)現(xiàn)一些特殊的效果，比如一個(gè)光滑的球體，它應(yīng)該是可以反射周?chē)h(huán)境的，這個(gè)時(shí)候就需要先渲染到紋理。

在此設(shè)置中，示例代碼執(zhí)行以下操作:

存儲(chǔ)幾何數(shù)據(jù)（如頂點(diǎn)位置或法線）供以后使用

存儲(chǔ)材料數(shù)據(jù)（如漫反射顏色）供以后使用

UV映射各種紋理（漫反射，普通，陰影等）

計(jì)算環(huán)境光，漫反射光，鏡面光和發(fā)光光

呈現(xiàn)霧

紋理和光照（Lighting）

紋理涉及使用UV坐標(biāo)將一些顏色或一些其他類(lèi)型的矢量映射到片段。 U和V的范圍從0到1。每個(gè)頂點(diǎn)都獲得一個(gè)UV坐標(biāo)，并在頂點(diǎn)著色器中輸出。

完成lighting涉及到計(jì)算和組合環(huán)境光、漫反射光、鏡面光和發(fā)射光方面。示例代碼使用Phong lighting。Diffuse代碼：

// ... float diffuseIntensity = max(dot(normal, unitLightDirection), 0.0); if (diffuseIntensity > 0) { // ... } // ...

法線貼圖

法線貼圖（英語(yǔ)：Normal mapping）是一種模擬凹凸處光照效果的技術(shù)，是凸凹貼圖的一種實(shí)現(xiàn)。法線貼圖可以在不添加多邊形的前提下，為模型添加細(xì)節(jié)。常見(jiàn)的使用場(chǎng)景是為低多邊形模型改善外觀、添加細(xì)節(jié)，此時(shí)的法線貼圖一般根據(jù)高多邊形模型或高度貼圖生成。

頂點(diǎn)代碼：

// ...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); // ...

描邊

描邊著色器需要一個(gè)輸入紋理，用于檢測(cè)邊緣中的顏色。此輸入紋理的候選者包括材質(zhì)的漫反射顏色、漫反射貼圖的顏色、頂點(diǎn)法線，甚至法線貼圖的顏色。

uniform struct { vec4 diffuse;} p3d_Material;out vec4 fragColor;void main() { vec3 diffuseColor = p3d_Material.diffuse.rgb; fragColor = vec4(diffuseColor, 1);}

霧化、全屏泛光

霧（fog，或在Blender中稱(chēng)為mist）將霧氣效果添加到場(chǎng)景中，提供神秘感和柔化。

// ...uniform struct p3d_FogParameters { vec4 color ; float start ; float end ; } p3d_Fog;// ...

Panda3D提供了一個(gè)很好的數(shù)據(jù)結(jié)構(gòu)，可以保存所有fog參數(shù)，你也可以手動(dòng)將其傳遞給著色器。

Bloom有時(shí)候也叫Glow效果，中文一般叫做“全屏泛光”，可以使得發(fā)光物體看起來(lái)更逼真。

屏幕空間環(huán)境光遮蔽（SSAO）

環(huán)境光遮蔽（AO，ambient occlusion），大致上指的是幾何物體的拐角處，因?yàn)槭芄獠蝗妫ū幌噜彽拿鎿豕猓诒危?，?dǎo)致變暗。屏幕環(huán)境光遮蔽技術(shù)使用了屏幕空間場(chǎng)景的深度而不是真實(shí)的幾何體數(shù)據(jù)來(lái)確定遮蔽量。這一做法相對(duì)于真正的環(huán)境光遮蔽不但速度快，而且還能獲得很好的效果，使得它成為近似實(shí)時(shí)環(huán)境光遮蔽的標(biāo)準(zhǔn)。

下面動(dòng)圖展示了用AO和沒(méi)用AO的區(qū)別。用了AO，物體拐角的地方會(huì)變暗看起來(lái)就更逼真。

景深

景深（英語(yǔ)：Depth of field, DOF）景深是指相機(jī)對(duì)焦點(diǎn)前后相對(duì)清晰的成像范圍。在光學(xué)中，尤其是錄影或是攝影，是一個(gè)描述在空間中，可以清楚成像的距離范圍。

雖然透鏡只能夠?qū)⒐饩鄣侥骋还潭ǖ木嚯x，遠(yuǎn)離此點(diǎn)則會(huì)逐漸模糊，但是在某一段特定的距離內(nèi)，影像模糊的程度是肉眼無(wú)法察覺(jué)的，這段距離稱(chēng)之為景深。

景深淺則模糊范圍大，虛化效果明顯。反之則虛化效果減弱。焦外代碼示例：

// ... vec4 result = 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; // ...色調(diào)分離和像素化

色調(diào)分離是指一幅圖像原本是由緊緊相鄰的漸變色階構(gòu)成，被數(shù)種突然的顏色轉(zhuǎn)變所代替。這一種突然的轉(zhuǎn)變，亦稱(chēng)作“跳階”。色調(diào)分離其實(shí)就是用來(lái)制造分色效果。

將3D游戲像素化使他看起來(lái)很有趣，并可以節(jié)省時(shí)間，不必手動(dòng)創(chuàng)建所有的像素藝術(shù)。和色調(diào)分離相結(jié)合，可以打造真正的復(fù)古外觀。