1. 程式人生 > 實用技巧 >PBR(基於物理的渲染)學習筆記

PBR(基於物理的渲染)學習筆記

PBR基本介紹

PBR代表基於物理的渲染,本質上還是

gl_FragColor = Emssive + Ambient + Diffuse + Specular

可能高階一些在考慮下AO也就是環境光遮蔽就是下面的情況

vec4 generalColor = (Ambient + Diffuse + Specular);
gl_FragColor = Emssive + mix(color, color * ao, u_OcclusionStrength)

在非PBR模式下,這種光照方式往往看著不真實,為啥呢,專家說因為能量不守恆,跟人眼在客觀世界看到的不一樣;然後就出現了基於物理的渲染。這種渲染模式呢,大方向模組還是以上那個。但是在各個模組計算過程中充分考慮了能量守恆,各個模組的計算式經過一系列複雜的數學推導計算出來。比如下面這個

  • L(P,V)是經過P點反射(diffuse或specular)後進入視點V的光
  • L(P,-V)是從-V方向射入P點的光
  • R是對應的BRDF(雙向反射分佈函式)函式,會考慮各種物理現象(能量守恆Energy conservation、粗糙度Roughness、材質的次表面散射subsurface scattering、材質折射率各向異性Fresnel、絕緣度(這玩意用來調整diffuse和specular的能量分配)metallic)

最討厭這種公式,看著就讓人煩,我們這裡只要記住,BRDF就是從能量守恆角度考慮的一個計算公式,這個玩意具體公式是做實驗做出來的,有好多個,最常用的一個叫Cook-Torrance。一般來說PBR計算過程是比較複雜的,直接在實時渲染裡面計算式很耗費時間的,所以數學家有做了一堆拆分,讓某些計算因子可以提前進行預處理,放在幾個紋理中。對於工程師來說,我不想了解後面具體的物理學和數學推導,我只想知道怎麼用來做專案。所以,一言不合看原始碼(原始碼來自luma.gl)。

