一、颜色

现实世界中有无数种颜色，每一个物体都有它们自己的颜色。计算机通过离散的、有限的数值来模拟真实世界中（无限）的颜色，所以并不是所有现实世界中的颜色都可以用数值来表示的。然而我们仍能通过数值来表现出非常多的颜色，甚至你可能都不会注意到与现实的颜色有任何的差异。颜色可以数字化的由红色(Red)、绿色(Green)和蓝色(Blue)三个分量组成，它们通常被缩写为RGB。仅仅用这三个值就可以组合出任意一种颜色。
我们在现实生活中看到某一物体的颜色并不是这个物体真正拥有的颜色，而是它所反射的(Reflected)颜色。换句话说，那些不能被物体所吸收(Absorb)的颜色（被拒绝的颜色）就是我们能够感知到的物体的颜色。例如，太阳光能被看见的白光其实是由许多不同的颜色组合而成的（如下图所示）。如果我们将白光照在一个蓝色的玩具上，这个蓝色的玩具会吸收白光中除了蓝色以外的所有子颜色，不被吸收的蓝色光被反射到我们的眼中，让这个玩具看起来是蓝色的。下图显示的是一个珊瑚红的玩具，它以不同强度反射了多个颜色。

白色的阳光实际上是所有可见颜色的集合，物体吸收了其中的大部分颜色。它仅反射了代表物体颜色的部分，被反射颜色的组合就是我们所感知到的颜色（此例中为珊瑚红）。
这些颜色反射的定律被直接地运用在图形领域。当我们在OpenGL中创建一个光源时，我们希望给光源一个颜色。在上一段中我们有一个白色的太阳，所以我们也将光源设置为白色。当我们把光源的颜色与物体的颜色值相乘，所得到的就是这个物体所反射的颜色（也就是我们所感知到的颜色）。让我们再次审视我们的玩具（这一次它还是珊瑚红），看看如何在图形学中计算出它的反射颜色。我们将这两个颜色向量作分量相乘，结果就是最终的颜色向量了：

glm::vec3 lightColor(1.0f, 1.0f, 1.0f);        // 光源，白色
glm::vec3 toyColor(1.0f, 0.5f, 0.31f);        // 玩具颜色（珊瑚红）
glm::vec3 result = lightColor * toyColor;     // = (1.0f, 0.5f, 0.31f);
                                            // 物理意义：表示光源照射到玩具之后，我们看到的玩具颜色。
                                            // 玩具的每个颜色分量，表示反射光源的对应颜色分量的百分比。
glm::vec3 lightColor(0.0f, 1.0f, 0.0f);        // 绿色光源
glm::vec3 toyColor(1.0f, 0.5f, 0.31f);        // 玩具颜色（珊瑚红）
glm::vec3 result = lightColor * toyColor;     // = (0.0f, 0.5f, 0.0f);深绿色
                                            // 光源在红色和蓝色分量上为0，所以并没有反射红蓝色。
glm::vec3 lightColor(0.33f, 0.42f, 0.18f);    // 深橄榄绿色光源
glm::vec3 toyColor(1.0f, 0.5f, 0.31f);        // 玩具颜色（珊瑚红），反射光源颜色分量百分比：
                                            //        红色分量：1.0，吸收0%，反射100%
                                            //        绿色分量：0.5，吸收50%，反射50%
                                            //        蓝色分量；0.31，吸收69%，反射31%
glm::vec3 result = lightColor * toyColor;     // = (0.33f, 0.21f, 0.06f);

我们可以定义物体的颜色为物体从一个光源反射各个颜色分量的大小。

二、光照

实践项目：https://github.com/JackieLong/OpenGL/tree/main/project_light_test
现实世界的光照是极其复杂的，而且会受到诸多因素的影响，这是我们有限的计算能力所无法模拟的。因此OpenGL的光照使用的是简化的模型，对现实的情况进行近似，这样处理起来会更容易一些，而且看起来也差不多一样。这些光照模型都是基于我们对光的物理特性的理解。其中一个模型被称为冯氏光照模型。

（一）冯氏光照模型

