90幀高質量寫實手遊的程式實現與美術設計【GDC2023乾貨】

用手機開90FPS的賽車？高度寫實的場景下，如何平衡美術質量和資源消耗，打造體驗感堪比PC遊戲的畫面呢？

在GDC2023的核心會場（Core concept）中，來自網易遊戲王牌競速專案組的遊戲程式設計師蛋蛋和技術美術師Baoyong分享了手遊《王牌競速》是如何透過車輛最佳化、場景最佳化、紋理壓縮，在較低的資源消耗下實現90幀的高質量手遊體驗的。


以下是演講實錄（基於英文演講內容翻譯整理）：

大家好，非常高興可以跟大家進行分享，今天我們要談談我們的遊戲《王牌競速》，並分享我們是如何打造90幀高質量寫實手遊的。

《王牌競速》是一款寫實的休閒賽車遊戲。我們有許多高度寫實的車輛，也很多自己設計的特色車輛。

遊戲的不同之處在於，每輛車都有一個特殊的技能，附帶不同的技能效果，玩家將組隊進行 3V3 比賽，透過不同的車輛搭配與技能組合來贏得比賽。

我們基於世界各地的特色場景，建造了很多賽道；也打造了一些現實中並不存在的科幻風賽道。


今天的演講分為四個部分，首先，我會介紹我們最佳化思路的核心理念，接著會從車輛、場景、影像壓縮這三個方面來介紹團隊是如何透過最佳化，在手機端實現 90FPS 的高質量畫面的。

一、核心理念

在開始最佳化之前，我們要明確我們的目的。

策劃說：現在很多手機都支援高幀率，我們要做 90FPS。因此，我們要儘量減少每一幀的效能開銷。

美術說：我們想要逼真的效果，媲美PC端賽車遊戲的品質。

但與PC相比，手機尺寸過小，受到種種效能限制，在移動裝置上實現 90FPS 是一個很大的挑戰，我們需要在高質量的視覺效果和低消耗的效能之間保持平衡。

我們得先問問自己：什麼是最重要的？什麼是不必要的？因此，抓住重點，就是我們最佳化的核心理念，找出對玩家影響最大的關鍵因素。之後自然而然，我們就會知道下一步該怎麼做，哪些是需要深入研究的，哪些是可以放棄的。

先來確定我們遊戲的關鍵點：我們想要一款具有高度寫實、流暢、令人興奮的移動賽車遊戲，還原到遊戲當中，對應的就是：寫實的車輛、逼真的場景，以及高幀率。

二、車輛最佳化

首先，我們將討論車輛最佳化。

我們想為玩家提供高品質的車輛，因此，我們需要抓住車輛的表現重點：高質量的質感、具有吸引力的外觀、正確的動效和光影表現。

2.1 高質量的材質效果

先從材質開始，在遊戲中，最為重要的兩種材質是：透明塗層和碳纖維。

我們使用雙層 BRDF 來製作透明塗層，使之更有質感；並使用雙層法向量（Double-layer normal）來改良碳纖維材質，使其看起來更有光澤。



透過兩種材質的疊加，我們得到了高質量、高擬真的車輛效果。


在此基礎上，我們想要更多不同的效果，讓車輛外觀更為獨特、表面材質更豐富。

於是，我們增加了一個用於影響outer normal（外層法線）的法線貼圖，賦予了車輛外觀更多的改變，實現了更富有細節的“橘皮”車漆效果。


我們也可以調整inner layer's normal（內層法線），做出不同強度的金屬顆粒效果，打造車輛表面的不同的磨砂質感。


以此類推，透過增加不同的法線貼圖，我們可以實現不同的材質效果。

2.2 有吸引力的外觀

除了法線貼圖，我們也使用了其他貼圖來打造多樣化的車輛外觀效果。

顏色貼圖（Color map）可以影響不同圖層的高光顏色（Specular color）效果，透過調整引數，我們可以實現不同的效果，參考下圖。


除了靜態材質效果，我們也在動態效果上做了研究。透過在不同通道上設定不同的引數，我們實現了各種 GhostWarp 和動態效果。還有更多的動態車輛效果，都是透過同樣的方式實現的。

除此之外，我們還需要處理鋸齒的問題。由於車輛表面是透明塗層材質，影像中的鋸齒（Aliasing）非常明顯。通常，我們會用時域超級取樣抗鋸齒（Temporal Super Sampling Anti-Aliasing，TSAA） 來解決這個問題，但是這麼做成本比較高，因此我們需要更優的方案。


有一天，我注意到了場景中的一個區域，由於它的四周非常空曠，鋸齒狀非常突出。後來我發現，成因是法線細節過多。於是，我的解決方法是直接去掉法線細節。結果鋸齒也消失了！這種方法簡單有效，我們打算把它應用於車輛上。

因為車身有著光滑的透明塗層，在某些部位同樣出現了高光鋸齒，我們用法線導數來計算出邊緣的鋸齒形狀，也就是圖上的白線部分。


