Unity | Shader基础知识(第二十一集:应用-怪兽膨胀、顶点着色器和表面着色器合并)

目录

一、前言

二、资源介绍 

三、顶点着色器和表面着色器一起使用基础

1.使用表面着色器代码

2.光照选择 

3.加入顶点着色器 

4.补充表面着色器 

四、在顶点着色器中完成怪兽膨胀功能

1.膨胀原理解释

2.完成膨胀代码

1).写出需要的结构体

2).为了能控制膨胀,我们加一个参数

3).修改顶点坐标 

五、纯净代码

六、收尾


一、前言

本集主要的知识点是两个:

1.顶点着色器和表面着色器一起使用

2.做出怪兽气球膨胀效果

气球膨胀效果预览(如图1所示)

图1 气球膨胀效果

二、资源介绍 

日常操作,在讲之前介绍一下资源来源。

在unity商店中,免费资源里可以下载。(如图2所示)

图2 模型资源

导入之后,用下图的预制体就行了。(如图3所示) 

图3 怪兽预制体

我们看一下现在的模型和材质。(如图4所示) 

图4 模型和材质

我们再去仔细看一下它用的材质,发现他是标准着色器,然后有个贴图Albedo和金属贴图Metallic,没别的了。(如图5所示)

图5 模型的材质

结论:我们只需要写一个能接收光线的,带贴图的shader。

我们为了方便,待会写的shader只用他的贴图,不用金属贴图,小伙伴感兴趣可以自己加。 

三、顶点着色器和表面着色器一起使用基础

之前我们学了表面着色器,也学了顶点着色器和片元着色器,我们可以发现,顶点着色器要更自由一点,自由到什么程度,如果你仔细观察我们之前做的内容,连光照,阴影等都需要自己写

相比起来,表面着色器很多就出生自带,写起来比较容易,但不自由,你发现,我们从来没有在表面着色器里面控制过顶点

如果你又想用表面着色器写好的东西,又想去控制细节,合在一起用就行了。

1.使用表面着色器代码

首先我们先把表面着色器放进来。

//引用    //表面着色器
#pragma surface surf
                //名称

//表面着色器常用的结构体
struct Input
{
  
};

    //引入的方法
void surf(Input IN,inout SurfaceOutput o)
{
    
}
2.光照选择 

我们使用常规的Lambert光照,所以加入Lambert。

#pragma surface surf Lambert
3.加入顶点着色器 

因为这个气球巨大化,需要更改顶点才能使用,所以我们需要加入顶点着色器vertex,起名叫vert

#pragma surface surf Lambert vertex:vert
4.补充表面着色器 

我们暂时不去管顶点着色器,我们先用表面着色器把贴图显示出来,这都是以前讲过的,就不细讲了。

Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
    }
    SubShader
    {
            CGPROGRAM
            #pragma surface surf Lambert vertex:vert
            
            struct Input
            {
            float2 uv_MainTex;
            };

            sampler2D _MainTex;

            void surf(Input IN,inout SurfaceOutput o)
            {
                o.Albedo = tex2D(_MainTex,IN.uv_MainTex).rgb;
            }

            ENDCG
     }

到这里,一个显示贴图的,普通的表面着色器就完成了。 

四、在顶点着色器中完成怪兽膨胀功能

1.膨胀原理解释

常规怪兽的线框线条(如图6所示)

图6 怪兽线框

它每一个交点都是顶点,我们只要把这些点,沿着法线方向往外移动,就会出现怪兽膨胀的效果。 

2.完成膨胀代码
1).写出需要的结构体

那我们需要顶点信息vertex,需要法线normal,这里有一个没用到但是必须要写的texcoord。

我们完成这个结构体:

            struct appdata
            {
                float4 vertex : POSITION;
                float3 normal:NORMAL;
                float2 texcoord : TEXCOORD0;
            };
2).为了能控制膨胀,我们加一个参数

别忘了subShader中也要声明一下。

    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        //控制膨胀
        _Amount("Extrude",Range(0,1))=0
    }
3).修改顶点坐标 

就是之前说的,顶点坐标加上法线坐标,但为了能控制膨胀的大小,我们乘上系数。

            void vert (inout appdata v)
            {
                v.vertex.xyz +=v.normal * _Amount;
            }

关键步骤就都完成了~

五、纯净代码

Shader "Unlit/018"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _Amount("Extrude",Range(0,1))=0
    }
    SubShader
    {
            CGPROGRAM
            #pragma surface surf Lambert vertex:vert
            
            struct Input
            {
            float2 uv_MainTex;
            };

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

            sampler2D _MainTex;
            float _Amount;

            void vert (inout appdata v)
            {
                v.vertex.xyz +=v.normal * _Amount;
            }

            void surf(Input IN,inout SurfaceOutput o)
            {
                o.Albedo = tex2D(_MainTex,IN.uv_MainTex).rgb;
            }

            ENDCG
     }
}

六、收尾

最后我们创建材质,把贴图放上去,就结束啦。(如图7所示)

图7 收尾步骤

  • 22
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

菌菌巧乐兹

希望能给大家写更多有用的文章~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值