UnityShader：HSV(色相，饱和度，亮度)转换

http://blog.csdn.net/costfine/article/details/46930473

发现其实美术调整颜色的时候大部分都是调整的HSV，因为可以方便的分别调整色相(hue)、饱和度(saturation)和色调(value)。例如人们要将颜色调整的偏红一点，那么只需要修改色相， 如果使用RGB的话，就需要同时调整3个值，仅仅只是增加R值的话，理论上讲，只是把红色值加重了而已。就算是平时使用的调色板，大部分也是按照HSV来的，例如U3D的调色板：

颜色空间有很多中,RGB、HSL、HSV、CMYK...等等好多，如果有兴趣的话可以去搜搜。但我们这里只用HSV 。比如一张贴图是红色系的，我们要改成绿色系，只需要将hue值偏移到绿色值就好了。各种颜色空间转换的公式：http://www.easyrgb.com/index.php?X=MATH&H=22#text22方法我们知道了，公式也有了，下面直接写代码。

1. Shader "Tornado/ColorGradation_HSV" {
   
2.     Properties {
   
3.         //贴图
   
4.         _MainTex ("MainTex (RGB)", 2D) = "white" {}
   
5.         //Hue的值范围为0-359. 其他两个为0-1 ,这里我们设置到3，因为乘以3后 都不一定能到超过.
   
6.         _Hue ("Hue", Range(0,359)) = 0
   
7.         _Saturation ("Saturation", Range(0,3.0)) = 1.0
   
8.         _Value ("Value", Range(0,3.0)) = 1.0
   
9.     }
   
10.     SubShader {
    
11.     Pass {
    
12.         Tags { "RenderType"="Opaque" }
    
13.         LOD 200
    
14. 
    
15.         Lighting Off
    
16. 
    
17.         CGPROGRAM
    
18.         #pragma vertex vert_img
    
19.         #pragma fragment frag
    
20.         #include "UnityCG.cginc"
    
21. 
    
22. 
    
23.         sampler2D _MainTex;
    
24.         half _Hue;
    
25.         half _Saturation;
    
26.         half _Value;
    
27. 
    
28.         struct Input {
    
29.             float2 uv_MainTex;
    
30.         };
    
31. 
    
32.         //RGB to HSV
    
33.         float3 RGBConvertToHSV(float3 rgb)
    
34.         {
    
35.             float R = rgb.x,G = rgb.y,B = rgb.z;
    
36.             float3 hsv;
    
37.             float max1=max(R,max(G,B));
    
38.             float min1=min(R,min(G,B));
    
39.             if (R == max1)
    
40.             {
    
41.                 hsv.x = (G-B)/(max1-min1);
    
42.             }
    
43.             if (G == max1)
    
44.             {
    
45.                 hsv.x = 2 + (B-R)/(max1-min1);
    
46.                 }
    
47.             if (B == max1)
    
48.             {
    
49.                 hsv.x = 4 + (R-G)/(max1-min1);
    
50.                 }
    
51.             hsv.x = hsv.x * 60.0;   
    
52.             if (hsv.x < 0)
    
53.                 hsv.x = hsv.x + 360;
    
54.             hsv.z=max1;
    
55.             hsv.y=(max1-min1)/max1;
    
56.             return hsv;
    
57.         }
    
58. 
    
59.         //HSV to RGB
    
60.         float3 HSVConvertToRGB(float3 hsv)
    
61.         {
    
62.             float R,G,B;
    
63.             //float3 rgb;
    
64.             if( hsv.y == 0 )
    
65.             {
    
66.                 R=G=B=hsv.z;
    
67.             }
    
68.             else
    
69.             {
    
70.                 hsv.x = hsv.x/60.0;
    
71.                 int i = (int)hsv.x;
    
72.                 float f = hsv.x - (float)i;
    
73.                 float a = hsv.z * ( 1 - hsv.y );
    
74.                 float b = hsv.z * ( 1 - hsv.y * f );
    
75.                 float c = hsv.z * ( 1 - hsv.y * (1 - f ) );
    
76.                 switch(i)
    
77.                 {
    
78.                     case 0: R = hsv.z; G = c; B = a;
    
79.                         break;
    
80.                     case 1: R = b; G = hsv.z; B = a;
    
81.                         break;
    
82.                     case 2: R = a; G = hsv.z; B = c;
    
83.                         break;
    
84.                     case 3: R = a; G = b; B = hsv.z;
    
85.                         break;
    
86.                     case 4: R = c; G = a; B = hsv.z;
    
87.                         break;
    
88.                     default: R = hsv.z; G = a; B = b;
    
89.                         break;
    
90.                 }
    
91.             }
    
92.             return float3(R,G,B);
    
93.         }      
    
94. 
    
95.         fixed4 frag (v2f_img i) : SV_Target
    
96.         {
    
97.             fixed4 original = tex2D(_MainTex, i.uv);    //获取贴图原始颜色
    
98. 
    
99.             float3 colorHSV;   
    
100.             colorHSV.xyz = RGBConvertToHSV(original.xyz);   //转换为HSV
     
101.             colorHSV.x += _Hue; //调整偏移Hue值
     
102.             colorHSV.x = colorHSV.x%360;    //超过360的值从0开始
     
103. 
     
104.             colorHSV.y *= _Saturation;  //调整饱和度
     
105.             colorHSV.z *= _Value;                           
     
106. 
     
107.             original.xyz = HSVConvertToRGB(colorHSV.xyz);   //将调整后的HSV，转换为RGB颜色
     
108. 
     
109.             return original;
     
110.         }
     
111.         ENDCG
     
112.     }
     
113.     }
     
114.     FallBack "Diffuse"
     
115. }

点击此处复制文本

原图和调整Hue后的对比，像不像以前玩格斗游戏，两个玩家选同一个角色，然后2P变色的效果…
  
同样的也可以应用到摄像机特效上….瞬间改变场景的氛围

更多精彩图片 请登录

当然还可以调整饱和度和亮度。。。饱和度调整到0就成了黑白图了
参考
http://blog.csdn.net/idfaya/article/details/6770414

但是这样染色 有的颜色并不好控制吧 也不方便小范围有选择性的修改

123

Arthasづ 发表于 2015-12-29 15:45
但是这样染色 有的颜色并不好控制吧 也不方便小范围有选择性的修改

嗯，一般项目都不太会这样马虎的处理，就是看看原理

谢谢楼主分享

谢谢楼主分享

立刻提起了精神

立刻提起了精神

感谢楼主分享

呵呵呵呵呵呵呵呵呵呵

学习了

学习了

学习了

学习了

谢谢分享！可以方便初学者了解shader原理，实用价值不大。

确实是个快捷的办法，但是不能通用滥用。。。。

{:1_151:}

学习了

那这样这个shader的实用性就

加油加油  给力给力