Phong Lighting Model，冯氏光照模型的主要结构由3个分量组成：

• 环境光照（Ambient）
  • 模拟这种现象：即使在黑暗的情况下，世界上通常也仍然有一些光亮（月亮、远处的光），所以物体几乎永远不会是完全黑暗的。使用环境光照常量给物体一些颜色。
  • 通俗理解，我们在黑暗的地方，看到的物体的颜色。
• 漫反射光照（Diffuse）
  • 物体上与光线方向越接近的地方能从光源处获得更多的亮度。模拟光源对物体的方向性影响(Directional Impact)。物体的某一部分越是正对着光源，它就会越亮。
  • 视觉上最显著的分量，基本上定调了物体的颜色。
• 镜面反射光照（Specular）
  • 模拟有光泽物体上面出现的亮点，比如手电筒照到箱子上，钢铁在发亮，而木板则没有。
  • 镜面光照的颜色相比于物体的颜色会更倾向于光的颜色。

    1、环境光照

    环境光就好比一种全局的光，可以照射到所有物体表面。比如我们在完全无光的时候，也能看出点物体的颜色，完全黑色的话就有点假。 ```cpp // ** 在片段着色器中

uniform vec3 lightColorambient; // 光“材质属性之一”：环境光分量 uniform vec3 objectColor_ambient; // 物体材质属性之一：环境光分量物体颜色环境光分量（材质中的环境光属性）

void main() { vec3 ambient = lightColor_ambient * objectColor_ambient;

FragColor = vec4(ambient, 1.0);    // 物体在“无光”的情况下的颜色

}

![](https://cdn.nlark.com/yuque/0/2021/png/461452/1610078280645-b148e5e6-bbea-40bd-9c95-cba324e2392d.png#align=left&display=inline&height=469&margin=%5Bobject%20Object%5D&originHeight=469&originWidth=600&size=0&status=done&style=none&width=600)
<a name="MvSxN"></a>
### 2、漫反射光照
<a name="1jSHS"></a>
#### 数学模型
![](https://cdn.nlark.com/yuque/0/2021/png/461452/1609922446951-6539d951-0f05-4b32-bfb7-91510627a2f4.png#align=left&display=inline&height=322&margin=%5Bobject%20Object%5D&originHeight=322&originWidth=447&size=0&status=done&style=none&width=447)<br />已知：<br />光颜色![](https://cdn.nlark.com/yuque/__latex/3867029b0c86f7b4bad4258e1eb61e0e.svg#card=math&code=%5CLarge%20c_%7Blight%7D&height=20&width=48)，<br />光源位置![](https://cdn.nlark.com/yuque/__latex/6e02a9e18a151948e1012e6455f19d19.svg#card=math&code=%5CLarge%20v_%7Blight%7D&height=20&width=49)，<br />顶点（片段）位置![](https://cdn.nlark.com/yuque/__latex/ac4c210d058135f51dbd13c517185f01.svg#card=math&code=%5CLarge%20v_%7Bvertex%7D&height=18&width=61)，<br />顶点（片段）位置的（单位）法向量![](https://cdn.nlark.com/yuque/__latex/3ea7fe24b091853a6851337deeeb76be.svg#card=math&code=%5CLarge%20v_%7Bnormal%7D&height=18&width=70)，<br />顶点（片段）位置的物体颜色![](https://cdn.nlark.com/yuque/__latex/ca72065d0989fb980b31071526c889ab.svg#card=math&code=%5CLarge%20c_%7Bobject%7D&height=20&width=57)。<br />眼睛在顶点（片段）位置的法线方向上往法线反方向看。<br />求眼睛所看到的，顶点（片段）位置的最终颜色![](https://cdn.nlark.com/yuque/__latex/44ddce1e053c8d915aa551c931ace12e.svg#card=math&code=%5CLarge%20c_%7Bfinal%7D&height=21&width=53)。
<a name="dLkgx"></a>
#### 计算过程
设![](https://cdn.nlark.com/yuque/__latex/bc7c1280d0f0b818dc0587da0abb8d4b.svg#card=math&code=%5CLarge%20c_%7Bdiffuse%7D&height=21&width=72)为光在顶点位置法线方向的分量（漫反射），则有：<br />![](https://cdn.nlark.com/yuque/__latex/718ee3c4636d038febd5cec21d0bdc5a.svg#card=math&code=%5CLarge%20%5Cbegin%7Barray%7D%7Bl%7D%0A%20c_%7Bdiffuse%7D%20%26%3D%20c_%7Blight%7D%2A%5Ccos%20%5Ctheta%20%5C%5C%26%3D%20c_%7Blight%7D%2A%5Cfrac%7B%28v_%7Blight%7D-v_%7Bvertex%7D%29%20%5Ccdot%20v_%7Bnormal%7D%7D%7B%7Cv_%7Blight%7D%20-%20v_%7Bvertex%7D%7C%7Cv_%7Bnormal%7D%7C%7D%0A%5Cend%7Barray%7D&height=84&width=375)，然后有：<br />![](https://cdn.nlark.com/yuque/__latex/5651b0a4c04c83c774be57a20131546a.svg#card=math&code=%5CLarge%20%5Cbegin%7Barray%7D%7Bl%7D%5C%0Ac_%7Bfinal%7D%20%26%3D%20%28c_%7Blight%7D%2A%5Ccos%5Ctheta%29%2Ac_%7Bobject%7D%20%5C%5C%0A%26%3D%28c_%7Blight%7D%2A%5Cfrac%7B%28v_%7Blight%7D-v_%7Bvertex%7D%29%20%5Ccdot%20v_%7Bnormal%7D%7D%7B%7Cv_%7Blight%7D%20-%20v_%7Bvertex%7D%7C%7Cv_%7Bnormal%7D%7C%7D%29%2Ac_%7Bobject%7D%0A%5Cend%7Barray%7D&height=84&width=458)<br />设光的方向为单位向量![](https://cdn.nlark.com/yuque/__latex/fc3c36eb723a07107dab339f463517a3.svg#card=math&code=%5CLarge%20v_%7Bdir%7D%20%3D%20%5Cfrac%7Bv_%7Blight%7D%20-%20v_%7Bvertex%7D%7D%7B%7Cv_%7Blight%7D%20-%20v_%7Bvertex%7D%7C%7D&height=60&width=232)，则有：<br />![](https://cdn.nlark.com/yuque/__latex/88e6710414fa341f02ffcf90c3702675.svg#card=math&code=%5CLarge%20c_%7Bfinal%7D%20%3D%20c_%7Blight%7D%2A%28v_%7Bdir%7D%5Ccdot%20v_%7Bnormal%7D%29%2Ac_%7Bobject%7D&height=30&width=378)
<a name="wl0P2"></a>
#### 法向量
法向量是一个垂直于顶点表面的（单位）向量。由于顶点本身并没有表面（它只是空间中一个独立的点），我们利用它周围的顶点来计算出这个顶点的表面。我们能够使用叉乘对立方体所有的顶点计算法向量。<br />上面的各种向量都必须在同一个坐标系中，一般通过模型矩阵转换到世界坐标系中，这里存在一个法线向量的矩阵变换问题，并不能简单乘以模型矩阵而正确得到，因为模型矩阵可能存在非等比缩放，这时法线的方向和大小都会发生改变。我们需要一个**法线矩阵**来消除这种缩放对法线带来的影响（[法线矩阵的计算](http://www.lighthouse3d.com/tutorials/glsl-tutorial/the-normal-matrix/)）。<br />法线矩阵![](https://cdn.nlark.com/yuque/__latex/1e9ab2bf42342b360f17dacf08d412c6.svg#card=math&code=%5CLarge%20M_%7Bnormal%7D%20%3D%20%28M_%7Bmodel%283%5Ctimes%203%29%7D%27%5E%7B-1%7D%29%5ET&height=40&width=262)，![](https://cdn.nlark.com/yuque/__latex/05597f4ddf1044c3633ed58ea20fa8db.svg#card=math&code=%5Clarge%203%5Ctimes%203&height=18&width=45)表示是模型矩阵左上角3x3的部分，也就是说去除了平移变换效果，是因为法线向量一般就是基向量用来表示方向，不存在位置一说，也就没有平移变换一说了。
<a name="8y4CV"></a>
#### 程序设计
```cpp
// 在顶点着色器中
layout(location = 0) vec3 pos;        // 从内存中载入的顶点数据
layout(location = 1) vec3 normal;    // 顶点的法向量
uniform mat4 model;                    // 模型矩阵
uniform mat4 view;                    // 观察矩阵
uniform mat4 projection;            // 投影矩阵
out vec3 outPos;                    // 顶点在坐标系中的位置
out vec3 outNormal;                    // 经过模型变换后的法向量
void main()
{
    gl_Position = projection * view * model * vec4(pos,1.0);
    outPos        = vec3(model * vec4(pos,1.0)) ;
    outNormal   = mat3(transpose(inverse(model))) * normal;        // 矩阵的逆运算开销大，可以通过uniform传入
}