vec4 pbr_filterColor(vec4 colorUnused)
{
// Metallic and Roughness material properties are packed together
// In glTF, these factors can be specified by fixed scalar values
// or from a metallic-roughness map
float perceptualRoughness = u_MetallicRoughnessValues.y;
float metallic = u_MetallicRoughnessValues.x;
#ifdef HAS_METALROUGHNESSMAP
// Roughness is stored in the 'g' channel, metallic is stored in the 'b' channel.
// This layout intentionally reserves the 'r' channel for (optional) occlusion map data
vec4 mrSample = texture2D(u_MetallicRoughnessSampler, pbr_vUV);
perceptualRoughness = mrSample.g * perceptualRoughness;
metallic = mrSample.b * metallic;
#endif
perceptualRoughness = clamp(perceptualRoughness, c_MinRoughness, 1.0);
metallic = clamp(metallic, 0.0, 1.0);
// Roughness is authored as perceptual roughness; as is convention,
// convert to material roughness by squaring the perceptual roughness [2].
float alphaRoughness = perceptualRoughness * perceptualRoughness; // The albedo may be defined from a base texture or a flat color
#ifdef HAS_BASECOLORMAP
vec4 baseColor = SRGBtoLINEAR(texture2D(u_BaseColorSampler, pbr_vUV)) * u_BaseColorFactor;
#else
vec4 baseColor = u_BaseColorFactor;
#endif #ifdef ALPHA_CUTOFF
if (baseColor.a < u_AlphaCutoff) {
discard;
}
#endif vec3 f0 = vec3(0.04);
vec3 diffuseColor = baseColor.rgb * (vec3(1.0) - f0);
diffuseColor *= 1.0 - metallic;
vec3 specularColor = mix(f0, baseColor.rgb, metallic); // Compute reflectance.
float reflectance = max(max(specularColor.r, specularColor.g), specularColor.b); // For typical incident reflectance range (between 4% to 100%) set the grazing
// reflectance to 100% for typical fresnel effect.
// For very low reflectance range on highly diffuse objects (below 4%),
// incrementally reduce grazing reflecance to 0%.
float reflectance90 = clamp(reflectance * 25.0, 0.0, 1.0);
vec3 specularEnvironmentR0 = specularColor.rgb;
vec3 specularEnvironmentR90 = vec3(1.0, 1.0, 1.0) * reflectance90; vec3 n = getNormal(); // normal at surface point
vec3 v = normalize(u_Camera - pbr_vPosition); // Vector from surface point to camera float NdotV = clamp(abs(dot(n, v)), 0.001, 1.0);
vec3 reflection = -normalize(reflect(v, n)); PBRInfo pbrInputs = PBRInfo(
0.0, // NdotL
NdotV,
0.0, // NdotH
0.0, // LdotH
0.0, // VdotH
perceptualRoughness,
metallic,
specularEnvironmentR0,
specularEnvironmentR90,
alphaRoughness,
diffuseColor,
specularColor,
n,
v
); vec3 color = vec3(, , ); #ifdef USE_LIGHTS
// Apply ambient light
PBRInfo_setAmbientLight(pbrInputs);
color += calculateFinalColor(pbrInputs, lighting_uAmbientLight.color); // Apply directional light
SMART_FOR(int i = , i < MAX_LIGHTS, i < lighting_uDirectionalLightCount, i++) {
if (i < lighting_uDirectionalLightCount) {
PBRInfo_setDirectionalLight(pbrInputs, lighting_uDirectionalLight[i].direction);
color += calculateFinalColor(pbrInputs, lighting_uDirectionalLight[i].color);
}
} // Apply point light
SMART_FOR(int i = , i < MAX_LIGHTS, i < lighting_uPointLightCount, i++) {
if (i < lighting_uPointLightCount) {
PBRInfo_setPointLight(pbrInputs, lighting_uPointLight[i]);
float attenuation = getPointLightAttenuation(lighting_uPointLight[i], distance(lighting_uPointLight[i].position, pbr_vPosition));
color += calculateFinalColor(pbrInputs, lighting_uPointLight[i].color / attenuation);
}
}
#endif // Calculate lighting contribution from image based lighting source (IBL)
#ifdef USE_IBL
color += getIBLContribution(pbrInputs, n, reflection);
#endif // Apply optional PBR terms for additional (optional) shading
#ifdef HAS_OCCLUSIONMAP
float ao = texture2D(u_OcclusionSampler, pbr_vUV).r;
color = mix(color, color * ao, u_OcclusionStrength);
#endif #ifdef HAS_EMISSIVEMAP
vec3 emissive = SRGBtoLINEAR(texture2D(u_EmissiveSampler, pbr_vUV)).rgb * u_EmissiveFactor;
color += emissive;
#endif // This section uses mix to override final color for reference app visualization
// of various parameters in the lighting equation.
#ifdef PBR_DEBUG
// TODO: Figure out how to debug multiple lights // color = mix(color, F, u_ScaleFGDSpec.x);
// color = mix(color, vec3(G), u_ScaleFGDSpec.y);
// color = mix(color, vec3(D), u_ScaleFGDSpec.z);
// color = mix(color, specContrib, u_ScaleFGDSpec.w); // color = mix(color, diffuseContrib, u_ScaleDiffBaseMR.x);
color = mix(color, baseColor.rgb, u_ScaleDiffBaseMR.y);
color = mix(color, vec3(metallic), u_ScaleDiffBaseMR.z);
color = mix(color, vec3(perceptualRoughness), u_ScaleDiffBaseMR.w);
#endif return vec4(pow(color,vec3(1.0/2.2)), baseColor.a);
}

一堆數學計算看不懂。。。沒關係,慢慢拆分

如果模型採用PBR材質,最少需要兩個兩張紋理:albedo和metalRoughness。Albedo對應該模型的紋理,就是我們常用的的baseColor。metalRoughness對應rgba的g和b兩位,範圍是[0,1],對應模型的g(roughness)和b(metallic)。這個metallic屬性,用來描述該模型對應P點在絕緣體和金屬之間的一個度,金屬的反射率相對較高,該係數用來調整diffuse和specular的能量分配。那麼這一部分,主要目的是求一個粗糙度和絕緣係數。

