shader学习之路（3）-纹理压缩与混合

前言

最近看书看很慢，过了好久也才看到shader的纹理混合与压缩这块儿，纹理混合与压缩，在游戏中是比较常见的技术，例如在一些简易的地形贴图中便使用了纹理混合，通常在shader中加载一个填充了灰度图像的混合纹理，根据该纹理的各个通道分别混合各种贴图，来实现一个混合纹理。

由上图可以看到，根据这张灰度图，如果在不同通道上混合不同的纹理，便能能创造出指定的混合结果。

准备工作

素材准备：下载素材包
将Unity assets中5084_02_UnityAssets.rar解压后的Texture文件夹还有Terrain_001.fbx文件拷贝到unity工程目录。

内置方法：
在此先提及下线性插值，CGFX中的线性插值函数lerp(a,b,f)简介如下

意即根据f的值，返回a、b之间的某个值，在unity3d引擎中，常用的Mathf.Lerp()函数也是这个原理。
两个纹理通过混合的灰度图作为f参数，就能获得如下的插值结果。

tex2D(a,b)：ａ为纹理贴图，ｂ为uv坐标
saturate(x):如果 x 小于 0 ，返回 0 ；如果 x 大于 1 ，返回 1 ；否则，返回 x

Shader编写

打开，创建好surface shader后，添加如下Properties：

    Properties {        _MainTint ("Diffuse Tint", Color) = (1,1,1,1)        _ColorA ("Terrain ColorA", Color) = (1,1,1,1)        _ColorB ("Terrain ColorB", Color) = (1,1,1,1)        _RTexture("R Channel Texture", 2D) = ""{}        _GTexture("G Channel Texture", 2D) = ""{}        _BTexture("B Channel Texture", 2D) = ""{}        _ATexture("Alpha Channel Texture", 2D) = ""{}        _BlendTexture("Blend Channel Texture", 2D) = ""{}    }

前三项为混合的颜色参考值，相应的需要在SubShader中定义如下变量，使其和Properties中的属性相链接

        float4 _MainTint;        float4 _ColorA;         float4 _ColorB;        sampler2D _RTexture;        sampler2D _GTexture;        sampler2D _BTexture;        sampler2D _ATexture;        sampler2D _BlendTexture;

使用自带光照模型Lambert，在此需要注意，如果系统自动生成的字段有
pragma target 3.0，请务必将其改为4.0及以上，因为3.0中无法支持同时加载如此多的贴图的限制

        CGPROGRAM        // Physically based Standard lighting model, and enable shadows on all light types        #pragma surface surf Lambert        #pragma target 4.0

为了将uv值和贴图相链接，input结构体需要为变量添加uv_的字段头

        struct Input {            float2 uv_RTexture;            float2 uv_GTexture;            float2 uv_BTexture;            float2 uv_ATexture;            float2 uv_BlendTexture;        };

随后编写surf函数，先加载四张用于混合的贴图信息，并加载灰度图

            float4 blendData = tex2D(_BlendTexture, IN.uv_BlendTexture);            float4 rTexData = tex2D(_RTexture, IN.uv_RTexture);            float4 gTexData = tex2D(_GTexture, IN.uv_GTexture);            float4 bTexData = tex2D(_BTexture, IN.uv_BTexture);            float4 aTexData = tex2D(_ATexture, IN.uv_ATexture);

随后将最终贴图的颜色值根据灰度图进行插值计算，插值计算的参数即为刚才加载的四个贴图参数。

            float4 finalColor;            finalColor = lerp(rTexData, gTexData, blendData.g);            finalColor = lerp(finalColor, bTexData, blendData.b);            finalColor = lerp(finalColor, aTexData, blendData.a);            finalColor.a = 1.0;

最后创建地形的着色值，其值将在_ColorA\ _ColorB之间由灰度图的红色通道来确定，最后将着色值同混合纹理相乘。注意最后的颜色值使用了sature()来避免计算结果超出1或者小于0。

            float4 terrainLayers = lerp(_ColorA, _ColorB, blendData);            finalColor *= terrainLayers;            finalColor = saturate(finalColor);            o.Albedo = finalColor.rgb * _MainTint.rgb;            o.Alpha = finalColor.a;

最终shader代码如下

Shader "Custom/PackAndBlend" {    Properties {        _MainTint ("Diffuse Tint", Color) = (1,1,1,1)        _ColorA ("Terrain ColorA", Color) = (1,1,1,1)        _ColorB ("Terrain ColorB", Color) = (1,1,1,1)        _RTexture("R Channel Texture", 2D) = ""{}        _GTexture("G Channel Texture", 2D) = ""{}        _BTexture("B Channel Texture", 2D) = ""{}        _ATexture("Alpha Channel Texture", 2D) = ""{}        _BlendTexture("Blend Channel Texture", 2D) = ""{}    }    SubShader {        Tags { "RenderType"="Opaque" }        LOD 200        CGPROGRAM        // Physically based Standard lighting model, and enable shadows on all light types        #pragma surface surf Lambert        // Use shader model 3.0 target, to get nicer looking lighting        #pragma target 4.0        float4 _MainTint;        float4 _ColorA;         float4 _ColorB;        sampler2D _RTexture;        sampler2D _GTexture;        sampler2D _BTexture;        sampler2D _ATexture;        sampler2D _BlendTexture;        struct Input {            float2 uv_RTexture;            float2 uv_GTexture;            float2 uv_BTexture;            float2 uv_ATexture;            float2 uv_BlendTexture;        };        void surf (Input IN, inout SurfaceOutput o) {            float4 blendData = tex2D(_BlendTexture, IN.uv_BlendTexture);            float4 rTexData = tex2D(_RTexture, IN.uv_RTexture);            float4 gTexData = tex2D(_GTexture, IN.uv_GTexture);            float4 bTexData = tex2D(_BTexture, IN.uv_BTexture);            float4 aTexData = tex2D(_ATexture, IN.uv_ATexture);            float4 finalColor;            finalColor = lerp(rTexData, gTexData, blendData.g);            finalColor = lerp(finalColor, bTexData, blendData.b);            finalColor = lerp(finalColor, aTexData, blendData.a);            finalColor.a = 1.0;            float4 terrainLayers = lerp(_ColorA, _ColorB, blendData);            finalColor *= terrainLayers;            finalColor = saturate(finalColor);            o.Albedo = finalColor.rgb * _MainTint.rgb;            o.Alpha = finalColor.a;        }        ENDCG    }    FallBack "Diffuse"}

最终效果

创建新的Material后将改shader放入其中，随后在shader属性中放入Textures文件夹中的Chapter02_RockSmooth0045_2_S.jpg、Chapter02_SandPebbles0027_1_S.jpg、Chapter02_Grass0103_2_S.jpg、Chapter02_SandPebbles0030_3_S.jpg、Chapter02_TerrainBlend_001.tga

除开Blend Channel Texture中必须放入Chapter02_TerrainBlend_001.tga以外，其他的几张贴图的可以互换放入的位置
最终效果如图：

当然可以尝试修改shader参数来观察参数变化带来的效果变化，例如修改ColorA参数，可以的得到下面的效果

虽然游戏实际开发中的贴图更加复杂，但在没接触shader前，对地形贴图的概念还在刷刷草地、雪地的帝国时代2编辑器那种认识，显然使用shader来做这个带来的新的思维，而使用shader本身也应该是开发中需要多多接触了解的。

以上文章所使用的图片和素材均来自：
Unity Shaders and Effects Cookbook