// 在片段着色器中
uniform vec3 lightColor_diffuse;    // 光“材质属性之一”：漫反射分量
uniform vec3 lightPos;                // 光源位置
in      vec3 outPos;                // 顶点的位置（世界坐标）
in         vec3 outNormal;                // 顶点法向量
vec3 objectColor_diffuse;            // 物体材质属性之一：漫反射分量
void main()
{
    vec3  lightDir     = normalize(lightPos - outPos);            // 光射向的反方向
    float cos_theta = max(lightDir * outNormal, 0.0);        // 单位向量点乘得到夹角余弦值，max约束为非负。
    vec3 diffuse = light_diffuse * cos_theta * objectColor_diffuse;     // 漫反射光照
    FragColor = vec4(diffuse, 1.0);
}

视觉效果

3、镜面反射光照

数学模型

已知：
光颜色，
光源位置，
顶点（片段）位置，
顶点（片段）位置的（单位）法向量，
顶点（片段）位置的物体颜色。
图中，为光在顶点位置处反射之后的基向量。
眼睛位置，与顶点的连线和的夹角为。

镜面强度（Specular Intensit），反射强度，可以反射多少百分比的光。
反光度（2~256，2的次幂，一般取32），越大，高光点半径越小。

求眼睛所看到的，顶点（片段）位置的最终颜色。（坐标系为世界坐标系）

