【风宇冲】Unity3D教程宝典之Shader篇：第二十一讲视差贴图

妖狐艹你老母 2022-03-12 14:17 382阅读 0赞

### 原创文章如需转载请注明：转载自[风宇冲Unity3D教程学院][Unity3D] ###

**第二十一讲**  **视差贴图**

**视差贴图的展示**

图一：注意轮胎印中的自阴影，实际上路面只是一个平地

[![【风宇冲】Unity3D教程宝典之Shader篇：第二十一讲视差贴图][Unity3D_Shader]][Unity3D_Shader_Unity3D_Shader]

图二： 孤岛危机的成功，视差贴图功不可没  
[![【风宇冲】Unity3D教程宝典之Shader篇：第二十一讲视差贴图][Unity3D_Shader 1]][Unity3D_Shader_Unity3D_Shader 1]

图三：视差贴图同样可用于人物,装备及道具

[![【风宇冲】Unity3D教程宝典之Shader篇：第二十一讲视差贴图][Unity3D_Shader 2]][Unity3D_Shader_Unity3D_Shader 2]

本讲分四个部分  
 一：优点特性

二：基本原理

三：使用方法

四：视差计算

**第一部分 视差贴图的优点及特性**

上一讲讲了法线贴图。法线贴图，无论是RGB法线贴图还是DXT5nm，都有一个缺点就是。越接近面的水平视角，则画面越不真实。因为使用法线贴图后，凸起的部分只是看起来凸起而已，网格模型却并没有凸起依然是平的。正常来说凸起的部分会遮挡后面的部分，法线贴图却没有这个效果。于是我们有了法线贴图的改进版 - 视差贴图

视差贴图的好处：

(1)在相对视角会发生变化 时 ，很有立体感

(2)在入视角接近水平 时 ，依然有不错的质量

下面两图对比可以看出，在入视角接近水平时，视差贴图要比法线贴图清晰不少。

注意：在入视角等于或接近垂直时，视差贴图与法线贴图的效果是几乎一样的。

[![【风宇冲】Unity3D教程宝典之Shader篇：第二十一讲视差贴图][Unity3D_Shader 3]][Unity3D_Shader_Unity3D_Shader 3] ![【风宇冲】Unity3D教程宝典之Shader篇：第二十一讲视差贴图][Unity3D_Shader 4]

**第二部分 视差贴图的原理**

视差贴图,由Tomomichi Kaneko在2001年发明，但是限于计算机的性能，真正的商业运用是从2007年开始的。视差贴图 通过uv 偏移 实现。uv的偏移值由高度及由点指向摄像机的向量计算得出。所以视差贴图依然不改变真正的模型表面构造。

注意：如果使用的是Unity自带的Parallax 类shader，则高度必须位于A通道中（对应color.w），如果高度图是灰度图的话，则需转换至A通道，下面的使用部分有详细方法。有关高度的知识，参阅17讲的前半部分。

左图：凹凸不平的鹅卵石             右图：实际只是一个平面

[![【风宇冲】Unity3D教程宝典之Shader篇：第二十一讲视差贴图][Unity3D_Shader 5]][Unity3D_Shader_Unity3D_Shader 5] ![【风宇冲】Unity3D教程宝典之Shader篇：第二十一讲视差贴图][Unity3D_Shader 6]

**第三部分 视差贴图的** **使用**

(1)准备好贴图，法线贴图，高度图。

(2)如果高度图的高度储存在透明通道,略过此步。如果是灰度图则需：选中图，勾选Alpha from Grayscale,然后Apply即可

[![【风宇冲】Unity3D教程宝典之Shader篇：第二十一讲视差贴图][Unity3D_Shader 7]][Unity3D_Shader_Unity3D_Shader 7]

(3) 创建plane及材质，Shader选Parallax Diffuse或者 Parallax Diffuse

(4)把三个图拖到材质对应的栏里

(5)调整Height高度。

如果是初次使用视差贴图的话，把Height调到最高，然后旋转plane查看，这样能快速理解视差贴图的好处。

如果是真正运用的话,Height稍微低些，否则会失真。

**第四部分视差贴图的计算**

打开Build-in shader里的 Normal-Parallax.Shader，即Parallax Diffuse。有如下代码：

1.  half h = tex2D (\_ParallaxMap, IN.uv\_BumpMap).w;
2.  float2 offset = ParallaxOffset (h, \_Parallax, IN.viewDir);
3.  IN.uv\_MainTex += offset;
4.  IN.uv\_BumpMap += offset;

（1）纹理映射 取得 高度值h

(2) 由高度值h及指向摄像机的向量计算偏移offset

(3) 对纹理贴图以及法线贴图进行uv偏移offset

其中第二步是重点。打开UnityCG.cginc , 看到如下代码。

1.  // Calculates UV offset for parallax bump mapping
2.  inline float2 ParallaxOffset( half h, half height, half3 viewDir )
3.  \{
4.  h = h \* height - height/2.0;
5.  float3 v = normalize(viewDir);
6.  //单位指向相机向量.z +0.42
7.  v.z += 0.42;
8.  // 偏移.x = 高度\*（单位指向相机向量的x / 单位指向相机向量的z）
9.  // 偏移.y = 高度\*（单位指向相机向量的y / 单位指向相机向量的z）
10. return h \* (v.xy / v.z);
11. \}

计算方法出来了。具体算法的理论依据感兴趣的同学可以自己去研究。

部分内容出自：

[【技术贴】最强贴图——视差贴图技][Link 1] [术][Link 1]

[Unity3D]: http://blog.sina.com.cn/lsy835375
[Unity3D_Shader]: http://s10.sinaimg.cn/bmiddle/47113292td1d1a157f1d9&690
[Unity3D_Shader_Unity3D_Shader]: /images/20220312/0290191218554af9ab6856628b6854fd.png
[Unity3D_Shader 1]: http://s7.sinaimg.cn/bmiddle/47113292td1d1a16d9066&690
[Unity3D_Shader_Unity3D_Shader 1]: /images/20220312/e4214892cc3c4694b74ea7c825404960.png
[Unity3D_Shader 2]: http://s4.sinaimg.cn/bmiddle/47113292td1d1a17fc8e3&690
[Unity3D_Shader_Unity3D_Shader 2]: /images/20220312/4aee5da78adf48bbac18b9e0f7bbdd68.png
[Unity3D_Shader 3]: http://s5.sinaimg.cn/mw690/47113292td1d11e8953a4&690
[Unity3D_Shader_Unity3D_Shader 3]: http://photo.blog.sina.com.cn/showpic.html#blogid=471132920101dlel&url=http://s5.sinaimg.cn/orignal/47113292td1d11e8953a4
[Unity3D_Shader 4]: /images/20220312/e1821eef41c5401c9b76654a69d66a5c.png
[Unity3D_Shader 5]: http://s15.sinaimg.cn/small/47113292td1d1a13c539e&690
[Unity3D_Shader_Unity3D_Shader 5]: http://photo.blog.sina.com.cn/showpic.html#blogid=471132920101dlel&url=http://s15.sinaimg.cn/orignal/47113292td1d1a13c539e
[Unity3D_Shader 6]: /images/20220312/aaa59d0534b347a18ac9280685158cd1.png
[Unity3D_Shader 7]: http://s5.sinaimg.cn/mw690/47113292td1d085b6ad04&690
[Unity3D_Shader_Unity3D_Shader 7]: /images/20220312/59b96a4fd9c24b0d9dbe533a5c4db012.png
[Link 1]: http://tieba.baidu.com/p/620995839