Unity Shader入门精要-章节07 基础纹理

求知若饥，虚心若愚

纹理映射坐标会储存在顶点上（纹理（uv）展开是美术软件负责的），一般uv坐标会归一化到[0,1]，但采样可以超过这个范围，纹理的平铺模式将决定如何处理超出采样范围的情况。不同图形API对于采样坐标系不一样，unity采用和OpenGL一样的左下角模式。

单张纹理

实践

Shader "UnityShadersLearn/Chapter7/SimpleTexture"
{
    Properties
    {
        _Diffuse("Color Tint", COLOR) = (1.0, 1.0, 1.0, 1.0)
        _MainTex("Main Tex", 2D) = "white" {}
        _Specular("Specular", COLOR) = (1.0, 1.0, 1.0, 1.0)
        _Gloss("Gloss", RANGE(8.0, 256)) = 20
    }
    SubShader
    {
        Pass {
            Tags {"LightMode"="ForwardBase"}
            CGPROGRAM
            #include "Lighting.cginc"

            #pragma vertex vert;
            #pragma fragment frag;

            fixed4 _Diffuse;
            sampler2D _MainTex;
            // 纹理名加_ST获取缩放和平移
            float4 _MainTex_ST;
            fixed4 _Specular;
            float _Gloss;

            struct a2v
            {
                float4 vertex : POSITION;
                float3 normal : NORMAL;
                float4 texcoord : TEXCOORD0;
            };

            struct v2f
            {
                float4 pos : SV_POSITION;
                float3 worldNormal : TEXCOORD0;
                float3 worldPos : TEXCOORD1;
                float2 uv : TEXCOORD2;
            };

            v2f vert(a2v v)
            {
                v2f o;
                o.pos = UnityObjectToClipPos(v.vertex);
                o.worldNormal = UnityObjectToWorldNormal(v.normal);
                o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;
                o.uv = v.texcoord.xy * _MainTex_ST.xy + _MainTex_ST.zw;
                // o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
                return o;
            }

            fixed4 frag(v2f i) : SV_Target
            {
                fixed3 albedo = tex2D(_MainTex, i.uv).rgb * _Diffuse.rgb;
                
                fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz * albedo;

                fixed3 worldNormal = normalize(i.worldNormal);
                fixed3 worldLightDir = normalize(UnityWorldSpaceLightDir(i.worldPos));
                fixed3 diffuse = _LightColor0.rgb * albedo * saturate(dot(worldNormal, worldLightDir));

                fixed3 viewDir = normalize(UnityWorldSpaceViewDir(i.worldPos));
                fixed3 halfDir = normalize(viewDir + worldLightDir);
                fixed3 specular = _Specular.rgb * _LightColor0.rgb * pow(saturate(dot(halfDir, worldNormal)), _Gloss);

                return fixed4(ambient + diffuse + specular, 1.0);
            }
            
            ENDCG
        }
    }
    FallBack "Specular"
}

纹理的属性

Texture下复选框Alpha from Grayscale：透明通道的值由每个像素的灰度值计算

平铺模式Wrap Mode：Repeat（超出1的部分舍弃整数按小数继续采样）、Clamp（超出部分取最大值，负数取0）。

1
2
3

//shader中还需要对纹理坐标变换
o.uv = v.texcoord.xy * _MainTex_ST.xy + _MainTex_ST.zw;
// o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);

滤波模式 Filter Mode：纹理由于变换产生拉伸时怎么处理

通常纹理缩小更复杂，多个像素将会对于一个目标像素，以及需要处理抗锯齿。

mipmapping：多级渐远纹理，空间多了33%来节省远处物体的内存
- Point，采样像素通常只有一个，图像有种像素风格
- Bilinear，找到4个临近像素采样进行线性插值
- Trilinear，在Bilinear基础上在多级渐远纹理之间混合，如果不开启mipmapping则没有区别
最后使用POT纹理，即大小为2的幂，对内存占用和GPU读取速度都有帮助

凹凸映射

高度纹理

高度图存储的是强度值，用于表示模型表面局部的海拔高度。好处是很直观看到地形的高低，坏处是计算更加复杂，需要计算像素的灰度值来偏移表面法线。通常会和法线映射一起使用，用于给出表面凹凸的额外信息。

法线纹理

由于法线分量范围在[-1, 1]，而像素分量范围在[0, 1]，所以一般都会做如下映射：