计算过程

的计算比较简单，这里暂时不做进一步计算（主要是因为GLSL中的reflect函数可以直接计算出）

反光度的值的影响效果如下：

程序设计

// 在顶点着色器中
layout(location = 0) vec3 pos;        // 从内存中载入的顶点数据
layout(location = 1) vec3 normal;    // 顶点的法向量
uniform vec3 model;                    // 模型矩阵
uniform vec3 view;                    // 观察矩阵
uniform vec3 projection;            // 投影矩阵
out vec3 outPos;                    // 顶点在坐标系中的位置
out vec3 outNormal;                    // 经过模型变换后的法向量
void main()
{
    gl_Position = vec4(projection * view * model * pos);
    outPos        = vec3(model * vec4(pos,1.0)) ;
    outNormal   = mat3(transpose(inverse(model))) * normal;        // 矩阵的逆运算开销大，可以通过uniform传入
}

// 在片段着色器中
uniform vec3  lightColor_specular;    // 光“材质属性之一”：镜面反射分量
uniform float shininess;            // 反光度
uniform vec3  lightPos;                // 光源位置
uniform vec3  viewPos;                // 眼睛位置（摄像机位置）
in      vec3  outPos;                // 顶点的世界坐标
in         vec3  outNormal;                // 顶点法向量
vec3 objectColor_specular;            // 物体材质属性之一：镜面反射分量
void main()
{
    vec3 vecR         = reflect(outPos - lightPos, outNormal);    // 光的反射，计算结果是光的反射向量
    vecR             = normalize(vecR);                            // 标准化
    vec3 vecEye     = normalize(viewPos - outPos);                // 顶点到眼睛的基向量（视线的反方向）
    float cos_theta = max(vecR * vecEye, 0.0);                    // 单位向量点乘得到夹角余弦值，max约束为非负。
    vec3 specular   = lightColor_specular * pow(cos_theta, shininess) * objectColor_specular;
    FragColor = vec4(specular, 1.0);
}

