【01】開篇：重力眩暈2中的渲染效果概覽

• 前言
• 1. 輪廓線效果
• 2. 皮膚的光照效果
• 3. 布料的表現
• 4. 金屬材質的表現
• 5. 眼睛材質
• 6. 一些特殊的效果
• 總結

本文首發于知乎專欄，轉載請注明出處 。

前言

本系列的目的是探索遊戲中NPR渲染技術的細節處理。因為《重力眩暈2》這款遊戲中的卡通渲染效果很具有代表性且技術上有一定的深度，也很好地還原了二次元的美術風格，于是我以此為線索，在逐漸複現其中的渲染效果的同時，對卡通渲染的技術細節進行一定的探索和總結。

本文是對《重力眩暈2》中的卡通渲染效果的一些預覽。在接下來的文章中，我會逐一去思考和實作。本文沒有技術實作的内容，主要是對後續的文章做一個規劃。

1. 輪廓線效果

圖 1

圖 2

這裡特意截了物體到螢幕距離不同的圖檔。這裡可看出幾個細節：

（1）輪廓線的粗細度并沒有因物體到螢幕的距離發生明顯的改變。如果我們簡單用正面剔除的方法進行描邊（即在第二遍繪制的時候，在頂點着色器中讓頂點坐标沿法線方向延伸一小段距離，然後進行正面剔除以實作描邊的效果），由于頂點向外延伸的距離是相對物體坐标系的一個系數，這個距離一樣會參與投影變換的計算，結果是到螢幕的距離近的物體的輪廓線會很粗。（圖3為一個簡單的正面剔除outline的實作效果，輪廓線的粗細度會受到物體距螢幕距離的影響，圖3是我下載下傳的High_Noon大神在GitHub上的demo）

圖 3

（2）《重力眩暈2》中輪廓線的粗細度不是固定的，加粗了需要遮蔽的部分；其次，輪廓線不是完全連續的。輪廓線的渲染效果非常符合手繪的線條效果。

此外臉部的輪廓線可以觀察到其他特殊的細節處理：

圖 4

圖 5

圖 6

（3）嘴角的輪廓線是有加重的。

（4）鼻子部分，嘴唇部分的輪廓線是有特殊的處理的，在一些特定的角度下會出現，效果非常符合美術的要求。

關于描邊的抗鋸齒：

（5）《重力眩暈2》中輪廓線的抗鋸齒處理得非常好，一般利用正面剔除實作outline，或利用螢幕空間的邊緣檢查實作輪廓線的話，輪廓線會因為欠采樣産生非常明顯的鋸齒效應（例如下圖，圖7為KurtzPel的截圖，可能是使用了MLAA的抗鋸齒處理，輪廓線會有明顯的模糊）。

圖 7

總結一下輪廓線的部分，可以看出《重力眩暈2》在輪廓線的渲染上是做了大量的細節處理，很好地還原了二次的美術風格，技術實作的深度是非常值得探究的。

2. 皮膚的光照效果

圖 8

（1）與簡單的明暗分層不同的是，《重力眩暈2》中的明暗交界有非常平滑的過渡（對比圖7），這種過渡也不同于美漫風格的渲染（美漫風格的渲染以Lambert模型為主）。且明暗交界線部分的亮度是比暗面更暗的，以這種方式來強調明暗交界線。另外明暗過渡帶的範圍大小不是固定的，在過渡平滑的網格位置明暗過渡帶較寬，此外，過渡帶的範圍大小在同一區域甚至存在各向異性。

圖 9

圖 10

（2）逆光下的皮膚光照效果，利用了側光面的鏡面反射來強調輪廓（類似于菲涅爾的效果）；當視角發生改變（圖10與圖9相機仰角不同），側光位置的鏡面反射的範圍随之改變，且過渡區平滑。

（3）逆光下物體邊緣使用了環境色的泛光。

3. 布料的表現

圖 11

圖 12

（1）圖9，圖11可以看出，暗面對布料褶皺的表現是非常精細的。

（2）圖11，圖12可以看到對布料上由菲涅爾效應産生的高光的表現。

4. 金屬材質的表現

圖 13

圖 14

（1）凱特的服裝上有大量金屬部分，圖13,14為其金屬的各向異性效果的表現。

（2）圖13中金屬附加了泛光效果。

5. 眼睛材質

圖 15

圖 16

（1）非常符合二次美術風格的眼睛效果，虹膜上計算了兩個高光點。

（2）眼球表面使用了CubeMap的采樣來表現眼球表面光滑的效果。

6. 一些特殊的效果

達斯缇（貓）的渲染效果

圖 17

圖 18

（1）達斯缇的輪廓線可以看出是用法線和視線的夾角做邊緣檢測來實作的，但是仔細觀察其夾角和輪廓線亮度的映射關系，更像是一個翻轉的GGX法線分布函數的形狀的一個函數。

（2）達斯缇表面的着色是利用CubeMap采樣實作的（PS4截動圖不是很友善，達斯缇表面的紋理會随觀察方向發生平移）。

凱特重力模式下的渲染效果：

圖 19

圖 20

（1）輪廓線自發光，同達斯缇效果的第一點。

（2）凱特體内能量回路的效果

（3）頭發有類似次表面散射的發光效果

（4）泛光效果

總結

本文為本系列的開篇，對重力眩暈2中的渲染效果做了一個概覽，無法面面俱到，為之後的文章做了一個初步的規劃。更加系統的技術實作細節的探索會在接下來的文章逐漸展開。