從零開始手敲次世代遊戲引擎（六十六）

github.com

我在我們的代碼樹的External/src目錄裡面也以git submodule的方式添加了這個工具。

不過這個項目自動生成的在各個平台的項目文件有些老。比如在windows平台是visual studio 2015的，而在OSX上是xcode4的。編譯的時候需要作一些升級。（當然也可以直接下載編譯好的文件）

這個工具有命令行版本和GUI版本，我使用的是命令行版本。生成照射圖的時候大致是下面這個樣子。

ExternalWindowsincmft.exe --useOpenCL true --inputFacePosX AssetTexturessor_seasea_posx.tga --inputFaceNegX AssetTexturessor_seasea_negx.tga --inputFacePosY AssetTexturessor_seasea_posy.tga --inputFaceNegY AssetTexturessor_seasea_negy.tga --inputFacePosZ AssetTexturessor_seasea_posz.tga --inputFaceNegZ AssetTexturessor_seasea_negz.tga --filter irradiance --outputNum 1 --output0 AssetTexturessor_seasea_irradiance --output0params tga,bgr8,facelist --dstFaceSize 256

細心的讀者可能會想到一個問題。對於天空盒這樣不變的環境，我們可以採用離線計算來事先計算好卷積。但是場景當中有很多可動的物體，或者即使是場景當中靜止的物體，也會隨著遊戲角色的移動出現在視野的不同位置。對於這種情況該如何處理呢？

使用過商業遊戲引擎的讀者應該見到過放在場景當中的「環境探針」，或者說反射球陣列。是的，由於我們是在場景當中的某處對四周的間接光進行採樣，所以這個採樣其實只是反映了該處的情況。如果我們需要在場景當中移動，那麼我們就需要在場景當中的各個地方進行採樣。同樣的，理論上這種樣本可以有無窮多個，顯然遊戲不能這麼做，所以我們就按照一定的空間間隔進行採樣，而對於任意位置，我們使用一定的演算法進行內插/外插計算來混合附近的幾個樣本來模擬。

並且，對於這些動態採樣的「環境貼圖」我們需要進行實時的「卷積」計算。為了將性能影響儘可能降低，我們會通過一些辦法盡量減少在間接光方向上採樣的個數，同時盡量維持結果的魯棒性。遊戲的好處在於，我們並不需要一個正確的結果，而只是需要一個「看起來合理」的結果就好了。

好了，讓我們把到此為止的三個部分結合在一起：

對於非金屬材質來說，這個結果已經很接近最終結果了。但是對於金屬材質（比如第二個材質球）來說，還缺少了最重要的特徵：間接光高光反射。

四、間接光高光反射

（額，程序還沒寫好，先去補程序。。。）

---- 2018年9月12日早8點更新 ----

好了，間接光高光反射部分也寫好了，來補上。

間接光高光反射部分基本思路與間接光漫反射類似，將其分為

1. 間接光貢獻值的預計算
2. PBR高光反射部分的適用

首先來看間接光貢獻值的預計算部分。

與漫反射不同，由於高光反射屬於鏡面反射，對材質表面某處有貢獻的間接光並不是以該處法線為穹頂的半個天空球，而是經過該處表面反射之後，能夠進入攝像機鏡頭的那部分間接光。

如果表面是理想鏡面（粗糙度為0），那麼根據我們初中所學知識就可以知道，對此處有貢獻的間接光只有一條，就是關於該處法線與到該處視線形成對稱的那條。

得到入射光線之後，求其與天空盒的交點，那麼天空盒上該點的顏色就是我們在物體上看到的高光反射的顏色。

很容易，是吧。

然而，這是理想狀態。現實世界當中的材質，基本上沒有那麼平坦的。表面上布滿了各種微小結構，形成很多凹凹凸凸。所以，現實當中的鏡面反射往往是(b)這樣的：

當然，理論上如果光線的直徑為零，那麼即使是不光滑表面，其高光反射之後的反射光線也只有一條。但是我們這裡的像素是有面積的，所以我們計算的對象實際上是有一定半徑的一條光束。這種情況下，一條光線會被反射到理論方向附近的一個角度範圍之內，如下圖右側所示：

