Unity Shader:基础纹理

本文同时发布在我的个人博客上:https://dragon_boy.gitee.io

单张纹理

Shader代码如下:

Shader "Unlit/SingleTexture"
{
    Properties
    {
       _Color("Color Tint", Color) = (1,1,1,1)
       _MainTex("Main Tex", 2D) = "white"{}
       _Specular("Specular", Color) = (1,1,1,1)
       _Gloss("Gloss", Range(8.0,256)) = 20
    }
    SubShader
    {
        Pass
        {
            Tags { "LightMode" = "ForwardBase" }
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "Lighting.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float3 normal : NORMAL;
                float4 texCoord : TEXCOORD0;
            };

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

            fixed4 _Color;
            sampler2D _MainTex;
            float4 _MainTex_ST;
            fixed4 _Specular;
            float _Gloss;

            v2f vert(appdata v)
            {
                v2f o;

                // 将顶点坐标转化到切割空间
                o.pos = UnityObjectToClipPos(v.vertex);

                // 将顶点法线转化到世界空间
                o.worldNormal = UnityObjectToWorldNormal(v.normal);

                // 获取顶点世界空间位置
                o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;

                // 获取UV坐标
                o.uv = v.texCoord.xy * _MainTex_ST.xy + _MainTex_ST.zw;

                return o;
            }

            fixed4 frag(v2f i) : SV_Target
            {
                fixed3 worldNormal = normalize(i.worldNormal);
                fixed3 worldLightDir = normalize(UnityWorldSpaceLightDir(i.worldPos));
                // 使用纹理采样漫反射值
                fixed3 albedo = tex2D(_MainTex, i.uv).rgb * _Color.rgb;
                fixed3 diffuse = _LightColor0.rgb * albedo * max(dot(worldNormal, worldLightDir),0);
                //环境光
                fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz * albedo;
                //高光
                fixed3 viewDir = normalize(UnityWorldSpaceViewDir(i.worldPos));
                fixed3 halfDir = normalize(viewDir + worldLightDir);
                fixed3 specular = _LightColor0.rgb * _Specular.rgb * pow((max(dot(worldNormal, halfDir), 0)), _Gloss);

                // 结果
                fixed3 result = ambient + diffuse + specular;

                return fixed4(result, 1.0);
            }
            ENDCG
        }
    }
    Fallback "Specular"
}

2D是纹理的声明方式。

_MainTex_ST变量时纹理的缩放和平移的属性,_MainTex_ST.xy是缩放值,_MainTex_ST.zw是偏移值。

appdata结构体的TEXCOORD0中存储第一组纹理坐标。

o.uv = v.texCoord.xy * _MainTex_ST.xy + _MainTex_ST.zw;用来变换纹理坐标。或者可以使用内置宏定义:o.uv = TRANSFORM_TEX(v.texcoord,_MainTex);

上述宏定义如下:#define TRANSFORM_TEX(tex, name) (tex.xy * name##_ST.xy + name##_ST.zw)

片元着色器中使用tex2D(_MainTex, i.uv)来进行纹理采样。

效果如下:


凹凸映射

凹凸映射用来修改模型表面的法线,以便为模型提供更多的细节。

使用凹凸映射有两种方式:一是高度纹理,用来模拟置换,然后得到一个修改后的法线值。二是使用法线纹理,直接存储表面法线。

法线纹理

法线纹理中存储的是表面的法线方向。法线防线的分量范围在[-1,1]内,像素颜色的范围是[0,1],所以需要做一个映射。

我们往往不将模型空间的法线存储在法线纹理中,而是将切线空间中的法线存储在法线纹理中。每个顶点都有一个自己的切线空间,在这个空间中,原点就是该顶点本身,z轴是顶点的法线方向,x轴是顶点的切线方向,y轴由法线和切线叉乘得到,被称为副切线。

使用法线纹理

使用切线空间下的法线纹理计算光照有两种方式:一是在切线空间下进行光照计算,我们需要将光照方向、视角方向变换到切线空间下。二是在世界空间下计算光照,我们需要把采样的到的法线方向变换到世界空间下,再和世界空间下的光照方向和视角方向进行计算。

第一种方法往往要优于第二种方法,因为可以在顶点着色器中进行光照方向和视角方向的变换,而第二种方法需要先对法线纹理进行采样,所以计算都需要在片元着色器中进行。

切线空间下计算光照

在切线空间下进行光照计算,为此,我们需要在顶点着色器中将光照方向和视角方向从模型空间变换到切线空间。从切线空间转换到模型空间的矩阵很容易得到,按切线、副切线、法线的顺序按列排列为一个矩阵即可,由于是方向矢量,不存在缩放,只有平移和旋转,所以这个变换矩阵是正交矩阵,那么它的转置矩阵就是它的逆矩阵,所以按行排列这个矩阵即可,左乘这个转置矩阵。

Shader代码如下:

Shader "Unlit/NormalTexture"
{
    Properties
    {   
        _Color ("Color Tint", Color) = (1,1,1,1)
        _MainTex ("Texture", 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,256)) = 20
    }
    SubShader
    {
     
        Pass
        {
            Tags { "LightMode" = "ForwardBase" }
        
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "Lighting.cginc"
            

            struct appdata
            {
                float4 vertex : POSITION;
                float4 uv : TEXCOORD0;
                float4 tangent : TANGENT;
                float3 normal : NORMAL;
            };

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

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

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv.xy = TRANSFORM_TEX(v.uv.xy, _MainTex);
                o.uv.zw = TRANSFORM_TEX(v.uv.zw, _BumpMap);
                float3 bitangent = cross(normalize(v.tangent.xyz), normalize(v.normal)) * v.tangent.w;
                float3x3 rotation = float3x3(v.tangent.xyz, bitangent, v.normal);

                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;
                tangentNormal.xy = (packedNormal.xy * 2 - 1) * _BumpScale;
                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.rgb * albedo;

                //漫反射
                fixed3 diffuse = _LightColor0.rgb * albedo * max(0, dot(tangentNormal, tangentLightDir));

                //中间向量
                fixed3 halfDir = normalize(tangentViewDir + tangentLightDir);

                //高光
                fixed3 specular = _LightColor0.rgb * albedo * pow(max(0, dot(tangentNormal, halfDir)) ,_Gloss);

                //结果
                fixed3 result = ambient + diffuse + specular;

                return fixed4(result, 1.0);
                
                
            }
            ENDCG
        }
    }
            Fallback "Specular"
}

