【Aladdin-Unity3D-Shader编程】之五-模型常见特效

首先来看一个表情,搞笑是不是感觉很酷炫，这就是流光效果。我们也可以在模型上面来添加上这个效果，下面会介绍。

一、缩放效果

效果图



会看到模型有一个伸缩的效果

思路

贴图的模型坐标+=法线 * 缩放系数

Shader

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
Shader "AladdinShader/50 DirectionOffset Shader"
{
    Properties
    {
        _MainTex("Main Tex", 2D) = "white"{}
        _Scale("Scale", Range(0,0.006))=0.0006
    }
    SubShader {
        Pass{
            CGPROGRAM
#pragma vertex vert 
#pragma fragment frag 

            sampler2D _MainTex;
            fixed _Scale;

            struct a2v{
                fixed4 vertex:POSITION;
                fixed4 normal:NORMAL; 
                fixed2 uv:TEXCOORD0; 
            };

            struct v2f{
                fixed4 svPos:SV_POSITION;
                fixed2 uv:TEXCOORD1;
            };

            v2f vert(a2v v)
            {
                v2f f;
          		f.uv = v.uv;
          		v.vertex.xzy += _Scale * v.normal;
          		f.svPos = UnityObjectToClipPos(v.vertex);
                return f;
            } 

            fixed4 frag(v2f f):SV_Target{
                return tex2D(_MainTex,f.uv);
            }
            ENDCG
        }
    }
    FallBack  "Specular"
}

二、上下流光效果

效果图



这就是流光效果，只不过流光宽度有点宽而已，当然都可以自己调节颜色和宽度

思路

1
2
3
4
5
6
7
8
if(v.vertex.x <= _Pos && v.vertex.x >= _Pos - _Range)
{
    f.color = _Color;
}
else
{
    f.color = fixed4(1,1,1,1);
}

判断贴图模型坐标X是否在限定区域内，如果在的话就叠加上自定义的颜色，不在的话就叠加默认白色，也就是显示贴图本身颜色

Shader

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
Shader "AladdinShader/51 StreamerColor Shader"
{
    Properties
    {
        _MainTex("Main Tex", 2D) = "white"{}
        _Color("Color", Color) = (1,0,0,1)
        _Pos("Pos", Range(-1,1)) = -0.3
        _Range("Range", Range(0,2)) = 0.2
    }
    SubShader {
        Pass{
            CGPROGRAM
#pragma vertex vert 
#pragma fragment frag 

            sampler2D _MainTex;
            fixed4 _Color;
            fixed _Pos;
            fixed _Range;

            struct a2v{
                fixed4 vertex:POSITION;
                fixed2 uv:TEXCOORD0; 
            };

            struct v2f{
                fixed4 svPos:SV_POSITION;
                fixed2 uv:TEXCOORD1;
                fixed4 color:COLOR;
            };

            v2f vert(a2v v)
            {
                v2f f;
          		f.uv = v.uv;
          		if(v.vertex.x <= _Pos && v.vertex.x >= _Pos - _Range)
                {
                    f.color = _Color;
                }
                else
                {
                    f.color = fixed4(1,1,1,1);
                }
                f.svPos = UnityObjectToClipPos(v.vertex);
                return f;
            } 

            fixed4 frag(v2f f):SV_Target{
                return tex2D(_MainTex,f.uv) * f.color;
            }
            ENDCG
        }
    }
    FallBack  "Specular"
}

三、左右流光放大效果

效果图



左右流光和伸缩效果

思路

1
2
3
4
5
6
7
8
9
if(v.vertex.z <= _Pos && v.vertex.z >= _Pos - _Range)
{
    f.color = _Color;
    v.vertex.xyz += v.normal * _Scale;
}
else
{
    f.color = fixed4(1,1,1,1);
}

贴图的模型Z坐标判断是否在区域内，如果在的话则显示自定义的颜色并且根据法线缩放对应区域的贴图的模型坐标

