Unity3d Shader篇（十）

Unity3d Shader篇（十）— 渐变纹理

文章目录

前言
一、什么是Unlity渐变纹理Shader？
- 1. 渐变纹理Shader工作原理
- 2. 渐变纹理？
- 3. 渐变纹理的优缺点
- - 优点：
  - 缺点：
- 4. 渐变纹理例图
二、使用步骤
- 1. Shader 属性定义
- 2. SubShader 设置
- 3. 渲染 Pass
- 4. 定义结构体和顶点着色器函数
- 5. 片元着色器函数
三、效果
四、总结

前言

渐变纹理（Gradient Texture）是一种常用的纹理类型，在计算机图形学中广泛应用于实现各种颜色渐变效果。本文将介绍一种使用渐变纹理的Shader效果——Unlit渐变纹理Shader的实现原理和效果展示。

一、什么是Unlity渐变纹理Shader？

1. 渐变纹理Shader工作原理

Unlity渐变纹理Shader是一种简单的Shader，它不考虑光照效果，只通过渐变纹理来定义物体的颜色。这种Shader通常用于实现一些不需要光照的特效或简单的渲染效果，如UI元素、2D特效等。

2. 渐变纹理？

渐变纹理是一种特殊的纹理，它在空间中定义了一种从一个颜色到另一个颜色的渐变。通常，渐变纹理可以是线性渐变、径向渐变、圆锥渐变等不同类型，可以根据需求选择合适的渐变方式来实现不同的效果。

3. 渐变纹理的优缺点

优点：

视觉效果丰富：渐变纹理能够在物体表面产生丰富的颜色过渡效果，从而增强了渲染结果的视觉吸引力。

简化纹理资源管理：相比于使用多张复杂的纹理图案，渐变纹理可以通过动态生成或者简单的渐变色彩来达到类似的效果，从而减少了纹理资源的管理和加载成本。

节省存储空间：对于一些简单的颜色过渡效果，使用渐变纹理可以节省大量的存储空间，特别是在移动设备等资源受限的环境下尤为重要。

灵活性：渐变纹理可以通过调整参数来实现各种不同的颜色过渡效果，具有一定的灵活性和可定制性，适用于各种不同的应用场景。

缺点：

缺乏细节：渐变纹理通常只能实现简单的颜色过渡效果，难以表现复杂的纹理细节和图案，因此在需要精细纹理展示的情况下，可能显得不够真实或者生动。

不适用于复杂纹理需求：对于需要展示复杂纹理图案或者特定材质效果的场景，渐变纹理可能无法满足需求，因为其局限性在于只能提供基本的颜色过渡效果。

可能出现颜色带状效应：在渐变纹理过渡区域较小或者颜色跨度较大的情况下，可能会出现颜色过渡不均匀、出现明显的颜色带状效应，影响渲染效果的质量。

性能消耗：渐变纹理的生成和渲染可能会消耗一定的计算资源，尤其是在需要实时生成大量渐变纹理或者对渐变纹理进行复杂的图形处理时，可能会对性能产生一定的影响。

4. 渐变纹理例图

在这里插入图片描述

二、使用步骤

1. Shader 属性定义

// 定义属性
// 定义属性
Properties
{_RampTex("RampTex",2D)="white"{} // 渐变纹理贴图_Diffuse("Diffuse",Color)=(1,1,1,1) // 漫反射颜色属性，默认白色_Specular("Specular",Color)=(1,1,1,1) // 高光颜色属性，默认白色_Gloss("Gloss",Range(1,256))=5 // 高光反射系数
}

2. SubShader 设置

SubShader
{Tags{"RenderType" = "Opaque" // 渲染类型为不透明}LOD 100 // 细节级别
}

SubShader 定义了一组渲染设置，包括标签和细节级别。在这里，我们将渲染类型标签设置为 “Opaque”，表示物体是不透明的。

3. 渲染 Pass

Pass
{CGPROGRAM#pragma vertex vert#pragma fragment frag#include "UnityCG.cginc"#include "Lighting.cginc"// 漫反射颜色属性fixed4 _Diffuse;// 高光颜色属性fixed4 _Specular;// 高光系数属性float _Gloss;// 渐变纹理贴图sampler2D _RampTex;// 渐变纹理贴图的附属属性float4 _RampTex_ST;
}

这里开始了渲染 Pass 部分。在这里，我们使用了 CGPROGRAM 指令来声明顶点着色器和片元着色器函数。#pragma vertex vert 和 #pragma fragment frag 分别指定了顶点着色器函数和片元着色器函数的名称。

然后，我们包含了 UnityCG.cginc 和 Lighting.cginc，它们提供了许多有用的函数和宏，用于简化编写 Shader。

4. 定义结构体和顶点着色器函数

struct v2f {float4 vertex: SV_POSITION;// 世界空间法线fixed3 worldNormal: TEXCOORD0;// 世界空间位置fixed3 worldPos: TEXCOORD1;// 纹理坐标float2 uv: TEXCOORD2;
};// 顶点着色器函数
v2f vert(appdata_base v) {v2f o;// 顶点位置变换到裁剪空间o.vertex = UnityObjectToClipPos(v.vertex);// 世界空间法线fixed3 worldNormal = UnityObjectToWorldNormal(v.normal);o.worldNormal = worldNormal;// 计算纹理坐标o.uv = TRANSFORM_TEX(v.texcoord, _RampTex);/ 世界空间位置o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;return o;
}

顶点着色器的输入是一个结构体appdata_base ，它包含了顶点的位置、法线、贴图坐标等信息。顶点着色器的输出是一个结构体 v2f ，它包含了顶点的裁剪空间位置、法线、世界空间位置等信息。

5. 片元着色器函数

fixed4 frag(v2f i): SV_Target {// 获取环境光fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz;// 获取光源方向并计算漫反射fixed3 worldLightDir = normalize(UnityWorldSpaceLightDir(i.worldPos));fixed halfLambert = max(0, dot(worldLightDir, i.worldNormal) * 0.5 + 0.5);fixed3 diffuse = _LightColor0.rgb * tex2D(_RampTex, fixed2(halfLambert, halfLambert)) * _Diffuse.rgb;// 计算视角方向和高光反射fixed3 viewDir = normalize(UnityWorldSpaceViewDir(i.worldPos));fixed3 halfDir = normalize(worldLightDir + viewDir);fixed3 specular = _LightColor0.rgb * _Specular.rgb * pow(max(0, dot(i.worldNormal, halfDir)), _Gloss);fixed3 color = diffuse + ambient + specular;return fixed4(color, 1);
}