// Metallic and Roughness material properties are packed together
// In glTF, these factors can be specified by fixed scalar values
// or from a metallic-roughness map
float perceptualRoughness = u_MetallicRoughnessValues.y;
float metallic = u_MetallicRoughnessValues.x;
#ifdef HAS_METALROUGHNESSMAP
// Roughness is stored in the 'g' channel, metallic is stored in the 'b' channel.
// This layout intentionally reserves the 'r' channel for (optional) occlusion map data
vec4 mrSample = texture2D(u_MetallicRoughnessSampler, pbr_vUV);
perceptualRoughness = mrSample.g * perceptualRoughness;
metallic = mrSample.b * metallic;
#endif
perceptualRoughness = clamp(perceptualRoughness, c_MinRoughness, 1.0);
metallic = clamp(metallic, 0.0, 1.0);
// Roughness is authored as perceptual roughness; as is convention,
// convert to material roughness by squaring the perceptual roughness [2].
float alphaRoughness = perceptualRoughness * perceptualRoughness;

上面說的albedo從下面的紋理中獲取

  // The albedo may be defined from a base texture or a flat color
#ifdef HAS_BASECOLORMAP
vec4 baseColor = SRGBtoLINEAR(texture2D(u_BaseColorSampler, pbr_vUV)) * u_BaseColorFactor;
#else
vec4 baseColor = u_BaseColorFactor;
#endif #ifdef ALPHA_CUTOFF
if (baseColor.a < u_AlphaCutoff) {
discard;
}
#endif

下面程式碼是求了一個映象反射係數,這個映象反射係數為了滿足菲涅爾效果,在不同角度下係數不一樣(4%~100%)之間。下面的25就是1/0.4的值。specularEnvironmentR0 和 specularEnvironmentR90 我猜是代表視線和法線夾角在0和90的一個反射顏色。

  // Compute reflectance.
float reflectance = max(max(specularColor.r, specularColor.g), specularColor.b); // For typical incident reflectance range (between 4% to 100%) set the grazing
// reflectance to 100% for typical fresnel effect.
// For very low reflectance range on highly diffuse objects (below 4%),
// incrementally reduce grazing reflecance to 0%.
// 對於典型的入射反射範圍(在4%到100%之間),將掠射反射率設定為100%以獲得典型的菲涅耳效果。對於高度漫反射物件上的極低反射範圍(低於4%),請以增量方式將掠過反射減少到0%。
float reflectance90 = clamp(reflectance * 25.0, 0.0, 1.0);
vec3 specularEnvironmentR0 = specularColor.rgb;
vec3 specularEnvironmentR90 = vec3(1.0, 1.0, 1.0) * reflectance90;

根據法線和視線計算出夾角和反射向量。getNormal的計算過程也是涉及到法向量切變空間,這個後續在繼續。同時這裡要特別注意這個向量的原點在哪裡,這是在視空間還是世界空間中的計算。

  vec3 n = getNormal();                          // normal at surface point
vec3 v = normalize(u_Camera - pbr_vPosition); // Vector from surface point to camera float NdotV = clamp(abs(dot(n, v)), 0.001, 1.0);
vec3 reflection = -normalize(reflect(v, n));

組裝PBRInfo以及設定初始顏色值

PBRInfo pbrInputs = PBRInfo(
0.0, // NdotL
NdotV,
0.0, // NdotH
0.0, // LdotH
0.0, // VdotH
perceptualRoughness,
metallic,
specularEnvironmentR0,
specularEnvironmentR90,
alphaRoughness,
diffuseColor,
specularColor,
n,
v
); vec3 color = vec3(0, 0, 0);

根據不同的光源型別,環境光、方向光源、點光源進行光照計算。這個跟普通的光照模式一樣

