视频网站免费送会员怎么做,找做网站的客户,系统开发报价清单,类似闲鱼网站怎么做为什么要引入法线贴图
我们的场景中已经充满了多边形物体#xff0c;其中每个都可能由成百上千平坦的三角形组成。我们以向三角形上附加纹理的方式来增加额外细节#xff0c;提升真实感#xff0c;隐藏多边形几何体是由无数三角形组成的事实。纹理确有助益#xff0c;然而…为什么要引入法线贴图
我们的场景中已经充满了多边形物体其中每个都可能由成百上千平坦的三角形组成。我们以向三角形上附加纹理的方式来增加额外细节提升真实感隐藏多边形几何体是由无数三角形组成的事实。纹理确有助益然而当你近看它们时这个事实便隐藏不住了。现实中的物体表面并非是平坦的而是表现出无数凹凸不平的细节。
例如砖块的表面。砖块的表面非常粗糙显然不是完全平坦的它包含着接缝处水泥凹痕以及非常多的细小的空洞。如果我们在一个有光的场景中看这样一个砖块的表面问题就出来了。下图中我们可以看到砖块纹理应用到了平坦的表面并被一个点光源照亮。 光照并没有呈现出任何裂痕和孔洞完全忽略了砖块之间凹进去的线条表面看起来完全就是平的。我们可以使用specular贴图根据深度或其他细节阻止部分表面被照的更亮以此部分地解决问题但这并不是一个好方案。我们需要的是某种可以告知光照系统给所有有关物体表面类似深度这样的细节的方式。
如果我们以光的视角来看这个问题是什么使表面被视为完全平坦的表面来照亮答案会是表面的法线向量。以光照算法的视角考虑的话只有一件事决定物体的形状这就是垂直于它的法线向量。砖块表面只有一个法线向量表面完全根据这个法线向量被以一致的方式照亮。如果每个fragment都是用自己的不同的法线会怎样这样我们就可以根据表面细微的细节对法线向量进行改变这样就会获得一种表面看起来要复杂得多的幻觉 每个fragment使用了自己的法线我们就可以让光照相信一个表面由很多微小的垂直于法线向量的平面所组成物体表面的细节将会得到极大提升。这种每个fragment使用各自的法线替代一个面上所有fragment使用同一个法线的技术叫做法线贴图normal mapping或凹凸贴图bump mapping。应用到砖墙上效果像这样 你可以看到细节获得了极大提升开销却不大。因为我们只需要改变每个fragment的法线向量并不需要改变所有光照公式。现在我们是为每个fragment传递一个法线不再使用插值表面法线。这样光照使表面拥有了自己的细节。
法线贴图
为使法线贴图工作我们需要为每个fragment提供一个法线。像diffuse贴图和specular贴图一样我们可以使用一个2D纹理来储存法线数据。2D纹理不仅可以储存颜色和光照数据还可以储存法线向量。这样我们可以从2D纹理中采样得到特定纹理的法线向量。
由于法线向量是个几何工具而纹理通常只用于储存颜色信息用纹理储存法线向量不是非常直接。如果你想一想就会知道纹理中的颜色向量用r、g、b元素代表一个3D向量。类似的我们也可以将法线向量的x、y、z元素储存到纹理中代替颜色的r、g、b元素。法线向量的范围在-1到1之间所以我们先要将其映射到0到1的范围
vec3 rgb_normal normal * 0.5 0.5; // 从 [-1,1] 转换至 [0,1]将法线向量变换为像这样的RGB颜色元素我们就能把根据表面的形状的fragment的法线保存在2D纹理中。教程开头展示的那个砖块的例子的法线贴图如下所示 这会是一种偏蓝色调的纹理你在网上找到的几乎所有法线贴图都是这样的。这是因为所有法线的指向都偏向z轴0, 0, 1这是一种偏蓝的颜色。法线向量从z轴方向也向其他方向轻微偏移颜色也就发生了轻微变化这样看起来便有了一种深度。例如你可以看到在每个砖块的顶部颜色倾向于偏绿这是因为砖块的顶部的法线偏向于指向正y轴方向0, 1, 0这样它就是绿色的了。
在一个简单的朝向正z轴的平面上我们可以用这个diffuse纹理和这个法线贴图来渲染前面部分的图片。要注意的是这个链接里的法线贴图和上面展示的那个不一样。原因是OpenGL读取的纹理的y或V坐标和纹理通常被创建的方式相反。链接里的法线贴图的y或绿色元素是相反的你可以看到绿色现在在下边如果你没考虑这个光照就不正确了译注如果你现在不再使用SOIL了那就不要用链接里的那个法线贴图这个问题是SOIL载入纹理上下颠倒所致它也会把法线在y方向上颠倒。加载纹理把它们绑定到合适的纹理单元然后使用下面的改变了的像素着色器来渲染一个平面
uniform sampler2D normalMap; void main()
{ // 从法线贴图范围[0,1]获取法线normal texture(normalMap, fs_in.TexCoords).rgb;// 将法线向量转换为范围[-1,1]normal normalize(normal * 2.0 - 1.0); [...]// 像往常那样处理光照
}这里我们将被采样的法线颜色从0到1重新映射回-1到1便能将RGB颜色重新处理成法线然后使用采样出的法线向量应用于光照的计算。在例子中我们使用的是Blinn-Phong着色器。
通过慢慢随着时间慢慢移动光源你就能明白法线贴图是什么意思了。运行这个例子你就能得到本教程开始的那个效果 然而有个问题限制了刚才讲的那种法线贴图的使用。我们使用的那个法线贴图里面的所有法线向量都是指向正z方向的。上面的例子能用是因为那个平面的表面法线也是指向正z方向的。可是如果我们在表面法线指向正y方向的平面上使用同一个法线贴图会发生什么 光照看起来完全不对发生这种情况是平面的表面法线现在指向了y而采样得到的法线仍然指向的是z。结果就是光照仍然认为表面法线和之前朝向正z方向时一样这样光照就不对了。下面的图片展示了这个表面上采样的法线的近似情况 你可以看到所有法线都指向z方向它们本该朝着表面法线指向y方向的。一个可行方案是为每个表面制作一个单独的法线贴图。如果是一个立方体的话我们就需要6个法线贴图但是如果模型上有无数的朝向不同方向的表面这就不可行了译注实际上对于复杂模型可以把朝向各个方向的法线储存在同一张贴图上你可能看到过不只是蓝色的法线贴图不过用那样的法线贴图有个问题是你必须记住模型的起始朝向如果模型运动了还要记录模型的变换这是非常不方便的此外就像作者所说的如果把一个diffuse纹理应用在同一个物体的不同表面上就像立方体那样的就需要做6个法线贴图这也不可取。
另一个稍微有点难的解决方案是在一个不同的坐标空间中进行光照这个坐标空间里法线贴图向量总是指向这个坐标空间的正z方向所有的光照向量都相对与这个正z方向进行变换。这样我们就能始终使用同样的法线贴图不管朝向问题。这个坐标空间叫做切线空间tangent space。
切线空间
法线贴图中的法线向量定义在切线空间中在切线空间中法线永远指着正z方向。切线空间是位于三角形表面之上的空间法线相对于单个三角形的局部坐标系。它就像法线贴图向量的局部空间它们都被定义为指向正z方向无论最终变换到什么方向。使用一个特定的矩阵我们就能将本地/切线空间中的法线向量转成世界或视图空间下使它们转向到最终的贴图表面的方向。
我们可以说上个部分那个朝向正y的法线贴图错误的贴到了表面上。法线贴图被定义在切线空间中所以一种解决问题的方式是计算出一种矩阵把法线从切线空间变换到一个不同的空间这样它们就能和表面法线方向对齐了法线向量都会指向正y方向。切线空间的一大好处是我们可以为任何类型的表面计算出一个这样的矩阵由此我们可以把切线空间的z方向和表面的法线方向对齐。
这种矩阵叫做TBN矩阵这三个字母分别代表tangent、bitangent和normal向量。这是建构这个矩阵所需的向量。要建构这样一个把切线空间转变为不同空间的变异矩阵我们需要三个相互垂直的向量它们沿一个表面的法线贴图对齐于上、右、前这和我们在摄像机教程中做的类似。
已知上向量是表面的法线向量。右和前向量是切线(Tagent)和副切线(Bitangent)向量。下面的图片展示了一个表面的三个向量 计算出切线和副切线并不像法线向量那么容易。从图中可以看到法线贴图的切线和副切线与纹理坐标的两个方向对齐。我们就是用到这个特性计算每个表面的切线和副切线的。需要用到一些数学才能得到它们请看下图 注意上图中边E2与纹理坐标的差ΔU2、ΔV2构成一个三角形。ΔU2与切线向量T方向相同而ΔV2与副切线向量B方向相同。这也就是说所以我们可以将三角形的边E1与E2写成切线向量\T和副切线向量B的线性组合 我们也可以写成这样 E是两个向量位置的差ΔU和ΔV是纹理坐标的差。然后我们得到两个未知数切线T和副切线B和两个等式。你可能想起你的代数课了这是让我们去解T和B。
上面的方程允许我们把它们写成另一种格式矩阵乘法 尝试会意一下矩阵乘法它们确实是同一种等式。把等式写成矩阵形式的好处是解T和B会因此变得很容易。两边都乘以ΔUΔV的逆矩阵等于 这样我们就可以解出T和B了。这需要我们计算出delta纹理坐标矩阵的逆矩阵。我不打算讲解计算逆矩阵的细节但大致是把它变化为1除以矩阵的行列式再乘以它的伴随矩阵(Adjugate Matrix)。 有了最后这个等式我们就可以用公式、三角形的两条边以及纹理坐标计算出切线向量T和副切线B。
如果你对这些数学内容不理解也不用担心。当你知道我们可以用一个三角形的顶点和纹理坐标因为纹理坐标和切线向量在同一空间中计算出切线和副切线你就已经部分地达到目的了译注上面的推导已经很清楚了如果你不明白可以参考任意线性代数教材就像作者所说的记住求得切线空间的公式也行不过不管怎样都得理解切线空间的含义。 手工计算切线和副切线
这个教程的demo场景中有一个简单的2D平面它朝向正z方向。这次我们会使用切线空间来实现法线贴图所以我们可以使平面朝向任意方向法线贴图仍然能够工作。使用前面讨论的数学方法我们来手工计算出表面的切线和副切线向量。
假设平面使用下面的向量建立起来1、2、3和1、3、4它们是两个三角形
// positions
glm::vec3 pos1(-1.0, 1.0, 0.0);
glm::vec3 pos2(-1.0, -1.0, 0.0);
glm::vec3 pos3(1.0, -1.0, 0.0);
glm::vec3 pos4(1.0, 1.0, 0.0);
// texture coordinates
glm::vec2 uv1(0.0, 1.0);
glm::vec2 uv2(0.0, 0.0);
glm::vec2 uv3(1.0, 0.0);
glm::vec2 uv4(1.0, 1.0);
// normal vector
glm::vec3 nm(0.0, 0.0, 1.0);我们先计算第一个三角形的边和deltaUV坐标
glm::vec3 edge1 pos2 - pos1;
glm::vec3 edge2 pos3 - pos1;
glm::vec2 deltaUV1 uv2 - uv1;
glm::vec2 deltaUV2 uv3 - uv1;有了计算切线和副切线的必备数据我们就可以开始写出来自于前面部分中的下列等式
GLfloat f 1.0f / (deltaUV1.x * deltaUV2.y - deltaUV2.x * deltaUV1.y);tangent1.x f * (deltaUV2.y * edge1.x - deltaUV1.y * edge2.x);
tangent1.y f * (deltaUV2.y * edge1.y - deltaUV1.y * edge2.y);
tangent1.z f * (deltaUV2.y * edge1.z - deltaUV1.y * edge2.z);
tangent1 glm::normalize(tangent1);bitangent1.x f * (-deltaUV2.x * edge1.x deltaUV1.x * edge2.x);
bitangent1.y f * (-deltaUV2.x * edge1.y deltaUV1.x * edge2.y);
bitangent1.z f * (-deltaUV2.x * edge1.z deltaUV1.x * edge2.z);
bitangent1 glm::normalize(bitangent1); [...] // 对平面的第二个三角形采用类似步骤计算切线和副切线我们预先计算出等式的分数部分f然后把它和每个向量的元素进行相应矩阵乘法。如果你把代码和最终的等式对比你会发现这就是直接套用。最后我们还要进行标准化来确保切线/副切线向量最后是单位向量。
因为一个三角形永远是平坦的形状我们只需为每个三角形计算一个切线/副切线它们对于每个三角形上的顶点都是一样的。要注意的是大多数实现通常三角形和三角形之间都会共享顶点。这种情况下开发者通常将每个顶点的法线和切线/副切线等顶点属性平均化以获得更加柔和的效果。我们的平面的三角形之间分享了一些顶点但是因为两个三角形相互并行因此并不需要将结果平均化但无论何时只要你遇到这种情况记住它就是件好事。
最后的切线和副切线向量的值应该是(1, 0, 0)和(0, 1, 0)它们和法线(0, 0, 1)组成相互垂直的TBN矩阵。在平面上显示出来TBN应该是这样的 每个顶点定义了切线和副切线向量我们就可以开始实现正确的法线贴图了。
切线空间法线贴图
为让法线贴图工作我们先得在着色器中创建一个TBN矩阵。我们先将前面计算出来的切线和副切线向量传给顶点着色器作为它的属性
#version 330 core
layout (location 0) in vec3 position;
layout (location 1) in vec3 normal;
layout (location 2) in vec2 texCoords;
layout (location 3) in vec3 tangent;
layout (location 4) in vec3 bitangent;在顶点着色器的main函数中我们创建TBN矩阵
void main()
{[...]vec3 T normalize(vec3(model * vec4(tangent, 0.0)));vec3 B normalize(vec3(model * vec4(bitangent, 0.0)));vec3 N normalize(vec3(model * vec4(normal, 0.0)));mat3 TBN mat3(T, B, N)
}我们先将所有TBN向量变换到我们所操作的坐标系中现在是世界空间我们可以乘以model矩阵。然后我们创建实际的TBN矩阵直接把相应的向量应用到mat3构造器就行。注意如果我们希望更精确的话就不要将TBN向量乘以model矩阵而是使用法线矩阵因为我们只关心向量的方向不关心平移和缩放。
从技术上讲顶点着色器中无需副切线。所有的这三个TBN向量都是相互垂直的所以我们可以在顶点着色器中用T和N向量的叉乘自己计算出副切线vec3 B cross(T, N);
现在我们有了TBN矩阵如果来使用它呢通常来说有两种方式使用它我们会把这两种方式都说明一下
我们直接使用TBN矩阵这个矩阵可以把切线坐标空间的向量转换到世界坐标空间。因此我们把它传给片段着色器中把通过采样得到的法线坐标左乘上TBN矩阵转换到世界坐标空间中这样所有法线和其他光照变量就在同一个坐标系中了。我们也可以使用TBN矩阵的逆矩阵这个矩阵可以把世界坐标空间的向量转换到切线坐标空间。因此我们使用这个矩阵左乘其他光照变量把他们转换到切线空间这样法线和其他光照变量再一次在一个坐标系中了。
我们来看看第一种情况。我们从法线贴图采样得来的法线向量是在切线空间表示的尽管其他光照向量都是在世界空间表示的。把TBN传给像素着色器我们就能将采样得来的切线空间的法线乘以这个TBN矩阵将法线向量变换到和其他光照向量一样的参考空间中。这种方式随后所有光照计算都可以简单的理解。
把TBN矩阵发给像素着色器很简单
out VS_OUT {vec3 FragPos;vec2 TexCoords;mat3 TBN;
} vs_out; void main()
{[...]vs_out.TBN mat3(T, B, N);
}在像素着色器中我们用mat3作为输入变量
in VS_OUT {vec3 FragPos;vec2 TexCoords;mat3 TBN;
} fs_in;有了TBN矩阵我们现在就可以更新法线贴图代码引入切线到世界空间变换
normal texture(normalMap, fs_in.TexCoords).rgb;
normal normalize(normal * 2.0 - 1.0);
normal normalize(fs_in.TBN * normal);因为最后的normal现在在世界空间中了就不用改变其他像素着色器的代码了因为光照代码就是假设法线向量在世界空间中。
我们同样看看第二种情况。我们用TBN矩阵的逆矩阵将所有相关的世界空间向量转变到采样所得法线向量的空间切线空间。TBN的建构还是一样但我们在将其发送给像素着色器之前先要求逆矩阵
vs_out.TBN transpose(mat3(T, B, N));注意这里我们使用transpose函数而不是inverse函数。正交矩阵每个轴既是单位向量同时相互垂直的一大属性是一个正交矩阵的置换矩阵与它的逆矩阵相等。这个属性很重要因为逆矩阵的求得比求置换开销大结果却是一样的。
在像素着色器中我们不用对法线向量变换但我们要把其他相关向量转换到切线空间它们是lightDir和viewDir。这样每个向量还是在同一个空间切线空间中了。
void main()
{ vec3 normal texture(normalMap, fs_in.TexCoords).rgb;normal normalize(normal * 2.0 - 1.0); vec3 lightDir fs_in.TBN * normalize(lightPos - fs_in.FragPos);vec3 viewDir fs_in.TBN * normalize(viewPos - fs_in.FragPos); [...]
}第二种方法看似要做的更多它还需要在像素着色器中进行更多的乘法操作所以为何还用第二种方法呢
将向量从世界空间转换到切线空间有个额外好处我们可以把所有相关向量在顶点着色器中转换到切线空间不用在像素着色器中做这件事。这是可行的因为lightPos和viewPos不是每个fragment运行都要改变对于fs_in.FragPos我们也可以在顶点着色器计算它的切线空间位置。基本上不需要把任何向量在像素着色器中进行变换而第一种方法中就是必须的因为采样出来的法线向量对于每个像素着色器都不一样。
所以现在不是把TBN矩阵的逆矩阵发送给像素着色器而是将切线空间的光源位置观察位置以及顶点位置发送给像素着色器。这样我们就不用在像素着色器里进行矩阵乘法了。这是一个极佳的优化因为顶点着色器通常比像素着色器运行的少。这也是为什么这种方法是一种更好的实现方式的原因。
out VS_OUT {vec3 FragPos;vec2 TexCoords;vec3 TangentLightPos;vec3 TangentViewPos;vec3 TangentFragPos;
} vs_out;uniform vec3 lightPos;
uniform vec3 viewPos;[...]void main()
{ [...]mat3 TBN transpose(mat3(T, B, N));vs_out.TangentLightPos TBN * lightPos;vs_out.TangentViewPos TBN * viewPos;vs_out.TangentFragPos TBN * vec3(model * vec4(position, 0.0));
}在像素着色器中我们使用这些新的输入变量来计算切线空间的光照。因为法线向量已经在切线空间中了光照就有意义了。
将法线贴图应用到切线空间上我们会得到混合教程一开始那个例子相似的结果但这次我们可以将平面朝向各个方向光照一直都会是正确的
glm::mat4 model;
model glm::rotate(model, (GLfloat)glfwGetTime() * -10, glm::normalize(glm::vec3(1.0, 0.0, 1.0)));
glUniformMatrix4fv(modelLoc, 1, GL_FALSE, glm::value_ptr(model));
RenderQuad();看起来是正确的法线贴图 你可以在这里找到源代码、顶点和像素着色器。
复杂物体
我们已经说明了如何通过手工计算切线和副切线向量来使用切线空间和法线贴图。幸运的是计算这些切线和副切线向量对于你来说不是经常能遇到的事大多数时候在模型加载器中实现了一次就行了我们是在使用了Assimp的那个加载器中实现的。
Assimp有个很有用的配置在我们加载模型的时候调用aiProcess_CalcTangentSpace。当aiProcess_CalcTangentSpace应用到Assimp的ReadFile函数时Assimp会为每个加载的顶点计算出柔和的切线和副切线向量它所使用的方法和我们本教程使用的类似。
const aiScene* scene importer.ReadFile(path, aiProcess_Triangulate | aiProcess_FlipUVs | aiProcess_CalcTangentSpace
);我们可以通过下面的代码用Assimp获取计算出来的切线空间
vector.x mesh-mTangents[i].x;
vector.y mesh-mTangents[i].y;
vector.z mesh-mTangents[i].z;
vertex.Tangent vector;然后你还必须更新模型加载器用以从带纹理模型中加载法线贴图。wavefront的模型格式.obj导出的法线贴图有点不一样Assimp的aiTextureType_NORMAL并不会加载它的法线贴图而aiTextureType_HEIGHT却能所以我们经常这样加载它们
vector normalMaps loadMaterialTextures(material, aiTextureType_HEIGHT, texture_normal);当然对于每个模型的类型和文件格式来说都是不同的。同样了解aiProcess_CalcTangentSpace并不能总是很好的工作也很重要。计算切线是需要根据纹理坐标的有些模型制作者使用一些纹理小技巧比如镜像一个模型上的纹理表面时也镜像了另一半的纹理坐标这样当不考虑这个镜像的特别操作的时候Assimp就不考虑结果就不对了。
运行程序用新的模型加载器加载一个有specular和法线贴图的模型看起来会像这样 你可以看到在没有太多点的额外开销的情况下法线贴图难以置信地提升了物体的细节。
使用法线贴图也是一种提升你的场景的表现的重要方式。在使用法线贴图之前你不得不使用相当多的顶点才能表现出一个更精细的网格但使用了法线贴图我们可以使用更少的顶点表现出同样丰富的细节。下图来自Paolo Cignoni图中对比了两种方式 高精度网格和使用法线贴图的低精度网格几乎区分不出来。所以法线贴图不仅看起来漂亮它也是一个将高精度多边形转换为低精度多边形而不失细节的重要工具。
最后一件事
关于法线贴图还有最后一个技巧要讨论它可以在不必花费太多性能开销的情况下稍稍提升画质表现。
当在更大的网格上计算切线向量的时候它们往往有很大数量的共享顶点当法向贴图应用到这些表面时将切线向量平均化通常能获得更好更平滑的结果。这样做有个问题就是TBN向量可能会不能互相垂直这意味着TBN矩阵不再是正交矩阵了。法线贴图可能会稍稍偏移但这仍然可以改进。
使用叫做格拉姆-施密特正交化过程Gram-Schmidt process的数学技巧我们可以对TBN向量进行重正交化这样每个向量就又会重新垂直了。在顶点着色器中我们这样做
vec3 T normalize(vec3(model * vec4(tangent, 0.0)));
vec3 N normalize(vec3(model * vec4(normal, 0.0)));
// re-orthogonalize T with respect to N
T normalize(T - dot(T, N) * N);
// then retrieve perpendicular vector B with the cross product of T and N
vec3 B cross(T, N);mat3 TBN mat3(T, B, N)这样稍微花费一些性能开销就能对法线贴图进行一点提升。看看最后的那个附加资源 Normal Mapping Mathematics视频里面有对这个过程的解释。