所以在shader中采样需要逆映射回来正确的值（正常情况下，但有些用了压缩算法可能不一样）

[ ] ~~模型空间的法线纹理~~
[x] 切线空间的法线纹理

模型空间下更加直观，实现也简单，但使用切线空间可以将纹理应用到不同的网格上（记录的是相对法线），还可以进行UV动画（水或者火山熔岩），可压缩的（Z方向总是正方向可以通过XY推导）

模型顶点的切线空间。其中，原点对应了顶点坐标，x轴是切线方向（t），y轴是副切线方向（b），z轴是法线方向（n）

左图：模型空间下的法线纹理。右图：切线空间下的法线纹理

实践

在切线空间下计算

Shader "UnityShadersLearn/Chapter7/Normal Map In Tangent Space"
{
    Properties
    {
        _Color ("Color Tint", Color) = (1.0, 1.0, 1.0, 1.0)
        _MainTex ("Main Tex", 2D) = "white" {}
        _BumpMap ("Normal Map", 2D) = "bump" {}
        _BumpScale ("Bump Scale", Float) = 1.0
        _Specular ("Specular", Color) = (1,1,1,1)
        _Gloss ("Gloss", Range(8.0, 255)) = 20
    }
    SubShader
    {
        Pass
        {
            Tags {"LightMode"="ForwardBase"}
            CGPROGRAM
            #pragma vertex vert;
            #pragma fragment frag;

            #include "Lighting.cginc"

            fixed4 _Color;
            sampler2D _MainTex;
            float4 _MainTex_ST;
            sampler2D _BumpMap;
            float4 _BumpMap_ST;
            float _BumpScale;
            fixed4 _Specular;
            float _Gloss;

            struct a2v
            {
                float4 vertex : POSITION;
                float3 normal : NORMAL;
                float4 tangent : TANGENT;
                float4 texcoord : TEXCOORD0;
            };

            struct v2f
            {
                float4 pos : SV_POSITION;
                float4 uv : TEXCOORD0;
                float3 lightDir : TEXCOORD1;
                float3 viewDir : TEXCOORD2;
            };

            v2f vert(a2v v)
            {
                v2f o;
                o.pos = UnityObjectToClipPos(v.vertex);
                
                o.uv.xy = v.texcoord.xy * _MainTex_ST.xy + _MainTex_ST.zw;
                o.uv.zw = v.texcoord.xy * _BumpMap_ST.xy + _BumpMap_ST.zw;

                // // 计算副切线方向，切线的w是保留了方向
                // float3 binormal = cross(normalize(v.normal), normalize(v.tangent.xyz)) * v.tangent.w;
                // // 模型到切线空间矩阵（利用了正交矩阵的逆矩阵是其转置矩阵）
                // float3x3 rotation = float3x3(v.tangent.xyz, binormal, v.normal);

                // 使用内置宏来快速计算变换矩阵
                TANGENT_SPACE_ROTATION;

                // 求切线空间下的光照方向
                o.lightDir = mul(rotation, ObjSpaceLightDir(v.vertex)).xyz;
                // 求切线空间下的视角方向
                o.viewDir = mul(rotation, ObjSpaceViewDir(v.vertex)).xyz;
                return o;
            }

            fixed4 frag(v2f i) : SV_Target
            {
                fixed3 tangentLightDir = normalize(i.lightDir);
                fixed3 tangentViewDir = normalize(i.viewDir);

                fixed4 packedNormal = tex2D(_BumpMap, i.uv.zw);
                fixed3 tangentNormal;
                // 自动将纹理范围转换为法线范围，且还能读取unity优化后的正确值（在贴图属性面板标记为Normal Map）
                // tangentNormal.xy = packedNormal.xy * 2 - 1;
                tangentNormal = UnpackNormal(packedNormal);
                // 使用_BumpScale控制凹凸程度
                tangentNormal.xy *= _BumpScale;
                // 由于是单位矢量，且z方向确定，所以可以这样计算z
                tangentNormal.z = sqrt(1.0 - saturate(dot(tangentNormal.xy, tangentNormal.xy)));

                fixed3 albedo = tex2D(_MainTex, i.uv.xy).rgb * _Color.rgb;
                fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz * albedo;
                fixed3 diffuse = _LightColor0.rgb * albedo * saturate(dot(tangentNormal, tangentLightDir));

                fixed3 halfDir = normalize(tangentLightDir + tangentViewDir);
                fixed3 specular = _LightColor0.rgb * _Specular.rgb * pow(saturate(dot(tangentNormal, halfDir)), _Gloss);

                return fixed4(ambient + diffuse + specular, 1.0);
            }
            ENDCG
        }
    }
    FallBack "Specular"
}

