example1: 平行光#

平行光是没有位置只有方向的光，场景中所有物体受到的平行光照的方向都是一样的。所以对光源结构体来说，它不再拥有位置属性，取而代之的是方向属性。但是这个方向是从光源到物体的，而计算光照需要的是物体到光源的，所以需要取反再用于计算光照。此外，在设置平行光方向属性时，需要是从光源到物体的光，几乎总是斜向下的（考虑太阳光），所以三个分量都应该是负的。在cpp程序中，需要在渲染循环外部设置光照方向的值。在本例中使用十个不同旋转角度、不同位置的箱子搭建场景。画十个不同的箱子需要for循环十次，每次传入不同的平移分量和旋转分量，还需调用十次glDrawArrays，而调用这行语句需要是绘制箱子的所有东西都准备好了，即通常位于渲染循环的后面位置。此外，由于我们在实现仅有平行光的场景，所以渲染循环中不再需要绘制立方体形状的点光源。 BQACAgUAAyEGAASHRsPbAAEWKoZqP1qfW9hqhbGpeLzKJo5MtQ2MYQACkSMAAk05AVaryHKQFftpWTwE.png

1
//物体的着色器
2
Shader ourShader("src/Shader/vertexShader.txt", "src/Shader/fragmentShader.txt");
3
//光源的着色器
4
//如果共用一个片元着色器，修改物体颜色将会修改光源颜色，这并不是我们想要的
5
Shader lightShader("src/Shader/vertexShader.txt", "src/Shader/lightFragmentShader.txt");
6

7
ourShader.use();
8
//设置物体运行时不需要改变的uniform变量值
9
ourShader.setInt("material.diffuse", 0);
10
ourShader.setInt("material.specular", 1);
11
ourShader.setFloat("material.shininess", 64.0f);
12

13
ourShader.setVec3("light.ambient", glm::vec3(0.2f));
14
ourShader.setVec3("light.diffuse", glm::vec3(0.5f));
15
ourShader.setVec3("light.specular", glm::vec3(1.0f));
16
ourShader.setVec3("light.direction", glm::vec3(-0.2f, -1.0f, -0.3f));
17

18
while (!glfwWindowShouldClose(window)) {
19
    float currentFrame = static_cast<float>(glfwGetTime());
20
    deltaTime = currentFrame - lastFrame;
21
    lastFrame = currentFrame;
22
        processInput(window);
23
        glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
24
        glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
25

26
    //绘制物体
27
    ourShader.use();
28
    glBindVertexArray(VAO);
29
    glm::mat4 model;
30
    ourShader.setMatrix("model", model);
31
    glm::mat4 view;
32
    view = camera.GetCameraView();
33
    ourShader.setMatrix("view", view);
34
    glm::mat4 project;
35
    project = glm::perspective(glm::radians(camera.Zoom), (float)SCR_WIDTH / (float)SCR_HEIGHT, 0.1f, 100.0f);
36
    ourShader.setMatrix("project", project);
37

38
    //传递物体运行时需要更新的uniform变量
39
    ourShader.setVec3("viewPos", camera.Position);
40
    ourShader.setVec3("light.lightPos", lightPos);
41

42
    //绘制贴图
43
    glActiveTexture(GL_TEXTURE0);
44
    glBindTexture(GL_TEXTURE_2D, diffuseMap);//设置绘制当前物体所需的纹理
45
    glActiveTexture(GL_TEXTURE1);
46
    glBindTexture(GL_TEXTURE_2D, specularMap);
47

48
    for (unsigned int i = 0; i < 10; i++) {
49
        model = glm::mat4(1.0);
50
        model = glm::translate(model, cubePositions[i]);
51
        float angle = 20.0f * i;
52
        model = glm::rotate(model, glm::radians(angle), glm::vec3(1.0f, 0.3f, 0.5f));
53
        ourShader.setMatrix("model", model);
54
        glDrawArrays(GL_TRIANGLES, 0, 36);
55
    }
56

57
    glfwSwapBuffers(window);
58
    glfwPollEvents();
59
}

example2: 绘制带有衰减的点光源#

