【知識】《GTA5》為何這麼經典？一幀畫面告訴你答案

R星沙盒神作《GTA5》的成功並不是偶然，它不僅給玩家帶來了無與倫比的次世代遊戲體驗，而且在舊世代平台PS3和XBOX 360上也非常成功。PS3僅有256M RAM以及256M顯存，竟然能夠運行如此出色的畫面而不奔潰，這不得不讓人感嘆R星技術的強大。
當然，今天我們要談論的是遊戲PC（DirectX 11)版本，就是占用了幾個GB內存和顯存的那個版本，讓我們一起來揭秘遊戲圖像的秘密吧，看看一幀3D遊戲畫面是如何誕生的。
第一部分：解剖幀數框架
我們用麥克的這張圖作為例子，他站在一輛Rapid GT前，身後是美麗的洛聖都。

《GTA5》使用的是延遲性管道渲染，通過大量的HDR緩衝區運行，當然這些緩衝區無法在同一個顯示器中全部呈現，因此我們將其分解，將畫面調用至Reinhard模型，通過這樣將畫面回歸到每條線路8-Bit。
環境塊圖：
第一步，截取圖像的環境塊圖，這個塊圖每一幀都是事實運算，連續執行後就得到了後期逼真的環境效果，這也是Nvidia的3D畫面實現技術——Forward-Rendered。
那麼如何實現這些塊圖的呈現，對於不熟悉遊戲技術的人，你可以想像你在拍攝一副全景圖片，設定自己站在一個立方體中間，六面環繞，每轉過90度進行拍攝，一面連接一面。
遊戲中圖像就是這麼呈現的，每一面換算到128X128 HDR圖像，第一面的元素就包括以下內容：
同樣的內容使用到剩下的五個面，最終獲得完整的塊圖：

每一面差不多呈現出30次畫面調用，基地的多邊形網格呈現的內容僅僅是環境（天空、山脈、主題建築），角色以及車輛不予以呈現。
這也是為何在遊戲中你的車輛和環境互相反應非常好而其他的車輛卻沒有造成反應，角色也是如此。
塊圖到拋物面圖的轉換：
完成了環境塊圖的設計之後就需要把它轉化為雙邊拋物面圖。
方塊圖展開後顯示了不同區域，而轉化之後就類似於半球形狀的圖片（包含俯視和仰視雙視角）。

原塊圖拆解
形成雙邊拋物面圖
為 何要進行這一步轉換，很關鍵的一點在於優化！通過塊圖著色器需要捕捉到6個面上128X128的圖像，而轉換為雙邊拋物面圖之後，著色器需要捕捉的僅僅是 2個全面的128X128圖像，更重要的是，一般情況下，玩家的視角都是從上方往下看，因此完善俯視視角就能夠進一步地達到優化目的。
此外，塊圖6個面的邊緣都是獨立連結，如果說兩個邊緣上存在統一圖案對於老一代的顯卡來說將無法識別，就算是新一代的顯卡也需要耗費更多性能去過濾，而轉換為雙邊拋物面圖將大大減輕顯卡處理的壓力。
修繕細節等級（LOD）：
這一步需要計算著色器來完成，根據物體距離鏡頭的遠近，用不同精細的網格進行著色，有的物體甚至不需要著色過程，例如一些超過可見距離的花和草是不會呈現在螢幕上的，就不需要進行修繕。
這一方面PS3和PS4/PC版本之間存在著很大的差異（PS3版本沒有計算著色器支持），因此在PS3版本中，這些內容都通過Cell多核處理器或是SPU解決。
陰影：
《GTA5》 採用的陰影技術是CSM（cascaded shadow maps一種比較新的實時陰影渲染技術，專門用於渲染大型場景，效果很好，但是有一個缺點就是場景需要多次渲染，它的中心思想是將螢幕像素分散到多個 ShadowMap中，因為近處的東西細節較高，遠處的東西細節較低，因此將視椎體分割，並將光源攝像機聚焦到對應的小視錐上），貼圖像素為 1024X4096，用此技術是為了確保玩家附近的陰影擁有更高的像素，而遠處物體的陰影細節則適當減弱。

這一步有很高的性價比，雖然說要進行4倍渲染次數，但其間可以避免大量不必要的多邊形裁剪，使得draw calls數值維持在1000左右。
通過深度信息，計算出每個像素的陰影，進而進行分類，太陽方向的光反射陰影處於紅色通道中，而在大氣中透過雲投射將會分別儲存在紅色和綠色通道中。

綠色部分為太陽陰影，灰色部分為雲朵陰影
同時陰影將採用抖動模糊效果處理，如果你仔細觀察下面的貼圖，紅色管道所呈現出的是類似棋盤狀的效果，這是為了邊緣更加平滑。（模糊效果處理是非常繁雜的過程，因為它需要處理大量問題貼圖，但最終獲得的效果能夠讓陰影更加真實）

