Unity | Shader基础知识(第七集:案例<让图片和外部颜色叠加显示>)

目录

一、本节介绍

[1 上集回顾](#1 上集回顾)

[2 本节介绍](#2 本节介绍)

二、添加图片资源

[三、 常用cg数据类型](#三、 常用cg数据类型)

[1 float](#1 float)

[2 bool](#2 bool)

[3 sampler](#3 sampler)

四、加入图片资源

五、使用图片资源

[1 在通道里加入资源](#1 在通道里加入资源)

[2 使用图片和颜色叠加](#2 使用图片和颜色叠加)

[2.1 2D纹理采样tex2D](#2.1 2D纹理采样tex2D)

[2.2 组合颜色](#2.2 组合颜色)

六、全部代码

七、下集介绍


相关阅读

文章图片均来自网络,如有侵权,联系立删。


一、本节介绍

1 上集回顾

加入外部颜色资源Color来控制球体颜色,在外面看见并改颜色。

2 本节介绍

加入外部图片资源并显示在球体上(如图1所示),让图片和外部颜色叠加显示(如图2所示)。

图1 材质球上的图片 图2 图片和颜色叠加

二、添加图片资源

图片资源

备注:图片的大类可以分成两种

  • 2D图片资源

就是我们平时见到的,见的最多的图。我们随便找一张方形的图(如图3所示),放到材质球上,它会贴不满或者变型(如图4所示)。
图3 方形图 图4 材质球

  • 3D图片资源

专门有一种图片资源,是3d图片资源,例如一个砖头墙(如图4所示),放到材质球上,它会贴满,而且没有图片拼缝(如图5所示)。
图4 3d图片资源 图5 3d图片资源的材质球

三、 常用cg数据类型

我们之前学了float4,float3。其实还有很多在cg语言里的数据类型。

1 float

32位浮点数据(小数) 例: float1 、 float2 、 float3 、float4 (不能超过4了)

后面是1,就是一个数,后面是2,就类似vector2,后面是3,就类似vector3,以此类推。

2 bool

布尔数据(判断对错) 只有true和false两个数据

3 sampler

纹理对象(接收图片的类型) 例:sampler2D, sampler3D

一个是2D图片资源,一个是3D图片资源

四、加入图片资源

在财产框里添加图片

新知识点:

  • 2D 我们这次打算添加2D图片资源
  • "white" {} 这个是unity之前准备好的图片资源,如单词所示,就是一个白图,就固定好这么写

备注:因为shader是一只运行的,我们不能加空的进去,会出问题,所以随便先加个白图

cs 复制代码
Properties
     {
    _Color("Color",Color)=(1,1,1,1)

    //本节新增
    _MainTex("MainTex",2D) = "white" {}
     }

结果:

此时我们就可以在外面看见这个可以加图片的部分了(如图6所示)。
图6 加入图片资源

拖入图片之后(如图7所示)。
图7 拖入图片之后

五、使用图片资源

注:这里的代码都是接着上集讲的。

1 在通道里加入资源
cs 复制代码
 pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include"UnityCG.cginc"

            float4 _Color ;

            //本节新增
            sampler2D _MainTex;
            //承接2D图片在CG语言里是sampler2D    //起名为MainTex

            appdata_base vert(appdata_base v)
            {
            v.vertex =UnityObjectToClipPos(v.vertex);
            return v;
            }

            float4 frag():SV_TARGET
            {
            return _Color;
            }
            ENDCG
        }
2 使用图片和颜色叠加
2.1 2D纹理采样tex2D

sampler2D是图片资源,但我们不能直接使用,因为我们在给屏幕涂色,所以我们必须把这个图片传到shader现在有的贴图里,得到这个贴图在shader里的数据应该是什么。

之前讲过,我们的结构体里有一个是关于shader贴图的(如图8所示)。
图8 回忆结构体

使用代码:

cs 复制代码
float4 frag(appdata_base v):SV_TARGET
{
//转换贴图数据    //appdata_base中的贴图数据,取出xy轴数据(这里也可以理解为uv数据)
tex2D(_MainTex,v.texcoord.xy)
        //原本贴图
}
2.2 组合颜色

颜色和颜色的叠加一般用相乘。(这里和数学矩阵有关,可自行学习)

使用代码:

cs 复制代码
float4 frag(appdata_base v):SV_TARGET
{
float4 c =tex2D(_MainTex,v.texcoord.xy)*_Color;

//把组合的颜色传出去
return c;
}

六、全部代码

cs 复制代码
Shader "Custom/001"
{
Properties
     {
    _Color("Color",Color)=(1,1,1,1)
    _MainTex("MainTex",2D) = "white"{}
    
     }
SubShader
    {
        pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include"UnityCG.cginc"

            float4 _Color ;

            sampler2D _MainTex;

            appdata_base vert(appdata_base v)
            {
            v.vertex =UnityObjectToClipPos(v.vertex);
            return v;
            }

            float4 frag(appdata_base v):SV_TARGET
            {
            float4 c =tex2D(_MainTex,v.texcoord.xy)*_Color;
            return c;
            }
            ENDCG
        }
    }
}

七、下集介绍

本集讲了如何让图片和外部颜色叠加显示。

下集讲案例,如何做一个漫反射材质球。

下集更新时间,最晚在2023年12月31日更新,如果点赞订阅多,会加速~谢谢大家。

相关推荐
Artistation Game1 天前
九、怪物行为逻辑
游戏·unity·游戏引擎
百里香酚兰1 天前
【AI学习笔记】基于Unity+DeepSeek开发的一些BUG记录&解决方案
人工智能·学习·unity·大模型·deepseek
妙为1 天前
unreal engine5制作动作类游戏时,我们使用刀剑等武器攻击怪物或敌方单位时,发现攻击特效、伤害等没有触发
游戏·游戏引擎·虚幻·碰撞预设
dangoxiba1 天前
[Unity Demo]从零开始制作空洞骑士Hollow Knight第十三集:制作小骑士的接触地刺复活机制以及完善地图的可交互对象
游戏·unity·visualstudio·c#·游戏引擎
先生沉默先2 天前
使用Materialize制作unity的贴图,Materialize的简单教程,Materialize学习日志
学习·unity·贴图
十画_8242 天前
Visual Studio 小技巧记录
unity·visual studio
red_redemption2 天前
cpp,git,unity学习
git·unity·游戏引擎
tealcwu2 天前
【Unity踩坑】Unity更新Google Play结算库
unity·游戏引擎
先生沉默先2 天前
unity 默认渲染管线材质球的材质通道,材质球的材质通道
unity·游戏引擎·材质
白鹭float.2 天前
【Unity AI】基于 WebSocket 和 讯飞星火大模型
人工智能·websocket·unity