点光源是无方向（向四面八方）、有位置的。但之前的实现没有带上衰减，场景中离光源近或者离光源远的物体受到的点光源光照都是一样的，这不真实。本例中实现点光源衰减。观察光源衰减的公式知，求衰减需要额外定义公式中的三个系数，所以在光源结构体中增加这三个系数并在cpp代码中设置。在光照计算中，把光照衰减乘到光源三分量中。

1
//fragmentShader
2
#version 330 core
3
struct Material{
4
        sampler2D diffuse;
5
        sampler2D specular;
6
        float shininess;
7
};
8
struct Light{
9
        vec3 position;
10
        float constant;
11
        float linear;
12
        float quadratic;
13

14
        vec3 ambient;
15
        vec3 diffuse;
16
        vec3 specular;
17
};
18
in vec3 worldPos;
19
in vec3 normal;
20
in vec2 Texcoords;
21
uniform Material material;
22
uniform Light light;
23
uniform vec3 viewPos;
24
out vec4 FragColor;
25
void main(){
26
        vec3 ambient = light.ambient*texture(material.diffuse,Texcoords).rgb;
27

28
        vec3 worldNormal=normalize(normal);
29
        vec3 worldLightDir=normalize(light.position-worldPos);
30
        float diff=max(dot(worldNormal,worldLightDir),0.0);
31
        vec3 diffuse=diff*texture(material.diffuse,Texcoords).rgb*light.diffuse;
32

33
        vec3 worldViewDir=normalize(viewPos-worldPos);
34
        vec3 reflectDir=reflect(-worldLightDir,worldNormal);
35
        float spec=pow(max(dot(worldViewDir,reflectDir),0.0),material.shininess);
36
        vec3 specular=spec*texture(material.specular,Texcoords).rgb*light.specular;
37

38
        float distance=length(light.position-worldPos);//使用length计算向量的长度
39
        float atten=(1.0f) / (light.constant+light.linear*distance+light.quadratic*distance*distance);
40
        FragColor = vec4((ambient+diffuse+specular)*atten,1.0);
41
}

对于光照衰减公式中的三个系数，常数系数永远为1，线性系数和二次系数随着光源传播距离增大而减小。光线传播距离较大时：后排物体也能被照亮： BQACAgUAAyEGAASHRsPbAAEWKohqP1r-58rOv69fXiWghcpcQFgW5QAClCMAAk05AVZW_zBsWdFTCjwE.png 光线传播距离较小时：几乎整个场景都是黑的： BQACAgUAAyEGAASHRsPbAAEWKopqP1sz7IBT7tG3USMnUgACgYUkbAACliMAAk05AVanNaJIkApykjwE.png

example3: 聚光灯#

聚光灯是有位置有方向的光源。它靠光源位置、光源方向、切光角定义，在计算光照前，我们需要判断一个片元是否处于聚光灯的锥形光照空间内。这是通过计算光源到片元的方向向量与光源方向的夹角，并与切光角比较实现的。但在实现过程中，由于计算夹角需要计算反余弦值，这是一个比较昂贵且耗时的计算，特别是在片元着色器内，所以只停留在计算完余弦值，然后比较余弦值，进而比较角度值。但使用余弦值需要注意，在半球空间内，也就是这两的夹角在[0,90]，余弦值是递减的，所以余弦值的比较结果是角度值比较结果的反转。此外，由于聚光灯的位置是摄像机位置，方向是摄像机看向，而摄像机是可以通过wasd或鼠标移动的，所以需要把设置这两uniform变量值的逻辑写在渲染循环内部。而且我们不再依赖点光源了，那么绘制点光源的代码就可以删了。 BQACAgUAAyEGAASHRsPbAAEWKo5qP1uOtDPCfsVQMQ5Ku2zFlXWVrwACmiMAAk05AVaVkUKz38X1BDwE.png

1
//物体的着色器
2
Shader ourShader("src/Shader/vertexShader.txt", "src/Shader/fragmentShader.txt");
3
//光源的着色器
4
//如果共用一个片元着色器，修改物体颜色将会修改光源颜色，这并不是我们想要的
5
Shader lightShader("src/Shader/vertexShader.txt", "src/Shader/lightFragmentShader.txt");
6