在世界空间下计算，尽管需要更多的计算，但在需要使用Cubemap进行环境映射等情况下，就需要用这种

Shader "UnityShadersLearn/Chapter7/Normal Map In World Space"
{
    Properties
    {
        _Color ("Color Tint", Color) = (1.0, 1.0, 1.0, 1.0)
        _MainTex ("Main Tex", 2D) = "white" {}
        _BumpMap ("Normal Map", 2D) = "bump" {}
        _BumpScale ("Bump Scale", Float) = 1.0
        _Specular ("Specular", Color) = (1,1,1,1)
        _Gloss ("Gloss", Range(8.0, 255)) = 20
    }
    SubShader
    {
        Pass
        {
            Tags {"LightMode"="ForwardBase"}
            CGPROGRAM
            #pragma vertex vert;
            #pragma fragment frag;

            #include "Lighting.cginc"

            fixed4 _Color;
            sampler2D _MainTex;
            float4 _MainTex_ST;
            sampler2D _BumpMap;
            float4 _BumpMap_ST;
            float _BumpScale;
            fixed4 _Specular;
            float _Gloss;

            struct a2v
            {
                float4 vertex : POSITION;
                float3 normal : NORMAL;
                float4 tangent : TANGENT;
                float4 texcoord : TEXCOORD0;
            };

            struct v2f
            {
                float4 pos : SV_POSITION;
                float4 uv : TEXCOORD0;
                // 存储切线变换世界空间的矩阵，以及z分量来保存顶点世界空间
                float4 TtoW0 : TEXCOORD1;
                float3 TtoW1 : TEXCOORD2;
                float3 TtoW2 : TEXCOORD3;
            };

            v2f vert(a2v v)
            {
                v2f o;
                o.pos = UnityObjectToClipPos(v.vertex);
                
                o.uv.xy = v.texcoord.xy * _MainTex_ST.xy + _MainTex_ST.zw;
                o.uv.zw = v.texcoord.xy * _BumpMap_ST.xy + _BumpMap_ST.zw;

                float3 worldPos = mul(unity_ObjectToWorld, v.vertex);
                float3 worldNormal = UnityObjectToWorldNormal(v.normal);
                float3 worldTangent = UnityObjectToWorldDir(v.tangent);
                float3 worldBinormal = cross(worldNormal, worldTangent) * v.tangent.w;

                o.TtoW0 = float4(worldTangent.x, worldBinormal.x, worldNormal.x, worldPos.x);
                o.TtoW1 = float4(worldTangent.y, worldBinormal.y, worldNormal.y, worldPos.y);
                o.TtoW2 = float4(worldTangent.z, worldBinormal.z, worldNormal.z, worldPos.z);
                return o;
            }

            fixed4 frag(v2f i) : SV_Target
            {
                float3 worldPos = float3(i.TtoW0.z, i.TtoW1.z, i.TtoW2.z);
                
                fixed3 worldLightDir = normalize(UnityWorldSpaceLightDir(worldPos));
                fixed3 worldViewDir = normalize(UnityWorldSpaceViewDir(worldPos));

                // 自动将纹理范围转换为法线范围，且还能读取unity优化后的正确值（在贴图属性面板标记为Normal Map）
                // tangentNormal.xy = packedNormal.xy * 2 - 1;
                fixed3 bump = UnpackNormal(tex2D(_BumpMap, i.uv.zw));
                // 使用_BumpScale控制凹凸程度
                bump.xy *= _BumpScale;
                // 由于是单位矢量，且z方向确定，所以可以这样计算z
                bump.z = sqrt(1.0 - saturate(dot(bump.xy, bump.xy)));
                // 相当于对法线进行从切线空间变换到世界空间
                bump = normalize(half3(dot(i.TtoW0.xyz, bump), dot(i.TtoW1.xyz, bump), dot(i.TtoW2, bump)));

                fixed3 albedo = tex2D(_MainTex, i.uv.xy).rgb * _Color.rgb;
                fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz * albedo;
                fixed3 diffuse = _LightColor0.rgb * albedo * saturate(dot(bump, worldLightDir));

                fixed3 halfDir = normalize(worldLightDir + worldViewDir);
                fixed3 specular = _LightColor0.rgb * _Specular.rgb * pow(saturate(dot(bump, halfDir)), _Gloss);

                return fixed4(ambient + diffuse + specular, 1.0);
            }
            ENDCG
        }
    }
    FallBack "Specular"
}

