视差贴图

先来看看一个效果，这是一个使用了PBR纹理贴图的材质球。从远处来看，基础纹理、凹凸细节都是很丰富的，并没有什么问题，实现的效果很棒。

但是如果从近距离水平方向再来观察，就会发现一个很明显的穿帮现象: 水平视角的地面没有凹凸起伏感，只是一个非常平整的平面。

现在所看到的凹凸细节，是通过法线贴图营造的，它只是给人视觉上的体验，实际上法线贴图并不会真实修改模型的顶点位置。这种视觉效果从远距离俯瞰不会有什么问题，但是一旦近距离水平观察，就会出现上面描述的情况。

有没有一种技术，能够弥补这种缺点呢？

目前有两种技术解决方案：一种是置换贴图，另外一种是视差贴图。

使用置换贴图的一个前提是：模型需要足够多的面数细分。换句话说，只有高模使用置换贴图才能充分表现出模型的凹凸细节。

和法线贴图不同，置换贴图是真实操作模型顶点的位置，让顶点沿着法线移动贴图中定义的距离。虽然同样是营造凹凸细节，法线贴图只是视觉上的假象凹凸，而置换贴图却是真实的凹凸。

因为涉及到操作大量的顶点偏移，置换贴图技术对于程序的性能消耗是最大的，因此并不建议在手游中使用。

我们着重来讨论视差贴图！

首先需要说明，视差贴图和法线贴图差不多，也是给用户营造视觉上的凹凸感，但是它对高度有着更好的表达，通常结合法线一起使用能够产生难以置信的效果。

基本原理

视差贴图技术使用的是高度贴图，高度贴图中每个纹理像素都包含了高度值纹理信息，视差贴图技术背后的思想是修改纹理坐标使一个片元的表面看起来比实际的更高或者更低，所有这些都根据观察方向和高度贴图来计算。

一张典型的高度贴图如下所示：

白色代表凸起，颜色越亮，高度越高；灰色代表凹陷，颜色越暗，高度越低。

为了理解视差是如何工作的，先从一张最简单的图片说起：

绿色箭头代表视线方向，白色线条代表砖块地面的横截面。按照一般常识，眼睛看到的是蓝点，黄点因为高度较低会被遮挡。

但在unity中上文制作出来的效果是：蓝点、黄点都能被看到。

实际上，图片中这种高度差是不存在的。它只是法线贴图模拟明暗制作出来的视觉效果，只要红线部分呈现出从亮到暗的色调变化，用户在视觉上就会感觉蓝点要比黄点位置更高，但真相是：黄点、蓝点处于同一高度！

当近距离水平观察物体时，法线贴图营造的假象就会暴露，用户观察到的就是没有高低差的水平面。

而这就是视差贴图要解决的问题：即使是视觉假象，近距离观察时，那种前后遮挡、高低落差的效果也要表现出来。

再来看一张图！

如图所示，视线 e 落在 a点，但是因为模型并不是真的有凹凸，而是一个平面，所以真实的落点是在b点。

只要a点看到的视觉效果偏移到b点，是不是就能解决问题了呢？

a点的坐标是a(u,v)，b点的坐标是b(u,v)，假设有一个矢量x，可以使

这个矢量x和视线方向有关，但是视线方向一直是变化的，所以x不可能是一个固定的值。

把问题想得简单点，这里不要求精确地求x，只要近似的就可以。于是就有了一张高度贴图纹理，它存储了点 b 在切线空间的真实凹凸表面的凹陷或凸起程度。

关于切线空间的求法，可以看看法线纹理这篇文章，里面详细描述了如何求顶点切线空间的坐标。

下面就用伪代码来演示如何在unity shader中实现视差偏移

1、声明以下几个变量，在计算偏移uv会使用到

_ParallaxMap("ParallaxMap",2D) = "black"{}
_Parallax("Parallax",Range(0,15)) = 1
_ParallaxRefer("_ParallaxRefer",Range(0,1)) = 0.5
sampler2D _ParallaxMap;
float _Parallax;
float _ParallaxRefer

2、求切线空间坐标和视线观察方向

// 切线空间坐标
half3 tangent_dir = normalize(i.tangent_dir);
half3 binormal_dir = normalize(i.binormal_dir);
half3 normal_dir = normalize(i.normal_dir);
float3x3 TBN = float3x3(tangent_dir,binormal_dir,normal_dir);
half3 view_dir = normalize(_WorldSpaceCameraPos.xyz - i.pos_world);

3、求出视线观察方向在切线空间下的坐标，并计算偏移坐标

// 求出视线方向在切线空间下的一个坐标
half3 view_tangentspace = normalize(mul(TBN,view_dir));
half2 uv_parallax = i.uv - (_ParallaxRefer - paralax_map) * view_tangentspace.xy * _Parallax * 0.01f;

4、将偏移坐标分别传入基础色、AO、遮罩、法线等贴图中，统一进行偏移采样

half4 base_color = tex2D(_MainTex, uv_parallax);
// 基础色线性空间转换，针对Tone-Mapping的优化
base_color = pow(base_color,2.2);
half4 ao_color = tex2D(_AOMap,uv_parallax);
half4 spec_mask = tex2D(_SpecMask,uv_parallax);
half4 normal_map = tex2D(_NormalMap,uv_parallax);
/**
光照模型计算代码......
coding
*/

我们来看看视差偏移后的效果！

二者对比，视差偏移后，近距离水平观察的效果明显很好了，它已经有了很明显的高低落差、前后遮挡的视觉效果。

这几歩完成后，之后就是进行正常的光照模型计算了,光照模型的计算问题，可以查看以下几篇文章。

光照模型的原理和实现思路——Phong

光照模型的原理和实现思路——Blinn-Phong