#ifdef USE_LIGHTS
// Apply ambient light
PBRInfo_setAmbientLight(pbrInputs);
color += calculateFinalColor(pbrInputs, lighting_uAmbientLight.color); // Apply directional light
SMART_FOR(int i = 0, i < MAX_LIGHTS, i < lighting_uDirectionalLightCount, i++) {
if (i < lighting_uDirectionalLightCount) {
PBRInfo_setDirectionalLight(pbrInputs, lighting_uDirectionalLight[i].direction);
color += calculateFinalColor(pbrInputs, lighting_uDirectionalLight[i].color);
}
} // Apply point light
SMART_FOR(int i = 0, i < MAX_LIGHTS, i < lighting_uPointLightCount, i++) {
if (i < lighting_uPointLightCount) {
PBRInfo_setPointLight(pbrInputs, lighting_uPointLight[i]);
float attenuation = getPointLightAttenuation(lighting_uPointLight[i], distance(lighting_uPointLight[i].position, pbr_vPosition));
color += calculateFinalColor(pbrInputs, lighting_uPointLight[i].color / attenuation);
}
}
#endif

這塊可以認為是除了普通的環境光之外,其他來自四面發放的光。光源在環境中經過其他各種物體反射、折射等彙集而來的光。

  // Calculate lighting contribution from image based lighting source (IBL)
#ifdef USE_IBL
color += getIBLContribution(pbrInputs, n, reflection);
#endif

下面是計算環境光遮蔽的效果,這個也是提前處理在一張紋理上了。環境光遮蔽又是一個專門的話題。

