游戏开发论坛

 找回密码
 立即注册
搜索
查看: 5270|回复: 1

如何在Unity实现从纹理中生成法线贴图?

[复制链接]

1万

主题

1万

帖子

3万

积分

论坛元老

Rank: 8Rank: 8

积分
36572
发表于 2018-12-18 13:20:49 | 显示全部楼层 |阅读模式
文/ windsmoon

本文主要讲解从纹理中生成法线贴图的基本方法,并在 Unity 中进行实现和测试。

预备知识

法线贴图和基本的图形学知识,基本的向量和极限的知识。

高度图或灰度图

一张二维纹理有两个维度 u 和 v,但其实,高度(h)可以算第三个维度。有了高度,一张二维纹理就可以想象成一个三维的物体了。

1.jpg

先来考虑只有 u 方向的情况,如图所示, A 和 B 是纹理中的两个点, uv 坐标分别是 (0, 0) 和 (1, 0),上方黑线表示点对应的高度,那么显然,只要求出 u 方向上的高度函数在某一点的切线,就能求出垂直于他的法线了。同理, v 方向也是如此。也就是说,如果有纹理的高度信息,那么就能计算出纹理中每一个像素的法线了。

所以计算法线需要一张高度图,它表示纹理中每一个点对应的高度。

但其实并不需要求出每个纹理像素上 uv 方向各自的法线,只需要求出 uv 方向上高度函数的切线,再做一个叉积,即可计算出对应的法线了。

如果没有高度图,也可以用灰度图代替,灰度图就是把 rgb 三个颜色分量做一个加权平均,有很多种算法提取灰度值,这里用一个比较常用的基于人眼感知的灰度值提取公式。

color.r * 0.2126 + color.g * 0.7152 + color.b * 0.0722

这个公式是由人眼对不同颜色敏感度不同得来的,这里无需过多计较,直接把提取出来的灰度值作为高度值即可。

计算方法

当需要求一个点的函数图像切线的时候,只要求出该点的函数斜率即可,即是导数,这需要和它相临的点进行计算。显然,两个点越接近,结果越精确。所以有如下公式:

2.jpg

求出切线后,就得到了两个方向上的切线向量 3.jpg 4.jpg 。之所以是这种形式的二维向量,是因为这里是按照 uoh 平面和 voh 平面分别计算的,具体的向量形式需要根据实际情况去组合。这里可以做一个优化,在求导数的时候公式里做了一个除法,因为法线最终会归一化,切线向量长度不影响叉积后的结果向量方向,所以其实可以直接把求导数时候的除法去掉,即直接将切线向量乘以 5.jpg 6.jpg ,变为 7.jpg 8.jpg 。如果你觉得乱,没关系,后面看具体的代码就明白了。

接下来是将两个向量做叉积,叉积的顺序会影响计算出的法线的方向,这个要根据实际情况去决定。

实例

这个例子使用 Unity Shader 去动态的生成一张纹理中每一个像素的法线,并当作颜色输出出来,最终在屏幕上会看到一张动态生成的法线贴图。将纹理放置成平行于屏幕的方向,如下图所示:

9.jpg

整张纹理处于世界空间 XOY 平面,并且朝向 -Z 轴(Unity 使用左手坐标系,且 Z 轴朝向屏幕里)。

由于没有高度图,所以提取出灰度值来当作高度图,算法根上面描述的一样,函数名为 GetGrayColor。

10.jpg

然后可根据高度图的值来计算 uv 两个方向的高度函数切线。

11.jpg

上面代码分为 3 段,前两段为计算 uv 各自方向的高度函数切线,最后一段计算最终法线。

先看第一段,计算 u 方向的高度函数切线。首先,确定步长 12.jpg 的大小。

MainTexTexelSize 是 Unity Shader 内置的一个变量,保存着纹理大小相关的信息,是一个 float4 类型的值,具体为 (1 / width, 1 / height, width, height)。

_DeltaScale 是一个控制步长缩放的变量,在这个例子中为 0.5,乘以 _DeltaScale 是用来控制法线生成的精确度的,就如之前所说, 13.jpg 越小,生成的法线就越精确。通常我们会向当前采样点两侧去采样,以获得更精准的结果,这个方法叫做中心差分法。然后可以根据步长分别取当前像素左右两侧的高度值(在这个例子里就是灰度值),在按照上面提到的计算方法计算切线即可。注释掉的代码是原始代码,下面没注释的是优化后的代码,这个也是上面提到的。

有一个问题是,为什么计算出来的切线向量是 (x, 0, z) 的形式,而不是其他?这是因为前面提到整张纹理是处于 XOY 平面的,而高度是第三个维度,因为 u 和 v 自然是按照 x 和 y 轴处理方便,所以高度 h 就按照 z 轴来处理了。

还有一个可能的疑问是,当 _DeltaScale 特别小的时候,取两侧的像素实际上都是单前像素,则高度差都是 0 了。但实际上这个情况只有在采样过滤方式为 point 采样时才会出现,具体采样过滤方式是如何处理的可以查阅其他资料。