当使用UnpackNormal函数计算法线纹理中的法线方向时，需要把纹理类型标识为Normal map

当勾选了Create from Grayscale后，Unity会根据高度图来生成一张切线空间下的法线纹理

渐变纹理

使用渐变纹理可以控制漫反射光照的结果。1998年Gooch等人发表了一篇论文《A Non-Photorealistic Lighting Model For Automatic Technical Illustration》中最初提到这个技术，在这篇论文中，作者提出了一种基于冷到暖色调的着色技术，用来得到一种插画风格的渲染效果。使用这种技术，可以保证物体的轮廓线相比于之前的传统漫反射更加明显，而且能提供各种色调变化。现在很多卡通风格的渲染都使用了这种技术。

使用不同的渐变纹理控制漫反射光照，左下角给出了每张图使用的渐变纹理

Shader "UnityShadersLearn/Chapter7/RampTexture"
{
    Properties
    {
        _Color("Color Tint", COLOR) = (1.0, 1.0, 1.0, 1.0)
        _RampTex("Ramp Tex", 2D) = "white" {}
        _Specular("Specular", COLOR) = (1.0, 1.0, 1.0, 1.0)
        _Gloss("Gloss", RANGE(8.0, 256)) = 20
    }
    SubShader
    {
        Pass {
            Tags {"LightMode"="ForwardBase"}
            CGPROGRAM
            #include "Lighting.cginc"

            #pragma vertex vert;
            #pragma fragment frag;

            fixed4 _Color;
            sampler2D _RampTex;
            // 纹理名加_ST获取缩放和平移
            float4 _RampTex_ST;
            fixed4 _Specular;
            float _Gloss;

            struct a2v
            {
                float4 vertex : POSITION;
                float3 normal : NORMAL;
                float4 texcoord : TEXCOORD0;
            };

            struct v2f
            {
                float4 pos : SV_POSITION;
                float3 worldNormal : TEXCOORD0;
                float3 worldPos : TEXCOORD1;
                float2 uv : TEXCOORD2;
            };

            v2f vert(a2v v)
            {
                v2f o;
                o.pos = UnityObjectToClipPos(v.vertex);
                o.worldNormal = UnityObjectToWorldNormal(v.normal);
                o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;
                o.uv = v.texcoord.xy * _RampTex_ST.xy + _RampTex_ST.zw;
                // o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
                return o;
            }

            fixed4 frag(v2f i) : SV_Target
            {
                fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz;

                fixed3 worldNormal = normalize(i.worldNormal);
                fixed3 worldLightDir = normalize(UnityWorldSpaceLightDir(i.worldPos));
                fixed halfLambert = 0.5 * saturate(dot(worldNormal, worldLightDir)) + 0.5;
                // 其实是将半兰伯特的结果拿去采样新的颜色了，_RampTex其实是一维纹理
                fixed3 diffuseColor = tex2D(_RampTex, half2(halfLambert, halfLambert)).rgb * _Color.rgb;
                fixed3 diffuse = _LightColor0.rgb * diffuseColor;

                fixed3 viewDir = normalize(UnityWorldSpaceViewDir(i.worldPos));
                fixed3 halfDir = normalize(viewDir + worldLightDir);
                fixed3 specular = _Specular.rgb * _LightColor0.rgb * pow(saturate(dot(halfDir, worldNormal)), _Gloss);

                return fixed4(ambient + diffuse + specular, 1.0);
            }
            
            ENDCG
        }
    }
    FallBack "Specular"
}

Wrap Mode分别为Repeat和Clamp模式的效果对比，这是由于浮点数精度原因，可能取到1.00001，就映射到头部颜色了。

遮罩纹理

遮罩运行我们可以保护某些区域，使它们免于某些修改
使模型表面某些区域的反光强烈一些，某些区域弱一些，来获得更细腻的效果
制作地形材质使需要混合多张图片，控制如何混合这些图片
原理是某个通道×某种表面属性值后，如果为0则保护表面不受这种属性的影响

