法线贴图(Normal Map Generator)

简介

本文主要简单介绍一下法线贴图的生成算法，并提供一个简单的工具用来快速生成法线贴图。

背景

最近在学习和法线贴图相关知识的时候，发现尤其网上资料中关于如何应用法线贴图的文章和帖子特别多，但是很少有人提及到如何生成法线贴图。

尤其大多数的资料介绍之中经常会提到网上有很多的免费软件来生成法线贴图，直接使用即可。但是我们本着理解原理的态度还是需要理解到底法线贴图是怎么生成的。

Texture生成法线贴图

关于法线贴图的原理和应用我就不详细介绍，网上也有很多资料可以查询，此处不赘述。

简单来说，使用法线贴图是为了让人在视觉上看物体的时候，突出物体的凹凸感，增加渲染的真实感。

那么物体的凹凸感主要体现在什么方面呢？边缘信息。可以想像一下一张鹅卵石贴图。那么强调凹凸感的地方一定是鹅卵石与鹅卵石相接的地方。

因此，提取边缘信息对于计算法线贴图是非常重要的。提取边缘的方式有很多种，这里我们使用了sobel滤镜，好处在于sobel滤镜可以专门提取横向或者纵向的边缘信息。这对于我们在计算法线贴图的时候非常重要。

法线贴图顾名思义图像每个像素点上的坐标都需要有该点的法线信息，即一个三维的向量。
sobel滤镜为我们提取出来了横向和纵向的信息，也就是提取出了向量x和y的数值。那么z的数值怎么计算呢。我们使用以下的公式来计算：

$\ V_z = \frac{1+2^L}{P}$

其实这里L和P是主要用来给设计师调节用的参数，对于最终的凹凸效果有一定影响。

接下来，获得了法线的信息后我们对其进行一次标准化操作，使得他们在-1到1之间浮动。
最终我们需要的是一张贴图所以我们需要将这些-1到1之间的法线向量换算到0到255之间。然后进行绘制，就可以得到法线贴图了。

到此为止就是如何从一张高度图（即输入的贴图）转化成为法线贴图的整个过程。虽然并不是很困难，不过也有很多小点需要注意。

接下来给出demo的链接：demo

以及源代码的github地址：github

注

时间原因，讲解非常粗糙，请多多包涵。有问题的地方也请告知，感谢批评指正。

现在demo也不是很完整，有时间的时候会再次更新。github的源代码现在很多地方还处于开发阶段，所以详细文档和配置没有给出。主要是基于typescript写的纯前端的类库。

法线贴图生成器的上传和下载按钮还没有制作，更新后会在本帖子更新。

本次更新时间：2018.08.26