开启左侧

[特效参考源文件] 基于高度的纹理混合shader

  [复制链接]
纹理混合(Texture Blend)是非常常见的着色器需求,在很多实时游戏中都需要它来实现复杂的地面纹理,参考了Advanced Terrain Texture Splatting这篇文章写了一个基于高度进行混合的shader,这里分享一下自己的理解,效果如下:

a194-1.gif

说到贴图混合,也许你已经听说过Texture Splatting技术了,这个术语是Charles Bloom创造的,他在http://www.cbloom.com/3d/techdocs/splatting.txt里对这个技术进行了阐述;

混合的最简单做法就是,把贴图颜色的不透明度相乘,然后把结果相加 ,效果如下:

a194-2.png

核心代码如下:

a194-3.png

这端代码很好理解,通过splat_control这张贴图的四个通道控制_Splat0~_Splat3这四张贴图的混合,如果splat_control对应通道的值为1,那么这个通道对应的贴图就完全显示,为0则完全不显示,通过修改splat_control贴图就可以实现想要的混合效果了;

这种技术在的标准地形编辑器中有使用。

如你所见,过渡很平滑,但不太自然。石头看起来就好像被沙子污染了,但在现实世界中这是不可能发生的情况。沙子不会粘着石头,相反地,沙子会落下来,填补到石头之间的缝隙里,而石头表面仍是干净的。

我们希望沙子会更多的在缝隙里面出现,而石头越高的地方沙子应该要越少,那么我们需要知道每一张贴图的深度信息,这里我把贴图对应的高度图保存在每张贴图的alpha通道。通过对比每张贴图的高度差,就可以知道应该显示哪张贴图了,为了简化,我们先计算两张贴图混合的情况,代码如下:

a194-4.png

`得到的是这么样的效果:

a194-5.png

其中用于混合的两张贴图和他们的透明通道分别是这样的:

a194-6.png

我们加上splat_control 贴图的影响试试:
a194-7.png

得到这样的效果:
a194-8.png

相比原来的线性混合,现在看起来已经自然很多了,沙子落在石砖路的缝隙里,并慢慢减少;但因为目前只是单纯的判断显示那个贴图,所以边缘看起来太硬了,人工痕迹比较明显,为了改进效果,我们给边缘增加一点过渡。

a194-8-2.png
解释一下这段代码,先对比两张贴图的高度,高度差超过0.3的会被舍弃掉,为了防止在边缘以外的地方也被保留下来了,所以后面再乘一次splat_control,最后做一个标准化处理,把他们按比例缩放到0-1这个区间。

于是,我们就得到了下面的这个效果:
a194-8-3.png

看起来非常自然,沙子慢慢过渡到石砖路,砖面上的沙子比较少,缝隙里的沙子更多 。

我们把这个算法拓展到4张贴图,并通过一个值来控制混合的权重,完整代码如下:
a194-9.png
a194-10.png
a194-11.png
a194-12.png

最终效果:
左边混合权重为0.2,右边为1,混合权重为1的时候其实就是普通的线性混合了。
a194-13.png

加上法线和高光的效果:
a194-14.png

来源:知乎
作者:喵喵Mya
04-2.jpg

点击标签,内容一促即达。

灵动像素
自我介绍空空的,快来写点什么吧~
上海市
其他作品 (321)

基于高度的纹理混合shader

2358 10 5年前
您需要登录后才可以回帖 登录

全部评论
这么6的分享,竟然我是第一个回复!?
5年前 回复
好资源~!且行且学习
5年前 回复

感谢分享~
5年前 回复
谢谢大佬分享
5年前 回复
好资源~!且行且学习
5年前 回复
资源甚好!感谢分享!
5年前 回复
謝謝分享
5年前 回复
謝謝分享
5年前 回复
谢谢楼主分享
5年前 回复
数据加载中...
没有更多评论了
快速回复 返回顶部 返回列表