Shader "UnityShadersLearn/Chapter7/Mask Texture"
{
    Properties
    {
        _Color ("Color Tint", Color) = (1.0, 1.0, 1.0, 1.0)
        _MainTex ("Main Tex", 2D) = "white" {}
        _BumpMap ("Normal Map", 2D) = "bump" {}
        _BumpScale ("Bump Scale", Float) = 1.0
        _SpecularMask ("Specular Mask", 2D) = "bump" {}
        _SpecularScale ("Specular Scale", Float) = 1.0
        _Specular ("Specular", Color) = (1,1,1,1)
        _Gloss ("Gloss", Range(8.0, 255)) = 20
    }
    SubShader
    {
        Pass
        {
            Tags {"LightMode"="ForwardBase"}
            CGPROGRAM
            #pragma vertex vert;
            #pragma fragment frag;

            #include "Lighting.cginc"

            fixed4 _Color;
            sampler2D _MainTex;
            // 三张贴图使用同一个偏移来节省插值寄存器
            float4 _MainTex_ST;
            sampler2D _BumpMap;
            float _BumpScale;
            sampler2D _SpecularMask;
            float _SpecularScale;
            fixed4 _Specular;
            float _Gloss;

            struct a2v
            {
                float4 vertex : POSITION;
                float3 normal : NORMAL;
                float4 tangent : TANGENT;
                float4 texcoord : TEXCOORD0;
            };

            struct v2f
            {
                float4 pos : SV_POSITION;
                float4 uv : TEXCOORD0;
                float3 lightDir : TEXCOORD1;
                float3 viewDir : TEXCOORD2;
            };

            v2f vert(a2v v)
            {
                v2f o;
                o.pos = UnityObjectToClipPos(v.vertex);
                
                o.uv.xy = v.texcoord.xy * _MainTex_ST.xy + _MainTex_ST.zw;

                // // 计算副切线方向，切线的w是保留了方向
                // float3 binormal = cross(normalize(v.normal), normalize(v.tangent.xyz)) * v.tangent.w;
                // // 模型到切线空间矩阵（利用了正交矩阵的逆矩阵是其转置矩阵）
                // float3x3 rotation = float3x3(v.tangent.xyz, binormal, v.normal);

                // 使用内置宏来快速计算变换矩阵
                TANGENT_SPACE_ROTATION;

                // 求切线空间下的光照方向
                o.lightDir = mul(rotation, ObjSpaceLightDir(v.vertex)).xyz;
                // 求切线空间下的视角方向
                o.viewDir = mul(rotation, ObjSpaceViewDir(v.vertex)).xyz;
                return o;
            }

            fixed4 frag(v2f i) : SV_Target
            {
                fixed3 tangentLightDir = normalize(i.lightDir);
                fixed3 tangentViewDir = normalize(i.viewDir);

                fixed4 packedNormal = tex2D(_BumpMap, i.uv);
                fixed3 tangentNormal;
                // 自动将纹理范围转换为法线范围，且还能读取unity优化后的正确值（在贴图属性面板标记为Normal Map）
                // tangentNormal.xy = packedNormal.xy * 2 - 1;
                tangentNormal = UnpackNormal(packedNormal);
                // 使用_BumpScale控制凹凸程度
                tangentNormal.xy *= _BumpScale;
                // 由于是单位矢量，且z方向确定，所以可以这样计算z
                tangentNormal.z = sqrt(1.0 - saturate(dot(tangentNormal.xy, tangentNormal.xy)));

                fixed3 albedo = tex2D(_MainTex, i.uv).rgb * _Color.rgb;
                fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz * albedo;
                fixed3 diffuse = _LightColor0.rgb * albedo * saturate(dot(tangentNormal, tangentLightDir));

                fixed3 halfDir = normalize(tangentLightDir + tangentViewDir);
                // 只使用r分量是因为四个分量颜色值都一样，实际开发可以存储不同值给其他用途
                fixed specularMask = tex2D(_SpecularMask, i.uv).r * _SpecularScale;
                fixed3 specular = _LightColor0.rgb * _Specular.rgb
                    * pow(saturate(dot(tangentNormal, halfDir)), _Gloss) * specularMask;

                return fixed4(ambient + diffuse + specular, 1.0);
            }
            ENDCG
        }
    }
    FallBack "Specular"
}