模糊處理後得到的陰影圖
平面反射貼圖：
這屬於後期檢測的一項步驟，因此在這裡不多贅述，簡而言之就是還原反射所對應的貼圖在一個240X120的圖案中（約650draw calls），從而呈現一個面上所反射包含的內容。
SSAO（Screen Space Ambient Occlusion螢幕空間環境遮蔽）：
線性版本的緩衝計算結束後，就開始建立SSAO畫面。
首先建立多噪點版本，通過depth-aware模糊技術進行雙向排除（橫向和縱向）去除畫面中的噪點。上述工作都是在原圖一半的解析度下進行的，為了擴展後得到更好的畫面表現效果。

多噪點版本

SA模糊技術後效果圖
G-緩衝區結合：
是時候把各個緩衝區之間的內容結合了，一個著色器同時獲取五個緩衝區的內容，形成最終的HDR圖片。

將緩衝區的圖片融合，得到初步效果圖
這樣子最終圖片的雛形已經完成，但我們依舊缺少天空，海洋以及一系列透明物體，在此之前，至少我們的麥克還不夠完美。
次表面散射（Subsurface Scattering）：
麥克皮膚上存在許多不連續的黑點，讓他看起來像是用塑料做的而不是人肉。
→
這 時候就輪到SSS技術登場了，模擬皮膚內的光傳輸，通過SSS後我們可以看到麥克的肌膚內似乎有了血液流淌的痕跡。而SSS技術只會應用在皮膚上而不會衍 生到衣服等其他物品上是由於緩衝區計算出麥克皮膚的像素值為0x89，符合這一區域的物體才會收到SSS效果影響，而這個效果將會作用於遊戲中主角以及 NPC的皮膚上。
水：
在這張例圖中雖然沒有大面積水域，但還是有一些游泳池等東西，《GTA5》中的水是通過折射和反射兩個層面呈現。
通過Z緩衝區導出兩個版本的圖像，分散出不同的水面內容：

擴散圖

不透明屬性
水體擴散圖像：展示了水的內在顏色。
水體不透明圖像：其中紅色管道儲存水中的不透明屬性，綠色管道區分水的深淺。
注意，在這裡所有水都呈現出來了，包括隱藏在物體後面的，都會在紅色管道中出現，在這裡綠色管道的作用就是剔除那些隱藏的水面，保留視覺可以看到的。隨後我們就可以得到下面的水面反射圖片。

再結合上面的緩衝區圖片內容，我們就可以獲得一張帶水的畫面圖。

大氣層：
創建光過濾貼圖，這也被稱為體積陰影，實現光是透過大氣層或是霧等氣候後的照射效果，而不是太陽直射。這樣之後的圖像也存在許多噪點，需要進行模糊效果處理，在此之後，添加霧面層，隨後是天空，最後加入雲彩。

光軸圖

基礎圖

基礎+霧效果

基礎+霧效果+天空

基礎+霧效果+天空+雲
天空的構建採用球形單點draw call，參考下圖，大規模網狀覆蓋整個區域。雲渲染也採用相似的方式，用前面提到過的法線貼圖和密度貼圖來渲染體積雲，尺寸為2048X512，無縫連接。
雲密度
法線雲
透明物體：
添加畫面中的透明物體，比如玻璃，擋風鏡，車窗，以及飛行的塵埃粒子等，這個過程僅僅占用11draw calls，就能夠完成大量粒子實體化。

添加前

添加後
抖動平滑：
遠景像素點由於渲染程度有限，在放大後像素化叫嚴重，這時利用著色器進行後期處理，讀取原始顏色緩衝區數據並通過阿爾法管道進行擴散，得到像素化嚴重的色區數值，進行共同抖動處理。PC版本和PS3/版本這方面處理的並不好，抖動過濾器並沒有完善使用。

抖動處理前

抖動處理後
曝光度調整：
曝 光度永遠不能夠過快的轉換，相鄰兩幀之間的差別不能夠有過高的變化，平緩地轉換非常重要，例如你在《GTA5》中驅車從一個山洞駛出，暗到亮的變化需要多 點曝光來適應玩家眼球對於視覺差變化的適應程度，暗到亮的曝光速度要比亮到暗的曝光速度更快，這是根據人眼習慣所得出的結論。

左為低曝光度，中間為中等，右為高曝光度
抗鋸齒及光學畸變：
如果遊戲的抗鋸齒方式採用的是FXAA，那麼需要緊緻網格來達到邊緣平滑的效果，隨後模擬真實世界的鏡頭，通過小著色器進行光學畸變，這不僅僅會扭曲整體畫面，也會減少邊緣紋理的色差。

光學畸變前

光學畸變後
UI：
這裡提到的UI僅僅只是改幀畫面在左下角地圖上的變化，整個地圖區域被劃分為不同方塊區域，通過引擎劃分出顯示在同一螢幕的區域，得到更好的變化效果圖。最後將小地圖載入主要緩衝區，添加上小的圖標，我們的最終作品就誕生了。

添加地圖UI後
這一幀畫面總計4155draw calls，88個渲染目標以及1113個紋理圖。
可以看出製作一幀畫面，如果廠商用心優化的話，是需要非常麻煩的步驟，一步步改良減少顯卡壓力，最終讓更多玩家的PC能夠順利運行，這方面，本次R星的《GTA5》無疑做的相當出色，期待今後能夠為我們帶來更加完美的作品。