檔案:Cesium原始碼剖析---Ambient Occlusion(?..

連結:http://note.youdao.com/noteshare?id=5d3122657947fcb43010948ea5f7d627&sub=D56577007ABC43A696F84D0CA968EA27

上面這個是安哥寫的文章。

  // Apply optional PBR terms for additional (optional) shading
#ifdef HAS_OCCLUSIONMAP
float ao = texture2D(u_OcclusionSampler, pbr_vUV).r;
color = mix(color, color * ao, u_OcclusionStrength);
#endif

處理自發光的紋理。這裡紋理都是在gamma顏色空間中,要先轉變成線性空間。gamma的來龍去脈也是個專題。

檔案:ThreeJS 不可忽略的事情 - Gamma色彩空...

連結:http://note.youdao.com/noteshare?id=f5ab02acba1260bb2e0be26c56a9d281&sub=77FA63C5D6C24A2D8202B1D623519666

#ifdef HAS_EMISSIVEMAP
vec3 emissive = SRGBtoLINEAR(texture2D(u_EmissiveSampler, pbr_vUV)).rgb * u_EmissiveFactor;
color += emissive;
#endif

最後就是由線性空間轉變成gamma空間。

return vec4(pow(color,vec3(1.0/2.2)), baseColor.a);

PBR核心

看起來也很簡單是不,那是因為大部分程式碼都封裝在calculateFinalColor函式中了。

接下來看一下PBR真正的核心:

vec3 calculateFinalColor(PBRInfo pbrInputs, vec3 lightColor) {
// Calculate the shading terms for the microfacet specular shading model
vec3 F = specularReflection(pbrInputs);
float G = geometricOcclusion(pbrInputs);
float D = microfacetDistribution(pbrInputs); // Calculation of analytical lighting contribution
vec3 diffuseContrib = (1.0 - F) * diffuse(pbrInputs);
vec3 specContrib = F * G * D / (4.0 * pbrInputs.NdotL * pbrInputs.NdotV);
// Obtain final intensity as reflectance (BRDF) scaled by the energy of the light (cosine law)
return pbrInputs.NdotL * lightColor * (diffuseContrib + specContrib);
}

再回到最初這個公式:

現在根據程式碼來重新解釋下面幾個部分。

  • L(P,V)是經過P點反射(diffuse或specular)後進入視點V的光;就是return的返回值
  • L(P,-V)是從-V方向射入P點的光,可以認為程式碼中的lightColor
  • R是對應的BRDF(雙向反射分佈函式)函式,可以認為是程式碼中的(diffuseContrib + specContrib)部分
  • N*V' 是程式碼中的pbrInputs.NdotL

這裡的BRDF是根據下面公式來的。

diffuse採用的是Lambert模型:

,C是漫反射光的顏色Color,這裡認為該點微觀上是一個平面,漫反射以一個半圓180°均勻反射,所以除以π;至於這裡的程式碼是考慮了菲涅爾效果,進行了一個調整,為啥這麼搞我也不是很清楚。

// Basic Lambertian diffuse
// Implementation from Lambert's Photometria https://archive.org/details/lambertsphotome00lambgoog
// See also [1], Equation 1
vec3 diffuse(PBRInfo pbrInputs)
{
return pbrInputs.diffuseColor / M_PI;
}

而後就是Specular部分,這個裡面有FGD三個因素,分別是考慮菲涅爾反射、L光源能夠到達V視角的概率、表面粗糙度。

(F)resnel reflectance;菲涅爾反射

既然是Fresnel,不難理解,該函式主要是用來計算不同介質之間光的折射,簡化後的Schlick公式可以取得近似值,公式如下,在中心點時l和h為零度角,cos=1.為F(0),為該材質的base reflectivity,在45°時,還基本不變,但接近90°時,則反射率則迅速提升到1,符合之前Fresnel的變化曲線

// The following equation models the Fresnel reflectance term of the spec equation (aka F())
// Implementation of fresnel from [4], Equation 15
vec3 specularReflection(PBRInfo pbrInputs)
{
return pbrInputs.reflectance0 +
(pbrInputs.reflectance90 - pbrInputs.reflectance0) *
pow(clamp(1.0 - pbrInputs.VdotH, 0.0, 1.0), 5.0);
}

(G)eometric term

表示從L光源能夠到達V視角的概率,G稱為雙向陰影遮擋函式,也就是v會被其他的微面元遮擋(如下圖所示),這裡glTF採用的是GGX,而Cesium則是Schlick模型:(不過luma的程式碼好像做了一些優化,具體沒細研究)

最後考慮到能量守恆,需要在diffuse和specular之間新增引數,控制兩者的比例,這裡也有多種方式,比如前面提到的Disney給出的公式(glTF和Cesium中都採用該公式),也有論文裡提到的diffuse Fresnel term:

// This calculates the specular geometric attenuation (aka G()),
// where rougher material will reflect less light back to the viewer.
// This implementation is based on [1] Equation 4, and we adopt their modifications to
// alphaRoughness as input as originally proposed in [2].
float geometricOcclusion(PBRInfo pbrInputs)
{
float NdotL = pbrInputs.NdotL;
float NdotV = pbrInputs.NdotV;
float r = pbrInputs.alphaRoughness; float attenuationL = 2.0 * NdotL / (NdotL + sqrt(r * r + (1.0 - r * r) * (NdotL * NdotL)));
float attenuationV = 2.0 * NdotV / (NdotV + sqrt(r * r + (1.0 - r * r) * (NdotV * NdotV)));
return attenuationL * attenuationV;
}

Normal (d)istribution term

該函式用來描述材質的roughness,在能量守恆下,控制物體在反射與折射間的分配,glTF中採用的是Trowbridge-Reitz GGX公式,其中α是唯一引數,而h可以通過粗糙度α和法線n求解:

(又是一堆公式,以後遇到直接拿來用,不在公式上花費時間)

// The following equation(s) model the distribution of microfacet normals across
// the area being drawn (aka D())
// Implementation from "Average Irregularity Representation of a Roughened Surface
// for Ray Reflection" by T. S. Trowbridge, and K. P. Reitz
// Follows the distribution function recommended in the SIGGRAPH 2013 course notes
// from EPIC Games [1], Equation 3.
float microfacetDistribution(PBRInfo pbrInputs)
{
float roughnessSq = pbrInputs.alphaRoughness * pbrInputs.alphaRoughness;
float f = (pbrInputs.NdotH * roughnessSq - pbrInputs.NdotH) * pbrInputs.NdotH + 1.0;
return roughnessSq / (M_PI * f * f);
}

IBL

現在環境光、點光源、平行光的計算基本說清楚了。還有一種是來自四面八方的光照計算。

對於來自四面八方的光,就有一個求和的過程,這裡,對該積分做了如下兩步近似求解

因為如上的近似推導,證明我們可以通過EnvironmentMap和BRDF lookup table兩張紋理,對Sum求和的過程預處理,減少real time下的計算量。(這裡是直接拷貝大牛的文章,根據我的理解就是IBLContrib部分可以簡化成兩個部分,環境貼圖和一個根據BRDF公式計算出來的一個紋理(LUT,lookup table),這個紋理裡面儲存了對四面八方的光的specular部分進行引數調節的兩個變數)

Environment Map和BRDF lookup table。前者根據不同的Roughness,計算對應光源的平均畫素值。後者根據Roughness和視角計算出對應顏色的調整係數(scale和bias)。雖然兩部分的計算量比較大,但都可以預處理,通常Cube Texture都是固定的,我們可以預先獲取對應的Environment Map,根據Roughness構建MipMap;後者只跟Roughness和視角V的cos有關,一旦確定了BRDF模型,計算公式是固定的,也可以預先生成U(Roughness) V(cosV)對應的 Texture:

Cook-TorranceModel對應的LUT

這樣,我們可以獲取環境光的計算公式如下:

finalColor += PrefilteredColor * ( SpecularColor* EnvBRDF.x + EnvBRDF.y );

(這裡理論和程式碼不是完全一致,這裡的EnvironmentMap分為了兩個,u_DiffuseEnvSampler和u_SpecularEnvSampler,當然這兩個都是需要提前準備的)

// Calculation of the lighting contribution from an optional Image Based Light source.
// Precomputed Environment Maps are required uniform inputs and are computed as outlined in [1].
// See our README.md on Environment Maps [3] for additional discussion.
#ifdef USE_IBL
vec3 getIBLContribution(PBRInfo pbrInputs, vec3 n, vec3 reflection)
{
float mipCount = 9.0; // resolution of 512x512
float lod = (pbrInputs.perceptualRoughness * mipCount);
// retrieve a scale and bias to F0. See [1], Figure 3
vec3 brdf = SRGBtoLINEAR(texture2D(u_brdfLUT,
vec2(pbrInputs.NdotV, 1.0 - pbrInputs.perceptualRoughness))).rgb;
vec3 diffuseLight = SRGBtoLINEAR(textureCube(u_DiffuseEnvSampler, n)).rgb; #ifdef USE_TEX_LOD
vec3 specularLight = SRGBtoLINEAR(textureCubeLodEXT(u_SpecularEnvSampler, reflection, lod)).rgb;
#else
vec3 specularLight = SRGBtoLINEAR(textureCube(u_SpecularEnvSampler, reflection)).rgb;
#endif vec3 diffuse = diffuseLight * pbrInputs.diffuseColor;
vec3 specular = specularLight * (pbrInputs.specularColor * brdf.x + brdf.y); // For presentation, this allows us to disable IBL terms
diffuse *= u_ScaleIBLAmbient.x;
specular *= u_ScaleIBLAmbient.y; return diffuse + specular;
}
#endif

渲染部分基本講完了,這裡面還涉及幾個輔助函式用來設定一些向量乘積變數。

void PBRInfo_setAmbientLight(inout PBRInfo pbrInputs) {
pbrInputs.NdotL = 1.0;
pbrInputs.NdotH = 0.0;
pbrInputs.LdotH = 0.0;
pbrInputs.VdotH = 1.0;
} void PBRInfo_setDirectionalLight(inout PBRInfo pbrInputs, vec3 lightDirection) {
vec3 n = pbrInputs.n;
vec3 v = pbrInputs.v;
vec3 l = normalize(lightDirection); // Vector from surface point to light
vec3 h = normalize(l+v); // Half vector between both l and v pbrInputs.NdotL = clamp(dot(n, l), 0.001, 1.0);
pbrInputs.NdotH = clamp(dot(n, h), 0.0, 1.0);
pbrInputs.LdotH = clamp(dot(l, h), 0.0, 1.0);
pbrInputs.VdotH = clamp(dot(v, h), 0.0, 1.0);
} void PBRInfo_setPointLight(inout PBRInfo pbrInputs, PointLight pointLight) {
vec3 light_direction = normalize(pointLight.position - pbr_vPosition);
PBRInfo_setDirectionalLight(pbrInputs, light_direction);
}

還有將gamma顏色空間轉成線性空間的函式

vec4 SRGBtoLINEAR(vec4 srgbIn)
{
#ifdef MANUAL_SRGB
#ifdef SRGB_FAST_APPROXIMATION
vec3 linOut = pow(srgbIn.xyz,vec3(2.2));
#else //SRGB_FAST_APPROXIMATION
vec3 bLess = step(vec3(0.04045),srgbIn.xyz);
vec3 linOut = mix( srgbIn.xyz/vec3(12.92), pow((srgbIn.xyz+vec3(0.055))/vec3(1.055),vec3(2.4)), bLess );
#endif //SRGB_FAST_APPROXIMATION
return vec4(linOut,srgbIn.w);;
#else //MANUAL_SRGB
return srgbIn;
#endif //MANUAL_SRGB
}

以及獲取法向量的函式,關於法向量紋理,裡面涉及切向量空間,又是另外一個專題,不展開了。

// Find the normal for this fragment, pulling either from a predefined normal map
// or from the interpolated mesh normal and tangent attributes.
vec3 getNormal()
{
// Retrieve the tangent space matrix
#ifndef HAS_TANGENTS
vec3 pos_dx = dFdx(pbr_vPosition);
vec3 pos_dy = dFdy(pbr_vPosition);
vec3 tex_dx = dFdx(vec3(pbr_vUV, 0.0));
vec3 tex_dy = dFdy(vec3(pbr_vUV, 0.0));
vec3 t = (tex_dy.t * pos_dx - tex_dx.t * pos_dy) / (tex_dx.s * tex_dy.t - tex_dy.s * tex_dx.t); #ifdef HAS_NORMALS
vec3 ng = normalize(pbr_vNormal);
#else
vec3 ng = cross(pos_dx, pos_dy);
#endif t = normalize(t - ng * dot(ng, t));
vec3 b = normalize(cross(ng, t));
mat3 tbn = mat3(t, b, ng);
#else // HAS_TANGENTS
mat3 tbn = pbr_vTBN;
#endif #ifdef HAS_NORMALMAP
vec3 n = texture2D(u_NormalSampler, pbr_vUV).rgb;
n = normalize(tbn * ((2.0 * n - 1.0) * vec3(u_NormalScale, u_NormalScale, 1.0)));
#else
// The tbn matrix is linearly interpolated, so we need to re-normalize
vec3 n = normalize(tbn[2].xyz);
#endif return n;
}

以及PBRInfo資訊:

// Encapsulate the various inputs used by the various functions in the shading equation
// We store values in this struct to simplify the integration of alternative implementations
// of the shading terms, outlined in the Readme.MD Appendix.
struct PBRInfo
{
float NdotL; // cos angle between normal and light direction
float NdotV; // cos angle between normal and view direction
float NdotH; // cos angle between normal and half vector
float LdotH; // cos angle between light direction and half vector
float VdotH; // cos angle between view direction and half vector
float perceptualRoughness; // roughness value, as authored by the model creator (input to shader)
float metalness; // metallic value at the surface
vec3 reflectance0; // full reflectance color (normal incidence angle)
vec3 reflectance90; // reflectance color at grazing angle
float alphaRoughness; // roughness mapped to a more linear change in the roughness (proposed by [2])
vec3 diffuseColor; // color contribution from diffuse lighting
vec3 specularColor; // color contribution from specular lighting
vec3 n; // normal at surface point
vec3 v; // vector from surface point to camera
};

部分圖和文字借用了一些大佬的文章,侵權請聯絡我,必刪!

參考文章

https://mp.weixin.qq.com/s?__biz=MzA5MDcyOTE5Nw==&mid=2650545802&idx=1&sn=282eec1403c901cbf406141ec668a96a&scene=19#wechat_redirect

https://blog.csdn.net/qjh5606/article/details/89948573

https://mp.weixin.qq.com/s?__biz=MzA5MDcyOTE5Nw==&mid=2650545891&idx=1&sn=938f1e2d37864bf0cff5ec9e308fdae0&scene=19#wechat_redirect

https://zhuanlan.zhihu.com/p/58692781?utm_source=wechat_session

https://zhuanlan.zhihu.com/p/58641686

https://zhuanlan.zhihu.com/c_1084126907469135872