（二）Gourand着色和冯氏着色

有没有发现，前面光照计算是在片段着色器中完成，这就是冯氏着色器，如果放在顶点着色器中计算就叫做Gourand着色器。
这两者的区别在于，一个顶点着色器可能对应要执行多个片段着色器，比如三个顶点画一个三角形，顶点只有3个，但是屏幕上要显示这个三角形远远不止3个像素。假如在顶点着色器中计算光照，则计算出的是三角形三个顶点的光照颜色，片段着色器会根据这三个顶点的光照值进行插值计算，因此得到的光照值讲成线性分布。假如在片段着色器中计算光照，则计算出的是每个像素的光照，光照效果将非常逼真。
所以Gourand着色（Gourand Shading）可以叫做逐顶点着色器，冯氏着色（Phong Shading）可以叫做逐片段着色器。
显然前者的计算量要远小于后者。

三、材质（Material）

实践项目：https://github.com/JackieLong/OpenGL/tree/main/project_material_test

（一）本质

材质只是指物体的这三种反射能力：环境光反射、漫反射、镜面反射。比如钢铁会反光（较强的镜面反射能力），而木头不会（很弱的镜面反射能力）。
所以通过以下三个分量即可定义一个材质属性：

• 环境光照分量（Ambient Lighting）
  • 定义了环境光照下，物体的颜色，一般和物体本身颜色相同。
• 漫反射光照分量（Diffuse Lighting）
  • 漫反射光照下，物体的颜色，一般和环境光照相同。
• 镜面光照分量（Specular Lighting）
  • 设置的是镜面光照对物体的颜色影响（或者甚至可能反射一个物体特定的镜面高光颜色）
  • 其中有一个反光度（Shininess），影响高光点的半径，越大，半径越小，光点越小。

材质属性的光照计算如下：

// 在着色器中
struct Material            // 材质属性
{
    vec3  ambient;        // 环境光照分量
    vec3  diffuse;        // 漫反射光照分量
    vec3  specular;        // 镜面光照分量
    float shininess;    // 反光度
}
uniform vec3     lightColor;
uniform Material material;
void main()
{
    vec3 ambient  = lightColor * material.ambient;
    vec3 diffuse  = lightColor * (material.diffuse * cos_theta);    // cos_theta：光射向的反向和法线的夹角余弦值        
    vec3 specular = lightColor * (material.specular * pow(cos_theta, material.shininess));    // cos_theta：顶点（片段）到眼睛连线 与光在顶点处反射后的方向的夹角的余弦值。
    FragColor = vec4(ambient + diffuse + specular, 1.0);
}

（二）常见材质

http://devernay.free.fr/cours/opengl/materials.html

（三）光的“材质”

光源对环境光、漫反射和镜面光分量也具有不同强度。可以对光设置类似的材质属性：

// 在着色器中
struct Material            // 材质属性
{
    vec3  ambient;        // 环境光照分量
    vec3  diffuse;        // 漫反射光照分量
    vec3  specular;        // 镜面光照分量
    float shininess;    // 反光度
}
struct Light
{
    vec3 pos;
    vec3 ambient;        // 一般比较低，不希望环境颜色太明显
    vec3 diffuse;        // 通常设置为光的颜色，比如比较明亮的白色vec3(0.5)
    vec3 specular;        // 一般为vec3(1.0)
}
uniform Material material;
uniform Light      light;
void main()
{
    vec3 ambient  = lightColor.ambient     * (material.ambient);
    vec3 diffuse  = lightColor.diffuse     * (material.diffuse * cos_theta);    // cos_theta：光射向的反向和法线的夹角余弦值    
    vec3 specular = lightColor.specular * (material.specular * pow(cos_theta, material.shininess));    // cos_theta：顶点（片段）到眼睛连线 与光在顶点处反射后的方向的夹角的余弦值。
    FragColor       = vec4(ambient + diffuse + specular, 1.0);
}
// ***************C++中
// 一般光源属性的数值方法
void main()
{
    glm::vec3 lightColor;                                        // 光源颜色
    glm::vec3 diffuseColor  = glm::vec3(0.5f) * lightColor;        // 满反射强度
    glm::vec3 ambientColor  = glm::vec3(0.2f) * diffuseColor;    // 环境光为漫反射的百分比
    glm::vec3 specularColor = glm::vec(1.0f);                    // 一般为1.0，最大化强度发光
}