之後，我們增加了車身透明塗層（clearcoat）表面的粗糙程度，降低邊緣的透明圖層厚度，減少了物體表面反射高光的強度，就得到了這樣的結果。對比之前的外觀，顯然處理過後的外觀更為平滑。我們還烘焙了 AO ，將顏色資訊儲存在頂點中，改善了車門縫處的細節。


2.3 正確動態光照

鋸齒問題解決了之後，下一步就是處理動態光照。要做出好的車輛動效，關鍵在於環境反射和動態光照。如果要在移動裝置上實現真實的動態光照效果，挑戰比較大。

因此，我們使用 Parallax IBL （Parallax-Corrected Image-Based Lighting，視差影像光照）來改善環境反射效果，使用烘焙的SH（球諧函式Spherical Harmonics，簡稱SH））來模擬動態光源產生的反射效果。

與傳統 IBL 相比，Parallax IBL 可以更好地模擬車輛移動時的反射效果，同時也能夠相容移動端。

但Parallax IBL 存在一些缺點，那就是影像精度不夠，但是尚在可接受範圍。我們需要沿著賽道精準放置大量 IBL probes （基於影像的光照探頭），並且生成大量的環境貼圖，從而進行最佳化。再將 HDR 格式轉換為可壓縮的 LDR （Low Dynamic Range 低動態範圍）格式，進一步壓縮影像大小。

現在我們可以在更低的紋理尺寸下獲得更高質量的動態反射。但在夜晚場景下，效果仍舊不是很理想。


如圖所示，傳統的動態反射演算法只能模擬非金屬材質的反射效果，對於金屬材質，主要是高光鏡面反射。

於是我們新增了一個車輛高光反射系統，使效果有了明顯的提升。


接著，將場景劃分為網格。對於每個網格，我們使用3個 "half4" 向量來儲存 3 個 RGB 顏色通道。每個通道儲存不同顏色的第一層級SH，接著用這些資料來計算高光反射。

將顏色通道分開處理的好處是：將通道分離後，得到的顏色細節更多。新增基於 SH 的高光反射模型後，車輛會受到不同方向的光照影響。

而且，即使是使用第一層級 SH 係數，也可以給我們提供豐富的光照顏色。下圖是方向性紅色光源效果。在夜間場景下，車輛光照得到了很大改善。


但是新的問題出現了，在白天場景下，由於新增了 SH 高光，車輛的亮度增加了。由於烘焙的 SH  和捕獲的 IBL，場景的主要亮度來自天空環境貼圖。此時，亮度是重複計算的。


我們使用 IBL 來平均亮度，對 SH 反射進行衰減處理。可以看到，白天場景下，車漆變得更加自然了。


經過上面一系列步驟，遊戲中車輛渲染效果大大改善。

三、場景最佳化

在車輛渲染最佳化中，我們已經預留出了一定的包體資源量，因此場景最佳化的目標是在嚴格的資源限制下實現良好的視覺效果。

3.1 全域性光照最佳化

首先，我們需要確定場景渲染中最重要的部分。遊戲中，車輛在比賽時會快速移動，全域性的光照表現往往比模型或場景上的小細節更加重要。

下面的兩張圖片說明了光照的重要性。左圖是LDR（Low Dynamic Range，低動態範圍成像）的天空效果。右圖則是HDR（High Dynamic Range，高動態範圍成像）的天空效果。顯然，右邊的光照效果更符合現實環境。


又比如，下圖中的山體面數很低，但在高質量的光照下，仍然感覺畫面非常真實。


然而，很多手機並不支援 HDR 成像的紋理壓縮格式 ASTC（Adaptive Scalable Texture Compression，自適應可擴充套件紋理壓縮）。於是，我們使用 Modified Reinhard curve（修改後的Reinhard曲線）將 HDR 影像對映到 LDR影像格式，在shader中對其進行解碼。

幸運的是，這種編碼方式取得了較好的效果，我們獲得了不錯的光照表現。


請注意上圖中，雲是Sky Map上的內容，看起來十分逼真，那我們為什麼不試著在Sky Map（天空貼圖）上做更多的嘗試呢？在下方這張山景圖中，遠處的山脈其實是被烘焙到Sky Map上的內容！透過這種方式，我們無需額外的資源消耗，就可以獲得逼真的遠景。


3.2 人眼自適應

另一個關鍵點在於人眼自適應(eye adptation)。

開啟自適應亮度調節後，可以使得場景在不同亮度環境中保持合理的曝光。

傳統的自適應亮度調節做法中，降取樣過程會導致大量的記憶體載入和儲存操作，非常消耗移動裝置的處理資源。

由於我們的遊戲場景中沒有動態光照， 所以某種程度來說，曝光值是靜態的，且可以被預計算的。所以我們決定進行離線降取樣處理。

經過烘焙後，我們得到了預期的靜態場景渲染結果。


但由於自適應亮度調節的關係，遊戲特效會出現曝光過度的情況。我們新增了一個亮度係數調整了視覺效果亮度，讓整個場景更加和諧。在不同的曝光下，亮度係數也需要不斷調整。我們選取了一些常見的特效場景，手動進行了調節。


