【着色器实现Overlay重新覆盖变装效果_Shader效果第九篇】

暴走约伯

已于 2024-07-23 12:40:02 修改

阅读量238

点赞数

分类专栏： Shader实现系列画面效果案例分享文章标签：着色器技术美术算法 unity 游戏引擎

于 2022-07-26 01:00:00 首次发布

本文链接：https://blog.csdn.net/xukaibo111/article/details/125900428

版权

Shader实现系列画面效果案例分享专栏收录该内容

67 篇文章 16 订阅 ¥59.90 ¥99.00

订阅专栏

超级会员免费看

Overlay重新覆盖变装效果

效果如下

请添加图片描述

属性栏如下

在这里插入图片描述

属性块：

关于属性的内容可以看这篇：【Unity Shader 中Properties 相关介绍】

    Properties
    {
        _MainTex ("Main Texture", 2D) = "white" {}
		_Color("Main Color", Color) = (1,1,1,1)
		_Alpha("General Alpha",  Range(0,1)) = 1

		_OverlayTex("Overlay Texture", 2D) = "white" {}
		_OverlayColor("Overlay Color", Color) = (1, 1, 1, 1)
		_OverlayGlow("Overlay Glow", Range(0,25)) = 1
		_OverlayBlend("Overlay Blend", Range(0, 1)) = 1
    }

Properties块定义了可以在材质编辑器中调整的属性。

SubShader块：

    SubShader
    {
        Tags {"Queue" = "Transparent" "RenderType"="Opaque" "IgnoreProjector" = "True" }        
        Blend SrcAlpha OneMinusSrcAlpha
        ZWrite Off
        Cull Off

定义了一个子着色器。
Tags定义了渲染队列、渲染类型和投影忽略标记。
Blend定义了混合模式。
ZWrite和Cull控制深度写入和剔除。

CGPROGRAM：

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

定义了一个渲染通道。
使用了CGPROGRAM和相关指令来指定顶点和片段着色器。

appdata：

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
				half4 color : COLOR;
            };

定义了顶点着色器的输入结构。

v2f：

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
				half4 color : COLOR;
            };

定义了顶点着色器的输出结构。

声明采样：

            sampler2D _MainTex;
            half4 _MainTex_ST, _MainTex_TexelSize, _Color;
			half _Alpha;
            float _RandomSeed;

			sampler2D _OverlayTex;
			half4 _OverlayTex_ST, _OverlayColor;
			half _OverlayGlow, _OverlayBlend;

属性声明详细解释如下

名称	注释
`sampler2D _MainTex;`	声明了一个名为`_MainTex`的2D纹理采样器。这通常用于存储和采样主纹理图像。

名称	注释
`half4 _MainTex_ST, _MainTex_TexelSize, _Color;`	声明了三个`half4`类型的属性：
`_MainTex_ST`	通常用于存储纹理的平铺（tiling）和偏移（offset）参数。
`_MainTex_TexelSize`	存储纹理的像素尺寸，这有助于进行像素级的纹理操作。
`_Color`	一个颜色值，用于修改或混合纹理的颜色。

名称	注释
`half _Alpha;`	这行代码声明了一个名为`_Alpha`的半精度浮点数（`half`）变量。这个变量可能用于控制着色器输出的透明度。
`float _RandomSeed;`	这行代码声明了一个名为`_RandomSeed`的单精度浮点数（`float`）变量。这个变量可能用于生成随机值，常用于创建纹理的随机效果或其他需要随机性的场景。
`sampler2D _OverlayTex;`	这行代码声明了一个名为`_OverlayTex`的2D纹理采样器。`sampler2D`是一种特殊的类型，用于在着色器中采样2D纹理图像。
`half4 _OverlayTex_ST, _OverlayColor;`	这行代码声明了两个变量：
`_OverlayTex_ST`	一个包含四个半精度浮点数的向量，通常用于存储纹理的平移（Tiling）和偏移（Offset）参数。
`_OverlayColor`	一个包含四个半精度浮点数的颜色值，可能用于定义叠加纹理的颜色。
`half _OverlayGlow, _OverlayBlend;`	这行代码声明了两个变量：
`_OverlayGlow`	一个半精度浮点数，可能用于控制叠加纹理的发光效果。
`_OverlayBlend`	一个半精度浮点数，可能用于控制叠加纹理与基础纹理的混合程度。

v2f vert顶点着色器函数：

            v2f vert (appdata v)
            {
                v2f o;
				o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
				o.color = v.color;
                return o;
            }

顶点着色器函数，转换顶点坐标和纹理坐标。

片段着色器结构体：

            half4 frag (v2f i) : SV_Target
            {
				// 片段着色器代码，负责生成扭曲轮廓效果
				// ...
            }
            ENDCG
        }
    }

片段着色器函数，负责渲染最终像素颜色。
ENDCG标记CGPROGRAM代码块的结束。