根據光路可逆原理，我們可以將上面的圖當中的箭頭反過來，那麼我們就知道對於到表面的某條視線來說，它的顏色會是多條入射光的合成。也就是說，我們需要對天空盒進行一個範圍的採樣，才能確定該處的高光反射的顏色。

要精確求得這個範圍是比較難的。因為它和材質表面的微小結構的細節有關。但是我們可以從宏觀上去模擬它。

顯然，如果表面越粗糙，那麼這個範圍就越大。最極端的情況，就是漫反射——向整個180度半球面。

所以間接光高光反射當中的間接光卷積計算，與漫反射的間接光卷積計算的差別，實際上就是多了一個對錶面粗糙度的考量。之前漫反射的間接光卷積計算我們得到的是一張cubemap，但是間接光高光反射的間接光卷積計算我們理論上0到1之間的每個粗糙度都會對應一張cubemap。也就是說，理論上有無窮多張。

當然，我們不可能生成和保存無窮多張cubemap，所以我們只是將粗糙度按照一定間隔預先計算好幾張，然後用線性插值的方法去插出中間的結果。同時，由於粗糙度越高畫面約模糊，為了節省內存，我們採用MipMaps的方法來保存不同粗糙度的圖。

我們依然可以使用cmft工具實際生成這個預計算圖：

ExternalWindowsincmft.exe --useOpenCL true --clVendor anyGpuVendor --deviceType gpu --deviceIndex 0 --inputFacePosX AssetTexturessor_seasea_posx.tga --inputFaceNegX AssetTexturessor_seasea_negx.tga --inputFacePosY AssetTexturessor_seasea_posy.tga --inputFaceNegY AssetTexturessor_seasea_negy.tga --inputFacePosZ AssetTexturessor_seasea_posz.tga --inputFaceNegZ AssetTexturessor_seasea_negz.tga --filter radiance --excludeBase false --mipCount 9 --glossScale 10 --glossBias 1 --lightingModel phongbrdf --outputNum 2 --output0 AssetTexturessor_seasea_radiance --output0params dds,rgba16f,vstrip --output1 AssetTexturessor_seasea_radiance_preview --output1params tga,bgr8,facelist

然後就是反射方程，也就是通常被稱為BRDF的部分（我們在直接光高光反射那部分展示的NDF，形狀因子，菲涅爾係數統合起來就是BRDF）

但是BRDF不僅與視線方向有關，還與入射角有關。視線方向我們在渲染的時候可以知道，但是入射角對於間接光來說不是一個單值。所以再次地，我們需要對這部分進行卷積計算，並且形成一張以表面粗糙度（代表了可能的入射角範圍）和視線方向這兩個因子作為索引的查找表。

這個表因為與具體的場景結構無關，所以我們可以事先計算。需要注意的是這次我們的對象是間接光，對於間接光，幾何因子公式當中的係數 與直接光相比略有不同。至於為什麼，這個本來就是經驗公式，看上去不太對所以就給調整了唄。（當然本質上還是因為間接光來自各個方向，所以被表面凹凸的遮擋實際上也是一個積分）

計算這個表的代碼如下，是用GLSL的Computer Shader實現的。Computer Shader是OpenGL 4.3之後才有的功能，實現的就是GPGPU的非繪圖計算（當然我們這裡最終還是把計算結果保存在一張貼圖裡）

integrateBRDF.comp