四、光照贴图

实践项目：https://github.com/JackieLong/OpenGL/tree/main/project_lighting_map_test
从上面的学习我们知道物体的光照颜色计算如下：

void main()
{
    vec3 ambient  = lightColor.ambient     * (material.ambient);
    vec3 diffuse  = lightColor.diffuse     * (material.diffuse * cos_theta);    // cos_theta：光射向的反向和法线的夹角余弦值    
    vec3 specular = lightColor.specular * (material.specular * pow(cos_theta, material.shininess));    // cos_theta：顶点（片段）到眼睛连线 与光在顶点处反射后的方向的夹角的余弦值。
    FragColor       = vec4(ambient + diffuse + specular, 1.0);
}

这里有一个明显的缺陷，将物体的材质定义为一个整体，这明显限制了三个光照分量各自设置的灵活性。
这些光照分量本质也是颜色，完全可以通过纹理技术来进行精细化控制。我们可以引入漫反射贴图（Diffuse Map）和镜面反射贴图（Specular Map）来代替，为什么没有环境光？通过漫反射可以间接地控制环境光分量（见光的“材质”）。
大致原理如下：

struct Material
{
    // vec3 ambient;        // 可以通过diffuse间接控制，一般就是一样的。
    sampler2D diffuse;        // 漫反射贴图，GL_TEXTURE0，则为0
    sampler2D specular;        // 镜面反射贴图，GL_TEXTURE1，则为1
    float       shininess;    // 反光度
}
uniform Material material;
in         vec2     texCoord;    // 纹理坐标
void main()
{
    vec3 m_diffuse  = vec3(texture(material.diffuse, texCoord));
    vec3 m_ambient  = m_diffuse;
    vec3 m_specular = vec3(texture(material.specular, texCoord));
    vec3 ambient  = lightColor.ambient     * (m_ambient);
    vec3 diffuse  = lightColor.diffuse     * (m_diffuse  * cos_theta);    // cos_theta：光射向的反向和法线的夹角余弦值    
    vec3 specular = lightColor.specular * (m_specular * pow(cos_theta, material.shininess));    // cos_theta：顶点（片段）到眼睛连线 与光在顶点处反射后的方向的夹角的余弦值。
    FragColor       = vec4(ambient + diffuse + specular, 1.0);
}

其实应该叫“材质”贴图，毕竟是材质的贴图。
还有其他贴图用于增强细节：法线/凹凸贴图（Normal/Bump Map）、反射贴图（Reflect Map）。

五、投光物

将光投射（cast）到物体的光源叫做投光物（Light Caster）。

（一）平行光

• 所有光线方向平行
• 没有光源位置

最常见的太阳光。
光源在很远（无限远）的位置，不论物体和/或者观察者的位置，看起来好像所有的光都来自于同一个方向。
当我们使用一个假设光源处于无限远处的模型时，它就被称为定向光，因为它的所有光线都有着相同的方向，它与光源的位置是没有关系的。

struct DirLight {
    // vec3形式
    vec3 dir;            // 定向光的方向都相同，固定不变。
                        // 光的射线方向。
    // vec3 position;     // 方向固定，不需要位置了。
    // vec4形式
    vec4 dir;            // w = 1.0，则为有位置的光源。
                        // w = 0.0，则为无位置的光，也就是定向光。
    // 下面照旧
    vec3 ambient;
    vec3 diffuse;
    vec3 specular;
};
uniform DirLight sunLight;
void main()
{
    vec3 lightDir = normalize(-sunLight.dir);    // 一般取反，因为计算中一般是需要顶点到光源的方向向量。
    ......
}