片段着色器代码

            half4 frag (v2f i) : SV_Target
            {
				half4 col = tex2D(_MainTex, i.uv) * i.color;

				half4 overlayCol = tex2D(_OverlayTex, TRANSFORM_TEX(i.uv, _OverlayTex));
				overlayCol.rgb *= _OverlayColor.rgb * _OverlayGlow;
				overlayCol.rgb *= overlayCol.a * _OverlayColor.rgb * _OverlayColor.a * _OverlayBlend;
				col.rgb += overlayCol;
				col.a *= _Alpha;
				col *= _Color;
                return col;
            }

具体的代码注释如下：

片段着色计算	注释
*`half4 col = tex2D(_MainTex, i.uv) i.color;`**	这行代码从名为`_MainTex`的纹理中，使用纹理坐标`i.uv`采样颜色，并与传入的颜色`i.color`相乘。`half4`是一个包含四个半精度浮点数的颜色值。
`half4 overlayCol = tex2D(_OverlayTex, TRANSFORM_TEX(i.uv, _OverlayTex));`	这行代码从名为`_OverlayTex`的叠加纹理中采样颜色。`TRANSFORM_TEX`是一个宏或函数，用于将纹理坐标`i.uv`转换为叠加纹理的坐标。这通常涉及到平移和缩放操作，由`_OverlayTex_ST`变量控制。
*`overlayCol.rgb = _OverlayColor.rgb * _OverlayGlow;`**	这行代码调整叠加纹理的颜色。首先，将叠加纹理的颜色分量（RGB）乘以一个全局颜色`_OverlayColor.rgb`，然后乘以一个发光强度`_OverlayGlow`。这样可以增强叠加纹理的颜色效果。
*`overlayCol.rgb = overlayCol.a * _OverlayColor.rgb * _OverlayColor.a * _OverlayBlend;`**	这行代码进一步调整叠加纹理的颜色。首先，将叠加纹理的透明度（alpha）分量`overlayCol.a`与全局颜色`_OverlayColor.rgb`和`_OverlayColor.a`相乘，然后乘以一个混合因子`_OverlayBlend`。这样可以控制叠加纹理的透明度和混合效果。
`col.rgb += overlayCol;`	这行代码将调整后的叠加纹理颜色`overlayCol`加到基础纹理颜色`col.rgb`上。这样可以实现颜色的叠加效果。
*`col.a = _Alpha;`**	这行代码调整最终颜色的透明度。将基础纹理的透明度分量`col.a`乘以一个全局透明度`_Alpha`，这样可以控制最终输出的透明度。
*`col = _Color;`**	这行代码将最终颜色`col`与一个全局颜色`_Color`相乘。这样可以进一步调整最终颜色的亮度或色调。
`return col;`	最后，返回最终计算得到的颜色值`col`。

	Fallback "Sprites/Default"
}

完整代码

Shader "Overlay"
{
    Properties
    {
        _MainTex ("Main Texture", 2D) = "white" {}
		_Color("Main Color", Color) = (1,1,1,1)
		_Alpha("General Alpha",  Range(0,1)) = 1

		_OverlayTex("Overlay Texture", 2D) = "white" {}
		_OverlayColor("Overlay Color", Color) = (1, 1, 1, 1)
		_OverlayGlow("Overlay Glow", Range(0,25)) = 1
		_OverlayBlend("Overlay Blend", Range(0, 1)) = 1
    }

    SubShader
    {
        Tags {"Queue" = "Transparent" "RenderType"="Opaque" "IgnoreProjector" = "True" }        
        Blend SrcAlpha OneMinusSrcAlpha
        ZWrite Off
        Cull Off
        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

			#pragma shader_feature OVERLAY_ON
			#pragma shader_feature OVERLAYMULT_ON

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
				half4 color : COLOR;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
				half4 color : COLOR;
            };

            sampler2D _MainTex;
            half4 _MainTex_ST, _MainTex_TexelSize, _Color;
			half _Alpha;
            float _RandomSeed;

			sampler2D _OverlayTex;
			half4 _OverlayTex_ST, _OverlayColor;
			half _OverlayGlow, _OverlayBlend;

            v2f vert (appdata v)
            {
                v2f o;
				o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
				o.color = v.color;
                return o;
            }

            half4 frag (v2f i) : SV_Target
            {
				half4 col = tex2D(_MainTex, i.uv) * i.color;

				half4 overlayCol = tex2D(_OverlayTex, TRANSFORM_TEX(i.uv, _OverlayTex));
				overlayCol.rgb *= _OverlayColor.rgb * _OverlayGlow;
				overlayCol.rgb *= overlayCol.a * _OverlayColor.rgb * _OverlayColor.a * _OverlayBlend;
				col.rgb += overlayCol;
				col.a *= _Alpha;
				col *= _Color;
                return col;
            }
            ENDCG
        }
    }
	Fallback "Sprites/Default"
}