在之前的例子中，我們使用的光源都假設(shè)是來自空間的一個(gè)點(diǎn)。但現(xiàn)實(shí)環(huán)境中，光源的類型有好幾種，每種的表現(xiàn)不一樣，我們將光投射到物體的光源叫做投光物，下面，我們將討論幾種不同類型的投光物。學(xué)會(huì)這幾種投光物的使用之后，就能夠模擬出更豐富的光照?qǐng)鼍啊?/p>
1.平行光
當(dāng)一個(gè)光源在很遠(yuǎn)的地方時(shí)，來源于光源的每條光線都會(huì)平行。不論物體或觀察者處于什么位置，好像光源都來自同一個(gè)方向，這就是平行光，生活中最常見的平行光就是太陽光 。
模擬太陽光
在之前的例子中，我們計(jì)算光線的方向向量使用的是，lightpos - fragpos(光源位置減去頂點(diǎn)位置)，模擬平行光，我們直接給出平行光的向量就可以了。
沿用上一篇文章的Demo,將頂點(diǎn)著色器改為如下：
#version 300 es
precision mediump float;
struct Material {
sampler2D diffuseMap;
sampler2D specularMap;
float shineness; //高光反射
};
struct Light {
vec3 diffuse;
vec3 specular;
vec3 ambient;
};
uniform Material material;
uniform Light light;
//光源位置
uniform vec3 lightDir;
//觀察點(diǎn)（攝像機(jī)位置）
uniform vec3 viewPos;
//頂點(diǎn)位置（世界空間坐標(biāo)系）
in vec3 fragPos;
//垂直于頂點(diǎn)的法線向量(世界空間坐標(biāo)系)
in vec3 N;
in vec2 oTextCoord;
out vec4 fragColor;
void main() {
//計(jì)算環(huán)境光照(漫反射貼圖也用于環(huán)境反射)
vec3 ambient = light.ambient * vec3(texture(material.diffuseMap, oTextCoord));
//計(jì)算漫反射
vec3 norm = normalize(N);
vec3 lightDirection = normalize(lightDir);
float diffu = max(dot(norm,lightDirection), 0.0);
vec3 diffuse = light.diffuse * diffu * vec3(texture(material.diffuseMap, oTextCoord));
//計(jì)算環(huán)境反射
vec3 viewDirection = normalize(viewPos - fragPos);
vec3 reflectDirection = reflect(-lightDirection,norm);
float spec = pow( max(dot(viewDirection, reflectDirection), 0.0), material.shineness);
vec3 specular = light.specular * spec * vec3(texture(material.specularMap, oTextCoord));
fragColor = vec4((ambient + diffuse + specular), 1.0);
}
這里注意如下改動(dòng)：
頂點(diǎn)著色器改動(dòng)
//代碼如下圖：
GLKVector3Make( 0.0f, 0.0f, 0.0f),
GLKVector3Make( 1.0f, 5.0f, -15.0f),
GLKVector3Make(1.5f, -2.2f, -2.5f),
GLKVector3Make(-2.8f, -2.0f, -12.3f),
GLKVector3Make(3.0, -0.5, 2.0),
GLKVector3Make( 4.4f, -0.4f, -3.5f),
GLKVector3Make(-5.7f, 3.0f, -7.5f),
GLKVector3Make( 6.5f, 2.0f, -2.5f),
GLKVector3Make(-7.0, 0.5, 2.0),
GLKVector3Make(-6.3f, 1.0f, -1.5f),
};
for ( int i = 0; i < 10; i++) {
GLKVector3 pos = cubePosition[i];
GLKMatrix4 rotate = GLKMatrix4MakeRotation((M_PI * i / 10),0,1,0);
GLKMatrix4 rotate2 = GLKMatrix4MakeRotation(-M_PI * 0.05 * i, 1, 0, 0);
GLKMatrix4 scale = GLKMatrix4MakeScale(0.3, 0.3, 0.3);
GLKMatrix4 translate1 = GLKMatrix4MakeTranslation(pos.x * 0.3, pos.y * 0.3, pos.z * 0.3);
GLKMatrix4 modelMatrix = GLKMatrix4Multiply(rotate2, rotate);
modelMatrix = GLKMatrix4Multiply(modelMatrix, scale);
modelMatrix = GLKMatrix4Multiply(translate1, modelMatrix);
glUniformMatrix4fv(modelIndex, 1, GL_FALSE, modelMatrix.m);
[self drawCubeWithTextCoordLocation:textCoordIndex andPositionlocation:positionIndex andNormalLocation:normalIndex];
}
這里我們繪制10個(gè)箱子，分布在空間不同位置，來模擬平行光的效果。
效果如圖：
模擬平行光效果
2.點(diǎn)光源
點(diǎn)光源示意圖
現(xiàn)實(shí)世界中，模擬太陽光這種平行光可以提供很棒的全局照明效果，但是還有其它的光照?qǐng)鼍?，比如室?nèi)的燈泡，或者黑夜中的火把，這種可以看做點(diǎn)光源，雖然我們之前的例子中都是使用的點(diǎn)光源來模擬光照的，但是現(xiàn)實(shí)世界中，我們可以法線，例如一個(gè)燈泡，距離遠(yuǎn)了，燈泡發(fā)出的光是會(huì)變?nèi)醯?，這就存在光線的衰減現(xiàn)象。
如果用線性方程式表示點(diǎn)光源光線衰減，效果感覺不真實(shí)。
關(guān)于點(diǎn)光源光纖衰減公式，已經(jīng)有前行者幫我們總結(jié)出來：
光線衰減公式
公式里的d表示的是片段距離光源的距離。
常用系數(shù)
添加衰減公式之后的點(diǎn)光源,片段著色器改動(dòng):
片段著色器
效果圖：
模擬光線衰減效果
可以看到，隨著距離的增加，有些箱子已經(jīng)看不到了。
3.聚光燈
大家可以想象老是街燈的那個(gè)效果，有燈罩，它的照射范圍是一個(gè)圓錐體。類似下圖的效果：
聚光示意圖
這里幾個(gè)參數(shù)代表的含義：
- LightDir：從片段指向光源的向量。
- SpotDir：聚光所指向的方向。
- Phi?：指定了聚光半徑的切光角。落在這個(gè)角度之外的物體都不會(huì)被這個(gè)聚光所照亮。
- Thetaθ：LightDir向量和SpotDir向量之間的夾角。在聚光內(nèi)部的話θ值應(yīng)該比?值小。
現(xiàn)在我們要做的就是求出Thetaθ值（ lightDir和spotDir的點(diǎn)乘積來表示）與切光角的大小。
所以我們需要傳入三個(gè)值給片段著色器：1.從片段指向光源的向量 2.聚光所指向的方向 3.切光角
我們對(duì)片段著色器做如下改變：
#version 300 es
precision mediump float;
struct Material {
sampler2D diffuseMap;
sampler2D specularMap;
float shineness; //高光反射
};
struct Light {
vec3 diffuse;
vec3 specular;
vec3 ambient;
float constant;
float linear;
float quadratic;
//聚光指向的方向
vec3 spotDir;
//切光角
float cutOff;
};
uniform Material material;
uniform Light light;
//光源位置
uniform vec3 lightPos;
//觀察點(diǎn)（攝像機(jī)位置）
uniform vec3 viewPos;
//頂點(diǎn)位置（世界空間坐標(biāo)系）
in vec3 fragPos;
//垂直于頂點(diǎn)的法線向量(世界空間坐標(biāo)系)
in vec3 N;
in vec2 oTextCoord;
out vec4 fragColor;
void main() {
// 頂點(diǎn)到光源的距離
float distan = length(lightPos - fragPos);
//計(jì)算環(huán)境光照(漫反射貼圖也用于環(huán)境反射)
vec3 ambient = light.ambient * vec3(texture(material.diffuseMap, oTextCoord));
//計(jì)算漫反射
vec3 norm = normalize(N);
vec3 lightDirection = normalize(lightPos - fragPos);
float diffu = max(dot(norm,lightDirection), 0.0);
vec3 diffuse = light.diffuse * diffu * vec3(texture(material.diffuseMap, oTextCoord));
//計(jì)算鏡面反射
vec3 viewDirection = normalize(viewPos - fragPos);
vec3 reflectDirection = reflect(-lightDirection,norm);
float spec = pow( max(dot(viewDirection, reflectDirection), 0.0), material.shineness);
vec3 specular = light.specular * spec * vec3(texture(material.specularMap, oTextCoord));
//計(jì)算從片段指向光源的向量和聚光所指的方向的夾角
float theta = dot(lightDirection, normalize(-light.spotDir));
vec4 color = vec4(1.0);
//如果處于切光角內(nèi)，就這樣計(jì)算，否則就用環(huán)境光照，不至于太暗
if (theta > light.cutOff)
{
diffuse *= theta;
specular *= theta;
color = vec4((ambient + diffuse + specular), 1.0);
}
else {
color = vec4(ambient, 1.0);
}
fragColor = color;
}
注意以下幾點(diǎn)：
WeChat23a4af49e87f6d11dc46c1e8e62f8f0b.png
1.這里為什么對(duì)聚光所指向的方向取反呢？原因是：我們這里的lightDirection是片段只想光源的向量，而聚光的方向是光源指向外面的方向，如果不取反的話，兩個(gè)計(jì)算的夾角就會(huì)大于90度，這時(shí)候就不能和切光角對(duì)比了（切光角一般是小于90度的）?？聪聢D就能理解了。
理解
2.這里比較角度的時(shí)候?yàn)槭裁词?theta > light.cutOff,因?yàn)檫@里向量點(diǎn)乘積最后表示的是cosθ值，而cos函數(shù)的值(余弦值)，在角度0~90°范圍內(nèi)，隨著角度的增加，值是減少的，所以theta大于light.cutOff表示夾角小于切光角。
余弦值函數(shù)
3.我們沒有對(duì)環(huán)境光照進(jìn)行改變，是因?yàn)槲覀兿Ｍ?，在聚光照射不到的地方，仍然有環(huán)境光照，這樣不至于太黑。
代碼中的實(shí)現(xiàn)：
static float lightPos[3] = {0.0,0.2,2.0};
//這里設(shè)置觀察點(diǎn)為攝像機(jī)的位置(cameraMatrix里eye的位置)
static float viewPos[3] = {0.0,-0.5,2.0};
glUniform3fv(lightPosIndex, 1, lightPos);
glUniform3fv(viewPosIndex, 1, viewPos);
//設(shè)置材質(zhì)
glUniform3f(glGetUniformLocation(_esContext.program, "light.ambient"), 0.2, 0.2, 0.2);
glUniform3f(glGetUniformLocation(_esContext.program, "light.diffuse"), 0.5, 0.5, 0.5);
glUniform3f(glGetUniformLocation(_esContext.program, "light.specular"), 1.0, 1.0, 1.0);
glUniform1f(glGetUniformLocation(_esContext.program, "light.constant"), 1.0);
glUniform1f(glGetUniformLocation(_esContext.program, "light.linear"), 0.09);
glUniform1f(glGetUniformLocation(_esContext.program, "light.quadratic"), 0.032);
glUniform3f(glGetUniformLocation(_esContext.program, "light.spotDir"), 0.0, 0.0, -1.0);
float cutoff = cos(GLKMathDegreesToRadians(12.5f));
glUniform1f(glGetUniformLocation(_esContext.program, "light.cutOff"), cutoff);
這里我們傳入的cutOff需要注意，是余弦值，float cutoff = cos(GLKMathDegreesToRadians(12.5f)); 這句代碼就是求12.5°角的余弦值。
運(yùn)行項(xiàng)目，效果如圖：
IMG_6791.PNG
效果是有了，但是有點(diǎn)不真實(shí)，因?yàn)橐话愕木酃膺吘墰]有這么銳利，這里一出聚光的范圍，馬上光線就變暗了，為了使效果更加真實(shí)，我們應(yīng)該加一個(gè)過渡層，這里我們給添加一個(gè)外切光角，在切光角到外切光角這段范圍內(nèi)，讓光照的影響隨著距離擴(kuò)大，影響越來越小，這里我們有如下公式：
截屏2021-12-14 下午3.31.44.png
這里?(Epsilon)是內(nèi)（?）和外圓錐（γ）之間的余弦值差（?=??γ）。最終的I值就是在當(dāng)前片段聚光的強(qiáng)度。
我們修改片段著色器如下：
precision mediump float;
struct Material {
sampler2D diffuseMap;
sampler2D specularMap;
float shineness; //高光反射
};
struct Light {
vec3 diffuse;
vec3 specular;
vec3 ambient;
float constant;
float linear;
float quadratic;
//聚光指向的方向
vec3 spotDir;
//切光角
float cutOff;
//外切光角
float outCutOff;
};
uniform Material material;
uniform Light light;
//光源位置
uniform vec3 lightPos;
//觀察點(diǎn)（攝像機(jī)位置）
uniform vec3 viewPos;
//頂點(diǎn)位置（世界空間坐標(biāo)系）
in vec3 fragPos;
//垂直于頂點(diǎn)的法線向量(世界空間坐標(biāo)系)
in vec3 N;
in vec2 oTextCoord;
out vec4 fragColor;
void main() {
// 頂點(diǎn)到光源的距離
float distan = length(lightPos - fragPos);
//計(jì)算環(huán)境光照(漫反射貼圖也用于環(huán)境反射)
vec3 ambient = light.ambient * vec3(texture(material.diffuseMap, oTextCoord));
//計(jì)算漫反射
vec3 norm = normalize(N);
vec3 lightDirection = normalize(lightPos - fragPos);
float diffu = max(dot(norm,lightDirection), 0.0);
vec3 diffuse = light.diffuse * diffu * vec3(texture(material.diffuseMap, oTextCoord));
//計(jì)算鏡面反射
vec3 viewDirection = normalize(viewPos - fragPos);
vec3 reflectDirection = reflect(-lightDirection,norm);
float spec = pow( max(dot(viewDirection, reflectDirection), 0.0), material.shineness);
vec3 specular = light.specular * spec * vec3(texture(material.specularMap, oTextCoord));
//計(jì)算從片段指向光源的向量和聚光所指的方向的夾角
float theta = dot(lightDirection, normalize(-light.spotDir));
float epsilon = light.cutOff - light.outCutOff;
float intensity = clamp(((theta - light.outCutOff) / epsilon), 0.0 , 1.0);
//如果處于切光角內(nèi)，就這樣計(jì)算，否則就用環(huán)境光照，不至于太暗
diffuse *= intensity;
specular *= intensity;
fragColor = vec4((ambient + diffuse + specular), 1.0);
}
注：這里我們?nèi)〉阶罱K的intensity是要在0.0~1.0范圍內(nèi)的，不然是沒有意義的。
代碼改變?nèi)缦拢?/p>
static float lightPos[3] = {0.0,0.2,2.0};
//這里設(shè)置觀察點(diǎn)為攝像機(jī)的位置(cameraMatrix里eye的位置)
static float viewPos[3] = {0.0,-0.5,2.0};
glUniform3fv(lightPosIndex, 1, lightPos);
glUniform3fv(viewPosIndex, 1, viewPos);
//設(shè)置材質(zhì)
glUniform3f(glGetUniformLocation(_esContext.program, "light.ambient"), 0.2, 0.2, 0.2);
glUniform3f(glGetUniformLocation(_esContext.program, "light.diffuse"), 0.5, 0.5, 0.5);
glUniform3f(glGetUniformLocation(_esContext.program, "light.specular"), 1.0, 1.0, 1.0);
glUniform1f(glGetUniformLocation(_esContext.program, "light.constant"), 1.0);
glUniform1f(glGetUniformLocation(_esContext.program, "light.linear"), 0.09);
glUniform1f(glGetUniformLocation(_esContext.program, "light.quadratic"), 0.032);
glUniform3f(glGetUniformLocation(_esContext.program, "light.spotDir"), 0.0, 0.0, -1.0);
float cutoff = cos(GLKMathDegreesToRadians(12.5f));
glUniform1f(glGetUniformLocation(_esContext.program, "light.cutOff"), cutoff);
float outCutOff = cos(GLKMathDegreesToRadians(17.5f));
glUniform1f(glGetUniformLocation(_esContext.program, "light.outCutOff"), outCutOff);
運(yùn)行項(xiàng)目，效果如下圖：
模擬聚光
最終得到的效果比較真實(shí)了。感興趣的讀者可以改變聚光的位置，還有模型矩陣，來觀察聚光的效果。
代碼已上傳至github.
