?基礎(chǔ)光照模型! Cocos Creator 2D 光照!
前言在2d中實(shí)現(xiàn)基礎(chǔ)光照效果!文末查看完整項(xiàng)目
本文主要講的是最基礎(chǔ)的光照模型(馮氏光照模型(Phong Lighting Model)),是一種光照的簡(jiǎn)化模型。請(qǐng)務(wù)必記住以下幾個(gè)英文單詞,對(duì)學(xué)習(xí)研究非常有幫助。
- 環(huán)境(
Ambient) - 漫反射(
Diffuse) - 鏡面高光(
Specular)
希望我們能大概了解這些知識(shí)(但不限于這些)
- 向量(加法/點(diǎn)乘/叉乘)
- 著色器(頂點(diǎn)著色器/片元著色器)
- ...
計(jì)算機(jī)圖形學(xué)第一定律:如果它看起是對(duì)的,那么它就是對(duì)的
影響一個(gè)物體的外觀顏色一般有以下幾個(gè)因素:
- 物體表面的特質(zhì),即材質(zhì)屬性。(這次實(shí)現(xiàn)忽略材質(zhì),默認(rèn)統(tǒng)一材質(zhì))
- 表面的方位與朝向,朝向常用單位法向量表示。(這次在2d中默認(rèn)使用朝向屏幕
(0,0,1)作為所有法向量) - 照射光的各光源性質(zhì)。(這次簡(jiǎn)化為只有光源位置)
- 觀察者位置。(這次使用相機(jī)的位置)
實(shí)現(xiàn)標(biāo)準(zhǔn)光照公式可以簡(jiǎn)寫(xiě)成
光?=?環(huán)境光?+?漫反射?+?高光
現(xiàn)在逐一去實(shí)現(xiàn)。
環(huán)境光
環(huán)境光(Ambient)是標(biāo)準(zhǔn)光照模型中最簡(jiǎn)單的一部分,可以理解為光照模型中的常數(shù)項(xiàng)。
環(huán)境光的顏色并不會(huì)隨著物體的位置,光的位置,視角的位置而改變。
<環(huán)境光>?=?<全局環(huán)境光顏色>x<材質(zhì)顏色>

材質(zhì)色這里采用圖片的紋理顏色,環(huán)境光的主要代碼如下:
vec3 ambient = ambientLight.rgb * lightColor.rgb;
o.rgb = amibent * o.rgb;
在只有環(huán)境光的情況下,對(duì)于不同的全局光的系數(shù),物體的亮度也不一樣。

漫反射
漫反射(Diffuse)是基礎(chǔ)光照模型的第二劍客,它不再是個(gè)常量。
漫反射的效果會(huì)隨著物體與光線的夾角變化而變化。
<漫反射>?=?<入射光顏色>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模型(用反射向量計(jì)算)bliinn模型(用半向量計(jì)算)

主要核心代碼如下。
// 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é)果如下,可以看到有一個(gè)小光點(diǎn),就是高光反射。
小結(jié)Cocos Creator 2d 光照!Blinn-Phong ! Ambient ! Diffuse ! Specular !
基礎(chǔ)光照模型可分為三項(xiàng)去考慮
- 環(huán)境(
Ambient) [常數(shù),全局環(huán)境光] - 漫反射(
Diffuse) [入射角與法向量] - 鏡面高光(
Specular) [入射角,觀察點(diǎn),指數(shù)]
以上為白玉無(wú)冰使用 Cocos Creator v2.4 實(shí)現(xiàn) "基礎(chǔ)光照 Blinn-Phong" 的技術(shù)分享。歡迎分享給身邊的朋友!
當(dāng)然,這只是一種簡(jiǎn)單的光照模型,進(jìn)一步探討的話(huà)還有:
- 法線矩陣
- 平行光/點(diǎn)光/聚光
- 基于物理的渲染(
Physically Based Rendering)[PBR] - 雙向反射分布函數(shù)(
Bidirectional Reflective Distribution Function)[BRDF] - 光線追蹤
- ...
更多的拓展見(jiàn)參考資料。
參考- 《Fundamentals of Computer Graphics》
- 《WebGL編程指南》
- 《3D數(shù)學(xué)基礎(chǔ):圖形與游戲開(kāi)發(fā)》
- 《光線跟蹤算法技術(shù)》
- 《Unity Shader入門(mén)精要》
- https://learnopengl.com/
2020 原創(chuàng)精選! shader | 挖洞 | 流體 | 3D | 繩子紋理 | 四叉樹(shù) | 數(shù)學(xué) 樣樣都有!


完整代碼(詳見(jiàn)readme):?
https://github.com/baiyuwubing/cocos-creator-examples/tree/master/2.4.x
點(diǎn)擊“閱讀原文”查看精選導(dǎo)航
“點(diǎn)贊“ ”在看”?鼓勵(lì)一下
▼