將資料擬合成多項式曲線（Polynomial curve）後，我們得到了最終結果，特效沒有受到自適應亮度調節的影響，場景的亮度也顯示正常。


3.3 樹木的最佳化

然而，我們又碰到了新的問題。

這個照片取景地是杭州西湖附近的北山路，也是我們遊戲中設計的第一條賽帶，沿路有數十棵樹。一般情況下，我們會使用複雜的3D樹木模型來繪製， 但這麼做就容易出現過度繪製的問題。尤其是當車速過快，透過時間大概只有 10 秒，因此我們要用更為經濟的方法來對這些樹木進行渲染。


首先，我們要了解設計的樹的型別。我們想要枝繁葉茂的樹林，而不是單棵細節豐富的樹。

因此，我們嘗試使用Billboard（廣告牌）應用於樹的渲染，用四種貼圖來保留光照特徵，但是要為 Billboard 生成法線貼圖有些複雜，讓我們來看看生成過程。

首先，我們需要修改模型樹的法線。原始模型的樹葉法線是混亂的，我們希望法線能夠沿著樹狀結構分佈。

於是我們將傳統法線（Traditional Normal）和形狀法線（Shape Normal）結合，以獲得細節豐富和完整的高多邊形法線。


然後，我們將混合的法線資訊烘焙到 Billboard 上，以建立 3D 模型，從而計算 Billboard 的動態陰影。下面的四幅影像顯示了同一 Billboard 在不同相機檢視中的著色結果。

藉助Billboard，我們實現了豐富的樹木，同時減少了繪製次數以及更低的效能消耗。


雖然我們使用了四種紋理來維持原始模型的形狀，但仍然會有資訊的丟失。我們想要透過 AI 計算來獲得與原始 3D 模型相同的細節。

我們使用了高多邊形樹和離線渲染器來獲得作為作為基準的逼真渲染結果（ground truth)。接著使用可微分渲染（Differentiable rendering）來找到最接近基準結果的貼圖。

下方的影片是擬合的結果。左邊是基準結果，右邊是我們的 AI 計算結果。新方法只需要消耗兩張貼圖。而且你可以看到，兩個結果基本沒有差別。

接著，我們使用簡單網格來模擬畫面遠方的樹，在正常遊戲場景下，顯示效果也很好。

下方左圖是我們遊戲的截圖。我們結合少量的樹木模型和大量的 Billboard 生成了茂密的叢林。右圖是 Overdraw（繪製過度）分析圖。深藍色表示繪製一次，淺藍色表示繪製兩次，可以看到大部分樹木區域只繪製了一次。


四、紋理壓縮

我們前面提到的技術包括用 SH 計算車漆的高光反射、使用 IBL 紋理計算環境反射、使用光照貼圖在場景中儲存烘焙的全域性光照（Global Illumination，GI），以及透過自動亮度調整來獲得更好的光照。我們還有潛在可見性資料（Potential Visibility Data），雖然在本次演講中沒有提到，但是在遊戲中也有應用。很明顯，所有這些技術的關鍵詞都是烘焙。

烘焙會導致包體過大。遊戲6GB的包體中，超過 80% 的內容都是貼圖。

我們檢查了貼圖內容，以下面為例，包體裡包含 PBR 渲染所需的三張貼圖。我們注意到這三張貼圖非常相似，都包含了Window （具有透明度的表面區域）。


其次，它們都包含了三角形。法線貼圖上的三角形雖然不明顯，但確實存在。


我們的想法是，既然這些 PBR 引數都存在相同部分，那麼相同部分其是冗餘資料，如果我們能減去相關性，就可以節省空間。

我們用 PCA （主成分分析）來消除相關性。我會透過一個簡單的二維空間示例演示 PCA 的工作原理。

假設我們有一個包含許多紅點的XY 平面，我們需要用二維變數來描述這些紅點。但是如果我們能找到一條穿過所有紅點的直線，就可以將資料從二維空間轉換到一維空間。而 PCA 的作用就是找到這條直線。

再回到我們的問題，我們可以將 PBR 紋理表達為 9 維向量，PCA 的任務是找到最佳4維平面對9維向量進行擬合。


與參考圖相比，PCA 的場景亮度更高。所以我們在輸入中增加了權重，並透過機器學習來確定權重。


最後，透過使用壓縮圖，我們獲得了與原始影像相近的PBR參考圖結果。


本次演講主要是介紹我們團隊是如何從三個方面入手，來打造90幀高質量寫實手遊。這三個方面分別是車輛、場景，以及壓縮技術。

首先，車輛對賽車遊戲的重要性不言而喻，只有高品質的車輛才能打造高品質的賽車遊戲。

其次，在資源極其有限的情況下，我們仍舊實現了良好的光照和寫實的樹木。

最後，我們透過壓縮技術減小了資料的儲存和傳輸消耗。

以上就是今天演講的內容，也希望我們的經驗能對你有所幫助！

相關閱讀：

【GDC2023乾貨分享】移動平臺上的軟光柵遮擋剔除方案
【GDC2023乾貨分享】創新的使用者獲取模式——直播引流探索
【GDC2023乾貨分享】開源軟體在引擎開發中的幫助