Shader

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
Shader "AladdinShader/52 DirectionOffset Shader"
{
    Properties
    {
        _MainTex("Main Tex", 2D) = "white"{}
        _Color("Color", Color) = (1,0,0,1)
        _Pos("Pos", Range(-1,1)) = 0.1
        _Range("Range", Range(0,2)) = 0.2
        _Scale("Scale", Range(0,0.05)) = 0.02
    }
    SubShader {
        Tags{"RenderType"="Opaque"}
        LOD 100
        Pass{
            CGPROGRAM
            #pragma vertex vert 
            #pragma fragment frag 

            sampler2D _MainTex;
            fixed4 _Color;
            fixed _Pos;
            fixed _Range;
            fixed _Scale;

            struct a2v{
                fixed4 vertex:POSITION;
                fixed2 uv:TEXCOORD0; 
                fixed4 normal:NORMAL;
            };

            struct v2f{
                fixed4 svPos:SV_POSITION;
                fixed2 uv:TEXCOORD1;
                fixed4 color:COLOR;
            };

            v2f vert(a2v v)
            {
                v2f f;
          		f.uv = v.uv;
          		if(v.vertex.z <= _Pos && v.vertex.z >= _Pos - _Range)
                {
                    f.color = _Color;
                    v.vertex.xyz += v.normal * _Scale;
                }
                else
                {
                    f.color = fixed4(1,1,1,1);
                }
                f.svPos = UnityObjectToClipPos(v.vertex);
                return f;
            } 

            fixed4 frag(v2f f):SV_Target{
                return tex2D(_MainTex,f.uv) * f.color;
            }
            ENDCG
        }
    }
    FallBack  "Specular"
}

四、边缘高光

效果图



边缘高光在游戏中比较常用

思路

pass1 将贴图模型坐标根据法线*自定义系数进行偏移，然后设置Cull Front 面向摄像机的剔除 片元函数返回自定义的颜色
pass2 显示贴图本身的颜色

Shader

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
Shader "AladdinShader/53 OutLine Shader"
{
    Properties
    {
        _MainTex("Main Tex", 2D) = "white"{}
        _Outline("Outline",Range(0,0.025))=0.01
        _OutlineColor("Outline Color", Color)=(0,0,1,1)
    }
    SubShader {
        Tags{"RenderType"="Opaque"}
        LOD 100
        Pass {
            Cull Front //面相摄像机的去掉
            CGPROGRAM
            #pragma vertex vert 
            #pragma fragment frag 

            sampler2D _MainTex;
            fixed _Outline;
            fixed4 _OutlineColor;

            struct a2v{
                fixed4 vertex:POSITION;
                fixed4 normal:NORMAL;
            };

            struct v2f{
                fixed4 svPos:SV_POSITION;
            };

            v2f vert(a2v v)
            {
                v2f f;
                v.vertex.xyz += v.normal * _Outline;
                f.svPos = UnityObjectToClipPos(v.vertex);
                return f;
            }
            fixed4 frag(v2f f):SV_Target
            {
                return _OutlineColor;
            }
            ENDCG
        }
        Pass{
            CGPROGRAM
            #pragma vertex vert 
            #pragma fragment frag 

            sampler2D _MainTex;

            struct a2v{
                fixed4 vertex:POSITION;
                fixed2 uv:TEXCOORD0; 
            };

            struct v2f{
                fixed4 svPos:SV_POSITION;
                fixed2 uv:TEXCOORD1;
            };

            v2f vert(a2v v)
            {
                v2f f;
          		f.uv = v.uv;
                f.svPos = UnityObjectToClipPos(v.vertex);
                return f;
            } 

            fixed4 frag(v2f f):SV_Target{
                return tex2D(_MainTex,f.uv);
            }
            ENDCG
        }
    }
    FallBack  "Specular"
}

五、渐隐效果

效果图



渐隐藏效果在游戏中最常用不过了，但这种效果并不是特别好，后面还会有结合发现贴图实现的溶解效果。

思路

设置透明体，然后在片元函数中返回透明系数

Shader

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
Shader "AladdinShader/54 Fade Shader"
{
    Properties
    {
        _MainTex("Main Tex", 2D) = "white"{}
        _Transparency("_Transparency", Range(0,1))=0.5
    }
    SubShader {
        //设置透明体
        Tags{"RenderType"="Transparent" "Queue"="Transparent"}
        LOD 100
        Pass {
            Blend SrcAlpha OneMinusSrcAlpha

            CGPROGRAM
            #pragma vertex vert 
            #pragma fragment frag 

            sampler2D _MainTex;
            fixed _Transparency;

            struct a2v{
                fixed4 vertex:POSITION;
                fixed4 normal:NORMAL;
                fixed2 uv:TEXCOORD0; 
            };

            struct v2f{
                fixed4 svPos:SV_POSITION;
                fixed2 uv:TEXCOORD1;
            };

            v2f vert(a2v v)
            {
                v2f f;
                f.uv = v.uv;
                f.svPos = UnityObjectToClipPos(v.vertex);
                return f;
            }
            fixed4 frag(v2f f):SV_Target
            {
                fixed4 color = tex2D(_MainTex, f.uv);
                color.a = _Transparency;
                return color;
            }
            ENDCG
        }
    }
    FallBack  "Specular"
}

git下载

https://gitee.com/dingxiaowei/AladdinShader

Shader交流

欢迎加入Shader交流群：316977780，加群请看群公告，修改群昵称。

赏

努力赚奶粉钱

支付宝
微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

一名<br>爱写代码的<br>码农