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
        }
    }
}

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

效果如下:



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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,776评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,527评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,361评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,430评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,511评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,544评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,561评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,315评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,763评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,070评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,235评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,911评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,554评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,173评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,424评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,106评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,103评论 2 352