Unity HSVColor Shader

最新推荐文章于 2024-12-01 18:41:52 发布

原创最新推荐文章于 2024-12-01 18:41:52 发布 · 315 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#unity #shader

Unity 同时被 2 个专栏收录

6 篇文章

订阅专栏

shader

1 篇文章

订阅专栏

这篇博客介绍了如何通过设置HSL(亮度、饱和度、色调)属性，用Shader代码实现UI元素颜色的实时调节。教程详细讲解了Shader编写过程和使用步骤，适合UI设计师和开发者了解和应用。

通过设置H（亮度）、S(饱和度)、V(色调)调节颜色的Shader

Shader 代码：

Shader "UI/ImageHSVColor"
{
	Properties
	{
		_MainTex("Albedo (RGB)", 2D) = "white" {}
		_Brightness("Brightness", Float) = 1
		_Saturation("Saturation", Float) = 1
		_Contrast("Contrast", Float) = 1
	}

	SubShader
	{
		Blend SrcAlpha OneMinusSrcAlpha
		Pass
		{
			ZTest Always Cull Off ZWrite Off
			CGPROGRAM

			sampler2D _MainTex;
			half _Brightness;
			half _Saturation;
			half _Contrast;

			//vert和frag函数
			#pragma vertex vert
			#pragma fragment frag
			#include "Lighting.cginc"

			//从vertex shader传入pixel shader的参数
			struct v2f
			{
				float4 pos : SV_POSITION; //顶点位置
				half2 uv : TEXCOORD0; //UV坐标
			};

			//vertex shader
			//appdata_img：带有位置和一个纹理坐标的顶点着色器输入

			v2f vert(appdata_img v)
			{
				v2f o;
				//从自身空间转向投影空间
				o.pos = UnityObjectToClipPos(v.vertex);
				//uv坐标赋值给output
				o.uv = v.texcoord;
				return o;
			}

			fixed4 frag(v2f i) : SV_Target
			{
				//从_MainTex中根据uv坐标进行采样
				fixed4 renderTex = tex2D(_MainTex, i.uv);
				//brigtness亮度直接乘以一个系数，也就是RGB整体缩放，调整亮度
				fixed4 finalColor = renderTex * _Brightness;
				//saturation饱和度：首先根据公式计算同等亮度情况下饱和度最低的值：
				fixed gray = 0.2125 * renderTex.r + 0.7154 * renderTex.g + 0.0721 * renderTex.b;
				fixed4 grayColor = fixed4(gray, gray, gray, renderTex.a);
				//根据Saturation在饱和度最低的图像和原图之间差值
				finalColor = lerp(grayColor, finalColor, _Saturation);
				//contrast对比度：首先计算对比度最低的值
				fixed4 avgColor = fixed4(0.5, 0.5, 0.5, renderTex.a);
				//根据Contrast在对比度最低的图像和原图之间差值
				finalColor = lerp(avgColor, finalColor, _Contrast);
				//返回结果，alpha通道不变
				return fixed4(finalColor);
			}
			ENDCG
		}
	}
		FallBack Off
}

使用方式：

创建一个材质球，设置上面的shader文件。把材质球拖到所需调节的节点上，然后设置三个参数值，调节饱和度、亮度和色掉。