mirror of
https://github.com/LearnOpenGL-CN/LearnOpenGL-CN.git
synced 2025-08-23 04:35:28 +08:00
New theme
This commit is contained in:
Meow J
169
docs/02 Lighting/01 Colors.md
Normal file
169
docs/02 Lighting/01 Colors.md
Normal file
@@ -0,0 +1,169 @@
|
||||
# 颜色
|
||||
|
||||
原文 | [Colors](http://learnopengl.com/#!Lighting/Colors)
|
||||
---|---
|
||||
作者 | JoeyDeVries
|
||||
翻译 | [Geequlim](http://geequlim.com/)
|
||||
校对 | [Geequlim](http://geequlim.com/)
|
||||
|
||||
在前面的教程中我们已经简要提到过该如何在OpenGL中使用颜色(Color)，但是我们至今所接触到的都是很浅层的知识。本节我们将会更广泛地讨论颜色，并且还会为接下来的光照(Lighting)教程创建一个场景。
|
||||
|
||||
|
||||
现实世界中有无数种颜色，每一个物体都有它们自己的颜色。我们要做的工作是使用(有限的)数字来模拟真实世界中(无限)的颜色，因此并不是所有的现实世界中的颜色都可以用数字来表示。然而我们依然可以用数字来代表许多种颜色，并且你甚至可能根本感觉不到他们与真实颜色之间的差异。颜色可以数字化的由红色(Red)、绿色(Green)和蓝色(Blue)三个分量组成，它们通常被缩写为RGB。这三个不同的分量组合在一起几乎可以表示存在的任何一种颜色。例如,要获取一个**珊瑚红(Coral)**颜色我们可以这样定义一个颜色向量:
|
||||
|
||||
```c++
|
||||
glm::vec3 coral(1.0f, 0.5f, 0.31f);
|
||||
```
|
||||
|
||||
我们在现实生活中看到某一物体的颜色并不是这个物体的真实颜色，而是它所反射(Reflected)的颜色。换句话说，那些不能被物体吸收(Absorb)的颜色(被反射的颜色)就是我们能够感知到的物体的颜色。例如,太阳光被认为是由许多不同的颜色组合成的白色光(如下图所示)。如果我们将白光照在一个蓝色的玩具上，这个蓝色的玩具会吸收白光中除了蓝色以外的所有颜色，不被吸收的蓝色光被反射到我们的眼中，使我们看到了一个蓝色的玩具。下图显示的是一个珊瑚红的玩具，它以不同强度的方式反射了几种不同的颜色。
|
||||
|
||||
|
||||
|
||||
正如你所见，白色的阳光是一种所有可见颜色的集合，上面的物体吸收了其中的大部分颜色，它仅反射了那些代表这个物体颜色的部分，这些被反射颜色的组合就是我们感知到的颜色(此例中为珊瑚红)。
|
||||
|
||||
这些颜色反射的规律被直接地运用在图形领域。我们在OpenGL中创建一个光源时都会为它定义一个颜色。在前面的段落中所提到光源的颜色都是白色的，那我们就继续来创建一个白色的光源吧。当我们把光源的颜色与物体的颜色相乘，所得到的就是这个物体所反射该光源的颜色(也就是我们感知到的颜色)。让我们再次审视我们的玩具(这一次它还是珊瑚红)并看看如何计算出他的反射颜色。我们通过检索结果颜色的每一个分量来看一下光源色和物体颜色的反射运算：
|
||||
|
||||
```c++
|
||||
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);
|
||||
```
|
||||
|
||||
我们可以看到玩具在进行反射时**吸收**了白色光源颜色中的大部分颜色，但它对红、绿、蓝三个分量都有一定的反射，反射量是由物体本身的颜色所决定的。这也代表着现实中的光线原理。由此，我们可以定义物体的颜色为**这个物体从一个光源反射各个颜色分量的多少**。现在，如果我们使用一束绿色的光又会发生什么呢？
|
||||
|
||||
```c++
|
||||
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);
|
||||
```
|
||||
|
||||
可以看到，我们的玩具没有红色和蓝色的光让它来吸收或反射，这个玩具也吸收了光线中一半的绿色，当然它仍然反射了光的一半绿色。它现在看上去是深绿色(Dark-greenish)的。我们可以看到，如果我们用一束绿色的光线照来照射玩具，那么只有绿色能被反射和感知到，没有红色和蓝色能被反射和感知。这样做的结果是，一个珊瑚红的玩具突然变成了深绿色物体。现在我们来看另一个例子，使用深橄榄绿色(Dark olive-green)的光线：
|
||||
|
||||
```c++
|
||||
glm::vec3 lightColor(0.33f, 0.42f, 0.18f);
|
||||
glm::vec3 toyColor(1.0f, 0.5f, 0.31f);
|
||||
glm::vec3 result = lightColor * toyColor; // = (0.33f, 0.21f, 0.06f);
|
||||
```
|
||||
|
||||
如你所见，我们可以通过物体对不同颜色光的反射来的得到意想不到的不到的颜色，从此创作颜色已经变得非常简单。
|
||||
|
||||
目前有了这些颜色相关的理论已经足够了，接下来我们将创建一个场景用来做更多的实验。
|
||||
|
||||
## 创建一个光照场景
|
||||
|
||||
在接下来的教程中，我们将通过模拟真实世界中广泛存在的光照和颜色现象来创建有趣的视觉效果。现在我们将在场景中创建一个看得到的物体来代表光源，并且在场景中至少添加一个物体来模拟光照。
|
||||
|
||||
首先我们需要一个物体来投光(Cast the light)，我们将无耻地使用前面教程中的立方体箱子。我们还需要一个物体来代表光源，它代表光源在这个3D空间中的确切位置。简单起见，我们依然使用一个立方体来代表光源(我们已拥有立方体的[顶点数据](http://www.learnopengl.com/code_viewer.php?code=getting-started/cube_vertices)是吧？)。
|
||||
|
||||
当然，填一个顶点缓冲对象(VBO)，设定一下顶点属性指针和其他一些乱七八糟的东西现在对你来说应该很容易了，所以我们就不再赘述那些步骤了。如果你仍然觉得这很困难，我建议你复习[之前的教程](http://learnopengl-cn.readthedocs.org/zh/latest/01%20Getting%20started/04%20Hello%20Triangle/)，并且在继续学习之前先把练习过一遍。
|
||||
|
||||
所以，我们首先需要一个顶点着色器来绘制箱子。与上一个教程的顶点着色器相比，容器的顶点位置保持不变(虽然这一次我们不需要纹理坐标)，因此顶点着色器中没有新的代码。我们将会使用上一篇教程顶点着色器的精简版：
|
||||
|
||||
```c++
|
||||
#version 330 core
|
||||
layout (location = 0) in vec3 position;
|
||||
|
||||
uniform mat4 model;
|
||||
uniform mat4 view;
|
||||
uniform mat4 projection;
|
||||
|
||||
void main()
|
||||
{
|
||||
gl_Position = projection * view * model * vec4(position, 1.0f);
|
||||
}
|
||||
```
|
||||
|
||||
请确认更新你的顶点数据和属性对应的指针与新的顶点着色器一致(当然你可以继续保留纹理数据并保持属性对应的指针有效。在这一节中我们不使用纹理，但如果你想要一个全新的开始那也不是什么坏主意)。
|
||||
|
||||
因为我们还要创建一个表示灯(光源)的立方体，所以我们还要为这个灯创建一个特殊的VAO。当然我们也可以让这个灯和其他物体使用同一个VAO然后对他的`model`(模型)矩阵做一些变换，然而接下来的教程中我们会频繁地对顶点数据做一些改变并且需要改变属性对应指针设置，我们并不想因此影响到灯(我们只在乎灯的位置)，因此我们有必要为灯创建一个新的VAO。
|
||||
|
||||
```c++
|
||||
GLuint lightVAO;
|
||||
glGenVertexArrays(1, &lightVAO);
|
||||
glBindVertexArray(lightVAO);
|
||||
// 只需要绑定VBO不用再次设置VBO的数据，因为容器(物体)的VBO数据中已经包含了正确的立方体顶点数据
|
||||
glBindBuffer(GL_ARRAY_BUFFER, VBO);
|
||||
// 设置灯立方体的顶点属性指针(仅设置灯的顶点数据)
|
||||
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(GLfloat), (GLvoid*)0);
|
||||
glEnableVertexAttribArray(0);
|
||||
glBindVertexArray(0);
|
||||
```
|
||||
|
||||
这段代码对你来说应该非常直观。既然我们已经创建了表示灯和被照物体的立方体，我们只需要再定义一个东西就行了了，那就是片段着色器
|
||||
|
||||
```c++
|
||||
#version 330 core
|
||||
out vec4 color;
|
||||
|
||||
uniform vec3 objectColor;
|
||||
uniform vec3 lightColor;
|
||||
|
||||
void main()
|
||||
{
|
||||
color = vec4(lightColor * objectColor, 1.0f);
|
||||
}
|
||||
```
|
||||
|
||||
这个片段着色器接受两个分别表示物体颜色和光源颜色的uniform变量。正如本篇教程一开始所讨论的一样，我们将光源的颜色与物体(能反射)的颜色相乘。这个着色器应该很容易理解。接下来让我们把物体的颜色设置为上一节中所提到的珊瑚红并把光源设置为白色：
|
||||
|
||||
```c++
|
||||
// 在此之前不要忘记首先'使用'对应的着色器程序(来设定uniform)
|
||||
GLint objectColorLoc = glGetUniformLocation(lightingShader.Program, "objectColor");
|
||||
GLint lightColorLoc = glGetUniformLocation(lightingShader.Program, "lightColor");
|
||||
glUniform3f(objectColorLoc, 1.0f, 0.5f, 0.31f);// 我们所熟悉的珊瑚红
|
||||
glUniform3f(lightColorLoc, 1.0f, 1.0f, 1.0f); // 依旧把光源设置为白色
|
||||
```
|
||||
|
||||
要注意的是，当我们修改顶点或者片段着色器后，灯的位置或颜色也会随之改变，这并不是我们想要的效果。我们不希望灯对象的颜色在接下来的教程中因光照计算的结果而受到影响，而希望它能够独立。希望表示灯不受其他光照的影响而一直保持明亮(这样它才更像是一个真实的光源)。
|
||||
|
||||
为了实现这个目的，我们需要为灯创建另外的一套着色器程序，从而能保证它能够在其他光照着色器变化的时候保持不变。顶点着色器和我们当前的顶点着色器是一样的，所以你可以直接把灯的顶点着色器复制过来。片段着色器保证了灯的颜色一直是亮的，我们通过给灯定义一个常量的白色来实现：
|
||||
|
||||
```c++
|
||||
#version 330 core
|
||||
out vec4 color;
|
||||
|
||||
void main()
|
||||
{
|
||||
color = vec4(1.0f); //设置四维向量的所有元素为 1.0f
|
||||
}
|
||||
```
|
||||
|
||||
当我们想要绘制我们的物体的时候，我们需要使用刚刚定义的光照着色器绘制箱子(或者可能是其它的一些物体)，让我们想要绘制灯的时候，我们会使用灯的着色器。在之后的教程里我们会逐步升级这个光照着色器从而能够缓慢的实现更真实的效果。
|
||||
|
||||
使用这个灯立方体的主要目的是为了让我们知道光源在场景中的具体位置。我们通常在场景中定义一个光源的位置，但这只是一个位置，它并没有视觉意义。为了显示真正的灯，我们将表示光源的灯立方体绘制在与光源同样的位置。我们将使用我们为它新建的片段着色器让它保持它一直处于白色状态，不受场景中的光照影响。
|
||||
|
||||
我们声明一个全局`vec3`变量来表示光源在场景的世界空间坐标中的位置：
|
||||
|
||||
```c++
|
||||
glm::vec3 lightPos(1.2f, 1.0f, 2.0f);
|
||||
```
|
||||
|
||||
然后我们把灯平移到这儿，当然我们需要对它进行缩放，让它不那么明显：
|
||||
|
||||
```c++
|
||||
model = glm::mat4();
|
||||
model = glm::translate(model, lightPos);
|
||||
model = glm::scale(model, glm::vec3(0.2f));
|
||||
```
|
||||
|
||||
绘制灯立方体的代码应该与下面的类似：
|
||||
|
||||
```c++
|
||||
lampShader.Use();
|
||||
// 设置模型、视图和投影矩阵uniform
|
||||
...
|
||||
// 绘制灯立方体对象
|
||||
glBindVertexArray(lightVAO);
|
||||
glDrawArrays(GL_TRIANGLES, 0, 36);
|
||||
glBindVertexArray(0);
|
||||
```
|
||||
|
||||
请把上述的所有代码片段放在你程序中合适的位置，这样我们就能有一个干净的光照实验场地了。如果一切顺利，运行效果将会如下图所示：
|
||||
|
||||
|
||||
|
||||
没什么好看的是吗？但我保证在接下来的教程中它会给你有趣的视觉效果。
|
||||
|
||||
如果你在把上述代码片段放到一起编译遇到困难，可以去认真地看看我的[源代码](http://learnopengl.com/code_viewer.php?code=lighting/colors_scene)。你好最自己实现一遍这些操作。
|
||||
|
||||
现在我们有了一些关于颜色的知识，并且创建了一个基本的场景能够绘制一些漂亮的光线。你现在可以阅读[下一个教程](http://learnopengl-cn.readthedocs.org/zh/latest/02%20Lighting/02%20Basic%20Lighting/)，真正的魔法即将开始！
|
||||
284
docs/02 Lighting/02 Basic Lighting.md
Normal file
284
docs/02 Lighting/02 Basic Lighting.md
Normal file
@@ -0,0 +1,284 @@
|
||||
# 光照基础
|
||||
|
||||
原文 | [Basic Lighting](http://learnopengl.com/#!Lighting/Basic-Lighting)
|
||||
---|---
|
||||
作者 | JoeyDeVries
|
||||
翻译 | [Django](http://bullteacher.com/)
|
||||
校对 | Geequlim, [BLumia](https://github.com/blumia/)
|
||||
|
||||
现实世界的光照是极其复杂的，而且会受到诸多因素的影响，这是以目前我们所拥有的处理能力无法模拟的。因此OpenGL的光照仅仅使用了简化的模型并基于对现实的估计来进行模拟，这样处理起来会更容易一些，而且看起来也差不多一样。这些光照模型都是基于我们对光的物理特性的理解。其中一个模型被称为冯氏光照模型(Phong Lighting Model)。冯氏光照模型的主要结构由3个元素组成：环境(Ambient)、漫反射(Diffuse)和镜面(Specular)光照。这些光照元素看起来像下面这样：
|
||||
|
||||
|
||||
|
||||
- 环境光照(Ambient Lighting)：即使在黑暗的情况下，世界上也仍然有一些光亮(月亮、一个来自远处的光)，所以物体永远不会是完全黑暗的。我们使用环境光照来模拟这种情况，也就是无论如何永远都给物体一些颜色。
|
||||
- 漫反射光照(Diffuse Lighting)：模拟一个发光物对物体的方向性影响(Directional Impact)。它是冯氏光照模型最显著的组成部分。面向光源的一面比其他面会更亮。
|
||||
- 镜面光照(Specular Lighting)：模拟有光泽物体上面出现的亮点。镜面光照的颜色，相比于物体的颜色更倾向于光的颜色。
|
||||
|
||||
为了创建有趣的视觉场景，我们希望模拟至少这三种光照元素。我们将以最简单的一个开始：**环境光照**。
|
||||
|
||||
## 环境光照(Ambient Lighting)
|
||||
|
||||
光通常都不是来自于同一光源，而是来自散落于我们周围的很多光源，即使它们可能并不是那么显而易见。光的一个属性是，它可以向很多方向发散和反弹，所以光最后到达的地点可能并不是它所临近的直射方向；光能够像这样**反射(Reflect)**到其他表面，一个物体的光照可能受到来自一个非直射的光源影响。考虑到这种情况的算法叫做**全局照明(Global Illumination)**算法，但是这种算法既开销高昂又极其复杂。
|
||||
|
||||
因为我们不是复杂和昂贵算法的死忠粉丝，所以我们将会使用一种简化的全局照明模型，叫做环境光照。如你在前面章节所见，我们使用一个(数值)很小的常量(光)颜色添加进物体**片段**(Fragment，指当前讨论的光线在物体上的照射点)的最终颜色里，这看起来就像即使没有直射光源也始终存在着一些发散的光。
|
||||
|
||||
把环境光添加到场景里非常简单。我们用光的颜色乘以一个(数值)很小常量环境因子，再乘以物体的颜色，然后使用它作为片段的颜色：
|
||||
|
||||
```c++
|
||||
void main()
|
||||
{
|
||||
float ambientStrength = 0.1f;
|
||||
vec3 ambient = ambientStrength * lightColor;
|
||||
vec3 result = ambient * objectColor;
|
||||
color = vec4(result, 1.0f);
|
||||
}
|
||||
```
|
||||
|
||||
如果你现在运行你的程序，你会注意到冯氏光照的第一个阶段已经应用到你的物体上了。这个物体非常暗，但不是完全的黑暗，因为我们应用了环境光照(注意发光立方体没被环境光照影响是因为我们对它使用了另一个着色器)。它看起来应该像这样：
|
||||
|
||||
|
||||
|
||||
## 漫反射光照(Diffuse Lighting)
|
||||
|
||||
环境光本身不提供最明显的光照效果，但是漫反射光照会对物体产生显著的视觉影响。漫反射光使物体上与光线排布越近的片段越能从光源处获得更多的亮度。为了更好的理解漫反射光照，请看下图：
|
||||
|
||||
|
||||
|
||||
图左上方有一个光源，它所发出的光线落在物体的一个片段上。我们需要测量这个光线与它所接触片段之间的角度。如果光线垂直于物体表面，这束光对物体的影响会最大化(译注：更亮)。为了测量光线和片段的角度，我们使用一个叫做法向量(Normal Vector)的东西，它是垂直于片段表面的一种向量(这里以黄色箭头表示)，我们在后面再讲这个东西。两个向量之间的角度就能够根据点乘计算出来。
|
||||
|
||||
你可能记得在[变换](http://learnopengl-cn.readthedocs.org/zh/latest/01%20Getting%20started/07%20Transformations/)那一节教程里，我们知道两个单位向量的角度越小，它们点乘的结果越倾向于1。当两个向量的角度是90度的时候，点乘会变为0。这同样适用于θ，θ越大，光对片段颜色的影响越小。
|
||||
|
||||
!!! Important
|
||||
|
||||
注意，我们使用的是单位向量(Unit Vector，长度是1的向量)取得两个向量夹角的余弦值，所以我们需要确保所有的向量都被标准化，否则点乘返回的值就不仅仅是余弦值了(如果你不明白，可以复习[变换](http://learnopengl-cn.readthedocs.org/zh/latest/01%20Getting%20started/07%20Transformations/)那一节的点乘部分)。
|
||||
|
||||
点乘返回一个标量，我们可以用它计算光线对片段颜色的影响，基于不同片段所朝向光源的方向的不同，这些片段被照亮的情况也不同。
|
||||
|
||||
所以，我们需要些什么来计算漫反射光照？
|
||||
|
||||
- 法向量：一个垂直于顶点表面的向量。
|
||||
- 定向的光线：作为光的位置和片段的位置之间的向量差的方向向量。为了计算这个光线，我们需要光的位置向量和片段的位置向量。
|
||||
|
||||
### 法向量(Normal Vector)
|
||||
|
||||
法向量是垂直于顶点表面的(单位)向量。由于顶点自身并没有表面(它只是空间中一个独立的点)，我们利用顶点周围的顶点计算出这个顶点的表面。我们能够使用叉乘这个技巧为立方体所有的顶点计算出法线，但是由于3D立方体不是一个复杂的形状，所以我们可以简单的把法线数据手工添加到顶点数据中。更新的顶点数据数组可以在[这里](http://learnopengl.com/code_viewer.php?code=lighting/basic_lighting_vertex_data)找到。试着去想象一下，这些法向量真的是垂直于立方体的各个面的表面的(一个立方体由6个面组成)。
|
||||
|
||||
因为我们向顶点数组添加了额外的数据，所以我们应该更新光照的顶点着色器：
|
||||
|
||||
```c++
|
||||
#version 330 core
|
||||
layout (location = 0) in vec3 position;
|
||||
layout (location = 1) in vec3 normal;
|
||||
...
|
||||
```
|
||||
|
||||
现在我们已经向每个顶点添加了一个法向量，已经更新了顶点着色器，我们还要更新顶点属性指针(Vertex Attibute Pointer)。注意，发光物使用同样的顶点数组作为它的顶点数据，然而发光物的着色器没有使用新添加的法向量。我们不会更新发光物的着色器或者属性配置，但是我们必须至少修改一下顶点属性指针来适应新的顶点数组的大小：
|
||||
|
||||
```c++
|
||||
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(GLfloat), (GLvoid * )0);
|
||||
glEnableVertexAttribArray(0);
|
||||
```
|
||||
|
||||
我们只想使用每个顶点的前三个浮点数，并且我们忽略后三个浮点数，所以我们只需要把**步长**参数改成`GLfloat`尺寸的6倍就行了。
|
||||
|
||||
!!! Important
|
||||
|
||||
发光物着色器顶点数据的不完全使用看起来有点低效，但是这些顶点数据已经从立方体对象载入到GPU的内存里了，所以GPU内存不是必须再储存新数据。相对于重新给发光物分配VBO，实际上却是更高效了。
|
||||
|
||||
所有光照的计算需要在片段着色器里进行，所以我们需要把法向量由顶点着色器传递到片段着色器。我们这么做：
|
||||
|
||||
```c++
|
||||
out vec3 Normal;
|
||||
void main()
|
||||
{
|
||||
gl_Position = projection * view * model * vec4(position, 1.0f);
|
||||
Normal = normal;
|
||||
}
|
||||
```
|
||||
|
||||
剩下要做的事情是，在片段着色器中定义相应的输入值：
|
||||
|
||||
```c++
|
||||
in vec3 Normal;
|
||||
```
|
||||
|
||||
### 计算漫反射光照
|
||||
|
||||
每个顶点现在都有了法向量，但是我们仍然需要光的位置向量和片段的位置向量。由于光的位置是一个静态变量，我们可以简单的在片段着色器中把它声明为uniform：
|
||||
|
||||
```c++
|
||||
uniform vec3 lightPos;
|
||||
```
|
||||
|
||||
然后再游戏循环中(外面也可以，因为它不会变)更新uniform。我们使用在前面教程中声明的`lightPos`向量作为光源位置：
|
||||
|
||||
```c++
|
||||
GLint lightPosLoc = glGetUniformLocation(lightingShader.Program, "lightPos");
|
||||
glUniform3f(lightPosLoc, lightPos.x, lightPos.y, lightPos.z);
|
||||
```
|
||||
|
||||
最后，我们还需要片段的位置(Position)。我们会在世界空间中进行所有的光照计算，因此我们需要一个在世界空间中的顶点位置。我们可以通过把顶点位置属性乘以模型矩阵(Model Matrix,只用模型矩阵不需要用观察和投影矩阵)来把它变换到世界空间坐标。这个在顶点着色器中很容易完成，所以让我们就声明一个输出(out)变量，然后计算它的世界空间坐标：
|
||||
|
||||
```c++
|
||||
out vec3 FragPos;
|
||||
out vec3 Normal;
|
||||
|
||||
void main()
|
||||
{
|
||||
gl_Position = projection * view * model * vec4(position, 1.0f);
|
||||
FragPos = vec3(model * vec4(position, 1.0f));
|
||||
Normal = normal;
|
||||
}
|
||||
```
|
||||
|
||||
最后，在片段着色器中添加相应的输入变量。
|
||||
|
||||
```c++
|
||||
in vec3 FragPos;
|
||||
```
|
||||
|
||||
现在，所有需要的变量都设置好了，我们可以在片段着色器中开始光照的计算了。
|
||||
|
||||
我们需要做的第一件事是计算光源和片段位置之间的方向向量。前面提到，光的方向向量是光的位置向量与片段的位置向量之间的向量差。你可能记得，在变换教程中，我们简单的通过两个向量相减的方式计算向量差。我们同样希望确保所有相关向量最后都转换为单位向量，所以我们把法线和方向向量这个结果都进行标准化：
|
||||
|
||||
```c++
|
||||
vec3 norm = normalize(Normal);
|
||||
vec3 lightDir = normalize(lightPos - FragPos);
|
||||
```
|
||||
|
||||
!!! Important
|
||||
|
||||
当计算光照时我们通常不关心一个向量的“量”或它的位置，我们只关心它们的方向。所有的计算都使用单位向量完成，因为这会简化了大多数计算(比如点乘)。所以当进行光照计算时，确保你总是对相关向量进行标准化，这样它们才会保证自身为单位向量。忘记对向量进行标准化是一个十分常见的错误。
|
||||
|
||||
下一步，我们对`norm`和`lightDir`向量进行点乘，来计算光对当前片段的实际的散射影响。结果值再乘以光的颜色，得到散射因子。两个向量之间的角度越大，散射因子就会越小：
|
||||
|
||||
```c++
|
||||
float diff = max(dot(norm, lightDir), 0.0);
|
||||
vec3 diffuse = diff * lightColor;
|
||||
```
|
||||
|
||||
如果两个向量之间的角度大于90度，点乘的结果就会变成负数，这样会导致散射因子变为负数。为此，我们使用`max`函数返回两个参数之间较大的参数，从而保证散射因子不会变成负数。负数的颜色是没有实际定义的，所以最好避免它，除非你是那种古怪的艺术家。
|
||||
|
||||
既然我们有了一个环境光照颜色和一个散射光颜色，我们把它们相加，然后把结果乘以物体的颜色，来获得片段最后的输出颜色。
|
||||
|
||||
```c++
|
||||
vec3 result = (ambient + diffuse) * objectColor;
|
||||
color = vec4(result, 1.0f);
|
||||
```
|
||||
|
||||
如果你的应用(和着色器)编译成功了，你可能看到类似的输出：
|
||||
|
||||
|
||||
|
||||
你可以看到使用了散射光照，立方体看起来就真的像个立方体了。尝试在你的脑中想象，通过移动正方体，法向量和光的方向向量之间的夹角增大，片段变得更暗。
|
||||
|
||||
如果你遇到很多困难，可以对比[完整的源代码](http://learnopengl.com/code_viewer.php?code=lighting/basic_lighting_diffuse)以及[片段着色器](http://learnopengl.com/code_viewer.php?code=lighting/basic_lighting_diffuse&type=fragment)代码。
|
||||
|
||||
### 最后一件事
|
||||
|
||||
现在我们已经把法向量从顶点着色器传到了片段着色器。可是，目前片段着色器里，我们都是在世界空间坐标中进行计算的，所以，我们不是应该把法向量转换为世界空间坐标吗？基本正确，但是这不是简单地把它乘以一个模型矩阵就能搞定的。
|
||||
|
||||
首先，法向量只是一个方向向量，不能表达空间中的特定位置。同时，法向量没有齐次坐标(顶点位置中的w分量)。这意味着，平移不应该影响到法向量。因此，如果我们打算把法向量乘以一个模型矩阵，我们就要把模型矩阵左上角的3×3矩阵从模型矩阵中移除(译注：所谓移除就是设置为0)，它是模型矩阵的平移部分(注意，我们也可以把法向量的w分量设置为0，再乘以4×4矩阵；同样可以移除平移)。对于法向量，我们只能对它应用缩放(Scale)和旋转(Rotation)变换。
|
||||
|
||||
其次，如果模型矩阵执行了不等比缩放，法向量就不再垂直于表面了，顶点就会以这种方式被改变了。因此，我们不能用这样的模型矩阵去乘以法向量。下面的图展示了应用了不等比缩放的矩阵对法向量的影响：
|
||||
|
||||
|
||||
|
||||
无论何时当我们提交一个不等比缩放(注意：等比缩放不会破坏法线，因为法线的方向没被改变，而法线的长度很容易通过标准化进行修复)，法向量就不会再垂直于它们的表面了，这样光照会被扭曲。
|
||||
|
||||
修复这个行为的诀窍是使用另一个为法向量专门定制的模型矩阵。这个矩阵称之为正规矩阵(Normal Matrix)，它是进行了一点线性代数操作移除了对法向量的错误缩放效果。如果你想知道这个矩阵是如何计算出来的，我建议看[这个文章](http://www.lighthouse3d.com/tutorials/glsl-tutorial/the-normal-matrix/)。
|
||||
|
||||
正规矩阵被定义为“模型矩阵左上角的逆矩阵的转置矩阵”。真拗口，如果你不明白这是什么意思，别担心；我们还没有讨论逆矩阵(Inverse Matrix)和转置矩阵(Transpose Matrix)。注意，定义正规矩阵的大多资源就像应用到模型观察矩阵(Model-view Matrix)上的操作一样，但是由于我们只在世界空间工作(而不是在观察空间)，我们只使用模型矩阵。
|
||||
|
||||
在顶点着色器中，我们可以使用`inverse`和`transpose`函数自己生成正规矩阵，`inverse`和`transpose`函数对所有类型矩阵都有效。注意，我们也要把这个被处理过的矩阵强制转换为3×3矩阵，这是为了保证它失去了平移属性，之后它才能乘以法向量。
|
||||
|
||||
```c++
|
||||
Normal = mat3(transpose(inverse(model))) * normal;
|
||||
```
|
||||
|
||||
在环境光照部分，光照表现没问题，这是因为我们没有对物体本身执行任何缩放操作，因而不是非得使用正规矩阵不可，用模型矩阵乘以法线也没错。可是，如果你进行了不等比缩放，使用正规矩阵去乘以法向量就是必不可少的了。
|
||||
|
||||
!!! Attention
|
||||
|
||||
对于着色器来说，逆矩阵也是一种开销比较大的操作，因此，无论何时，在着色器中只要可能就应该尽量避免逆操作，因为它们必须为你场景中的每个顶点进行这样的处理。以学习的目的这样做很好，但是对于一个对于效率有要求的应用来说，在绘制之前，你最好用CPU计算出正规矩阵，然后通过uniform把值传递给着色器(和模型矩阵一样)。
|
||||
|
||||
## 镜面光照(Specular Lighting)
|
||||
|
||||
如果你还没被这些光照计算搞得精疲力尽，我们就再把镜面高光(Specular Highlight)加进来，这样冯氏光照才算完整。
|
||||
|
||||
和环境光照一样，镜面光照同样依据光的方向向量和物体的法向量，但是这次它也会依据观察方向，例如玩家是从什么方向看着这个片段的。镜面光照根据光的反射特性。如果我们想象物体表面像一面镜子一样，那么，无论我们从哪里去看那个表面所反射的光，镜面光照都会达到最大化。你可以从下面的图片看到效果：
|
||||
|
||||
|
||||
|
||||
我们通过反射法向量周围光的方向计算反射向量。然后我们计算反射向量和视线方向的角度，如果之间的角度越小，那么镜面光的作用就会越大。它的作用效果就是，当我们去看光被物体所反射的那个方向的时候，我们会看到一个高光。
|
||||
|
||||
观察向量是镜面光照的一个附加变量，我们可以使用观察者世界空间位置(Viewer’s World Space Position)和片段的位置来计算。之后，我们计算镜面光亮度，用它乘以光的颜色，在用它加上作为之前计算的光照颜色。
|
||||
|
||||
!!! Important
|
||||
|
||||
我们选择在世界空间(World Space)进行光照计算，但是大多数人趋向于在观察空间(View Space)进行光照计算。在观察空间计算的好处是，观察者的位置总是(0, 0, 0)，所以这样你直接就获得了观察者位置。可是，我发现出于学习的目的，在世界空间计算光照更符合直觉。如果你仍然希望在视野空间计算光照的话，那就使用观察矩阵应用到所有相关的需要变换的向量(不要忘记，也要改变正规矩阵)。
|
||||
|
||||
为了得到观察者的世界空间坐标，我们简单地使用摄像机对象的位置坐标代替(它就是观察者)。所以我们把另一个uniform添加到片段着色器，把相应的摄像机位置坐标传给片段着色器：
|
||||
|
||||
```c++
|
||||
uniform vec3 viewPos;
|
||||
|
||||
GLint viewPosLoc = glGetUniformLocation(lightingShader.Program, "viewPos");
|
||||
glUniform3f(viewPosLoc, camera.Position.x, camera.Position.y, camera.Position.z);
|
||||
```
|
||||
|
||||
现在我们已经获得所有需要的变量，可以计算高光亮度了。首先，我们定义一个镜面强度(Specular Intensity)变量`specularStrength`，给镜面高光一个中等亮度颜色，这样就不会产生过度的影响了。
|
||||
|
||||
```c++
|
||||
float specularStrength = 0.5f;
|
||||
```
|
||||
|
||||
如果我们把它设置为1.0f，我们会得到一个对于珊瑚色立方体来说过度明亮的镜面亮度因子。下一节教程，我们会讨论所有这些光照亮度的合理设置，以及它们是如何影响物体的。下一步，我们计算视线方向坐标，和沿法线轴的对应的反射坐标：
|
||||
|
||||
```
|
||||
vec3 viewDir = normalize(viewPos - FragPos);
|
||||
vec3 reflectDir = reflect(-lightDir, norm);
|
||||
```
|
||||
|
||||
需要注意的是我们使用了`lightDir`向量的相反数。`reflect`函数要求的第一个是从光源指向片段位置的向量，但是`lightDir`当前是从片段指向光源的向量(由先前我们计算`lightDir`向量时，(减数和被减数)减法的顺序决定)。为了保证我们得到正确的`reflect`坐标，我们通过`lightDir`向量的相反数获得它的方向的反向。第二个参数要求是一个法向量，所以我们提供的是已标准化的`norm`向量。
|
||||
|
||||
剩下要做的是计算镜面亮度分量。下面的代码完成了这件事：
|
||||
|
||||
```c++
|
||||
float spec = pow(max(dot(viewDir, reflectDir), 0.0), 32);
|
||||
vec3 specular = specularStrength * spec * lightColor;
|
||||
```
|
||||
|
||||
我们先计算视线方向与反射方向的点乘(确保它不是负值)，然后得到它的32次幂。这个32是高光的**发光值(Shininess)**。一个物体的发光值越高，反射光的能力越强，散射得越少，高光点越小。在下面的图片里，你会看到不同发光值对视觉(效果)的影响：
|
||||
|
||||
|
||||
|
||||
我们不希望镜面成分过于显眼，所以我们把指数设置为32。剩下的最后一件事情是把它添加到环境光颜色和散射光颜色里，然后再乘以物体颜色：
|
||||
|
||||
```c++
|
||||
vec3 result = (ambient + diffuse + specular) * objectColor;
|
||||
color = vec4(result, 1.0f);
|
||||
```
|
||||
|
||||
我们现在为冯氏光照计算了全部的光照元素。根据你的观察点，你可以看到类似下面的画面：
|
||||
|
||||
|
||||
|
||||
你可以[在这里找到完整源码](http://learnopengl.com/code_viewer.php?code=lighting/basic_lighting_specular)，在这里有[顶点](http://learnopengl.com/code_viewer.php?code=lighting/basic_lighting&type=vertex)和[片段](http://learnopengl.com/code_viewer.php?code=lighting/basic_lighting&type=fragment)着色器。
|
||||
|
||||
!!! Important
|
||||
|
||||
早期的光照着色器，开发者在顶点着色器中实现冯氏光照。在顶点着色器中做这件事的优势是，相比片段来说，顶点要少得多，因此会更高效，所以(开销大的)光照计算频率会更低。然而，顶点着色器中的颜色值是只是顶点的颜色值，片段的颜色值是它与周围的颜色值的插值。结果就是这种光照看起来不会非常真实，除非使用了大量顶点。
|
||||
|
||||
|
||||
|
||||
在顶点着色器中实现的冯氏光照模型叫做Gouraud着色，而不是冯氏着色。记住由于插值，这种光照连起来有点逊色。冯氏着色能产生更平滑的光照效果。
|
||||
|
||||
现在你可以看到着色器的强大之处了。只用很少的信息，着色器就能计算出光照，影响到为我们所有物体的片段颜色。[下一个教程](http://learnopengl-cn.readthedocs.org/zh/latest/02%20Lighting/03%20Materials/)，我们会更深入的研究光照模型，看看我们还能做些什么。
|
||||
|
||||
## 练习
|
||||
|
||||
- 目前，我们的光源时静止的，你可以尝试使用`sin`和`cos`函数让光源在场景中来回移动，此时再观察光照效果能让你更容易理解冯氏光照模型。[参考解答](http://learnopengl.com/code_viewer.php?code=lighting/basic_lighting-exercise1)。
|
||||
- 尝试使用不同的环境光、散射镜面强度，观察光照效果。改变镜面光照的`shininess`因子试试。
|
||||
- 在观察空间(而不是世界空间)中计算冯氏光照：[参考解答](http://learnopengl.com/code_viewer.php?code=lighting/basic_lighting-exercise2)。
|
||||
- 尝试实现一个Gouraud光照来模拟冯氏光照，[参考解答](http://learnopengl.com/code_viewer.php?code=lighting/basic_lighting-exercise3)。
|
||||
178
docs/02 Lighting/03 Materials.md
Normal file
178
docs/02 Lighting/03 Materials.md
Normal file
@@ -0,0 +1,178 @@
|
||||
# 材质(Material)
|
||||
|
||||
原文 | [Materials](http://learnopengl.com/#!Lighting/Materials)
|
||||
---|---
|
||||
作者 | JoeyDeVries
|
||||
翻译 | [Django](http://bullteacher.com/)
|
||||
校对 | [Geequlim](http://geequlim.com)
|
||||
|
||||
在真实世界里，每个物体会对光产生不同的反应。钢看起来比陶瓷花瓶更闪闪发光，一个木头箱子不会像钢箱子一样对光产生很强的反射。每个物体对镜面高光也有不同的反应。有些物体不会散射(Scatter)很多光却会反射(Reflect)很多光，结果看起来就有一个较小的高光点(Highlight)，有些物体散射了很多，它们就会产生一个半径更大的高光。如果我们想要在OpenGL中模拟多种类型的物体，我们必须为每个物体分别定义材质(Material)属性。
|
||||
|
||||
在前面的教程中，我们指定一个物体和一个光的颜色来定义物体的图像输出，并使之结合环境(Ambient)和镜面强度(Specular Intensity)元素。当描述物体的时候，我们可以使用3种光照元素：环境光照(Ambient Lighting)、漫反射光照(Diffuse Lighting)、镜面光照(Specular Lighting)定义一个材质颜色。通过为每个元素指定一个颜色，我们已经对物体的颜色输出有了精密的控制。现在把一个镜面高光元素添加到这三个颜色里，这是我们需要的所有材质属性：
|
||||
|
||||
```c++
|
||||
#version 330 core
|
||||
struct Material
|
||||
{
|
||||
vec3 ambient;
|
||||
vec3 diffuse;
|
||||
vec3 specular;
|
||||
float shininess;
|
||||
};
|
||||
uniform Material material;
|
||||
```
|
||||
|
||||
在片段着色器中，我们创建一个结构体(Struct)，来储存物体的材质属性。我们也可以把它们储存为独立的uniform值，但是作为一个结构体来储存可以更有条理。我们首先定义结构体的布局，然后简单声明一个uniform变量，以新创建的结构体作为它的类型。
|
||||
|
||||
就像你所看到的，我们为每个冯氏光照模型的元素都定义一个颜色向量。`ambient`材质向量定义了在环境光照下这个物体反射的是什么颜色；通常这是和物体颜色相同的颜色。`diffuse`材质向量定义了在漫反射光照下物体的颜色。漫反射颜色被设置为(和环境光照一样)我们需要的物体颜色。`specular`材质向量设置的是物体受到的镜面光照的影响的颜色(或者可能是反射一个物体特定的镜面高光颜色)。最后，`shininess`影响镜面高光的散射/半径。
|
||||
|
||||
这四个元素定义了一个物体的材质，通过它们我们能够模拟很多真实世界的材质。这里有一个列表[devernay.free.fr](http://devernay.free.fr/cours/opengl/materials.html)展示了几种材质属性，这些材质属性模拟外部世界的真实材质。下面的图片展示了几种真实世界材质对我们的立方体的影响：
|
||||
|
||||
|
||||
|
||||
如你所见，正确地指定一个物体的材质属性，似乎就是改变我们物体的相关属性的比例。效果显然很引人注目，但是对于大多数真实效果，我们最终需要更加复杂的形状，而不单单是一个立方体。在[下面的教程](http://learnopengl-cn.readthedocs.org/zh/latest/03%20Model%20Loading/01%20Assimp/)中，我们会讨论更复杂的形状。
|
||||
|
||||
为一个物体赋予一款正确的材质是非常困难的，这需要大量实验和丰富的经验，所以由于错误的设置材质而毁了物体的画面质量是件经常发生的事。
|
||||
|
||||
让我们试试在着色器中实现这样的一个材质系统。
|
||||
|
||||
|
||||
## 设置材质
|
||||
|
||||
我们在片段着色器中创建了一个uniform材质结构体，所以下面我们希望改变光照计算来顺应新的材质属性。由于所有材质元素都储存在结构体中，我们可以从uniform变量`material`取得它们：
|
||||
|
||||
```c++
|
||||
void main()
|
||||
{
|
||||
// 环境光
|
||||
vec3 ambient = lightColor * material.ambient;
|
||||
|
||||
// 漫反射光
|
||||
vec3 norm = normalize(Normal);
|
||||
vec3 lightDir = normalize(lightPos - FragPos);
|
||||
float diff = max(dot(norm, lightDir), 0.0);
|
||||
vec3 diffuse = lightColor * (diff * material.diffuse);
|
||||
|
||||
// 镜面高光
|
||||
vec3 viewDir = normalize(viewPos - FragPos);
|
||||
vec3 reflectDir = reflect(-lightDir, norm);
|
||||
float spec = pow(max(dot(viewDir, reflectDir), 0.0), material.shininess);
|
||||
vec3 specular = lightColor * (spec * material.specular);
|
||||
|
||||
vec3 result = ambient + diffuse + specular;
|
||||
color = vec4(result, 1.0f);
|
||||
}
|
||||
```
|
||||
|
||||
你可以看到，我们现在获得所有材质结构体的属性，无论在哪儿我们都需要它们，这次通过材质颜色的帮助，计算结果输出的颜色。物体的每个材质属性都乘以它们对应的光照元素。
|
||||
|
||||
通过设置适当的uniform，我们可以在应用中设置物体的材质。当设置uniform时，GLSL中的一个结构体并不会被认为有什么特别之处。一个结构体值扮演uniform变量的封装体，所以如果我们希望填充这个结构体，我们就仍然必须设置结构体中的各个元素的uniform值，但是这次带有结构体名字作为前缀：
|
||||
|
||||
```c++
|
||||
GLint matAmbientLoc = glGetUniformLocation(lightingShader.Program, "material.ambient");
|
||||
GLint matDiffuseLoc = glGetUniformLocation(lightingShader.Program, "material.diffuse");
|
||||
GLint matSpecularLoc = glGetUniformLocation(lightingShader.Program, "material.specular");
|
||||
GLint matShineLoc = glGetUniformLocation(lightingShader.Program, "material.shininess");
|
||||
|
||||
glUniform3f(matAmbientLoc, 1.0f, 0.5f, 0.31f);
|
||||
glUniform3f(matDiffuseLoc, 1.0f, 0.5f, 0.31f);
|
||||
glUniform3f(matSpecularLoc, 0.5f, 0.5f, 0.5f);
|
||||
glUniform1f(matShineLoc, 32.0f);
|
||||
```
|
||||
|
||||
我们将`ambient`和`diffuse`元素设置成我们想要让物体所呈现的颜色，设置物体的`specular`元素为中等亮度颜色；我们不希望`specular`元素对这个指定物体产生过于强烈的影响。我们同样设置`shininess`为32。我们现在可以简单的在应用中影响物体的材质。
|
||||
|
||||
运行程序，会得到下面这样的结果：
|
||||
|
||||
|
||||
|
||||
看起来很奇怪不是吗？
|
||||
|
||||
|
||||
### 光的属性
|
||||
|
||||
这个物体太亮了。物体过亮的原因是环境、漫反射和镜面三个颜色任何一个光源都会去全力反射。光源对环境、漫反射和镜面元素同时具有不同的强度。前面的教程，我们通过使用一个强度值改变环境和镜面强度的方式解决了这个问题。我们想做一个相同的系统，但是这次为每个光照元素指定了强度向量。如果我们想象`lightColor`是`vec3(1.0)`，代码看起来像是这样：
|
||||
|
||||
```c++
|
||||
vec3 ambient = vec3(1.0f) * material.ambient;
|
||||
vec3 diffuse = vec3(1.0f) * (diff * material.diffuse);
|
||||
vec3 specular = vec3(1.0f) * (spec * material.specular);
|
||||
```
|
||||
|
||||
所以物体的每个材质属性返回了每个光照元素的全强度。这些vec3(1.0)值可以各自独立的影响各个光源，这通常就是我们想要的。现在物体的`ambient`元素完全地展示了立方体的颜色，可是环境元素不应该对最终颜色有这么大的影响，所以我们要设置光的`ambient`亮度为一个小一点的值，从而限制环境色：
|
||||
|
||||
```c++
|
||||
vec3 result = vec3(0.1f) * material.ambient;
|
||||
```
|
||||
|
||||
我们可以用同样的方式影响光源`diffuse`和`specular`的强度。这和我们[前面教程](http://learnopengl-cn.readthedocs.org/zh/latest/02%20Lighting/02%20Basic%20Lighting/)所做的极为相似；你可以说我们已经创建了一些光的属性来各自独立地影响每个光照元素。我们希望为光的属性创建一些与材质结构体相似的东西：
|
||||
|
||||
```c++
|
||||
struct Light
|
||||
{
|
||||
vec3 position;
|
||||
vec3 ambient;
|
||||
vec3 diffuse;
|
||||
vec3 specular;
|
||||
};
|
||||
uniform Light light;
|
||||
```
|
||||
|
||||
一个光源的`ambient`、`diffuse`和`specular`光都有不同的亮度。环境光通常设置为一个比较低的亮度，因为我们不希望环境色太过显眼。光源的`diffuse`元素通常设置为我们希望光所具有的颜色；经常是一个明亮的白色。`specular`元素通常被设置为`vec3(1.0f)`类型的全强度发光。要记住的是我们同样把光的位置添加到结构体中。
|
||||
|
||||
就像材质uniform一样，需要更新片段着色器：
|
||||
|
||||
```c++
|
||||
vec3 ambient = light.ambient * material.ambient;
|
||||
vec3 diffuse = light.diffuse * (diff * material.diffuse);
|
||||
vec3 specular = light.specular * (spec * material.specular);
|
||||
```
|
||||
|
||||
然后我们要在应用里设置光的亮度：
|
||||
|
||||
```c++
|
||||
GLint lightAmbientLoc = glGetUniformLocation(lightingShader.Program, "light.ambient");
|
||||
GLint lightDiffuseLoc = glGetUniformLocation(lightingShader.Program, "light.diffuse");
|
||||
GLint lightSpecularLoc = glGetUniformLocation(lightingShader.Program, "light.specular");
|
||||
|
||||
glUniform3f(lightAmbientLoc, 0.2f, 0.2f, 0.2f);
|
||||
glUniform3f(lightDiffuseLoc, 0.5f, 0.5f, 0.5f);// 让我们把这个光调暗一点，这样会看起来更自然
|
||||
glUniform3f(lightSpecularLoc, 1.0f, 1.0f, 1.0f);
|
||||
```
|
||||
|
||||
现在，我们调整了光是如何影响物体所有的材质的，我们得到一个更像前面教程的视觉输出。这次我们完全控制了物体光照和材质：
|
||||
|
||||
|
||||
|
||||
现在改变物体的外观相对简单了些。我们做点更有趣的事！
|
||||
|
||||
|
||||
### 不同的光源颜色
|
||||
|
||||
目前为止，我们使用光源的颜色仅仅去改变物体各个元素的强度(通过选用从白到灰到黑范围内的颜色)，并没有影响物体的真实颜色(只是强度)。由于现在能够非常容易地访问光的属性了，我们可以随着时间改变它们的颜色来获得一些有很意思的效果。由于所有东西都已经在片段着色器做好了，改变光的颜色很简单，我们可以立即创建出一些有趣的效果：
|
||||
|
||||
<video src="http://www.learnopengl.com/video/lighting/materials.mp4" controls="controls">
|
||||
</video>
|
||||
|
||||
如你所见，不同光的颜色极大地影响了物体的颜色输出。由于光的颜色直接影响物体反射的颜色(你可能想起在颜色教程中有讨论过)，它对视觉输出有显著的影响。
|
||||
|
||||
利用`sin`和`glfwGetTime`改变光的环境和漫反射颜色，我们可以随着时间流逝简单的改变光源颜色：
|
||||
|
||||
```c++
|
||||
glm::vec3 lightColor; lightColor.x = sin(glfwGetTime() * 2.0f);
|
||||
lightColor.y = sin(glfwGetTime() * 0.7f);
|
||||
lightColor.z = sin(glfwGetTime() * 1.3f);
|
||||
|
||||
glm::vec3 diffuseColor = lightColor * glm::vec3(0.5f);
|
||||
glm::vec3 ambientColor = diffuseColor * glm::vec3(0.2f);
|
||||
|
||||
glUniform3f(lightAmbientLoc, ambientColor.x, ambientColor.y, ambientColor.z);
|
||||
glUniform3f(lightDiffuseLoc, diffuseColor.x, diffuseColor.y, diffuseColor.z);
|
||||
```
|
||||
|
||||
尝试和实验使用这些光照和材质值，看看它们怎样影响图像输出的。你可以从这里找到[程序的源码](http://learnopengl.com/code_viewer.php?code=lighting/materials)，[片段着色器](http://learnopengl.com/code_viewer.php?code=lighting/materials&type=fragment)的源码。
|
||||
|
||||
## 练习
|
||||
|
||||
- 你能像我们教程一开始那样根据一些材质的属性来模拟一个真实世界的物体吗？
|
||||
注意[材质表](http://devernay.free.fr/cours/opengl/materials.html)中的环境光颜色与漫反射光的颜色可能不一样，因为他们并没有把光照强度考虑进去来模拟，你需要将光照颜色的强度改为`vec(1.0f)`来输出正确的结果：[参考解答](http://learnopengl.com/code_viewer.php?code=lighting/materials-exercise1)，我做了一个青色(Cyan)的塑料箱子
|
||||
158
docs/02 Lighting/04 Lighting maps.md
Normal file
158
docs/02 Lighting/04 Lighting maps.md
Normal file
@@ -0,0 +1,158 @@
|
||||
# 光照贴图
|
||||
|
||||
原文 | [Lighting maps](http://learnopengl.com/#!Lighting/Lighting-maps)
|
||||
---|---
|
||||
作者 | JoeyDeVries
|
||||
翻译 | [Django](http://bullteacher.com/)
|
||||
校对 | [Geequlim](http://geequlim.com), [BLumia](https://github.com/blumia/)
|
||||
|
||||
前面的教程，我们讨论了让不同的物体拥有各自不同的材质并对光照做出不同的反应的方法。在一个光照场景中，让每个物体拥有和其他物体不同的外观很棒，但是这仍然不能对一个物体的图像输出提供足够多的灵活性。
|
||||
|
||||
前面的教程中我们将一个物体自身作为一个整体为其定义了一个材质，但是现实世界的物体通常不会只有这么一种材质，而是由多种材质组成。想象一辆车：它的外表质地光亮，车窗会部分反射环境，它的轮胎没有specular高光，轮彀却非常闪亮（在洗过之后）。汽车同样有diffuse和ambient颜色，它们在整个车上都不相同；一辆车显示了多种不同的ambient/diffuse颜色。总之，这样一个物体每个部分都有多种材质属性。
|
||||
|
||||
所以，前面的材质系统对于除了最简单的模型以外都是不够的，所以我们需要扩展前面的系统，我们要介绍diffuse和specular贴图。它们允许你对一个物体的diffuse（而对于简洁的ambient成分来说，它们几乎总是是一样的）和specular成分能够有更精确的影响。
|
||||
|
||||
## 漫反射贴图
|
||||
|
||||
我们希望通过某种方式对每个原始像素独立设置diffuse颜色。有可以让我们基于物体原始像素的位置来获取颜色值的系统吗？
|
||||
|
||||
这可能听起来极其相似，坦白来讲我们使用这样的系统已经有一段时间了。听起来很像在一个[之前的教程](https://learnopengl-cn.readthedocs.org/zh/latest/01%20Getting%20started/06%20Textures/)中谈论的**纹理**，它基本就是一个纹理。我们其实是使用同一个潜在原则下的不同名称：使用一张图片覆盖住物体，以便我们为每个原始像素索引独立颜色值。在光照场景中，通过纹理来呈现一个物体的diffuse颜色，这个做法被称做**漫反射贴图(Diffuse texture)**(因为3D建模师就是这么称呼这个做法的)。
|
||||
|
||||
为了演示漫反射贴图，我们将会使用[下面的图片](http://learnopengl.com/img/textures/container2.png)，它是一个有一圈钢边的木箱：
|
||||
|
||||
|
||||
|
||||
在着色器中使用漫反射贴图和纹理教程介绍的一样。这次我们把纹理以sampler2D类型储存在Material结构体中。我们使用diffuse贴图替代早期定义的vec3类型的diffuse颜色。
|
||||
|
||||
!!! Attention
|
||||
|
||||
要记住的是sampler2D也叫做模糊类型，这意味着我们不能以某种类型对它实例化，只能用uniform定义它们。如果我们用结构体而不是uniform实例化（就像函数的参数那样），GLSL会抛出奇怪的错误；这同样也适用于其他模糊类型。
|
||||
我们也要移除amibient材质颜色向量，因为ambient颜色绝大多数情况等于diffuse颜色，所以不需要分别去储存它：
|
||||
|
||||
```c++
|
||||
struct Material
|
||||
{
|
||||
sampler2D diffuse;
|
||||
vec3 specular;
|
||||
float shininess;
|
||||
};
|
||||
...
|
||||
in vec2 TexCoords;
|
||||
```
|
||||
!!! Important
|
||||
|
||||
如果你非把ambient颜色设置为不同的值不可（不同于diffuse值），你可以继续保留ambient的vec3，但是整个物体的ambient颜色会继续保持不变。为了使每个原始像素得到不同ambient值，你需要对ambient值单独使用另一个纹理。
|
||||
|
||||
注意，在片段着色器中我们将会再次需要纹理坐标，所以我们声明一个额外输入变量。然后我们简单地从纹理采样，来获得原始像素的diffuse颜色值：
|
||||
|
||||
```c++
|
||||
vec3 diffuse = light.diffuse * diff * vec3(texture(material.diffuse, TexCoords));
|
||||
```
|
||||
|
||||
同样，不要忘记把ambient材质的颜色设置为diffuse材质的颜色：
|
||||
|
||||
```c++
|
||||
vec3 ambient = light.ambient * vec3(texture(material.diffuse, TexCoords));
|
||||
```
|
||||
|
||||
这就是diffuse贴图的全部内容了。就像你看到的，这不是什么新的东西，但是它却极大提升了视觉品质。为了让它工作，我们需要用到纹理坐标更新顶点数据，把它们作为顶点属性传递到片段着色器，把纹理加载并绑定到合适的纹理单元。
|
||||
|
||||
更新的顶点数据可以从[这里](http://learnopengl.com/code_viewer.php?code=lighting/vertex_data_textures)找到。顶点数据现在包括了顶点位置，法线向量和纹理坐标，每个立方体的顶点都有这些属性。让我们更新顶点着色器来接受纹理坐标作为顶点属性，然后发送到片段着色器：
|
||||
|
||||
```c++
|
||||
#version 330 core
|
||||
layout (location = 0) in vec3 position;
|
||||
layout (location = 1) in vec3 normal;
|
||||
layout (location = 2) in vec2 texCoords;
|
||||
...
|
||||
out vec2 TexCoords;
|
||||
|
||||
void main()
|
||||
{
|
||||
...
|
||||
TexCoords = texCoords;
|
||||
}
|
||||
```
|
||||
|
||||
要保证更新的顶点属性指针，不仅是VAO匹配新的顶点数据，也要把箱子图片加载为纹理。在绘制箱子之前，我们希望首选纹理单元被赋为material.diffuse这个uniform采样器，并绑定箱子的纹理到这个纹理单元：
|
||||
|
||||
```c++
|
||||
glUniform1i(glGetUniformLocation(lightingShader.Program, "material.diffuse"), 0);
|
||||
...
|
||||
glActiveTexture(GL_TEXTURE0);
|
||||
glBindTexture(GL_TEXTURE_2D, diffuseMap);
|
||||
```
|
||||
|
||||
现在，使用一个diffuse贴图，我们在细节上再次获得惊人的提升，这次添加到箱子上的光照开始闪光了（名符其实）。你的箱子现在可能看起来像这样：
|
||||
|
||||
|
||||
|
||||
你可以在这里得到应用的[全部代码](http://learnopengl.com/code_viewer.php?code=lighting/lighting_maps_diffuse)。
|
||||
|
||||
|
||||
## 镜面贴图
|
||||
|
||||
你可能注意到，specular高光看起来不怎么样，由于我们的物体是个箱子，大部分是木头，我们知道木头是不应该有镜面高光的。我们通过把物体设置specular材质设置为vec3(0.0f)来修正它。但是这样意味着铁边会不再显示镜面高光，我们知道钢铁是会显示一些镜面高光的。我们会想要控制物体部分地显示镜面高光，它带有修改了的亮度。这个问题看起来和diffuse贴图的讨论一样。这是巧合吗？我想不是。
|
||||
|
||||
我们同样用一个纹理贴图，来获得镜面高光。这意味着我们需要生成一个黑白（或者你喜欢的颜色）纹理来定义specular亮度，把它应用到物体的每个部分。下面是一个[specular贴图](http://learnopengl.com/img/textures/container2_specular.png)的例子：
|
||||
|
||||
|
||||
|
||||
一个specular高光的亮度可以通过图片中每个纹理的亮度来获得。specular贴图的每个像素可以显示为一个颜色向量，比如：在那里黑色代表颜色向量vec3(0.0f)，灰色是vec3(0.5f)。在片段着色器中，我们采样相应的颜色值，把它乘以光的specular亮度。像素越“白”，乘积的结果越大，物体的specualr部分越亮。
|
||||
|
||||
由于箱子几乎是由木头组成，木头作为一个材质不会有镜面高光，整个木头部分的diffuse纹理被用黑色覆盖：黑色部分不会包含任何specular高光。箱子的铁边有一个修改的specular亮度，它自身更容易受到镜面高光影响，木纹部分则不会。
|
||||
|
||||
从技术上来讲，木头也有镜面高光，尽管这个闪亮值很小（更多的光被散射），影响很小，但是为了学习目的，我们可以假装木头不会有任何specular光反射。
|
||||
|
||||
使用Photoshop或Gimp之类的工具，通过将图片进行裁剪，将某部分调整成黑白图样，并调整亮度/对比度的做法，可以非常容易将一个diffuse纹理贴图处理为specular贴图。
|
||||
|
||||
|
||||
### 镜面贴图采样
|
||||
|
||||
一个specular贴图和其他纹理一样，所以代码和diffuse贴图的代码也相似。确保合理的加载了图片，生成一个纹理对象。由于我们在同样的片段着色器中使用另一个纹理采样器，我们必须为specular贴图使用一个不同的纹理单元(参见[纹理](http://learnopengl-cn.readthedocs.org/zh/latest/01%20Getting%20started/06%20Textures/))，所以在渲染前让我们把它绑定到合适的纹理单元
|
||||
|
||||
```c++
|
||||
glUniform1i(glGetUniformLocation(lightingShader.Program, "material.specular"), 1);
|
||||
...
|
||||
glActiveTexture(GL_TEXTURE1);
|
||||
glBindTexture(GL_TEXTURE_2D, specularMap);
|
||||
```
|
||||
|
||||
然后更新片段着色器材质属性，接受一个sampler2D作为这个specular部分的类型，而不是vec3：
|
||||
|
||||
```c++
|
||||
struct Material
|
||||
{
|
||||
sampler2D diffuse;
|
||||
sampler2D specular;
|
||||
float shininess;
|
||||
};
|
||||
```
|
||||
|
||||
最后我们希望采样这个specular贴图，来获取原始像素相应的specular亮度：
|
||||
|
||||
```c++
|
||||
vec3 ambient = light.ambient * vec3(texture(material.diffuse, TexCoords));
|
||||
vec3 diffuse = light.diffuse * diff * vec3(texture(material.diffuse, TexCoords));
|
||||
vec3 specular = light.specular * spec * vec3(texture(material.specular, TexCoords));
|
||||
color = vec4(ambient + diffuse + specular, 1.0f);
|
||||
```
|
||||
|
||||
通过使用一个specular贴图我们可以定义极为精细的细节，物体的这个部分会获得闪亮的属性，我们可以设置它们相应的亮度。specular贴图给我们一个附加的高于diffuse贴图的控制权限。
|
||||
|
||||
如果你不想成为主流，你可以在specular贴图里使用颜色，不单单为每个原始像素设置specular亮度，同时也设置specular高光的颜色。从真实角度来说，specular的颜色基本是由光源自身决定的，所以它不会生成真实的图像（这就是为什么图片通常是黑色和白色的：我们只关心亮度）。
|
||||
|
||||
如果你现在运行应用，你可以清晰地看到箱子的材质现在非常类似真实的铁边的木头箱子了：
|
||||
|
||||
|
||||
|
||||
你可以在这里找到[全部源码](http://learnopengl.com/code_viewer.php?code=lighting/lighting_maps_specular)。也对比一下你的[顶点着色器](http://learnopengl.com/code_viewer.php?code=lighting/lighting_maps&type=vertex)和[片段着色器](http://learnopengl.com/code_viewer.php?code=lighting/lighting_maps&type=fragment)。
|
||||
|
||||
使用diffuse和specular贴图，我们可以给相关但简单物体添加一个极为明显的细节。我们可以使用其他纹理贴图，比如法线/bump贴图或者反射贴图，给物体添加更多的细节。但是这些在后面教程才会涉及。把你的箱子给你所有的朋友和家人看，有一天你会很满足，我们的箱子会比现在更漂亮！
|
||||
|
||||
## 练习
|
||||
|
||||
- 调整光源的ambient，diffuse和specular向量值，看看它们如何影响实际输出的箱子外观。
|
||||
- 尝试在片段着色器中反转镜面贴图(Specular Map)的颜色值，然后木头就会变得反光而边框不会反光了（由于贴图中钢边依然有一些残余颜色，所以钢边依然会有一些高光，不过反光明显小了很多）。[参考解答](http://learnopengl.com/code_viewer.php?code=lighting/lighting_maps-exercise2)
|
||||
- 使用漫反射纹理(Diffuse Texture)原本的颜色而不是黑白色来创建镜面贴图，并观察，你会发现结果显得并不那么真实了。如果你不会处理图片，你可以使用这个[带颜色的镜面贴图](http://learnopengl.com/img/lighting/lighting_maps_specular_color.png)。[最终效果](learnopengl.com/img/lighting/lighting_maps_exercise3.png)
|
||||
- 添加一个叫做**放射光贴图(Emission Map)**的东西，即记录每个片段发光值(Emission Value)大小的贴图，发光值是(模拟)物体自身**发光(Emit)**时可能产生的颜色。这样的话物体就可以忽略环境光自身发光。通常在你看到游戏里某个东西(比如 [机器人的眼](http://www.witchbeam.com.au/unityboard/shaders_enemy.jpg),或是[箱子上的小灯](http://www.tomdalling.com/images/posts/modern-opengl-08/emissive.png))在发光时，使用的就是放射光贴图。使用[这个](http://learnopengl.com/img/textures/matrix.jpg)贴图(作者为 creativesam)作为放射光贴图并使用在箱子上，你就会看到箱子上有会发光的字了。[参考解答](http://learnopengl.com/code_viewer.php?code=lighting/lighting_maps-exercise4),[片段着色器](http://learnopengl.com/code_viewer.php?code=lighting/lighting_maps-exercise4_fragment), [最终效果](http://learnopengl.com/img/lighting/lighting_maps_exercise4.png)
|
||||
321
docs/02 Lighting/05 Light casters.md
Normal file
321
docs/02 Lighting/05 Light casters.md
Normal file
@@ -0,0 +1,321 @@
|
||||
# 投光物
|
||||
|
||||
原文 | [Light casters](http://www.learnopengl.com/#!Lighting/Light-casters)
|
||||
---|---
|
||||
作者 | JoeyDeVries
|
||||
翻译 | [Django](http://bullteacher.com/)
|
||||
校对 | [Geequlim](http://geequlim.com), [BLumia](https://github.com/BLumia)
|
||||
|
||||
我们目前使用的所有光照都来自于一个单独的光源，这是空间中的一个点。它的效果不错，但是在真实世界，我们有多种类型的光，它们每个表现都不同。一个光源把光投射到物体上，叫做投光。这个教程里我们讨论几种不同的投光类型。学习模拟不同的光源是你未来丰富你的场景的另一个工具。
|
||||
|
||||
我们首先讨论定向光(directional light)，接着是作为之前学到知识的扩展的点光(point light)，最后我们讨论聚光灯(Spotlight)。下面的教程我们会把这几种不同的光类型整合到一个场景中。
|
||||
|
||||
## 定向光(Directional Light)
|
||||
|
||||
当一个光源很远的时候，来自光源的每条光线接近于平行。这看起来就像所有的光线来自于同一个方向，无论物体和观察者在哪儿。当一个光源被设置为无限远时，它被称为定向光(也被成为平行光)，因为所有的光线都有着同一个方向；它会独立于光源的位置。
|
||||
|
||||
我们知道的定向光源的一个好例子是，太阳。太阳和我们不是无限远，但它也足够远了，在计算光照的时候，我们感觉它就像无限远。在下面的图片里，来自于太阳的所有的光线都被定义为平行光：
|
||||
|
||||
|
||||
|
||||
因为所有的光线都是平行的，对于场景中的每个物体光的方向都保持一致，物体和光源的位置保持怎样的关系都无所谓。由于光的方向向量保持一致，光照计算会和场景中的其他物体相似。
|
||||
|
||||
我们可以通过定义一个光的方向向量，来模拟这样一个定向光，而不是使用光的位置向量。着色器计算保持大致相同的要求，这次我们直接使用光的方向向量来代替用`lightDir`向量和`position`向量的计算：
|
||||
|
||||
```c++
|
||||
struct Light
|
||||
{
|
||||
// vec3 position; // 现在不在需要光源位置了，因为它是无限远的
|
||||
vec3 direction;
|
||||
vec3 ambient;
|
||||
vec3 diffuse;
|
||||
vec3 specular;
|
||||
};
|
||||
...
|
||||
void main()
|
||||
{
|
||||
vec3 lightDir = normalize(-light.direction);
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
注意，我们首先对`light.direction`向量取反。目前我们使用的光照计算需要光的方向作为一个来自片段朝向的光源的方向，但是人们通常更习惯定义一个定向光作为一个全局方向，它从光源发出。所以我们必须对全局光的方向向量取反来改变它的方向；它现在是一个方向向量指向光源。同时，确保对向量进行标准化处理，因为假定输入的向量就是一个单位向量是不明智的。
|
||||
|
||||
作为结果的`lightDir`向量被使用在`diffuse`和`specular`计算之前。
|
||||
|
||||
为了清晰地强调一个定向光对所有物体都有同样的影响，我们再次访问[坐标系教程](http://learnopengl-cn.readthedocs.org/zh/latest/01%20Getting%20started/08%20Coordinate%20Systems/)结尾部分的箱子场景。例子里我们先定义10个不同的箱子位置，为每个箱子生成不同的模型矩阵，每个模型矩阵包含相应的本地到世界变换：
|
||||
|
||||
```c++
|
||||
for(GLuint i = 0; i < 10; i++)
|
||||
{
|
||||
model = glm::mat4();
|
||||
model = glm::translate(model, cubePositions[i]);
|
||||
GLfloat angle = 20.0f * i;
|
||||
model = glm::rotate(model, angle, glm::vec3(1.0f, 0.3f, 0.5f));
|
||||
glUniformMatrix4fv(modelLoc, 1, GL_FALSE, glm::value_ptr(model));
|
||||
glDrawArrays(GL_TRIANGLES, 0, 36);
|
||||
}
|
||||
```
|
||||
|
||||
同时，不要忘记定义光源的方向（注意，我们把方向定义为：从光源处发出的方向；在下面，你可以快速看到光的方向的指向）：
|
||||
|
||||
```c++
|
||||
GLint lightDirPos = glGetUniformLocation(lightingShader.Program, "light.direction");
|
||||
glUniform3f(lightDirPos, -0.2f, -1.0f, -0.3f);
|
||||
```
|
||||
|
||||
!!! Important
|
||||
|
||||
我们已经把光的位置和方向向量传递为vec3，但是有些人去想更喜欢把所有的向量设置为vec4.当定义位置向量为vec4的时候，把w元素设置为1.0非常重要，这样平移和投影才会合理的被应用。然而，当定义一个方向向量为vec4时，我们并不想让平移发挥作用（因为它们除了代表方向，其他什么也不是）所以我们把w元素设置为0.0。
|
||||
|
||||
方向向量被表示为：vec4(0.2f, 1.0f, 0.3f, 0.0f)。这可以作为简单检查光的类型的方法：你可以检查w元素是否等于1.0，查看我们现在所拥有的光的位置向量，w是否等于0.0，我们有一个光的方向向量，所以根据那个调整计算方法：
|
||||
|
||||
```c++
|
||||
if(lightVector.w == 0.0) // 请留意浮点数错误
|
||||
// 执行定向光照计算
|
||||
|
||||
else if(lightVector.w == 1.0)
|
||||
// 像上一个教程一样执行顶点光照计算
|
||||
```
|
||||
|
||||
有趣的事实：这就是旧OpenGL（固定函数式）决定一个光源是一个定向光还是位置光源，更具这个修改它的光照。
|
||||
|
||||
如果你现在编译应用，飞跃场景，它看起来像有一个太阳一样的光源，把光抛到物体身上。你可以看到`diffuse`和`specular`元素都对该光源进行反射了，就像天空上有一个光源吗？看起来就像这样：
|
||||
|
||||
|
||||
|
||||
你可以在这里获得[应用的所有代码](http://learnopengl.com/code_viewer.php?code=lighting/light_casters_directional)，这里是[顶点](http://learnopengl.com/code_viewer.php?code=lighting/lighting_maps&type=vertex)和[片段](http://learnopengl.com/code_viewer.php?code=lighting/light_casters_directional&type=fragment)着色器代码。
|
||||
|
||||
|
||||
|
||||
## 定点光(Point Light)
|
||||
|
||||
定向光作为全局光可以照亮整个场景，这非常棒，但是另一方面除了定向光，我们通常也需要几个定点光，在场景里发亮。点光是一个在时间里有位置的光源，它向所有方向发光，光线随距离增加逐渐变暗。想象灯泡和火炬作为投光物，它们可以扮演点光的角色。
|
||||
|
||||
|
||||
|
||||
之前的教程我们已经使用了（最简单的）点光。我们指定了一个光源以及其所在的位置，它从这个位置向所有方向发散光线。然而，我们定义的光源所模拟光线的强度却不会因为距离变远而衰减，这使得看起来像是光源亮度极强。在大多数3D仿真场景中，我们更希望去模拟一个仅仅能照亮靠近光源点附近场景的光源，而不是照亮整个场景的光源。
|
||||
|
||||
如果你把10个箱子添加到之前教程的光照场景中，你会注意到黑暗中的每个箱子都会有同样的亮度，就像箱子在光照的前面；没有公式定义光的距离衰减。我们想让黑暗中与光源比较近的箱子被轻微地照亮。
|
||||
|
||||
### 衰减(Attenuation)
|
||||
|
||||
随着光线穿越距离的变远使得亮度也相应地减少的现象，通常称之为**衰减(Attenuation)**。一种随着距离减少亮度的方式是使用线性等式。这样的一个随着距离减少亮度的线性方程，可以使远处的物体更暗。然而，这样的线性方程效果会有点假。在真实世界，通常光在近处时非常亮，但是一个光源的亮度，开始的时候减少的非常快，之后随着距离的增加，减少的速度会慢下来。我们需要一种不同的方程来减少光的亮度。
|
||||
|
||||
幸运的是一些聪明人已经早就把它想到了。下面的方程把一个片段的光的亮度除以一个已经计算出来的衰减值，这个值根据光源的远近得到：
|
||||
|
||||
|
||||
|
||||
在这里是当前片段的光的亮度，代表片段到光源的距离。为了计算衰减值，我们定义3个项：常数项，一次项和二次项。
|
||||
|
||||
常数项通常是1.0，它的作用是保证坟墓永远不会比1小，因为它可以利用一定的距离增加亮度，这个结果不会影响到我们所寻找的。
|
||||
一次项用于与距离值相称，这回以线性的方式减少亮度。
|
||||
二次项用于与距离的平方相乘，为光源设置一个亮度的二次递减。二次项在距离比较近的时候相比一次项会比一次项更小，但是当距离更远的时候比一次项更大。
|
||||
由于二次项的光会以线性方式减少，指导距离足够大的时候，就会超过一次项，之后，光的亮度会减少的更快。最后的效果就是光在近距离时，非常量，但是距离变远亮度迅速降低，最后亮度降低速度再次变慢。下面的图展示了在100以内的范围，这样的衰减效果。
|
||||
|
||||
|
||||
|
||||
你可以看到当距离很近的时候光有最强的亮度，但是随着距离增大，亮度明显减弱，大约接近100的时候，就会慢下来。这就是我们想要的。
|
||||
|
||||
|
||||
|
||||
#### 选择正确的值
|
||||
|
||||
但是，我们把这三个项设置为什么值呢？正确的值的设置由很多因素决定：环境、你希望光所覆盖的距离范围、光的类型等。大多数场合，这是经验的问题，也要适度调整。下面的表格展示一些各项的值，它们模拟现实（某种类型的）光源，覆盖特定的半径（距离）。第一栏定义一个光的距离，它覆盖所给定的项。这些值是大多数光的良好开始，它是来自Ogre3D的维基的礼物：
|
||||
|
||||
Distance|Constant|Linear|Quadratic
|
||||
-------|------|-----|------
|
||||
7|1.0|0.7|1.8
|
||||
13|1.0|0.35|0.44
|
||||
20|1.0|0.22|0.20
|
||||
32|1.0|0.14|0.07
|
||||
50|1.0|0.09|0.032
|
||||
65|1.0|0.07|0.017
|
||||
100|1.0|0.045|0.0075
|
||||
160|1.0|0.027|0.0028
|
||||
200|1.0|0.022|0.0019
|
||||
325|1.0|0.014|0.0007
|
||||
600|1.0|0.007|0.0002
|
||||
3250|1.0|0.0014|0.000007
|
||||
|
||||
就像你所看到的，常数项一直都是1.0。一次项为了覆盖更远的距离通常很小，二次项就更小了。尝试用这些值进行实验，看看它们在你的实现中各自的效果。我们的环境中，32到100的距离对大多数光通常就足够了。
|
||||
|
||||
#### 实现衰减
|
||||
|
||||
为了实现衰减，在着色器中我们会需要三个额外数值：也就是公式的常量、一次项和二次项。最好把它们储存在之前定义的Light结构体中。要注意的是我们计算`lightDir`，就是在前面的教程中我们所做的，不是像之前的定向光的那部分。
|
||||
|
||||
```c++
|
||||
struct Light
|
||||
{
|
||||
vec3 position;
|
||||
vec3 ambient;
|
||||
vec3 diffuse;
|
||||
vec3 specular;
|
||||
float constant;
|
||||
float linear;
|
||||
float quadratic;
|
||||
};
|
||||
```
|
||||
|
||||
然后，我们在OpenGL中设置这些项：我们希望光覆盖50的距离，所以我们会使用上面的表格中合适的常数项、一次项和二次项：
|
||||
|
||||
```c++
|
||||
glUniform1f(glGetUniformLocation(lightingShader.Program, "light.constant"), 1.0f);
|
||||
glUniform1f(glGetUniformLocation(lightingShader.Program, "light.linear"), 0.09);
|
||||
glUniform1f(glGetUniformLocation(lightingShader.Program, "light.quadratic"), 0.032);
|
||||
```
|
||||
|
||||
在片段着色器中实现衰减很直接：我们根据公式简单的计算衰减值，在乘以`ambient`、`diffuse`和`specular`元素。
|
||||
|
||||
我们需要将光源的距离提供给公式；还记得我们是怎样计算向量的长度吗？我们可以通过获取片段和光源之间的不同向量把向量的长度结果作为距离项。我们可以使用GLSL的内建`length`函数做这件事：
|
||||
|
||||
```c++
|
||||
float distance = length(light.position - Position);
|
||||
float attenuation = 1.0f / (light.constant + light.linear*distance +light.quadratic*(distance*distance));
|
||||
```
|
||||
|
||||
然后，我们在光照计算中，通过把衰减值乘以`ambient`、`diffuse`和`specular`颜色，包含这个衰减值。
|
||||
|
||||
!!! Important
|
||||
|
||||
我们可以可以把`ambient`元素留着不变，这样`amient`光照就不会随着距离减少，但是如果我们使用多余1个的光源，所有的`ambient`元素会开始叠加，因此这种情况，我们希望`ambient`光照也衰减。简单的调试出对于你的环境来说最好的效果。
|
||||
|
||||
```c++
|
||||
ambient *= attenuation;
|
||||
diffuse *= attenuation;
|
||||
specular *= attenuation;
|
||||
```
|
||||
|
||||
如果你运行应用后获得这样的效果：
|
||||
|
||||
|
||||
|
||||
你可以看到现在只有最近处的箱子的前面被照得最亮。后面的箱子一点都没被照亮，因为它们距离光源太远了。你可以在这里找到[应用源码](http://learnopengl.com/code_viewer.php?code=lighting/light_casters_point)和[片段着色器](http://learnopengl.com/code_viewer.php?code=lighting/light_casters_point&type=fragment)的代码。
|
||||
|
||||
定点光就是一个可配的置位置和衰减值应用到光照计算中。还有另一种类型光可用于我们照明库当中。
|
||||
|
||||
|
||||
## 聚光灯(Spotlight)
|
||||
|
||||
我们要讨论的最后一种类型光是聚光灯(Spotlight)。聚光灯是一种位于环境中某处的光源，它不是向所有方向照射，而是只朝某个方向照射。结果是只有一个聚光灯照射方向的确定半径内的物体才会被照亮，其他的都保持黑暗。聚光灯的好例子是路灯或手电筒。
|
||||
|
||||
OpenGL中的聚光灯用世界空间位置，一个方向和一个指定了聚光灯半径的切光角来表示。我们计算的每个片段，如果片段在聚光灯的切光方向之间（就是在圆锥体内），我们就会把片段照亮。下面的图可以让你明白聚光灯是如何工作的：
|
||||
|
||||
|
||||
|
||||
* `LightDir`：从片段指向光源的向量。
|
||||
* `SpotDir`：聚光灯所指向的方向。
|
||||
* `Phiφ`：定义聚光灯半径的切光角。每个落在这个角度之外的，聚光灯都不会照亮。
|
||||
* `Thetaθ`：`LightDir`向量和`SpotDir向`量之间的角度。θ值应该比φ值小，这样才会在聚光灯内。
|
||||
|
||||
所以我们大致要做的是，计算`LightDir`向量和`SpotDir`向量的点乘（返回两个单位向量的点乘，还记得吗？），然后在和遮光角φ对比。现在你应该明白聚光灯是我们下面将创建的手电筒的范例。
|
||||
|
||||
|
||||
|
||||
### 手电筒
|
||||
|
||||
手电筒是一个坐落在观察者位置的聚光灯，通常瞄准玩家透视图的前面。基本上说，一个手电筒是一个普通的聚光灯，但是根据玩家的位置和方向持续的更新它的位置和方向。
|
||||
|
||||
所以我们需要为片段着色器提供的值，是聚光灯的位置向量（来计算光的方向坐标），聚光灯的方向向量和遮光角。我们可以把这些值储存在`Light`结构体中：
|
||||
|
||||
```c++
|
||||
struct Light
|
||||
{
|
||||
vec3 position;
|
||||
vec3 direction;
|
||||
float cutOff;
|
||||
...
|
||||
};
|
||||
```
|
||||
|
||||
下面我们把这些适当的值传给着色器：
|
||||
|
||||
```c++
|
||||
glUniform3f(lightPosLoc, camera.Position.x, camera.Position.y, camera.Position.z);
|
||||
glUniform3f(lightSpotdirLoc, camera.Front.x, camera.Front.y, camera.Front.z);
|
||||
glUniform1f(lightSpotCutOffLoc, glm::cos(glm::radians(12.5f)));
|
||||
```
|
||||
|
||||
你可以看到，我们为遮光角设置一个角度，但是我们根据一个角度计算了余弦值，把这个余弦结果传给了片段着色器。这么做的原因是在片段着色器中，我们计算`LightDir`和`SpotDir`向量的点乘，而点乘返回一个余弦值，不是一个角度，所以我们不能直接把一个角度和余弦值对比。为了获得这个角度，我们必须计算点乘结果的反余弦，这个操作开销是很大的。所以为了节约一些性能，我们先计算给定切光角的余弦值，然后把结果传递给片段着色器。由于每个角度都被表示为余弦了，我们可以直接对比它们，而不用进行任何开销高昂的操作。
|
||||
|
||||
现在剩下要做的是计算θ值，用它和φ值对比，以决定我们是否在或不在聚光灯的内部：
|
||||
|
||||
```c++
|
||||
float theta = dot(lightDir, normalize(-light.direction));
|
||||
if(theta > light.cutOff)
|
||||
{
|
||||
// 执行光照计算
|
||||
}
|
||||
else // 否则使用环境光，使得场景不至于完全黑暗
|
||||
color = vec4(light.ambient*vec3(texture(material.diffuse,TexCoords)), 1.0f);
|
||||
```
|
||||
|
||||
我们首先计算`lightDir`和取反的`direction`向量的点乘（它是取反过的因为我们想要向量指向光源，而不是从光源作为指向出发点。译注：前面的`specular`教程中作者却用了相反的表示方法，这里读者可以选择喜欢的表达方式）。确保对所有相关向量进行了标准化处理。
|
||||
|
||||
!!! Important
|
||||
|
||||
你可能奇怪为什么if条件中使用>符号而不是<符号。为了在聚光灯以内，θ不是应该比光的遮光值更小吗？这没错，但是不要忘了，角度值是以余弦值来表示的，一个0度的角表示为1.0的余弦值，当一个角是90度的时候被表示为0.0的余弦值，你可以在这里看到：
|
||||
|
||||
|
||||
|
||||
现在你可以看到，余弦越是接近1.0，角度就越小。这就解释了为什么θ需要比切光值更大了。切光值当前被设置为12.5的余弦，它等于0.9978，所以θ的余弦值在0.9979和1.0之间，片段会在聚光灯内，被照亮。
|
||||
|
||||
运行应用，在聚光灯内的片段才会被照亮。这看起来像这样：
|
||||
|
||||
|
||||
|
||||
你可以在这里获得[全部源码](http://learnopengl.com/code_viewer.php?code=lighting/light_casters_spotlight_hard)和[片段着色器的源码](http://learnopengl.com/code_viewer.php?code=lighting/light_casters_spotlight_hard&type=fragment)。
|
||||
|
||||
它看起来仍然有点假，原因是聚光灯有了一个硬边。片段着色器一旦到达了聚光灯的圆锥边缘，它就立刻黑了下来，却没有任何平滑减弱的过度。一个真实的聚光灯的光会在它的边界处平滑减弱的。
|
||||
|
||||
## 平滑/软化边缘
|
||||
|
||||
为创建聚光灯的平滑边，我们希望去模拟的聚光灯有一个内圆锥和外圆锥。我们可以把内圆锥设置为前面部分定义的圆锥，我们希望外圆锥从内边到外边逐步的变暗。
|
||||
|
||||
为创建外圆锥，我们简单定义另一个余弦值，它代表聚光灯的方向向量和外圆锥的向量（等于它的半径）的角度。然后，如果片段在内圆锥和外圆锥之间，就会给它计算出一个0.0到1.0之间的亮度。如果片段在内圆锥以内这个亮度就等于1.0，如果在外面就是0.0。
|
||||
|
||||
我们可以使用下面的公式计算这样的值：
|
||||
|
||||
这里是内部（）和外部圆锥()的差。结果I的值是聚光灯在当前片段的亮度。
|
||||
|
||||
很难用图画描述出这个公式是怎样工作的，所以我们尝试使用一个例子：
|
||||
|
||||
|
||||
θ|θ in degrees|φ (inner cutoff)|φ in degrees|γ (outer cutoff)|γ in degrees|ε|l
|
||||
--|---|---|---|---|---|---|---
|
||||
0.87|30|0.91|25|0.82|35|0.91 - 0.82 = 0.09|0.87 - 0.82 / 0.09 = 0.56
|
||||
0.9|26|0.91|25|0.82|35|0.91 - 0.82 = 0.09|0.9 - 0.82 / 0.09 = 0.89
|
||||
0.97|14|0.91|25|0.82|35|0.91 - 0.82 = 0.09|0.97 - 0.82 / 0.09 = 1.67
|
||||
0.97|14|0.91|25|0.82|35|0.91 - 0.82 = 0.09|0.97 - 0.82 / 0.09 = 1.67
|
||||
0.83|34|0.91|25|0.82|35|0.91 - 0.82 = 0.09|0.83 - 0.82 / 0.09 = 0.11
|
||||
0.64|50|0.91|25|0.82|35|0.91 - 0.82 = 0.09|0.64 - 0.82 / 0.09 = -2.0
|
||||
0.966|15|0.9978|12.5|0.953|17.5|0.966 - 0.953 = 0.0448|0.966 - 0.953 / 0.0448 = 0.29
|
||||
|
||||
就像你看到的那样我们基本是根据θ在外余弦和内余弦之间插值。如果你仍然不明白怎么继续，不要担心。你可以简单的使用这个公式计算，当你更加老道和明白的时候再来看。
|
||||
|
||||
由于我们现在有了一个亮度值，当在聚光灯外的时候是个负的，当在内部圆锥以内大于1。如果我们适当地把这个值固定，我们在片段着色器中就再不需要if-else了，我们可以简单地用计算出的亮度值乘以光的元素：
|
||||
|
||||
```c++
|
||||
float theta = dot(lightDir, normalize(-light.direction));
|
||||
float epsilon = light.cutOff - light.outerCutOff;
|
||||
float intensity = clamp((theta - light.outerCutOff) / epsilon,0.0, 1.0);
|
||||
...
|
||||
// We’ll leave ambient unaffected so we always have a little
|
||||
light.diffuse* = intensity;
|
||||
specular* = intensity;
|
||||
...
|
||||
```
|
||||
|
||||
注意，我们使用了`clamp`函数，它把第一个参数固定在0.0和1.0之间。这保证了亮度值不会超出[0, 1]以外。
|
||||
|
||||
确定你把`outerCutOff`值添加到了`Light`结构体，并在应用中设置了它的uniform值。对于下面的图片，内部遮光角`12.5f`，外部遮光角是`17.5f`：
|
||||
|
||||
|
||||
|
||||
看起来好多了。仔细看看内部和外部遮光角，尝试创建一个符合你求的聚光灯。可以在这里找到应用源码，以及片段的源代码。
|
||||
|
||||
这样的一个手电筒/聚光灯类型的灯光非常适合恐怖游戏，结合定向和点光，环境会真的开始被照亮了。[下一个教程](http://learnopengl-cn.readthedocs.org/zh/latest/02%20Lighting/06%20Multiple%20lights/)，我们会结合所有我们目前讨论了的光和技巧。
|
||||
|
||||
## 练习
|
||||
|
||||
- 试着修改上面的各种不同种类的光源及其片段着色器。试着将部分矢量进行反向并尝试使用 < 来代替 > 。试着解释这些修改导致不同显示效果的原因。
|
||||
208
docs/02 Lighting/06 Multiple lights.md
Normal file
208
docs/02 Lighting/06 Multiple lights.md
Normal file
@@ -0,0 +1,208 @@
|
||||
# 多光源(Multiple lights)
|
||||
|
||||
原文 | [Multiple lights](http://learnopengl.com/#!Lighting/Multiple-lights)
|
||||
---|---
|
||||
作者 | JoeyDeVries
|
||||
翻译 | [Geequlim](http://geequlim.com)
|
||||
校对 | [Geequlim](http://geequlim.com)
|
||||
|
||||
我们在前面的教程中已经学习了许多关于OpenGL 光照的知识，其中包括冯氏照明模型（Phong shading）、光照材质（Materials）、光照图（Lighting maps）以及各种投光物（Light casters）。本教程将结合上述所学的知识，创建一个包含六个光源的场景。我们将模拟一个类似阳光的平行光（Directional light）和4个定点光（Point lights）以及一个手电筒(Flashlight).
|
||||
|
||||
要在场景中使用多光源我们需要封装一些GLSL函数用来计算光照。如果我们对每个光源都去写一遍光照计算的代码，这将是一件令人恶心的事情，并且这些放在main函数中的代码将难以理解，所以我们将一些操作封装为函数。
|
||||
|
||||
GLSL中的函数与C语言的非常相似，它需要一个函数名、一个返回值类型。并且在调用前必须提前声明。接下来我们将为下面的每一种光照来写一个函数。
|
||||
|
||||
当我们在场景中使用多个光源时一般使用以下途径：创建一个代表输出颜色的向量。每一个光源都对输出颜色贡献一些颜色。因此，场景中的每个光源将进行独立运算，并且运算结果都对最终的输出颜色有一定影响。下面是使用这种方式进行多光源运算的一般结构：
|
||||
|
||||
```c++
|
||||
out vec4 color;
|
||||
|
||||
void main()
|
||||
{
|
||||
// 定义输出颜色
|
||||
vec3 output;
|
||||
// 将平行光的运算结果颜色添加到输出颜色
|
||||
output += someFunctionToCalculateDirectionalLight();
|
||||
// 同样，将定点光的运算结果颜色添加到输出颜色
|
||||
for(int i = 0; i < nr_of_point_lights; i++)
|
||||
output += someFunctionToCalculatePointLight();
|
||||
// 添加其他光源的计算结果颜色（如投射光）
|
||||
output += someFunctionToCalculateSpotLight();
|
||||
|
||||
color = vec4(output, 1.0);
|
||||
}
|
||||
```
|
||||
|
||||
即使对每一种光源的运算实现不同，但此算法的结构一般是与上述出入不大的。我们将定义几个用于计算各个光源的函数，并将这些函数的结算结果（返回颜色）添加到输出颜色向量中。例如，靠近被照射物体的光源计算结果将返回比远离背照射物体的光源更明亮的颜色。
|
||||
|
||||
## 平行光（Directional light）
|
||||
|
||||
我们要在片段着色器中定义一个函数用来计算平行光在对应的照射点上的光照颜色，这个函数需要几个参数并返回一个计算平行光照结果的颜色。
|
||||
|
||||
首先我们需要设置一系列用于表示平行光的变量，正如上一节中所讲过的，我们可以将这些变量定义在一个叫做**DirLight**的结构体中，并定义一个这个结构体类型的uniform变量。
|
||||
|
||||
```c++
|
||||
struct DirLight {
|
||||
vec3 direction;
|
||||
|
||||
vec3 ambient;
|
||||
vec3 diffuse;
|
||||
vec3 specular;
|
||||
};
|
||||
uniform DirLight dirLight;
|
||||
```
|
||||
|
||||
之后我们可以将`dirLight`这个uniform变量作为下面这个函数原型的参数。
|
||||
|
||||
```c++
|
||||
vec3 CalcDirLight(DirLight light, vec3 normal, vec3 viewDir);
|
||||
```
|
||||
|
||||
!!! Important
|
||||
|
||||
和C/C++一样，我们调用一个函数的前提是这个函数在调用前已经被声明过（此例中我们是在main函数中调用）。通常情况下我们都将函数定义在main函数之后，为了能在main函数中调用这些函数，我们就必须在main函数之前声明这些函数的原型，这就和我们写C语言是一样的。
|
||||
|
||||
你已经知道，这个函数需要一个`DirLight`和两个其他的向量作为参数来计算光照。如果你看过之前的教程的话，你会觉得下面的函数定义得一点也不意外：
|
||||
|
||||
```c++
|
||||
vec3 CalcDirLight(DirLight light, vec3 normal, vec3 viewDir)
|
||||
{
|
||||
vec3 lightDir = normalize(-light.direction);
|
||||
// 计算漫反射强度
|
||||
float diff = max(dot(normal, lightDir), 0.0);
|
||||
// 计算镜面反射强度
|
||||
vec3 reflectDir = reflect(-lightDir, normal);
|
||||
float spec = pow(max(dot(viewDir, reflectDir), 0.0), material.shininess);
|
||||
// 合并各个光照分量
|
||||
vec3 ambient = light.ambient * vec3(texture(material.diffuse, TexCoords));
|
||||
vec3 diffuse = light.diffuse * diff * vec3(texture(material.diffuse, TexCoords));
|
||||
vec3 specular = light.specular * spec * vec3(texture(material.specular, TexCoords));
|
||||
return (ambient + diffuse + specular);
|
||||
}
|
||||
```
|
||||
|
||||
我们从之前的教程中复制了代码，并用两个向量来作为函数参数来计算出平行光的光照颜色向量，该结果是一个由该平行光的环境反射、漫反射和镜面反射的各个分量组成的一个向量。
|
||||
|
||||
## 定点光（Point light）
|
||||
|
||||
和计算平行光一样，我们同样需要定义一个函数用于计算定点光照。同样的，我们定义一个包含定点光源所需属性的结构体：
|
||||
|
||||
```c++
|
||||
struct PointLight {
|
||||
vec3 position;
|
||||
|
||||
float constant;
|
||||
float linear;
|
||||
float quadratic;
|
||||
|
||||
vec3 ambient;
|
||||
vec3 diffuse;
|
||||
vec3 specular;
|
||||
};
|
||||
#define NR_POINT_LIGHTS 4
|
||||
uniform PointLight pointLights[NR_POINT_LIGHTS];
|
||||
```
|
||||
|
||||
如你所见，我们在GLSL中使用预处理器指令来定义定点光源的数目。之后我们使用这个`NR_POINT_LIGHTS`常量来创建一个`PointLight`结构体的数组。和C语言一样，GLSL也是用一对中括号来创建数组的。现在我们有了4个`PointLight`结构体对象了。
|
||||
|
||||
!!! Important
|
||||
|
||||
我们同样可以简单粗暴地定义一个大号的结构体（而不是为每一种类型的光源定义一个结构体），它包含所有类型光源所需要属性变量。并且将这个结构体应用与所有的光照计算函数，在各个光照结算时忽略不需要的属性变量。然而，就我个人来说更喜欢分开定义，这样可以省下一些内存，因为定义一个大号的光源结构体在计算过程中会有用不到的变量。
|
||||
|
||||
```c++
|
||||
vec3 CalcPointLight(PointLight light, vec3 normal, vec3 fragPos, vec3 viewDir);
|
||||
```
|
||||
|
||||
这个函数将所有用得到的数据作为它的参数并使用一个`vec3`作为它的返回值类表示一个顶点光的结算结果。我们再一次聪明地从之前的教程中复制代码来把它定义成下面的样子：
|
||||
|
||||
```c++
|
||||
// 计算定点光在确定位置的光照颜色
|
||||
vec3 CalcPointLight(PointLight light, vec3 normal, vec3 fragPos, vec3 viewDir)
|
||||
{
|
||||
vec3 lightDir = normalize(light.position - fragPos);
|
||||
// 计算漫反射强度
|
||||
float diff = max(dot(normal, lightDir), 0.0);
|
||||
// 计算镜面反射
|
||||
vec3 reflectDir = reflect(-lightDir, normal);
|
||||
float spec = pow(max(dot(viewDir, reflectDir), 0.0), material.shininess);
|
||||
// 计算衰减
|
||||
float distance = length(light.position - fragPos);
|
||||
float attenuation = 1.0f / (light.constant + light.linear * distance +
|
||||
light.quadratic * (distance * distance));
|
||||
// 将各个分量合并
|
||||
vec3 ambient = light.ambient * vec3(texture(material.diffuse, TexCoords));
|
||||
vec3 diffuse = light.diffuse * diff * vec3(texture(material.diffuse, TexCoords));
|
||||
vec3 specular = light.specular * spec * vec3(texture(material.specular, TexCoords));
|
||||
ambient *= attenuation;
|
||||
diffuse *= attenuation;
|
||||
specular *= attenuation;
|
||||
return (ambient + diffuse + specular);
|
||||
}
|
||||
```
|
||||
|
||||
有了这个函数我们就可以在main函数中调用它来代替写很多个计算点光源的代码了。通过循环调用此函数就能实现同样的效果，当然代码更简洁。
|
||||
|
||||
## 把它们放到一起
|
||||
|
||||
我们现在定义了用于计算平行光和定点光的函数，现在我们把这些代码放到一起，写入文开始的一般结构中：
|
||||
|
||||
```c++
|
||||
void main()
|
||||
{
|
||||
// 一些属性
|
||||
vec3 norm = normalize(Normal);
|
||||
vec3 viewDir = normalize(viewPos - FragPos);
|
||||
|
||||
// 第一步，计算平行光照
|
||||
vec3 result = CalcDirLight(dirLight, norm, viewDir);
|
||||
// 第二步，计算顶点光照
|
||||
for(int i = 0; i < NR_POINT_LIGHTS; i++)
|
||||
result += CalcPointLight(pointLights[i], norm, FragPos, viewDir);
|
||||
// 第三部，计算 Spot light
|
||||
//result += CalcSpotLight(spotLight, norm, FragPos, viewDir);
|
||||
|
||||
color = vec4(result, 1.0);
|
||||
}
|
||||
```
|
||||
|
||||
每一个光源的运算结果都添加到了输出颜色上，输出颜色包含了此场景中的所有光源的影响。如果你想实现手电筒的光照效果，同样的把计算结果添加到输出颜色上。我在这里就把`CalcSpotLight`的实现留作个读者们的练习吧。
|
||||
|
||||
设置平行光结构体的uniform值和之前所讲过的方式没什么两样，但是你可能想知道如何设置场景中`PointLight`结构体的uniforms变量数组。我们之前并未讨论过如何做这件事。
|
||||
|
||||
庆幸的是，这并不是什么难题。设置uniform变量数组和设置单个uniform变量值是相似的，只需要用一个合适的下标就能够检索到数组中我们想要的uniform变量了。
|
||||
|
||||
```c++
|
||||
glUniform1f(glGetUniformLocation(lightingShader.Program, "pointLights[0].constant"), 1.0f);
|
||||
```
|
||||
|
||||
这样我们检索到`pointLights`数组中的第一个`PointLight`结构体元素，同时也可以获取到该结构体中的各个属性变量。不幸的是这一位置我们还需要手动对这个四个光源的每一个属性都进行设置，这样手动设置这28个uniform变量是相当乏味的工作。你可以尝试去定义个光源类来为你设置这些uniform属性来减少你的工作，但这依旧不能改变去设置每个uniform属性的事实。
|
||||
|
||||
别忘了，我们还需要为每个光源设置它们的位置。这里，我们定义一个`glm::vec3`类的数组来包含这些点光源的坐标：
|
||||
|
||||
```c++
|
||||
glm::vec3 pointLightPositions[] = {
|
||||
glm::vec3( 0.7f, 0.2f, 2.0f),
|
||||
glm::vec3( 2.3f, -3.3f, -4.0f),
|
||||
glm::vec3(-4.0f, 2.0f, -12.0f),
|
||||
glm::vec3( 0.0f, 0.0f, -3.0f)
|
||||
};
|
||||
```
|
||||
|
||||
同时我们还需要根据这些光源的位置在场景中绘制4个表示光源的立方体，这样的工作我们在之前的教程中已经做过了。
|
||||
|
||||
如果你在还是用了手电筒的话，将所有的光源结合起来看上去应该和下图差不多：
|
||||
|
||||
|
||||
|
||||
你可以在此处获取本教程的[源代码](http://learnopengl.com/code_viewer.php?code=lighting/multiple_lights)，同时可以查看[顶点着色器](http://learnopengl.com/code_viewer.php?code=lighting/lighting_maps&type=vertex)和[片段着色器](http://learnopengl.com/code_viewer.php?code=lighting/multiple_lights&type=fragment)的代码。
|
||||
|
||||
上面的图片的光源都是使用默认的属性的效果，如果你尝试对光源属性做出各种修改尝试的话，会出现很多有意思的画面。很多艺术家和场景编辑器都提供大量的按钮或方式来修改光照以使用各种环境。使用最简单的光照属性的改变我们就足已创建有趣的视觉效果：
|
||||
|
||||
|
||||
|
||||
相信你现在已经对OpenGL的光照有很好的理解了。有了这些知识我们便可以创建丰富有趣的环境和氛围了。快试试改变所有的属性的值来创建你的光照环境吧！
|
||||
|
||||
## 练习
|
||||
|
||||
* 创建一个表示手电筒光的结构体Spotlight并实现CalcSpotLight(...)函数：[解决方案](http://learnopengl.com/code_viewer.php?code=lighting/multiple_lights-exercise1)
|
||||
* 你能通过调节不同的光照属性来重新创建一个不同的氛围吗？[解决方案](http://learnopengl.com/code_viewer.php?code=lighting/multiple_lights-exercise2)
|
||||
43
docs/02 Lighting/07 Review.md
Normal file
43
docs/02 Lighting/07 Review.md
Normal file
@@ -0,0 +1,43 @@
|
||||
# 复习
|
||||
|
||||
原文 | [Review](http://learnopengl.com/#!Lighting/Review)
|
||||
---|---
|
||||
作者 | JoeyDeVries
|
||||
翻译 | Meow J
|
||||
校对 | [Geequlim](http://geequlim.com)
|
||||
|
||||
恭喜您已经学习到了这个地方！辛苦啦！不知道你有没有注意到，总的来说我们在学习光照教程的时候学习的并不是OpenGL本身，当然我们仍然学习了一些细枝末节的知识(像访问uniform数组)。
|
||||
|
||||
到现在的所有教程都是关于用一些技巧和公式来操作着色器从而达到真实的光照效果。这同样向你展示了着色器的威力。
|
||||
|
||||
着色器是非常灵活的，你也亲眼见证了我们仅仅使用一些3D向量和可配置的变量就能够创造出惊人的图形这一点。
|
||||
|
||||
在你学过的最后几个教程中，你学习了有关颜色，冯氏光照模型(包括环境，漫反射，镜面反射光照)，对象材质，可配置的光照属性，漫反射和镜面反射贴图，不同种类的光，并且学习了怎样将所有所学知识融会贯通。
|
||||
|
||||
记得去实验一下不同的光照，材质颜色，光照属性，并且试着利用你无穷的创造力创建自己的环境。
|
||||
|
||||
在[下一个教程](http://learnopengl-cn.readthedocs.org/zh/latest/03%20Model%20Loading/01%20Assimp/)当中，我们将加入更高级的形状到我们的场景中，这些形状将会在我们之前讨论过的光照模型中非常好看。
|
||||
|
||||
词汇表
|
||||
--------
|
||||
|
||||
- **颜色向量(Color Vector)**：一个通过红绿蓝(RGB)分量的组合描绘大部分真实颜色的向量. 一个对象的颜色实际上是该对象不能吸收的反射颜色分量。
|
||||
- **冯氏光照模型(Phong Lighting Model)**：一个通过计算环境，漫反射，和镜面反射分量的值来估计真实光照的模型。
|
||||
- **环境光照(Ambient Lighting)**：通过给每个没有被光照的物体很小的亮度，使其不是完全黑暗的，从而对全局光照的估计。
|
||||
- **漫反射着色法(Diffuse Shading)**：光照随着更多的顶点/片段排列在光源上变强. 该方法使用了法向量来计算角度。
|
||||
- **法向量(Normal Vector)**：一个垂直于平面的单位向量。
|
||||
- **正规矩阵(Normal Matrix)**：一个3x3矩阵, 或者说是没有平移的模型(或者模型观察)矩阵.它也被以某种方式修改(逆转置)从而当应用非统一缩放时保持法向量朝向正确的方向. 否则法向量会在使用非统一缩放时失真。
|
||||
- **镜面光照(Specular Lighting)**：(sets a specular highlight the closer the viewer is looking at the reflection of a light source on a surface.待翻译). 镜面光照是由观察者的方向，光源的方向和设定高光分散量的反光度值三个量共同决定的。
|
||||
- **冯氏着色法(Phong Shading)**：冯氏光照模型应用在片段着色器。
|
||||
- **高氏着色法(Gouraud shading)**：冯氏光照模型应用在顶点着色器上. 在使用很少树木的顶点时会产生明显的瑕疵. 会得到效率提升但是损失了视觉质量。
|
||||
- **GLSL结构体(GLSL struct)**：一个类似于C的结构体，用作着色器变量的容器. 大部分时间用来管理输入/输出/uniform。
|
||||
- **材质(Material)**：一个物体反射的环境，漫反射，镜面反射光照. 这些东西设定了物体的颜色。
|
||||
- **光照(性质)(Light(properties)**：一个光的环境，漫反射，镜面反射的强度. 可以应用任何颜色值并对每一个冯氏分量(Phong Component)都定义一个光源闪烁的颜色/强度。
|
||||
- **漫反射贴图(Diffuse Map)**：一个设定了每个片段中漫反射颜色的纹理图片。
|
||||
- **镜面贴图(Specular Map)**：一个设定了每一个片段的镜面强度/颜色的纹理贴图. 仅在物体的特定区域允许镜面高光。
|
||||
- **平行光(Directional Light)**：只有一个方向的光源. 它被建模为不管距离有多长所有光束都是平行而且其方向向量在整个场景中保持不变。
|
||||
- **点光源(Point Light)**：一个场景中光线逐渐淡出的光源。
|
||||
- **衰减(Attenuation)**：光减少强度的过程，通常使用在点光源和聚光下。
|
||||
- **聚光(Spotlight)**：一个被定义为在某一个方向上锥形的光源。
|
||||
- **手电筒(Flashlight)**：一个摆放在观察者视角的聚光。
|
||||
- **GLSL uniform数组(GLSL Uniform Array)**：一个数组的uniform值. 就像C语言数组一样工作，只是不能被动态调用。
|
||||
Reference in New Issue
Block a user