（二）点光源

• 有光源位置
• 朝所有方向发光
• 光线随距离衰减

灯泡、火把、打火机。

衰减

随着光线传播距离的增长逐渐削减光的强度通常叫做衰减（Attenuation）。衰减公式如下：

• ：顶点（片段）离光源距离
• 可配置项
  • 常数项：，一般为1.0，保证分母不小于1。
  • 一次项：，光强以线性衰减。
  • 二次项：，光强以二次衰减，在距离较小时，比一次项影响小得多。

函数特性如下：

随距离增大急剧衰减，到一定距离后，衰减速度变得很慢，到100基本上就为0了。

如何配置项

没什么技巧，一般靠经验。来自Ogre3D的Wiki的一些参考值如下：

一般到100的足够了。

程序设计如下：

struct PointLight
{
    vec3 pos;
    vec3 ambient;
    vec3 diffuse;
    vec3 specular;
    float constant;        // 常数项
    float linear;        // 一次项
    float quadratic;     // 二次项
}
uniform PointLight light;
in        vec3        fragPos;        // 顶点在世界坐标中位置
void main()
{
    float distance    = length(light.pos - fragPos);        // 距离光源
    float attenuation = 1.0 / (light.constant +             // 衰减
                               light.linear * distance + 
                               light.quadratic * (distance * distance));
    vec3 ambient  = light.ambient  * attenuation;            // 计算光的衰减
    vec3 diffuse  = light.diffuse  * attenuation;
    vec3 specular = light.specular * attenuation;
    ......
}

（三）聚光

• 有光源位置
• 特定方向，不是所有方向
• 有范围：切光角（Cutoff Angle）

：从片段指向光源的向量
：与的夹角。时，则被照亮。
：切光角，指定了聚光半径。
：聚光的方向。
以手电筒为例，摄像机的位置就是光源位置。

struct SpotLight
{
    vec3  pos;        // 光源位置（手电筒时，就是摄像机位置）
    vec3  dir;        // 聚光方向（手电筒朝向，也就是摄像机朝向）
    float cutoff;    // 切光角的余弦值（注意）
    ......
}
uniform SpotLight flashLight;    // 手电筒
void main()
{
    float cos_theta = normalize(flashLight.dir) * normalize((fragPos - flashLight.pos));
    if(cos_theta > flashLight.cutoff)        // 在聚光半径内，手电筒照到的地方
    {
        // 执行光照计算
    }
    else    // 手电筒照射地方以外
    {
        // 比如环境光
    }
}

效果如下：

光圈边缘太明显，来个渐变模糊。可以在再加一个外圈，进行插值渐变光照计算。

struct SpotLight
{
    vec3  pos;            // 光源位置（手电筒时，就是摄像机位置）
    vec3  dir;            // 聚光方向（手电筒朝向，也就是摄像机朝向）
    float cutOff;        // 切光角的余弦值（注意）
    float outerCutOff;    // 外圈切光角的余弦值。
    ......
}
uniform SpotLight light;    // 手电筒
void main()
{
    float cos_theta = normalize(light.dir) * normalize((fragPos - light.pos));
    float eplison = light.cutOff - light.outerCutOff;
    float intensity  = clamp((cos_theta - light.outerCutOff) / eplison, 0.0, 1.0);
    ...
    // 将不对环境光做出影响，让它总是能有一点光
    diffuse  *= intensity;
    specular *= intensity;
    ...
}

六、多光源

out vec4 FragColor;
void main()
{
  vec3 outputColor;
  outputColor += calcDirLight(...);                // 计算定向光，比如太阳光
  for(int i = 0; i < num_of_point_lights; i++)
      outputColor += calcPointLight(...);        // 计算点光源，多个火把
  outputColor += calcSpotLight(...);            // 计算聚光
  FragColor = vec4(outputColor, 1.0);
}
vec3 calcDirLight(...)
{
}
vec3 calcPointLight(...)
{
}
vec3 calcSpotLight(...)
{
}