计算机图形学笔记八：Shading 3（纹理）

1.纹理映射（Texture Mapping）

1.1基本原理

纹理映射：表示物体表面细节的一幅或几幅二维图形，也称纹理贴图（Texture Mapping），是将纹理空间中的纹理像素映射到屏幕空间中的像素的过程，即将纹理贴图贴到三维物体表面的过程。
作用：模拟物体表面细节。
左图无纹理贴图，右图有纹理贴图。

1.2贴图方法

大致思路： 将三维物体每个点的颜色信息存储在一张2d的Texture里，根据映射关系计算出漫反射系数$K_d$，经过计算纹理就被贴在了物体上。
计算方法： 纹理坐标用$(u,v)$表示，纹理空间之内任意一个二维坐标都在$[0,1]$之内。对每个光栅化的屏幕坐标算出uv坐标，再利用查询Texture对应的颜色，作为漫反射系数$K_d$.

如上图所示：用红色表示u，绿色表示v，越红u越大，越绿v越大，不同颜色代表了不同的(u,v)；因此只需要在三维模型的三角形面的每个顶点的信息中，存储该顶点在纹理对应的(u,v)坐标信息，自然而然的就直接的得到了这种映射关系。（u和v取值均在0-1范围内）
但是，对于三角形内部的任意一点的（u,v）值，我们如何求得呢？
这就需要进行对三角形内部进行插值运算，而插值运算需要用到重心坐标的知识。

2.重心坐标（Barycentric Coordinates）

2.1插值（Interpolation）

首先我们是在三角形内部进行的插值运算。
（1）为什么要进行插值？
很多操作都是在三角形顶点，但想要在内部做平滑的过度，需要进行插值计算。
（2）插值的内容是什么？
纹理坐标、颜色、法向量 等等
（3）如何进行插值？
使用重心坐标

如上图所示，（α，β，γ）就是点（x,y）的重心坐标；三角形内部任何一点（x,y）的属性都可以表示为三个顶点A,B,C属性坐标的线性组合。
注：若α+β+γ=1，那么点（x,y）就在三角形所在的平面上,可能在三角形内,也可能在三角形外
若α+β+γ=1且非负，那么点（x,y）就在三角形的内部。

顶点A的重心坐标：

同理可得：顶点B的重心坐标就是(0,1,0)，顶点C的重心坐标就是(0,0,1)。

2.2重心坐标的计算

求重心坐标就得先求出α,β,γ等于多少；
求α,β,γ可以转化为求顶点正对着的三角形面积占比得出：

简化后：

求出α,β,γ的值后，代入上述的线性组合计算中即可得出重心坐标的值。

2.3插值计算内部任意一点的属性

如上图所示，Va,Vb,Vc代表三个顶点的属性(可以是位置坐标、纹理坐标、颜色、法线、深度、材质属性等)。
首先根据顶点坐标A,B,C求出内部任意一点的重心坐标（α,β,γ），然后用此重心坐标和三个顶点的属性进行线性组合求出内部任意一点V的属性。
注：投影的情况下重心坐标不能保证不变，要在三维空间下计算插值，再投影。（投影即将三维图形转化为二维，就是展UV操作）

3.应用纹理（Applying Textures）

3.1贴纹理贴图的步骤

step1：上述操作，我们可以知道了三角形顶点和内部点的纹理坐标（u,v）
step2：然后在纹理上查询(u,v)处的值，也就是知道了(u,v)处对应的纹理的颜色
step3：接着将这个颜色值作为漫反射系数kd
step4：对每个三角形进行逐采样点操作，就将纹理贴图贴在了模型上。

3.2纹理分辨率很小

纹理放大(Texture Magnification)，纹理本身太小，纹理的分辨率不够，图像上的多个像素在渲染时取纹理映射上取到了同一个点，会有明显的方块状。我们将纹理上的每个像素称为texel（纹理元素，纹素）

解决方法：双线性插值（Bilinear Interpolation）

3.2.1双线性插值（Bilinear Interpolation）

对于一个点，取出离它最近的4个纹素点，如上图所示，S表示红点与$u_{00}$的水平距离，t表示竖直距离；假定S和t在[0,1]之间取值。
接着进行线性插值：

对红点的两个水平方向进行线性插值，得到点$u_0$和点$u_1$，然后对红点所在的竖直方向做一次线性插值，即可得到红点处的值(颜色)，并且此时这个点的颜色综合考虑了周围四个点的颜色，会展现出一个平滑过渡的效果。

当然，还有最优的解决方案双三次插值（Bicubic）（取16个点进行插值运算）运算量大，但效果更好。

3.3纹理分辨率很大

左图为正常效果，而右图远处出现摩尔纹现象，是因为根据近大远小原理，远处的一个像素点可能对应了纹理中的一片范围，即纹理过大。本质上是采样频率过低，这时候可以采用超采样Supersampling（SSAA），把一个像素点分为更多采样点来取得纹理，但这样计算量过大，不适合实际应用。