#version 430 layout(local_size_x = 1, local_size_y = 1) in;layout(rg16f, binding = 0) uniform image2D img_output;#define PI 3.14159265359float RadicalInverse_VdC(uint bits) { bits = (bits << 16u) | (bits >> 16u); bits = ((bits & 0x55555555u) << 1u) | ((bits & 0xAAAAAAAAu) >> 1u); bits = ((bits & 0x33333333u) << 2u) | ((bits & 0xCCCCCCCCu) >> 2u); bits = ((bits & 0x0F0F0F0Fu) << 4u) | ((bits & 0xF0F0F0F0u) >> 4u); bits = ((bits & 0x00FF00FFu) << 8u) | ((bits & 0xFF00FF00u) >> 8u); return float(bits) * 2.3283064365386963e-10; // / 0x100000000}vec2 Hammersley(uint i, uint N){ return vec2(float(i)/float(N), RadicalInverse_VdC(i));} vec3 ImportanceSampleGGX(vec2 Xi, vec3 N, float roughness){ float a = roughness*roughness; float phi = 2.0 * PI * Xi.x; float cosTheta = sqrt((1.0 - Xi.y) / (1.0 + (a*a - 1.0) * Xi.y)); float sinTheta = sqrt(1.0 - cosTheta*cosTheta); // from spherical coordinates to cartesian coordinates vec3 H; H.x = cos(phi) * sinTheta; H.y = sin(phi) * sinTheta; H.z = cosTheta; // from tangent-space vector to world-space sample vector vec3 up = abs(N.z) < 0.999 ? vec3(0.0, 0.0, 1.0) : vec3(1.0, 0.0, 0.0); vec3 tangent = normalize(cross(up, N)); vec3 bitangent = cross(N, tangent); vec3 sampleVec = tangent * H.x + bitangent * H.y + N * H.z; return normalize(sampleVec);}float GeometrySchlickGGX(float NdotV, float roughness){ float a = roughness; float k = (a * a) / 2.0; float nom = NdotV; float denom = NdotV * (1.0 - k) + k; return nom / denom;}float GeometrySmith(vec3 N, vec3 V, vec3 L, float roughness){ float NdotV = max(dot(N, V), 0.0); float NdotL = max(dot(N, L), 0.0); float ggx2 = GeometrySchlickGGX(NdotV, roughness); float ggx1 = GeometrySchlickGGX(NdotL, roughness); return ggx1 * ggx2;}vec2 IntegrateBRDF(float NdotV, float roughness){ vec3 V; V.x = sqrt(1.0 - NdotV*NdotV); V.y = 0.0; V.z = NdotV; float A = 0.0; float B = 0.0; vec3 N = vec3(0.0, 0.0, 1.0); const uint SAMPLE_COUNT = 1024u; for(uint i = 0u; i < SAMPLE_COUNT; ++i) { vec2 Xi = Hammersley(i, SAMPLE_COUNT); vec3 H = ImportanceSampleGGX(Xi, N, roughness); vec3 L = normalize(2.0 * dot(V, H) * H - V); float NdotL = max(L.z, 0.0); float NdotH = max(H.z, 0.0); float VdotH = max(dot(V, H), 0.0); if(NdotL > 0.0) { float G = GeometrySmith(N, V, L, roughness); float G_Vis = (G * VdotH) / (NdotH * NdotV); float Fc = pow(1.0 - VdotH, 5.0); A += (1.0 - Fc) * G_Vis; B += Fc * G_Vis; } } A /= float(SAMPLE_COUNT); B /= float(SAMPLE_COUNT); return vec2(A, B);}void main() { vec4 pixel; ivec2 pixel_coords = ivec2(gl_GlobalInvocationID.xy); pixel.rg = IntegrateBRDF(float(pixel_coords.x) / gl_NumWorkGroups.x, float(pixel_coords.y) / gl_NumWorkGroups.y); imageStore(img_output, pixel_coords, pixel);}

因為這個Compute Shader只需要在實際畫面繪製之前執行一次，所以我們在GraphicsManager當中新建一個隊列，專門用來存放這種只需要初始化執行的Pass。

std::vector<std::shared_ptr<IDispatchPass>> m_InitPasses;

同時，由於這個Computer Shader需要將計算結果輸出到一張貼圖當中，所以我們新建兩個介面，一個負責將貼圖傳遞給Computer Shader，一個負責取回貼圖：

virtual intptr_t GenerateAndBindTexture(const char* id, const uint32_t width, const uint32_t height); virtual intptr_t GetTexture(const char* id);

我們還需要追加一個啟動Computer Shader的介面：

virtual void Dispatch(const uint32_t width, const uint32_t height, const uint32_t depth);

最後我們就是在合適的地方，執行這些初始化Pass

void GraphicsManager::InitializeBuffers(const Scene& scene){ for (auto pPass : m_InitPasses) { pPass->Dispatch(); }}

最終得到的結果如下：