7
ourShader.use();
8
//设置物体运行时不需要改变的uniform变量值
9
ourShader.setInt("material.diffuse", 0);
10
ourShader.setInt("material.specular", 1);
11
ourShader.setFloat("material.shininess", 64.0f);
12

13
ourShader.setVec3("light.ambient", glm::vec3(0.2f));
14
ourShader.setVec3("light.diffuse", glm::vec3(0.8f));
15
ourShader.setVec3("light.specular", glm::vec3(1.0f));
16
ourShader.setFloat("light.constant", 1.0f);
17
ourShader.setFloat("light.linear", 0.09f);
18
ourShader.setFloat("light.quadratic", 0.32f);
19

20
while (!glfwWindowShouldClose(window)) {
21
    float currentFrame = static_cast<float>(glfwGetTime());
22
    deltaTime = currentFrame - lastFrame;
23
    lastFrame = currentFrame;
24
        processInput(window);
25
        glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
26
        glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
27

28
    //绘制物体
29
    ourShader.use();
30
    glBindVertexArray(VAO);
31
    glm::mat4 model;
32
    ourShader.setMatrix("model", model);
33
    glm::mat4 view;
34
    view = camera.GetCameraView();
35
    ourShader.setMatrix("view", view);
36
    glm::mat4 project;
37
    project = glm::perspective(glm::radians(camera.Zoom), (float)SCR_WIDTH / (float)SCR_HEIGHT, 0.1f, 100.0f);
38
    ourShader.setMatrix("project", project);
39

40
    //传递物体运行时需要更新的uniform变量
41
    ourShader.setVec3("viewPos", camera.Position);
42
    ourShader.setVec3("light.position", camera.Position);
43
    ourShader.setVec3("light.direction", camera.Front);
44
    ourShader.setFloat("light.cutOff", glm::cos(glm::radians(12.5f)));//传入着色器的切光角是余弦值而非角度值：因为在着色器中计算的是光照向量和光源到片元的方向向量的点积，返回的是余弦值
45
    //不比较两个角度值是因为求角度值需要反余弦，计算昂贵
46

47
    //绘制贴图
48
    glActiveTexture(GL_TEXTURE0);
49
    glBindTexture(GL_TEXTURE_2D, diffuseMap);//设置绘制当前物体所需的纹理
50
    glActiveTexture(GL_TEXTURE1);
51
    glBindTexture(GL_TEXTURE_2D, specularMap);
52

53
    for (unsigned int i = 0; i < 10; i++) {
54
        model = glm::mat4(1.0);
55
        model = glm::translate(model, cubePositions[i]);
56
        float angle = 20.0f * i;
57
        model = glm::rotate(model, glm::radians(angle), glm::vec3(1.0f, 0.3f, 0.5f));
58
        ourShader.setMatrix("model", model);
59
        glDrawArrays(GL_TRIANGLES, 0, 36);
60
    }
61
    ```
62
    ```glsl
63
    //fragmentShader
64
    #version 330 core
65
struct Material{
66
        sampler2D diffuse;
67
        sampler2D specular;
68
        float shininess;
69
};
70
struct Light{
71
        vec3 position;
72
        vec3 direction;
73
        float cutOff;
74
        float constant;
75
        float linear;
76
        float quadratic;
77

78
        vec3 ambient;
79
        vec3 diffuse;
80
        vec3 specular;
81
};
82
in vec3 worldPos;
83
in vec3 normal;
84
in vec2 Texcoords;
85
uniform Material material;
86
uniform Light light;
87
uniform vec3 viewPos;
88
out vec4 FragColor;
89
void main(){
90
        vec3 ambient = light.ambient*texture(material.diffuse,Texcoords).rgb;
91
        vec3 worldNormal=normalize(normal);
92
        vec3 worldLightDir=normalize(light.position-worldPos);
93

94
        float theta=dot(worldLightDir,normalize(-light.direction));//worldLightDir是从片元到光源，light.direction是从光源出发的方向向量，二者计算点积时应该统一方向
95
        if(theta > light.cutOff){
96
                //执行正常光照计算
97
                float diff=max(dot(worldNormal,worldLightDir),0.0);
98
                vec3 diffuse=diff*texture(material.diffuse,Texcoords).rgb*light.diffuse;
99

100
                vec3 worldViewDir=normalize(viewPos-worldPos);
101
                vec3 reflectDir=reflect(-worldLightDir,worldNormal);
102
                float spec=pow(max(dot(worldViewDir,reflectDir),0.0),material.shininess);
103
                vec3 specular=spec*texture(material.specular,Texcoords).rgb*light.specular;
104

105
                float distance = length(light.position-worldPos);
106
                float atten = 1.0 / (light.constant + light.linear*distance + light.quadratic*distance*distance);
107
                FragColor = vec4(ambient+(diffuse+specular)*atten,1.0);
108
        }else{
109
                //只受环境光影响，不至于过于黑
110
                FragColor = vec4(ambient,1.0);
111
        }
112
}

看起来很奇怪，因为聚光灯边缘有一圈硬边。当一个片段遇到聚光圆锥的边缘时，它会完全变暗，没有一点平滑的过渡。一个真实的聚光将会在边缘处逐渐减少亮度。

example4：实现聚光灯的半径方向衰减#

在上述实验渲染效果中，我们发现聚光灯边缘部分过渡过于强硬，导致看起来不真实。实际上，边缘应该有一个由亮到暗的过渡效果。因此为聚光灯增加外锥体切光角的定义，光源到片元的方向向量和光源的方向向量的夹角在外锥体切光角以外，则片元完全不在聚光灯光照空间内，仅有环境光；在内锥体切光角以内，则片元完全在聚光灯光照空间内，则有完整光照计算；在二者之间，根据角度差值插值光照强度，越靠近外锥体切光角则越暗，反之，越亮。实现过程中，因为光照强度是0－1，任何大于1的强度都会钳制到1，任何小于0的强度都会钳制到0，所以可以借助clamp函数实现。此外，依旧使用余弦值代替角度。 BQACAgUAAyEGAASHRsPbAAEWKpFqP1vtoHAf60vnwIJKcxncRK4fqAACnSMAAk05AVbcyMae7MDmoDwE.png

1
//fragmentShader
2
#version 330 core
3
struct Material{
4
        sampler2D diffuse;
5
        sampler2D specular;
6
        float shininess;
7
};
8
struct Light{
9
        vec3 position;
10
        vec3 direction;
11
        float cutOff;
12
        float outerCutOff;
13
        float constant;
14
        float linear;
15
        float quadratic;
16

17
        vec3 ambient;
18
        vec3 diffuse;
19
        vec3 specular;
20
};
21
in vec3 worldPos;
22
in vec3 normal;
23
in vec2 Texcoords;
24
uniform Material material;
25
uniform Light light;
26
uniform vec3 viewPos;
27
out vec4 FragColor;
28
void main(){
29
        vec3 ambient = light.ambient*texture(material.diffuse,Texcoords).rgb;
30
        vec3 worldNormal=normalize(normal);
31
        vec3 worldLightDir=normalize(light.position-worldPos);
32

33
        float theta=dot(worldLightDir,normalize(-light.direction));//worldLightDir是从片元到光源，light.direction是从光源出发的方向向量，二者计算点积时应该统一方向
34
        float epsilon=light.cutOff-light.outerCutOff;
35
        float intensity=clamp((theta-light.outerCutOff)/epsilon,0.0,1.0);
36
        float diff=max(dot(worldNormal,worldLightDir),0.0);
37
        vec3 diffuse=diff*texture(material.diffuse,Texcoords).rgb*light.diffuse;
38

39
        vec3 worldViewDir=normalize(viewPos-worldPos);
40
        vec3 reflectDir=reflect(-worldLightDir,worldNormal);
41
        float spec=pow(max(dot(worldViewDir,reflectDir),0.0),material.shininess);
42
        vec3 specular=spec*texture(material.specular,Texcoords).rgb*light.specular;
43

44
        float distance = length(light.position-worldPos);
45
        float atten = 1.0 / (light.constant + light.linear*distance + light.quadratic*distance*distance);
46
        FragColor = vec4((ambient+(diffuse+specular)*intensity)*atten,1.0);
47
}

example1: 平行光#

example2: 绘制带有衰减的点光源#

example3: 聚光灯#

example4： 实现聚光灯的半径方向衰减#

example4：实现聚光灯的半径方向衰减#