mirror of
https://github.com/LearnOpenGL-CN/LearnOpenGL-CN.git
synced 2025-08-23 04:35:28 +08:00
Merge pull request #292 from SuperAoao/Branch_new-theme_proofread
校对工作,补全一些原文信息
This commit is contained in:
@@ -4,7 +4,7 @@
|
|||||||
---|---
|
---|---
|
||||||
作者 | JoeyDeVries
|
作者 | JoeyDeVries
|
||||||
翻译 | [Geequlim](http://geequlim.com/), Krasjet
|
翻译 | [Geequlim](http://geequlim.com/), Krasjet
|
||||||
校对 | 暂未校对
|
校对 | [AoZhang](https://github.com/SuperAoao)
|
||||||
|
|
||||||
在前面的教程中我们已经简要提到过该如何在OpenGL中使用颜色(Color),但是我们至今所接触到的都是很浅层的知识。本节我们将会更深入地讨论什么是颜色,并且还会为接下来的光照(Lighting)教程创建一个场景。
|
在前面的教程中我们已经简要提到过该如何在OpenGL中使用颜色(Color),但是我们至今所接触到的都是很浅层的知识。本节我们将会更深入地讨论什么是颜色,并且还会为接下来的光照(Lighting)教程创建一个场景。
|
||||||
|
|
||||||
@@ -20,6 +20,10 @@ glm::vec3 coral(1.0f, 0.5f, 0.31f);
|
|||||||
|
|
||||||
你可以看到,白色的阳光实际上是所有可见颜色的集合,物体吸收了其中的大部分颜色。它仅反射了代表物体颜色的部分,被反射颜色的组合就是我们所感知到的颜色(此例中为珊瑚红)。
|
你可以看到,白色的阳光实际上是所有可见颜色的集合,物体吸收了其中的大部分颜色。它仅反射了代表物体颜色的部分,被反射颜色的组合就是我们所感知到的颜色(此例中为珊瑚红)。
|
||||||
|
|
||||||
|
!!! important
|
||||||
|
|
||||||
|
从技术上来说,情况会更复杂一些,但我们将在PBR章节中进一步探讨。
|
||||||
|
|
||||||
这些颜色反射的定律被直接地运用在图形领域。当我们在OpenGL中创建一个光源时,我们希望给光源一个颜色。在上一段中我们有一个白色的太阳,所以我们也将光源设置为白色。当我们把光源的颜色与物体的颜色值相乘,所得到的就是这个物体所反射的颜色(也就是我们所感知到的颜色)。让我们再次审视我们的玩具(这一次它还是珊瑚红),看看如何在图形学中计算出它的反射颜色。我们将这两个颜色向量作分量相乘,结果就是最终的颜色向量了:
|
这些颜色反射的定律被直接地运用在图形领域。当我们在OpenGL中创建一个光源时,我们希望给光源一个颜色。在上一段中我们有一个白色的太阳,所以我们也将光源设置为白色。当我们把光源的颜色与物体的颜色值相乘,所得到的就是这个物体所反射的颜色(也就是我们所感知到的颜色)。让我们再次审视我们的玩具(这一次它还是珊瑚红),看看如何在图形学中计算出它的反射颜色。我们将这两个颜色向量作分量相乘,结果就是最终的颜色向量了:
|
||||||
|
|
||||||
```c++
|
```c++
|
||||||
|
@@ -4,7 +4,7 @@
|
|||||||
---|---
|
---|---
|
||||||
作者 | JoeyDeVries
|
作者 | JoeyDeVries
|
||||||
翻译 | [Django](http://bullteacher.com/), Krasjet, Geequlim, [BLumia](https://github.com/blumia/)
|
翻译 | [Django](http://bullteacher.com/), Krasjet, Geequlim, [BLumia](https://github.com/blumia/)
|
||||||
校对 | 暂未校对
|
校对 | [AoZhang](https://github.com/SuperAoao)
|
||||||
|
|
||||||
现实世界的光照是极其复杂的,而且会受到诸多因素的影响,这是我们有限的计算能力所无法模拟的。因此OpenGL的光照使用的是简化的模型,对现实的情况进行近似,这样处理起来会更容易一些,而且看起来也差不多一样。这些光照模型都是基于我们对光的物理特性的理解。其中一个模型被称为<def>冯氏光照模型</def>(Phong Lighting Model)。冯氏光照模型的主要结构由3个分量组成:环境(Ambient)、漫反射(Diffuse)和镜面(Specular)光照。下面这张图展示了这些光照分量看起来的样子:
|
现实世界的光照是极其复杂的,而且会受到诸多因素的影响,这是我们有限的计算能力所无法模拟的。因此OpenGL的光照使用的是简化的模型,对现实的情况进行近似,这样处理起来会更容易一些,而且看起来也差不多一样。这些光照模型都是基于我们对光的物理特性的理解。其中一个模型被称为<def>冯氏光照模型</def>(Phong Lighting Model)。冯氏光照模型的主要结构由3个分量组成:环境(Ambient)、漫反射(Diffuse)和镜面(Specular)光照。下面这张图展示了这些光照分量看起来的样子:
|
||||||
|
|
||||||
@@ -138,7 +138,7 @@ void main()
|
|||||||
in vec3 FragPos;
|
in vec3 FragPos;
|
||||||
```
|
```
|
||||||
|
|
||||||
现在,所有需要的变量都设置好了,我们可以在片段着色器中添加光照计算了。
|
这个in类型变量将被插入三角形的3维世界位置向量值,形成FragPos向量,即每个片段的世界位置。现在,所有需要的变量都设置好了,我们可以在片段着色器中添加光照计算了。
|
||||||
|
|
||||||
我们需要做的第一件事是计算光源和片段位置之间的方向向量。前面提到,光的方向向量是光源位置向量与片段位置向量之间的向量差。你可能记得在[变换](../01 Getting started/07 Transformations.md)教程中,我们能够简单地通过让两个向量相减的方式计算向量差。我们同样希望确保所有相关向量最后都转换为单位向量,所以我们把法线和最终的方向向量都进行标准化:
|
我们需要做的第一件事是计算光源和片段位置之间的方向向量。前面提到,光的方向向量是光源位置向量与片段位置向量之间的向量差。你可能记得在[变换](../01 Getting started/07 Transformations.md)教程中,我们能够简单地通过让两个向量相减的方式计算向量差。我们同样希望确保所有相关向量最后都转换为单位向量,所以我们把法线和最终的方向向量都进行标准化:
|
||||||
|
|
||||||
@@ -235,7 +235,7 @@ lightingShader.setVec3("viewPos", camera.Position);
|
|||||||
float specularStrength = 0.5;
|
float specularStrength = 0.5;
|
||||||
```
|
```
|
||||||
|
|
||||||
如果我们把它设置为1.0f,我们会得到一个非常亮的镜面光分量,这对于一个珊瑚色的立方体来说有点太多了。下一节教程中我们会讨论如何合理设置这些光照强度,以及它们是如何影响物体的。下一步,我们计算视线方向向量,和对应的沿着法线轴的反射向量:
|
如果我们把它设置为1.0f,我们会得到一个非常亮的镜面光分量,这对于一个珊瑚色的立方体来说有点太多了。[下一节教程](03 Materials.md)中我们会讨论如何合理设置这些光照强度,以及它们是如何影响物体的。下一步,我们计算视线方向向量,和对应的沿着法线轴的反射向量:
|
||||||
|
|
||||||
```
|
```
|
||||||
vec3 viewDir = normalize(viewPos - FragPos);
|
vec3 viewDir = normalize(viewPos - FragPos);
|
||||||
@@ -281,6 +281,6 @@ FragColor = vec4(result, 1.0);
|
|||||||
## 练习
|
## 练习
|
||||||
|
|
||||||
- 目前,我们的光源是静止的,你可以尝试使用<fun>sin</fun>或<fun>cos</fun>函数让光源在场景中来回移动。观察光照随时间的改变能让你更容易理解冯氏光照模型。[参考解答](https://learnopengl.com/code_viewer.php?code=lighting/basic_lighting-exercise1)。
|
- 目前,我们的光源是静止的,你可以尝试使用<fun>sin</fun>或<fun>cos</fun>函数让光源在场景中来回移动。观察光照随时间的改变能让你更容易理解冯氏光照模型。[参考解答](https://learnopengl.com/code_viewer.php?code=lighting/basic_lighting-exercise1)。
|
||||||
- 尝试使用不同的环境光、漫反射和镜面强度,观察它们怎么是影响光照效果的。同样,尝试实验一下镜面光照的反光度因子。尝试理解为什么某一个值能够有着某一种视觉输出。
|
- 尝试使用不同的环境光、漫反射和镜面强度,观察它们怎么是影响光照效果的。同样,尝试实验一下镜面光照的反光度因子。尝试理解为什么某一个值能够有着特定视觉输出。
|
||||||
- 在观察空间(而不是世界空间)中计算冯氏光照:[参考解答](https://learnopengl.com/code_viewer.php?code=lighting/basic_lighting-exercise2)。
|
- 在观察空间(而不是世界空间)中计算冯氏光照:[参考解答](https://learnopengl.com/code_viewer.php?code=lighting/basic_lighting-exercise2)。
|
||||||
- 尝试实现一个Gouraud着色(而不是冯氏着色)。如果你做对了话,立方体的光照应该会[看起来有些奇怪](../img/02/02/basic_lighting_exercise3.png),尝试推理为什么它会看起来这么奇怪:[参考解答](https://learnopengl.com/code_viewer.php?code=lighting/basic_lighting-exercise3)。
|
- 尝试实现一个Gouraud着色(而不是冯氏着色)。如果你做对了话,立方体的光照应该会[看起来有些奇怪](../img/02/02/basic_lighting_exercise3.png),尝试推理为什么它会看起来这么奇怪:[参考解答](https://learnopengl.com/code_viewer.php?code=lighting/basic_lighting-exercise3)。
|
||||||
|
@@ -4,7 +4,7 @@
|
|||||||
---|---
|
---|---
|
||||||
作者 | JoeyDeVries
|
作者 | JoeyDeVries
|
||||||
翻译 | Krasjet
|
翻译 | Krasjet
|
||||||
校对 | 暂未校对
|
校对 | [AoZhang](https://github.com/SuperAoao)
|
||||||
|
|
||||||
在现实世界里,每个物体会对光产生不同的反应。比如,钢制物体看起来通常会比陶土花瓶更闪闪发光,一个木头箱子也不会与一个钢制箱子反射同样程度的光。有些物体反射光的时候不会有太多的散射(Scatter),因而产生较小的高光点,而有些物体则会散射很多,产生一个有着更大半径的高光点。如果我们想要在OpenGL中模拟多种类型的物体,我们必须针对每种表面定义不同的<def>材质</def>(Material)属性。
|
在现实世界里,每个物体会对光产生不同的反应。比如,钢制物体看起来通常会比陶土花瓶更闪闪发光,一个木头箱子也不会与一个钢制箱子反射同样程度的光。有些物体反射光的时候不会有太多的散射(Scatter),因而产生较小的高光点,而有些物体则会散射很多,产生一个有着更大半径的高光点。如果我们想要在OpenGL中模拟多种类型的物体,我们必须针对每种表面定义不同的<def>材质</def>(Material)属性。
|
||||||
|
|
||||||
|
@@ -4,7 +4,7 @@
|
|||||||
---|---
|
---|---
|
||||||
作者 | JoeyDeVries
|
作者 | JoeyDeVries
|
||||||
翻译 | Krasjet
|
翻译 | Krasjet
|
||||||
校对 | 暂未校对
|
校对 | [AoZhang](https://github.com/SuperAoao)
|
||||||
|
|
||||||
在[上一节](03 Materials.md)中,我们讨论了让每个物体都拥有自己独特的材质从而对光照做出不同的反应的方法。这样子能够很容易在一个光照的场景中给每个物体一个独特的外观,但是这仍不能对一个物体的视觉输出提供足够多的灵活性。
|
在[上一节](03 Materials.md)中,我们讨论了让每个物体都拥有自己独特的材质从而对光照做出不同的反应的方法。这样子能够很容易在一个光照的场景中给每个物体一个独特的外观,但是这仍不能对一个物体的视觉输出提供足够多的灵活性。
|
||||||
|
|
||||||
@@ -16,7 +16,7 @@
|
|||||||
|
|
||||||
我们希望通过某种方式对物体的每个片段单独设置漫反射颜色。有能够让我们根据片段在物体上的位置来获取颜色值的系统吗?
|
我们希望通过某种方式对物体的每个片段单独设置漫反射颜色。有能够让我们根据片段在物体上的位置来获取颜色值的系统吗?
|
||||||
|
|
||||||
这可能听起来很熟悉,而且事实上这个系统我们已经使用很长时间了。这听起来很像在[之前](../01 Getting started/06 Textures.md)教程中详细讨论过的**纹理**,而这基本就是这样:一个纹理。我们仅仅是对同样的原理使用了不同的名字:其实都是使用一张覆盖物体的图像,让我们能够逐片段索引其独立的颜色值。在光照场景中,它通常叫做一个<def>漫反射贴图</def>(Diffuse Map)(3D艺术家通常都这么叫它),它是一个表现了物体所有的漫反射颜色的纹理图像。
|
这可能听起来很熟悉,而且事实上这个系统我们已经使用很长时间了。这听起来很像在[之前](../01 Getting started/06 Textures.md)教程中详细讨论过的**纹理**,而这基本就是这样:一个纹理。我们仅仅是对同样的原理使用了不同的名字:其实都是使用一张覆盖物体的图像,让我们能够逐片段索引其独立的颜色值。在光照场景中,它通常叫做一个<def>漫反射贴图</def>(Diffuse Map)(在PBR之前3D艺术家通常都这么叫它),它是一个表现了物体所有的漫反射颜色的纹理图像。
|
||||||
|
|
||||||
为了演示漫反射贴图,我们将会使用[下面的图片](../img/02/04/container2.png),它是一个有钢边框的木箱:
|
为了演示漫反射贴图,我们将会使用[下面的图片](../img/02/04/container2.png),它是一个有钢边框的木箱:
|
||||||
|
|
||||||
|
@@ -4,9 +4,9 @@
|
|||||||
----- | ----
|
----- | ----
|
||||||
作者 | JoeydeVries
|
作者 | JoeydeVries
|
||||||
翻译 | Krasjet
|
翻译 | Krasjet
|
||||||
校对 | 暂无
|
校对 | [AoZhang](https://github.com/SuperAoao)
|
||||||
|
|
||||||
图形编程可以带来很多的乐趣,然而如果什么东西渲染错误,或者甚至根本就没有渲染,它同样可以给你带来大量的沮丧感!由于我们大部分时间都在与像素打交道,当出现错误的时候寻找错误的源头可能会非常困难。调试(Debug)这样的**视觉**错误与往常熟悉的CPU调试不同。我们没有一个可以用来输出文本的控制台,在GLSL代码中也不能设置断点,更没有方法检测GPU的运行状态。
|
图形编程可以带来很多的乐趣,然而如果什么东西渲染错误,或者甚至根本就没有渲染,它同样可以给你带来大量的沮丧感!由于我们大部分时间都在与像素打交道,当出现错误的时候寻找错误的源头可能会非常困难。调试(Debug)这样的**视觉**错误与往常熟悉的CPU调试不同。我们没有一个可以用来输出文本的控制台,在GLSL代码中也不能设置断点,更没有方法方便地检测GPU的运行状态。
|
||||||
|
|
||||||
在这篇教程中,我们将来见识几个调试OpenGL程序的技巧。OpenGL中的调试并不是很难,掌握住这些技巧对之后的学习会有非常大的帮助。
|
在这篇教程中,我们将来见识几个调试OpenGL程序的技巧。OpenGL中的调试并不是很难,掌握住这些技巧对之后的学习会有非常大的帮助。
|
||||||
|
|
||||||
@@ -52,7 +52,7 @@ std::cout << glGetError() << std::endl; // 返回 1281 (非法值)
|
|||||||
std::cout << glGetError() << std::endl; // 返回 0 (无错误)
|
std::cout << glGetError() << std::endl; // 返回 0 (无错误)
|
||||||
```
|
```
|
||||||
|
|
||||||
<fun>glGetError</fun>非常棒的一点就是它能够非常简单地定位错误可能的来源,并且验证OpenGL使用的正确性。比如说你获得了一个黑屏的结果但是不知道什么造成了它:是不是帧缓冲设置错误?是不是我忘记绑定纹理了?通过在代码中各处调用<fun>glGetError</fun>,你可以非常快速地查明OpenGL错误开始出现的位置,这也就意味着这次调用之前的代码中哪里出错了。
|
<fun>glGetError</fun>非常棒的一点就是它能够非常简单地定位错误可能的来源,并且验证OpenGL使用的正确性。比如说你获得了一个黑屏的结果但是不知道什么造成了它:是不是帧缓冲设置错误?是不是我忘记绑定纹理了?通过在整个代码库中调用<fun>glGetError</fun>,您可以快速捕获OpenGL错误开始出现的第一个地方。
|
||||||
|
|
||||||
默认情况下<fun>glGetError</fun>只会打印错误数字,如果你不去记忆的话会非常难以理解。通常我们会写一个助手函数来简便地打印出错误字符串以及错误检测函数调用的位置。
|
默认情况下<fun>glGetError</fun>只会打印错误数字,如果你不去记忆的话会非常难以理解。通常我们会写一个助手函数来简便地打印出错误字符串以及错误检测函数调用的位置。
|
||||||
|
|
||||||
@@ -391,7 +391,7 @@ RenderDoc是另外一个很棒的(完全[开源](https://github.com/baldurk/re
|
|||||||
|
|
||||||
### NVIDIA Nsight
|
### NVIDIA Nsight
|
||||||
|
|
||||||
NVIDIA流行的[Nsight](https://developer.nvidia.com/nvidia-nsight-visual-studio-edition) GPU调试工具并不是一个独立程序,而是一个Visual Studio IDE或者Eclipse IDE的插件。Nsight插件对图形开发者来说非常容易使用,因为它给出了GPU用量,逐帧GPU状态大量运行时的统计数据。
|
NVIDIA流行的[Nsight](https://developer.nvidia.com/nvidia-nsight-visual-studio-edition) GPU调试工具并不是一个独立程序,而是一个Visual Studio IDE或者Eclipse IDE的插件 (NVIDIA现在也提供独立版本了)。Nsight插件对图形开发者来说非常容易使用,因为它给出了GPU用量,逐帧GPU状态大量运行时的统计数据。
|
||||||
|
|
||||||
当你在Visual Studio(或Eclipse)使用Nsight的调试或者性能测试指令启动程序的时候,Nsight将会在程序自身中运行。Nsight非常棒的一点就是它在你的程序中渲染了一套GUI系统,你可以使用它获取你程序各种各样有用的信息,可以是运行时也可以是逐帧分析。
|
当你在Visual Studio(或Eclipse)使用Nsight的调试或者性能测试指令启动程序的时候,Nsight将会在程序自身中运行。Nsight非常棒的一点就是它在你的程序中渲染了一套GUI系统,你可以使用它获取你程序各种各样有用的信息,可以是运行时也可以是逐帧分析。
|
||||||
|
|
||||||
|
Binary file not shown.
Before Width: | Height: | Size: 71 KiB After Width: | Height: | Size: 55 KiB |
Binary file not shown.
Before Width: | Height: | Size: 72 KiB After Width: | Height: | Size: 46 KiB |
Reference in New Issue
Block a user