好了，現在我們有了經過預處理的cubemap，也有了BRDF的查找表，接下來就可以實現漫反射高光部分的計算了。我們在第三節的基礎上修改間接光部分如下：

vec3 ambient = ambientColor.rgb; { // ambient diffuse float ambientOcc = ao; if (usingAoMap) { ambientOcc = texture(aoMap, uv).r; } vec3 F = fresnelSchlickRoughness(max(dot(N, V), 0.0f), F0, rough); vec3 kS = F; vec3 kD = 1.0f - kS; kD *= 1.0f - meta; vec3 irradiance = textureLod(skybox, vec4(N, 0.0f), 1.0f).rgb; vec3 diffuse = irradiance * albedo; // ambient reflect const float MAX_REFLECTION_LOD = 8.0f; vec3 prefilteredColor = textureLod(skybox, vec4(R, 1.0f), rough * MAX_REFLECTION_LOD).rgb; vec2 envBRDF = texture(brdfLUT, vec2(max(dot(N, V), 0.0f), rough)).rg; vec3 specular = prefilteredColor * (F * envBRDF.x + envBRDF.y); ambient = (kD * diffuse + specular) * ambientOcc; } vec3 linearColor = ambient + Lo;

修改天空盒載入部分的程序，使其載入預先計算好的高光反射環境貼圖。

按下F5，就可以得到如下的渲染結果：

嗯？中間的球看上去不像金，有點像珍珠啊。其實這是因為我們使用的環境貼圖（天空盒）是一張照片，自帶Gamma矯正引起的。對於PBR來說，計算過程所使用的所有貼圖都必須不帶Gamma，否則就不是線性合成了。

解決方法很簡單，cmft工具自帶Gamma矯正功能，我們重新生成我們的漫反射cubemap和高光反射cubemap

// irradianceExternalWindowsbincmft.exe --useOpenCL true --inputFacePosX AssetTexturessor_seasea_posx.tga --inputFaceNegX AssetTexturessor_seasea_negx.tga --inputFacePosY AssetTexturessor_seasea_posy.tga --inputFaceNegY AssetTexturessor_seasea_negy.tga --inputFacePosZ AssetTexturessor_seasea_posz.tga --inputFaceNegZ AssetTexturessor_seasea_negz.tga --filter irradiance --outputNum 1 --output0 AssetTexturessor_seasea_irradiance --output0params tga,bgr8,facelist --dstFaceSize 256 --inputGammaNumerator 2.2 --inputGammaDenominator 1.0// radianceExternalWindowsbincmft.exe --useOpenCL true --clVendor anyGpuVendor --deviceType gpu --deviceIndex 0 --inputFacePosX AssetTexturessor_seasea_posx.tga --inputFaceNegX AssetTexturessor_seasea_negx.tga --inputFacePosY AssetTexturessor_seasea_posy.tga --inputFaceNegY AssetTexturessor_seasea_negy.tga --inputFacePosZ AssetTexturessor_seasea_posz.tga --inputFaceNegZ AssetTexturessor_seasea_negz.tga --filter radiance --excludeBase false --mipCount 9 --glossScale 10 --glossBias 1 --lightingModel phongbrdf --outputNum 2 --output0 AssetTexturessor_seasea_radiance --output0params dds,rgba16f,vstrip --output1 AssetTexturessor_seasea_radiance_preview --output1params tga,bgr8,facelist --inputGammaNumerator 2.2 --inputGammaDenominator 1.0

注意命令行最後兩個新加的參數。

然後我們就可以得到如下的圖。注意右側貼圖的顯示，有兩張變暗了。

最終渲染結果看上去雖然好了很多，但是感覺上依然有些不自然。具體來說，金屬部分的高光反射看起來對比度太低了。這是因為我們使用的天空盒是來源自一張普通的圖片，而普通的圖片所能保存的色階只有256個，但是顯然，陽光的強度與海水反射的強度的差別遠遠不止256倍。所以，對於PBR當中的環境貼圖（天空盒）來說，我們需要使用寬動態範圍（高對比度，HDR）的圖片格式，才能獲得最好的效果。在下一篇我們就來進行這方面的工作。

（呼～終於結束掉本篇了）

參考引用