纹理贴图、法线贴图、切线空间法线贴图

作者: madao756 | 来源:发表于2019-03-30 21:53 被阅读59次

凹凸小记
纹理贴图、法线贴图、切线空间法线贴图
法线贴图那些事儿
Unity Shader 入门到改行5——法线贴图
ue4-4，transform 凹凸视差置换
Unity 渲染教程（六）：凹凸度
法线贴图与切线空间
29.opengl高级光照-视差贴图
Quixel SUITE纹理绘制入门之二：Ndo-基础知识-1
法线贴图

前言：我好像弄懂了一点点，把这个再梳理一遍

一切都要从 Shader 说起

Shader 分为「顶点渲染器」和「片段渲染器」

「顶点渲染器」

「顶点渲染器」保存三角形的三个顶点的 u v 值，给后续片段渲染器提供数据。但是返回 $Viewport × Projection × ModelView × uv$ 值。

「片段渲染器」

在调用「片段渲染器」之前，遍历属于三角形的最大矩形，用重心法算出比例。传递给「片段渲染器」，「片段渲染器」拿到这个比例以后就可以算出属于这个点的 u、v 值。通过 u、v 值从 diffuse 贴图中拿到颜色。

用图解就是这样

$u = \alpha u_0 + \beta u_1 + \gamma u_2$
$v = \alpha v_0 + \beta v_1 + \gamma v_2$

这就是不考虑光照的纹理贴图

法线贴图

当然通过 $\alpha ,\beta, \gamma$ 用插值的方法可以计算任一点的法线。

但是我们可以存储法线，像 diffuse 贴图那样通过 uv 访问。

存储法线的贴图

我们为什么需要法线贴图？

通过法线，我们可以计算该点的光照强度。使纹理感更强。

法线贴图的制作

可以看我这篇文章如何产生法线贴图
（我是翻译国外大神的，但是国外大神有点烂尾，有关键问题没有解决）

只要知道

是可以从普通「texture」贴图中计算法向量的。但是还有很多其他的办法
左图为普通 texture，右图为由左图计算的法线贴图

这样的法线定义在切线空间中

还没完

这样的法线贴图，有一个问题

举个例子，有一个正方体，每一面都贴相同的图，而由相同的图来说，法向量永远一样。但是由于在空间中位置的不一样，每一面的世界坐标系的法向量不可能一样。所以有的面算光强度的时候就会失败！

再举个例子，我们把世界坐标系中物体的表面法向量不指向 z 轴附近，指向 y 轴附近。其他的不变，从贴图中得到的法向量还是指向 z 轴附近的。所以光照强度肯定还是错的！

明白了就给我点个赞吧

所以我们需要计算出一种矩阵，把法线从切线空间变换到一个不同的空间，这样在切线空间的法线就能和表面法线方向对齐了

一个神奇的矩阵

这个矩阵牛逼坏了

我们要计算的矩阵叫做「TBN 矩阵」。T B N 分别代表 Tangent（切线）、Bitangent（副切线） Normal（法向量）

下面叙述推导过程

首先 N 是表面法向量

用差值算（用比例算）

$n = \alpha n_0 + \beta n_1 + \gamma n_2$

看上图 T、B 的方向和纹理方向一致。

看上图可以写出，

$E_1 = \Delta U_1T + \Delta V_1B$
$E_2 = \Delta U_2T + \Delta V_2B$

可以写出

$(E_{1x}, E_{1y}, E_{1z}) = \Delta U_1(T_x, T_y, T_z) + \Delta V_1(B_x, B_y, B_z)$
$(E_{2x}, E_{2y}, E_{2z}) = \Delta U_2(T_x, T_y, T_z) + \Delta V_2(B_x, B_y, B_z)$

写出

$\begin{bmatrix} E_{1x} & E_{1y} & E_{1z} \\ E_{2x} & E_{2y} & E_{2z} \end{bmatrix} = \begin{bmatrix} \Delta U_1 & \Delta V_1 \\ \Delta U_2 & \Delta V_2 \end{bmatrix} \begin{bmatrix} T_x & T_y & T_z \\ B_x & B_y & B_z \end{bmatrix}$

最后得到

$\begin{bmatrix} \Delta U_1 & \Delta V_1 \\ \Delta U_2 & \Delta V_2 \end{bmatrix}^{-1} \begin{bmatrix} E_{1x} & E_{1y} & E_{1z} \\ E_{2x} & E_{2y} & E_{2z} \end{bmatrix} = \begin{bmatrix} T_x & T_y & T_z \\ B_x & B_y & B_z \end{bmatrix}$

算出 [T, B] 后记得要正则化噢，加上表面法向量 N

$\begin{bmatrix} T_x & T_y & T_z \\ B_x & B_y & B_z \\ N_x & N_y & N_z \end{bmatrix}$

还没完

哈哈，我骗你的啦。一切都结束了。最后你只要记得，在切线空间里得到的法向量乘以这个矩阵，就得到世界坐标系中的法向量啦

最后实现渲染器的代码

点个喜欢呗

凹凸小记
1.高度贴图转法线贴图2.多张法线贴图效果的叠加3.法线从切线空间转世界空间 1.高度贴图转法线贴图求出uv，u...
纹理贴图、法线贴图、切线空间法线贴图
前言：我好像弄懂了一点点，把这个再梳理一遍一切都要从 Shader 说起 Shader 分为「顶点渲染器」和「片...
法线贴图那些事儿
概述在学习法线贴图的过程中，有几个比较难以理解的概念，这里记录一下。特别说一下，本文的法线贴图是切线空间下的法线...
Unity Shader 入门到改行5——法线贴图
1. 法线贴图理论 1.1 什么是法线贴图一般的贴图中存储的是表面颜色值（RGBA），而法线贴图存放的则是法线信...
ue4-4，transform 凹凸视差置换
transform 本身法线是切线空间的，将它转化成世界空间，就可以利用法线的信息，增加细节。法线贴图上每个像素...
Unity 渲染教程（六）：凹凸度
扰动法线来模拟凹凸不平的情况。从高度字段来计算法线。对法线贴图进行采样和混合。从切线空间转换到世界空间。这...
法线贴图与切线空间
法线贴图法线贴图是一种技术，用专业一点的话来说，叫做采用低面数模型（低模）实现对高面数模型（高模）模拟的技术。用...
29.opengl高级光照-视差贴图
一、原理 1. 为什么要使用视差贴图？上一篇法线贴图使用了法线纹理，通过法线的变化来控制漫反射和镜面反射的强度，...
Quixel SUITE纹理绘制入门之二：Ndo-基础知识-1
【前言】关于法线贴图是什么及作用，前几篇已经说过，法线贴图的原理也不再细研究了。需要强调的是：这张贴图实...
法线贴图
运行结果：