灵动像素 发表于 2018-11-1 20:08

基于高度的纹理混合shader

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

说到贴图混合,也许你已经听说过Texture Splatting技术了,这个术语是Charles Bloom创造的,他在http://www.cbloom.com/3d/techdocs/splatting.txt里对这个技术进行了阐述;
混合的最简单做法就是,把贴图颜色的不透明度相乘,然后把结果相加 ,效果如下:

核心代码如下:

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

这种技术在的标准地形编辑器中有使用。
如你所见,过渡很平滑,但不太自然。石头看起来就好像被沙子污染了,但在现实世界中这是不可能发生的情况。沙子不会粘着石头,相反地,沙子会落下来,填补到石头之间的缝隙里,而石头表面仍是干净的。
我们希望沙子会更多的在缝隙里面出现,而石头越高的地方沙子应该要越少,那么我们需要知道每一张贴图的深度信息,这里我把贴图对应的高度图保存在每张贴图的alpha通道。通过对比每张贴图的高度差,就可以知道应该显示哪张贴图了,为了简化,我们先计算两张贴图混合的情况,代码如下:

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


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

我们加上splat_control 贴图的影响试试:
得到这样的效果:
相比原来的线性混合,现在看起来已经自然很多了,沙子落在石砖路的缝隙里,并慢慢减少;但因为目前只是单纯的判断显示那个贴图,所以边缘看起来太硬了,人工痕迹比较明显,为了改进效果,我们给边缘增加一点过渡。
解释一下这段代码,先对比两张贴图的高度,高度差超过0.3的会被舍弃掉,为了防止在边缘以外的地方也被保留下来了,所以后面再乘一次splat_control,最后做一个标准化处理,把他们按比例缩放到0-1这个区间。
于是,我们就得到了下面的这个效果:
看起来非常自然,沙子慢慢过渡到石砖路,砖面上的沙子比较少,缝隙里的沙子更多 。
我们把这个算法拓展到4张贴图,并通过一个值来控制混合的权重,完整代码如下:
最终效果:左边混合权重为0.2,右边为1,混合权重为1的时候其实就是普通的线性混合了。
加上法线和高光的效果:
来源:知乎作者:喵喵Mya

超級阿仁 发表于 2018-12-18 11:19

资源甚好!感谢分享!

蓝星的眼泪 发表于 2018-11-4 23:12

谢谢楼主分享

鳳梨梨 发表于 2018-11-3 14:32

謝謝分享

鳳梨梨 发表于 2018-11-3 14:24

謝謝分享

szwubian 发表于 2018-11-2 11:48

资源甚好!感谢分享!

502690170 发表于 2018-11-2 11:16

好资源~!且行且学习

kotarou 发表于 2018-11-2 10:32

谢谢大佬分享

W_TING 发表于 2018-11-2 10:02


感谢分享~

∝JanSóN℡ 发表于 2018-11-2 09:31

好资源~!且行且学习
页: [1] 2
查看完整版本: 基于高度的纹理混合shader