在2d中實(shí)現(xiàn)基礎(chǔ)光照效果！文末查看完整項目

前言

本文主要講的是最基礎(chǔ)的光照模型(馮氏光照模型(Phong Lighting Model))，是一種光照的簡化模型。請務(wù)必記住以下幾個英文單詞，對學(xué)習(xí)研究非常有幫助。

環(huán)境(Ambient)
漫反射(Diffuse)
鏡面高光(Specular)

希望我們能大概了解這些知識（但不限于這些）

向量（加法/點(diǎn)乘/叉乘）
著色器（頂點(diǎn)著色器/片元著色器）
...

計算機(jī)圖形學(xué)第一定律：如果它看起是對的，那么它就是對的

影響一個物體的外觀顏色一般有以下幾個因素：

物體表面的特質(zhì)，即材質(zhì)屬性。（這次實(shí)現(xiàn)忽略材質(zhì)，默認(rèn)統(tǒng)一材質(zhì)）
表面的方位與朝向，朝向常用單位法向量表示。（這次在2d中默認(rèn)使用朝向屏幕(0,0,1)作為所有法向量）
照射光的各光源性質(zhì)。（這次簡化為只有光源位置）
觀察者位置。（這次使用相機(jī)的位置）

實(shí)現(xiàn)

標(biāo)準(zhǔn)光照公式可以簡寫成

光?=?環(huán)境光?+?漫反射?+?高光

現(xiàn)在逐一去實(shí)現(xiàn)。

環(huán)境光

環(huán)境光(Ambient)是標(biāo)準(zhǔn)光照模型中最簡單的一部分，可以理解為光照模型中的常數(shù)項。

環(huán)境光的顏色并不會隨著物體的位置，光的位置，視角的位置而改變。

<環(huán)境光>?=?<全局環(huán)境光顏色>x<材質(zhì)顏色>

材質(zhì)色這里采用圖片的紋理顏色，環(huán)境光的主要代碼如下：

vec3 ambient = ambientLight.rgb * lightColor.rgb;
o.rgb = amibent * o.rgb;

在只有環(huán)境光的情況下，對于不同的全局光的系數(shù)，物體的亮度也不一樣。

漫反射

漫反射(Diffuse)是基礎(chǔ)光照模型的第二劍客，它不再是個常量。

漫反射的效果會隨著物體與光線的夾角變化而變化。

<漫反射>?=?<入射光顏色>x<材質(zhì)顏色>x<光與物體法向量的夾角>

主要代碼如下：

vec3 norm = normalize(v_normal); // 法向量
vec3 lightDir = normalize(lightPos.xyz - v_pos); // 光的方向

// diffuse
float diff = max(dot(norm, lightDir), 0.0); // 夾角
vec3 diffuse = diff * lightColor.rgb;

o.rgb = (amibent + diffuse) * o.rgb; // 環(huán)境光+漫反射光

可以看到光在不同的位置下，物體的亮度不同。

鏡面高光

鏡面高光(Specular)是基礎(chǔ)光照模型的最后一道工序，不僅受物體夾角影響，還受觀察點(diǎn)的影響。

<鏡面高光>?=?<入射光顏色>x<材質(zhì)顏色>x<觀察向量與入射向量和法向量的某種指數(shù)關(guān)系>

這里有兩種模型去實(shí)現(xiàn)鏡面高光

phong 模型（用反射向量計算）
bliinn 模型（用半向量計算）

主要核心代碼如下。

// phong-specular
// vec3 viewDir = normalize(viewPos - v_pos);  // 視角向量
// vec3 reflectDir = reflect(-lightDir, norm); // 反射向量
// float spec = pow(max(dot(viewDir, reflectDir), 0.0), shininess); // 夾角的指數(shù)關(guān)系
// vec3 specular = spec * lightColor.rgb; // 乘入射光顏色

// blint-phong
vec3 viewDir    = normalize(viewPos - v_pos);  // 視角向量
vec3 halfwayDir = normalize(lightDir + viewDir); // 半向量
float spec = pow(max(dot(norm, halfwayDir), 0.0), shininess); // 夾角的指數(shù)關(guān)系
vec3 specular = lightColor.rgb * spec; // 乘入射光顏色

o.rgb = (ambient + diffuse + specular) * o.rgb; // 混合環(huán)境光 漫反射 高光反射

運(yùn)行后的結(jié)果如下，可以看到有一個小光點(diǎn)，就是高光反射。