同理,第二段可以计算出 v 方向的高度函数切线,两个切线向量,做叉积,再归一化,即可获得当前像素点表面的法线向量。叉积的顺序很重要,因为纹理是朝向 -z 轴的,所以一般来说会让法线也顺着表面所在的朝向,这就是为什么是 cross(tangentv, tangentu) 而不是 cross(tangentu, tangentv) 的原因。

现在将法线当作颜色输出出来看一下,当然不能直接输出,因为法线向量可能包含着负值,可能看到的都是黑色,所以需要转换一下,这个转换对于了解过法线贴图的读者应该很熟悉了。

fixed4 color = normal * 0.5 + 0.5

直接输出这个 color,如下图所示:

14.jpg

看起来跟常见的法线贴图有些不一样,常见的是偏蓝色的那种。为什么是偏蓝色的呢,因为常见的法线贴图都是切线空间的。

基于切线空间的法线贴图,z 也就是 b 通道的值都是 0.5 到 1,而 x 和 y 也就是 r 和 g 通道都是 0 到 1,所以看起来会偏蓝一些,当然不是绝对。而上面计算出来的法线贴图,由于叉积的顺序,z 分量是朝向 -z 轴的,所以 b 通道都是 0 到 0.5,不信可以用截屏工具看下颜色值。在这个例子里,想要变成切线空间下的法线贴图是非常简单的,只需要将 z 分量乘以 -1 即可。

normal.z *= -1;
fixed4 color = normal * 0.5 + 0.5

结果如下图:

15.jpg

根上一张图比,确实偏蓝一些了,但是依然不够蓝。这并不是因为这张纹理特殊,而是还有一些校正的步骤没有做。

在计算切线向量的时候,是直接用高度差和 16.jpg 值做计算的,这其实是不合理的,因为 17.jpg 是非常非常小的,一张 1024 * 1024 大小的图, 18.jpg 只有 1 / 1024 = 0.00097656,但是高度差却是 0 到 1 之间某两个数的差,例如高度为 0.6 和高度为 0.2,正常来说是远大于 19.jpg 的,这就导致了切线向量很接近 -z 轴,计算出的法线就很接近于 xoy 平面了,这样就看起来有很多红色和绿色,因为 x 和 y 的分量更大。为了解决这个问题,需要引入一个 _HeightScale 变量,来控制高度差的比例。

20.jpg

当这个值为 _HeightScale 值为 0.01 时,法线贴图结果如下:

21.jpg

这张法线贴图看起来正常了,而且仔细观察可以发现,每一个砖块的上侧是偏绿的,因为 y 对应于 g,右侧是偏红的,因为 x 对应于 r。

可以不用中心差分法吗

可以使用有限差分法,即不取像素两边相邻的点,而是只取一个方向上相邻的点与当前像素比较,这种方法想想也知道效果一般不如中心差分法的好。

除了高度差缩放,还有别的参数可以调节吗

有,这里简单列举两个,因为修改都很简单,而且效果不适合这里讲的例子,所以不在本文实现了。

凹凸值

图中每一个砖块,是凹进去的还是突出来的呢?要改变这个属性,只需要调整法线 xy 的正负即可,就会改变原有的凹凸方向,稍微想象一下应该就能想出来。

粗糙度

可以在原来的法线题图基础上,进一步修改法线贴图的粗糙度。其实之前的高度差缩放,也是处理粗糙度,但是当你有一张已经生成好的法线贴图时,想修改就需要做额外的处理了。也很简单,对法线的 xy 分量进行缩放,然后再重新计算 22.jpg 即可。

加上光照

法线是为了光照服务的,所以这里再演试一下加上一个平行光之后的漫反射的效果,并与没加法线贴图的效果做一下对比(默认法线为 -z 轴方向)。

首先是没有法线贴图的情况。

23.jpg

最终的结果如下图所示:

24.jpg

这是将光源绕 x 轴和 y 轴都旋转了 60 度并且使用默认法线得到的 diffuse 结果,和原来没有光照的原图比较,有了明暗的变化,但依然只是一张平坦的图。

接下来是使用了上面算法动态生成法线贴图的情况。

25.jpg

注意这里的 normal.z 不再乘以 -1 了,因为这个例子一切都是在世界空间下计算的,正常情况下可能在切线空间算效率会更高一些,但这并不是本篇文章的内容。最终输出的结果如下图所示:

26.jpg

可以看到,整张图有了明显的立体感,砖块也显得粗糙了,与之前有了极大的效果提升。再仔细观察可以发现,每个砖块左边和上边都被照亮,右边和下边都变暗了,这正符合平行光的旋转角度,所以光照结果是正确的。

最后的工作

最后的工作就是把生成的法线贴图保存到硬盘上,这一步只需要调用引擎的相关 API 把渲染出来的法线贴图保存为资源即可,也可以直接在 cpu 上操作去生成一张,但这么做就不方便用实时光照去查看效果了。

来源:腾讯游戏学院
原地址:https://mp.weixin.qq.com/s/YVrJjoMxDRVXal29LN-M8g

1

主题

17

帖子

35

积分

注册会员

Rank: 2

积分
35
发表于 2018-12-27 11:06:11 | 显示全部楼层
向大神学习了,受教
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

作品发布|文章投稿|广告合作|关于本站|游戏开发论坛 ( 闽ICP备17032699号-3 )

GMT+8, 2024-3-29 09:07

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表