视差贴图

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

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

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

有没有一种技术,能够弥补这种缺点呢?

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

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

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

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

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

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

基本原理

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

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

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

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

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

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

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

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

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

再来看一张图!

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

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

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

b_{(u,v)} + x = a_{(u,v)}

这个矢量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
光照模型的原理和实现思路——BlinnPhong

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,772评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,458评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,610评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,640评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,657评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,590评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,962评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,631评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,870评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,386评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,969评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2 342

推荐阅读更多精彩内容