mirrors/lwjglbook-CN-Translation
1
0
Fork 0
mirror of https://github.com/mouse0w0/lwjglbook-CN-Translation.git synced 2025-08-23 04:35:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

Deployed 7ff35d0 with MkDocs version: 1.2.2

Browse Source
This commit is contained in:
Mouse
2021-09-27 13:57:47 +08:00
commit 306a444cc6
288 changed files with 23754 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

407
17-normal-mapping/index.html Executable file
View File

@@ -0,0 +1,407 @@
<!DOCTYPE html>
<!--[if IE 8]><html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Mouse0w0">
<link rel="shortcut icon" href="../img/favicon.ico">
<title>法线贴图 - Lwjglbook中文翻译</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700|Roboto+Slab:400,700|Inconsolata:400,700" />
<link rel="stylesheet" href="../css/theme.css" />
<link rel="stylesheet" href="../css/theme_extra.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/github.min.css" />
<script>
// Current page data
var mkdocs_page_name = "\u6cd5\u7ebf\u8d34\u56fe";
var mkdocs_page_input_path = "17-normal-mapping.md";
var mkdocs_page_url = null;
</script>
<script src="../js/jquery-2.1.1.min.js" defer></script>
<script src="../js/modernizr-2.8.3.min.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body class="wy-body-for-nav" role="document">
<div class="wy-grid-for-nav">
<nav data-toggle="wy-nav-shift" class="wy-nav-side stickynav">
<div class="wy-side-scroll">
<div class="wy-side-nav-search">
<a href=".." class="icon icon-home"> Lwjglbook中文翻译</a>
<div role="search">
<form id ="rtd-search-form" class="wy-form" action="../search.html" method="get">
<input type="text" name="q" placeholder="Search docs" title="Type search term here" />
</form>
</div>
</div>
<div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="main navigation">
<ul>
<li class="toctree-l1"><a class="reference internal" href="../01-first-steps/">事前准备</a>
</li>
</ul>
<ul>
<li class="toctree-l1"><a class="reference internal" href="../02-the-game-loop/">游戏循环</a>
</li>
</ul>
<ul>
<li class="toctree-l1"><a class="reference internal" href="../03-a-brief-about-coordinates/">坐标简介</a>
</li>
</ul>
<ul>
<li class="toctree-l1"><a class="reference internal" href="../04-rendering/">渲染</a>
</li>
</ul>
<ul>
<li class="toctree-l1"><a class="reference internal" href="../05-more-on-rendering/">渲染补充</a>
</li>
</ul>
<ul>
<li class="toctree-l1"><a class="reference internal" href="../06-transformations/">变换</a>
</li>
</ul>
<ul>
<li class="toctree-l1"><a class="reference internal" href="../07-textures/">纹理</a>
</li>
</ul>
<ul>
<li class="toctree-l1"><a class="reference internal" href="../08-camera/">摄像机</a>
</li>
</ul>
<ul>
<li class="toctree-l1"><a class="reference internal" href="../09-loading-more-complex-models/">加载更复杂的模型</a>
</li>
</ul>
<ul>
<li class="toctree-l1"><a class="reference internal" href="../10-let-there-be-light/">要有光</a>
</li>
</ul>
<ul>
<li class="toctree-l1"><a class="reference internal" href="../11-let-there-be-even-more-light/">要有更多的光</a>
</li>
</ul>
<ul>
<li class="toctree-l1"><a class="reference internal" href="../12-game-hud/">游戏HUD</a>
</li>
</ul>
<ul>
<li class="toctree-l1"><a class="reference internal" href="../13-sky-box-and-some-optimizations/">天空盒与一些优化</a>
</li>
</ul>
<ul>
<li class="toctree-l1"><a class="reference internal" href="../14-height-maps/">高度图</a>
</li>
</ul>
<ul>
<li class="toctree-l1"><a class="reference internal" href="../15-terrain-collisions/">地形碰撞</a>
</li>
</ul>
<ul>
<li class="toctree-l1"><a class="reference internal" href="../16-fog/">雾</a>
</li>
</ul>
<ul class="current">
<li class="toctree-l1 current"><a class="reference internal current" href="./">法线贴图</a>
<ul class="current">
</ul>
</li>
</ul>
<ul>
<li class="toctree-l1"><a class="reference internal" href="../18-shadows/">阴影</a>
</li>
</ul>
<ul>
<li class="toctree-l1"><a class="reference internal" href="../19-animations/">动画</a>
</li>
</ul>
<ul>
<li class="toctree-l1"><a class="reference internal" href="../20-particles/">粒子</a>
</li>
</ul>
<ul>
<li class="toctree-l1"><a class="reference internal" href="../21-instanced-rendering/">实例化渲染</a>
</li>
</ul>
<ul>
<li class="toctree-l1"><a class="reference internal" href="../22-audio/">音效</a>
</li>
</ul>
<ul>
<li class="toctree-l1"><a class="reference internal" href="../23-3d-object-picking/">三维物体选取</a>
</li>
</ul>
<ul>
<li class="toctree-l1"><a class="reference internal" href="../24-hud-revisited/">回顾HUD - NanoVG</a>
</li>
</ul>
<ul>
<li class="toctree-l1"><a class="reference internal" href="../25-optimizations-frustum-culling/">优化 - 截锥剔除</a>
</li>
</ul>
<ul>
<li class="toctree-l1"><a class="reference internal" href="../26-cascaded-shadow-maps/">级联阴影映射</a>
</li>
</ul>
<ul>
<li class="toctree-l1"><a class="reference internal" href="../27-assimp/">Assimp库</a>
</li>
</ul>
<ul>
<li class="toctree-l1"><a class="reference internal" href="../28-deferred-shading/">延迟着色法</a>
</li>
</ul>
<ul>
<li class="toctree-l1"><a class="reference internal" href="../a01-opengl-debugging/">附录 A - OpenGL调试</a>
</li>
</ul>
<ul>
<li class="toctree-l1"><a class="reference internal" href="../glossary/">术语表</a>
</li>
</ul>
</div>
</div>
</nav>
<section data-toggle="wy-nav-shift" class="wy-nav-content-wrap">
<nav class="wy-nav-top" role="navigation" aria-label="top navigation">
<i data-toggle="wy-nav-top" class="fa fa-bars"></i>
<a href="..">Lwjglbook中文翻译</a>
</nav>
<div class="wy-nav-content">
<div class="rst-content">
<div role="navigation" aria-label="breadcrumbs navigation">
<ul class="wy-breadcrumbs">
<li><a href="..">Docs</a> &raquo;</li>
<li>法线贴图</li>
<li class="wy-breadcrumbs-aside">
<a href="https://github.com/Mouse0w0/lwjglbook-CN-Translation/edit/master/docs/17-normal-mapping.md"
class="icon icon-github"> Edit on GitHub</a>
</li>
</ul>
<hr/>
</div>
<div role="main">
<div class="section">
<h1 id="normal-mapping">法线贴图（Normal Mapping）</h1>
<p>本章中将讲解一项技术，它将极大地改善我们的3D模型的外观。到目前为止，我们已经能够将纹理使用到复杂的3D模型上，但这还离真实物体的样子很远。现实世界中的物体表面不是完全光滑的，它们有我们的3D模型目前所不具有的瑕疵。</p>
<p>为了渲染更真实的场景，我们将渲染<strong>法线贴图(Normal Mapping)</strong>。如果你在现实世界中看到一个平面，你会发现那些瑕疵甚至可以在很远的距离看到。在3D场景中，平面没有瑕疵，我们可以将纹理应用在它之上，但这不会改变光反射的方式。这就是为什么与现实有区别的原因。</p>
<p>我们可以考虑通过增加三角形数量来增加模型的细节并反映出这些瑕疵，但性能会下降。我们需要的是改变表面光反射的方式来增加真实感。这就是用法线贴图技术实现的。</p>
<p>让我们看看光滑平面的例子，一个平面由两个三角形组成为一个四边形。回忆之前的光照章节，模型的光反射的要素是平面法线。在此情况下，我们整个平面仅有单一的法线，当计算光如何影响片元时，每个片元都使用相同的法线。看起来就像下图那样。</p>
<p><img alt="平面法线" src="../_static/17/surface_normals.png" /></p>
<p>如果可以改变平面的每个片元的法线，我们就可以模拟平面的瑕疵，使它们更逼真。看起来就像下图那样。</p>
<p><img alt="片元法线" src="../_static/17/fragment_normals.png" /></p>
<p>要做到这一点，我们要加载另一个纹理，它储存面的法线。法线纹理的每个像素将以RGB值储存法线的<strong>x</strong>、<strong>y</strong>和<strong>z</strong>坐标值。</p>
<p>让我们用下面的纹理绘制一个四边形。</p>
<p><img alt="纹理" src="../_static/17/rock.png" /></p>
<p>上图的法线纹理如下所示。</p>
<p><img alt="法线纹理" src="../_static/17/rock_normals.png" /></p>
<p>如你所见，如果我们把颜色变换应用到原始纹理，每个像素使用颜色分量储存法线信息。在看到法线贴图时，你常常会看到主色调倾向于蓝色，这是由于大多数法线指向转换正<strong>z</strong>轴所致。在一个平面表面的矢量中，<strong>z</strong>分量通常比<strong>x</strong>和<strong>y</strong>分量的值高得多。由于<strong>x</strong>、<strong>y</strong>、<strong>z</strong>坐标被映射到RGB，导致蓝色分量也有着更高的值。</p>
<p>因此，使用法线贴图渲染对象只需要一个额外的纹理，并同时使用它渲染片元以获得适当的法线值。</p>
<p>让我们开始修改代码，以支持法线贴图。我们将添加一个新的<code>Texture</code>实例到<code>Material</code>类，这样就可以把一个法线贴图纹理添加到游戏项目上。此实例将有自己的<code>get</code>和<code>set</code>方法，并有方法可以检查<code>Material</code>是否有法线贴图。</p>
<pre><code class="language-java">public class Material {
private static final Vector4f DEFAULT_COLOUR = new Vector3f(1.0f, 1.0f, 1.0f, 10.f);
private Vector3f ambientColour;
private Vector3f diffuseColour;
private Vector3f specularColour;
private float reflectance;
private Texture texture;
private Texture normalMap;
// … Previous code here
public boolean hasNormalMap() {
return this.normalMap != null;
}
public Texture getNormalMap() {
return normalMap;
}
public void setNormalMap(Texture normalMap) {
this.normalMap = normalMap;
}
}
</code></pre>
<p>我们将在场景的片元着色器中使用法线贴图纹理。但是，由于我们在观察坐标空间操作，所以需要通过模型观察矩阵来进行适当的变换。因此，我们需要修改场景的顶点着色器。</p>
<pre><code class="language-glsl">#version 330
layout (location=0) in vec3 position;
layout (location=1) in vec2 texCoord;
layout (location=2) in vec3 vertexNormal;
out vec2 outTexCoord;
out vec3 mvVertexNormal;
out vec3 mvVertexPos;
out mat4 outModelViewMatrix;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
void main()
{
vec4 mvPos = modelViewMatrix * vec4(position, 1.0);
gl_Position = projectionMatrix * mvPos;
outTexCoord = texCoord;
mvVertexNormal = normalize(modelViewMatrix * vec4(vertexNormal, 0.0)).xyz;
mvVertexPos = mvPos.xyz;
outModelViewMatrix = modelViewMatrix;
}
</code></pre>
<p>在场景的片元着色器中，我们需要添加另一个输入参数。</p>
<pre><code class="language-glsl">in mat4 outModelViewMatrix;
</code></pre>
<p>在片元着色器中，我们需要为法线贴图纹理采样器传递一个新的Uniform：</p>
<pre><code class="language-glsl">uniform sampler2D texture_sampler;
</code></pre>
<p>此外，在片元着色器中，我们将创建一个新函数，该函数计算当前片元的法线。</p>
<pre><code class="language-glsl">vec3 calcNormal(Material material, vec3 normal, vec2 text_coord, mat4 modelViewMatrix)
{
vec3 newNormal = normal;
if ( material.hasNormalMap == 1 )
{
newNormal = texture(normalMap, text_coord).rgb;
newNormal = normalize(newNormal * 2 - 1);
newNormal = normalize(modelViewMatrix * vec4(newNormal, 0.0)).xyz;
}
return newNormal;
}
</code></pre>
<p>该函数有以下参数：
* <code>Material</code>实例。
* 顶点法线。
* 纹理坐标。
* 模型视图矩阵。</p>
<p>我们在此函数中做的第一件事是检查这个<code>Material</code>实例是否有法线贴图。如果没有，我们就像平常一样简单地使用顶点法线。如果它有法线贴图，我们使用储存着法线数据的法线纹理关联到当前纹理坐标。</p>
<p>记住我们取得的颜色是法线坐标，但因为它们被储存为RGB值，所以它们的值在范围<script type="math/tex; mode=display">0, 1</script>中。我们需要将其范围转换为<script type="math/tex; mode=display">-1, 1</script>，所以我们将其乘以2然后减去1。然后，我们将它归一化，并将其转换到模型观察坐标系（就像顶点法线那样）。</p>
<p>就这样，我们可以使用返回值作为片元所有光照计算中的法线。</p>
<p>在<code>Renderer</code>类中，我们需要创建法线贴图，在<code>renderScene</code>方法中，我们做如下设置：</p>
<pre><code class="language-java">//...
sceneShaderProgram.setUniform(&quot;fog&quot;, scene.getFog());
sceneShaderProgram.setUniform(&quot;texture_sampler&quot;, 0);
sceneShaderProgram.setUniform(&quot;normalMap&quot;, 1);
//...
</code></pre>
<p>上述代码中你可能注意到一些有趣的事情。我们将材质纹理Uniform（<code>texture_sampler</code>）设置为<strong>0</strong>，然后将法线贴图纹理（<code>normalMap</code>）设置为<strong>1</strong>。如果你回想纹理章节，我们不止使用一个纹理，所以我们必须为每个单独的纹理设置纹理单元。</p>
<p>当我们渲染<code>Mesh</code>时，也需要考虑这一点。</p>
<pre><code class="language-java">private void initRender() {
Texture texture = material.getTexture();
if (texture != null) {
// 激活第一纹理库
glActiveTexture(GL_TEXTURE0);
// 绑定纹理
glBindTexture(GL_TEXTURE_2D, texture.getId());
}
Texture normalMap = material.getNormalMap();
if ( normalMap != null ) {
// 激活第二纹理库
glActiveTexture(GL_TEXTURE1);
// 绑定纹理
glBindTexture(GL_TEXTURE_2D, normalMap.getId());
}
// 绘制网格
glBindVertexArray(getVaoId());
glEnableVertexAttribArray(0);
glEnableVertexAttribArray(1);
glEnableVertexAttribArray(2);
}
</code></pre>
<p>如你所见，我们需要绑定每个可用的纹理，并激活相关的纹理单元，以便多个纹理能够同时工作。在<code>Renderer</code>类的<code>renderScene</code>方法中，我们不需要显式设置纹理的Uniform，因为它已经包含在<code>Material</code>中。</p>
<p>为了展示法线贴图带来的提升，我已经创建了两个并排显示的四边形示例。右边的有一张法线贴图，而左边没有。我们还删除了地形、天空盒和HUD，并设置了平行光照，可以用鼠标左右键改变方向，这样你就可以看到效果了。我已经修改了基本源代码，以支持关闭天空盒和地形。我们还在片元着色器中设置了光效果的范围为<script type="math/tex; mode=display">0, 1</script>，以避免图像过度曝光。</p>
<p>结果如下图所示。</p>
<p><img alt="法线贴图结果" src="../_static/17/normal_mapping_result.png" /></p>
<p>如你所见，具有法线贴图的四边形感觉更大。虽然它本质上是一个像其他四边形一样的平面，但你可以看到光线是如何反射的。</p>
<p>尽管我们已经编写的代码完全符合这个示例，但你需要知道它的局限性。该代码仅适用与使用模型坐标空间创建的法线贴图纹理。如果是这种情况，我们可以使用模型视图矩阵来将法线坐标转换到观察空间。</p>
<p>但通常法线贴图不是这样定义的。它们通常被定义在所谓的<strong>切线空间（<code>Tangent Space</code>）</strong>中。切线空间是一个坐标系，它定位在模型的每个三角形，其坐标系的<strong>z</strong>轴总是垂直于表面。这就是为什么当你看一个法线贴图时，它通常是蓝色的，甚至对于面相对复杂的模型也是如此。</p>
<p>我们现在仍使用这个简单的实现，但请记住，你必须总是使用在模型空间中定义的法线贴图。如果使用切线空间中定义的贴图，就会变得很奇怪。为了能够让它们一同工作，我们需要使用特定的矩阵来将坐标变换到切线空间。</p>
</div>
</div>
<footer>
<div class="rst-footer-buttons" role="navigation" aria-label="footer navigation">
<a href="../18-shadows/" class="btn btn-neutral float-right" title="阴影">Next <span class="icon icon-circle-arrow-right"></span></a>
<a href="../16-fog/" class="btn btn-neutral" title="雾"><span class="icon icon-circle-arrow-left"></span> Previous</a>
</div>
<hr/>
<div role="contentinfo">
<!-- Copyright etc -->
<p>2019, Mouse0w0</p>
</div>
Built with <a href="https://www.mkdocs.org/">MkDocs</a> using a <a href="https://github.com/snide/sphinx_rtd_theme">theme</a> provided by <a href="https://readthedocs.org">Read the Docs</a>.
</footer>
</div>
</div>
</section>
</div>
<div class="rst-versions" role="note" aria-label="versions">
<span class="rst-current-version" data-toggle="rst-current-version">
<span>
<a href="https://github.com/Mouse0w0/lwjglbook-CN-Translation/" class="fa fa-github" style="color: #fcfcfc"> GitHub</a>
</span>
<span><a href="../16-fog/" style="color: #fcfcfc">&laquo; Previous</a></span>
<span><a href="../18-shadows/" style="color: #fcfcfc">Next &raquo;</a></span>
</span>
</div>
<script>var base_url = '..';</script>
<script src="../js/theme_extra.js" defer></script>
<script src="../js/theme.js" defer></script>
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML" defer></script>
<script src="../search/main.js" defer></script>
<script defer>
window.onload = function () {
SphinxRtdTheme.Navigation.enable(true);
};
</script>
</body>
</html>