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日更新,如果点赞订阅多,会加速~谢谢大家。

相关推荐
牙膏上的小苏打233314 小时前
Unity Surround开关后导致获取主显示器分辨率错误
unity·主屏幕
Unity大海16 小时前
诠视科技Unity SDK开发环境配置、项目设置、apk打包。
科技·unity·游戏引擎
浅陌sss1 天前
Unity中 粒子系统使用整理(一)
unity·游戏引擎
维度攻城狮1 天前
实现在Unity3D中仿真汽车,而且还能使用ros2控制
python·unity·docker·汽车·ros2·rviz2
为你写首诗ge1 天前
【Unity网络编程知识】FTP学习
网络·unity
神码编程1 天前
【Unity】 HTFramework框架(六十四)SaveDataRuntime运行时保存组件参数、预制体
unity·编辑器·游戏引擎
菲fay1 天前
Unity 单例模式写法
unity·单例模式
火一线1 天前
【Framework-Client系列】UIGenerate介绍
游戏·unity
ZKY_241 天前
【工具】Json在线解析工具
unity·json
ZKY_242 天前
【Unity】处理文字显示不全的问题
unity·游戏引擎