切线要存储在TANGENT语义中。

除了手动计算从模型空间变换到切线空间的矩阵,还可以使用Unity内置的宏定义(在"UnityCG.cginc"中被定义):

#define TANGENT_SPACE_ROTATION \
    float3 binormal = cross( normalize(v.normal), normalize(v.tangent.xyz) ) * v.tangent.w; \
    float3x3 rotation = float3x3( v.tangent.xyz, binormal, v.normal )

变换矩阵被存储在rotation变量中。如果要使用这个宏定义,相关变量的命名必须准确。

我们使用UnpackNormal函数来保证Untiy可以根据不同的平台来对法线纹理进行采样和解码。

效果如下:


在世界空间中计算光照同理,这里就不演示。

渐变纹理

Shader代码如下:

Shader "Unlit/RampTexture"
{
    Properties
    {
        _Color ("Color Tint", Color) = (1,1,1,1)
        _RampTex("Ramp Map", 2D) = "white"{}
        _Specular("Specular", Color) = (1,1,1,1)
        _Gloss("Gloss", Range(8.0, 256)) = 20 
    }
    SubShader
    {

        Pass
        {
            Tags { "LightMode" = "ForwardBase" }

            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
           
            #include "Lighting.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float3 normal : NORMAL;
                float4 texCoord : TEXCOORD0;
            };

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

            fixed4 _Color;
            sampler2D _RampTex;
            float4 _RampTex_ST;
            fixed4 _Specular;
            float _Gloss;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.worldNormal = UnityObjectToWorldNormal(v.normal);
                o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;
                o.uv = TRANSFORM_TEX(v.texCoord, _RampTex);
                
                return o;
            }

            fixed4 frag(v2f i) : SV_Target
            {
                fixed3 worldNormal = normalize(i.worldNormal);
                fixed3 worldLightDir = normalize(UnityWorldSpaceLightDir(i.worldPos));
                
                //ambient
                fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz;

                //diffuse
                fixed halfLambert = 0.5 * dot(worldNormal, worldLightDir) + 0.5;
                fixed3 diffuseColor = tex2D(_RampTex, fixed2(halfLambert, halfLambert)).rgb * _Color.rgb;
                fixed3 diffuse = _LightColor0.rgb * diffuseColor;

                //specular
                fixed3 viewDir = normalize(UnityWorldSpaceViewDir(i.worldPos));
                fixed3 halfDir = normalize(viewDir + worldLightDir);
                fixed3 specular = _LightColor0.rgb * _Color.rgb * pow(max(0 ,dot(worldNormal, halfDir)) ,_Gloss);

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

这里使用半兰伯特模型的值来构建纹理坐标,因为渐变纹理实际上是一个一维纹理(在纵轴方向上颜色不变),因此纹理坐标的u和v方向我们都是用半兰伯特值。

效果如下:


遮罩纹理

Shader代码如下:

Shader "Unlit/MaskTexture"
{
    Properties
    {   
        _Color("Color Tint", Color) = (1,1,1,1)
        _MainTex ("Texture", 2D) = "white" {}
        _BumpMap("Normal Map", 2D) = "bump"{}
        _BumpScale("Bump Scale", Float) = 1.0
        _SpecularMask("Specular Mask", 2D) = "white"{}
        _SpecularScale("Specular Scale", Float) = 1.0
        _Specular("Specular", Color) = (1,1,1,1)
        _Gloss("Gloss", Range(8.0, 256)) = 20
    }
    SubShader
    {  
        Pass
        {
            Tags { "LightMode" = "ForwardBase" }
       
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
           
            #include "Lighting.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float3 normal : NORMAL;
                float4 tangent : TANGENT;
                float2 uv : TEXCOORD0;
            };

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

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


            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                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);
                
                fixed3 tangentNormal = UnpackNormal(tex2D(_BumpMap, i.uv));
                tangentNormal.xy *= _BumpScale;
                tangentNormal.z = sqrt(1.0 - saturate(dot(tangentNormal.xy, tangentNormal.xy)));

                // 颜色采样
                fixed3 albedo = tex2D(_MainTex, i.uv) * _Color.rgb;

                //ambient
                fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.rgb * albedo;

                //diffuse
                fixed3 diffuse = _LightColor0.rgb * albedo * max(0, dot(tangentLightDir, tangentViewDir));

                //specular
                fixed3 halfDir = normalize(tangentLightDir + tangentViewDir);
                // specular mask
                fixed specularMask = tex2D(_SpecularMask, i.uv).r * _SpecularScale;
                fixed3 specular = _LightColor0.rgb * _Specular.rgb * pow(max(0, dot(tangentNormal, halfDir)) ,_Gloss) * specularMask;

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

我们将从高光遮罩纹理中采样的纹理的单通道值和高光缩放值相乘(越黑高光部分越弱)。

效果如下:



可以看到正方体的中间区域没有高光(因为设为了全黑)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。