解决方法：Mipmap

3.3.1Mipmap

Mipmap方法将纹理贴图进行不断降低分辨率的操作，每次降低一半，直至降低到$1\times 1$为止。并且，每降低一次分辨率就记为一个等级。level 0代表的是原始texture，也是精度最高的纹理。

简单来说就是，使用Mipmap方法后，贴图会根据摄像机距离的远近，选择使用不同精度的贴图。

这些图加起来只是原来存储量的4/3，只多了三分之一。
我们可以根据像素实际所占的大小来查询像素应该使用哪个层级的纹理。
Step1：

左图为屏幕上的像素点，右图为纹理空间。
在屏幕空间中取当前像素点的右方和上方的两个相邻像素点，分别查询这3个点对应纹理坐标，计算出纹理空间中当前像素点与它们的距离，二者取最大值，计算公式如图所示，距离的log2值就是level D。
Mipmap处理后：

很明显可以看出，有的地方达到了渐变的效果，但有些地方却是突变的，即不同的层级的纹理之间的接缝很明显，这是因为计算出的层级有可能是小数，这时候就会导致选择level时，直接发生过大的精度变化，出现明显的接缝感。
解决方法：三线性插值

先找第D层进行双线性插值，再找第D+1层进行双线性插值，然后将两层的值再次进行一次插值，最后就能够得到一个连续的变化效果。

现在接缝没有那么明显了。
Mipmap的局限性：

由上图可以看出，经过Mipmap处理后，在远处所有的细节全部都被糊掉了，这种情况就叫Overblur（过度模糊）。
造成这种结果的原因：上面的Mipmap方法默认每个区域都是正方形，但实际上对应的形状并不是正方形，在经过三线性插值后的近似后，由于太多地方需要近似，就出现了过度模糊的效果。

解决方法：各向异性过滤（Anisotropic Filtering）

3.3.2各向异性过滤（Anisotropic Filtering）

上面的Mipmap方法默认每个区域都是正方形，但实际上对应的形状并不是正方形，见下图:

可以看出不同screen space的像素点所对应的footprint是不同的，有长方形，甚至是不规则图形，那么针对这种情况，有的所需要的是仅仅是水平方向的高level，有的需要的仅仅是竖直方向上的高level，因此这也就启发了各向异性的过滤:

对角线上的为仍为Mipmap方法，接着算出水平方向的level D0，再算一个竖直方向的level D1，然后算根据这两个level去各项异性过滤的texture里面找一张最合适的。

如上图所示，可以看出，经过各向异性过滤后，得到的效果比Mipmap好很多。

3.4纹理贴图种类

3.4.1颜色贴图（RGB Mapping）

前面所讲的纹理替换Blinn-Phong模型的漫反射系数Kd（三维），也就是它的颜色。

3.4.2环境光贴图（Environment Mapping）

在任意方向我们都能看见物体，即光的反射，然后把这些光的信息都记录下来，这就是环境光贴图。

如上图所示，左侧的是房间内的展开图，右侧是贴上环境贴图后，茶壶表面映射了房间内的所有物体。
环境光贴图有两种展开方式：
1）球环境贴图（Spherical Environment Map）

用一个球面来记录环境光的信息（球的表面非常光滑），然后将球面进行二维展开，即可得到如上图所示的球环境贴图。
但是，很明显图中上部和下部出现了扭曲的现象。
解决方法：
2）Cube Map（立方体贴图）

在贴有环境光贴图的球体外再放一个立方体，从球心连一条线到球面任意一点，然后继续延长到立方体表面上，这样就可以把环境光的信息转存到立方体表面上。

很显然，这样的效果更好，但是计算量同时也增大了。

3.4.3凹凸贴图（Bump Mapping）

凹凸贴图存储的是高度差信息，8bit灰度图。
凹凸贴图影响三角面的法线相对光影方向的偏移量。（越凹偏移量越大，计算出的颜色越暗，给人凹陷的感觉；反之偏移量越小，颜色越亮，给人凸起的感觉），仅仅只是造成视觉效果，并为真实的改变物体顶点的位置。

3.4.4法线贴图（Normal Mapping）

法线贴图是一种凹凸贴图技术，法线贴图存储的是法线信息，24bit彩色图。
法线贴图是直接记录三角面的法线相对光影方向的偏移量在x,y,z三个轴上的分量。

3.4.5位移贴图（Displacement mapping）

即置换贴图，凹凸贴图仅仅只是造成视觉效果，并为真实的改变物体顶点的位置，而位移贴图则是真的改变了顶点的位置，改变了点的高度，因此可以表现出凸起部分的阴影，显得更加真实。但是这种贴图要求模型足够细，也就是相比于凹凸贴图的模型多出了很多个三角形。