shader 渲染之 HSV --- RGB 相互转换

1.HSV：HSV是根据颜色的直观特性由 A. R. Smith 在 1978 年创建的一种颜色空间, 也称六角锥体模型。其中的H、S、V分别代表色调（H）、饱和度（S）和明度（V）。
H参数表示色彩信息，即所处的光谱颜色的位置。该参数用一角度量来表示，红、绿、蓝分别相隔120度。互补色分别相差180度。用角度度量，取值范围为0°～360°，从红色开始按逆时针方向计算，红色为0°，绿色为120°,蓝色为240°。它们的补色是：黄色为60°，青色为180°,紫色为300°；
纯度S为一比例值，范围从0到1，它表示成所选颜色的纯度和该颜色最大的纯度之间的比率。S=0时，只有灰度。饱和度S表示颜色接近光谱色的程度。一种颜色，可以看成是某种光谱色与白色混合的结果。其中光谱色所占的比例愈大，颜色接近光谱色的程度就愈高，颜色的饱和度也就愈高。饱和度高，颜色则深而艳。光谱色的白光成分为0，饱和度达到最高。通常取值范围为0%～100%，值越大，颜色越饱和。
V表示色彩的明亮程度，范围从0到1。有一点要注意：它和光强度之间并没有直接的联系。明度表示颜色明亮的程度，对于光源色，明度值与发光体的光亮度有关；对于物体色，此值和物体的透射比或反射比有关。通常取值范围为0%（黑）到100%（白）。
HSV对用户来说是一种直观的颜色模型。我们可以从一种纯色彩开始，即指定色彩角H，并让V=S=1 ，然后我们可以通过向其中加入黑色和白色来得到我们需要的颜色。增加黑色可以减小V而S不变，同样增加白色可以减小S而V不变。例如，要得到深蓝色，V=0.4 S=1 H=210度。要得到淡蓝色，V=1 S=0.4 H=210度。
一般说来，人眼最大能区分128种不同的色彩，130种色饱和度，23种明暗度。如果我们用16Bit表示HSV的话，可以用7位存放H，4位存放S，5位存放V，即745或者655就可以满足我们的需要了。
由于HSV是一种比较直观的颜色模型，所以在许多图像编辑工具中应用比较广泛，如Photoshop（在Photoshop中叫HSB）等等，但这也决定了它不适合使用在光照模型中，许多光线混合运算、光强运算等都无法直接使用HSV来实现。

2.RGB：RGB色彩模式是工业界的一种颜色标准，是通过对红®、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是运用最广的颜色系统之一。
RGB是从颜色发光的原理来设计定的，通俗点说它的颜色混合方式就好像有红、绿、蓝三盏灯，当它们的光相互叠合的时候，色彩相混，而亮度却等于三者亮度之总和，越混合亮度越高，即加法混合。对一种颜色进行编码的方法统称为“颜色空间”或“色域”。用最简单的话说，世界上任何一种颜色的“颜色空间”都可定义成一个固定的数字或变量。RGB（红、绿、蓝）只是众多颜色空间的一种。采用这种编码方法，每种颜色都可用三个变量来表示-红色绿色以及蓝色的强度。
通常在嵌入式开发中，使用的是RGB格式为RGB24，RGB24使用24位来表示一个像素，RGB分量都用8位表示，取值范围为0-255。注意在内存中RGB各分量的排列顺序为：green、red、blue。
常见颜色表如下：

3.算法

//将RGB转换成HSV
vec3 rgb2hsv(vec3 RGB){  //c
   // vec4 K =vec4(0.0,-1.0/3.0,2.0/3.0,-1.0);
   // vec4 p = mix( vec4(c.bg,K.wz),vec4(c.gb,K.xy),step(c.b,c.g));
   // vec4 q = mix( vec4(p.xyw,c.r),vec4(c.r,p.yzx),step(p.x,c.r));

   // float d=q.x-min(q.w,q.y);
   // float e=1.0e-10;
   // return vec3(abs(q.z+(q.w-q.y)/(6.0*d+e)),d/(q.x+e),q.x);


    float R = RGB.x, G = RGB.y, B = RGB.z;
    vec3 hsv;
    half Max = max(R, max(G, B));
    half Min = min(R, max(G, B));
    if (R == Max)
    {
        hsv.x = (G - B) / (Max - Min);
    }
    if (G == Max)
    {
        hsv.x = 2 + (B - R) / (Max - Min);
    }
    if (B == Max)
    {
        hsv.x = 4 + (R - G) / (Max - Min);
    }
    hsv.x = hsv.x * 60.0;
    if (hsv.x < 0)
        hsv.x = hsv.x + 360;
    hsv.z = Max;
    hsv.y = (Max - Min) / Max;
    return hsv;

}


//将HSV转成成RGB
vec3 hsv2rgb(vec3 HSV){
   //vec4 K=vec4(1.0,2.0/3.0,1.0/3.0,3.0);
   // vec3 p=ads(fract(c.xxx+K.xyz)*6.0-K.www);
   //return c.z*mix(K.xxx,clamp(p-K.xxx,0.0,1.0),c.y);

    float R, G, B;
    if (HSV.y == 0)
    {
        R = G = B = HSV.z;
    }
    else
    {
        HSV.x = HSV.x / 60.0;
        int i = (int)HSV.x;
        half f = HSV.x - (half)i;
        half a = HSV.z * (1 - HSV.y);
        half b = HSV.z * (1 - HSV.y * f);
        half c = HSV.z * (1 - HSV.y * (1 - f));
        switch (i)
        {
        case 0: R = HSV.z; G = c; B = a;
            break;
        case 1: R = b; G = HSV.z; B = a;
            break;
        case 2: R = a; G = HSV.z; B = c;
            break;
        case 3: R = a; G = b; B = HSV.z;
            break;
        case 4: R = c; G = a; B = HSV.z;
            break;
        default: R = HSV.z; G = a; B = b;
            break;
        }
    }
    return vec3(R, G, B);
}

/**Ts 中 rgb 转 hex */


/*
*转换原理，R左移16位，B左移8位，B不变，相加后，转为16进制
*或者，使用RGB分别余16，整数部分保留，余数部分转换为16进制，字符串相加后，得到16进制的hex
*例如，RGB值为(92,184,232)，转换为HEX的步骤如下1：
*92/ 16=5余12，将余数12转换为16进制数为C。
*184/16=11余8，将余数8转换为16进制数为B。
*232/16=14余8，将余数8转换为16进制数为E。
*最后，将三个转换后的HEX值组合起来，得到最终的HEX值为5CB8E8。
**/
private static colorRGB2Hex(color) {
    var rgb = color.split(',');
    var r = parseInt(rgb[0].split('(')[1]);
    var g = parseInt(rgb[1]);
    var b = parseInt(rgb[2].split(')')[0]);
    
    var hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
    return hex;
 }


/**TS 中 hex 转 hsv  */

private static hexToHsv(hex: string): [number, number, number] {
  let rgb = hexToRgb(hex);
  return rgbToHsv(rgb.r, rgb.g, rgb.b);
}

private static hexToRgb(hex: string): [number, number, number] {
  let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result
    ? [
        parseInt(result[1], 16),
        parseInt(result[2], 16),
        parseInt(result[3], 16)
      ]
    : null;
}

private static rgbToHsv(r: number, g: number, b: number): [number, number, number] {
  r /= 255;
  g /= 255;
  b /= 255;
  let max = Math.max(r, g, b);
  let min = Math.min(r, g, b);
  let diff = max - min;
  let h = 0;
  let s = diff / max;
  if (diff !== 0) {
    if (max === r) {
      h = (g - b) / diff;
    } else if (max === g) {
      h = 2 + (b - r) / diff;
    } else {
      h = 4 + (r - g) / diff;
    }
  }
  h *= 60;
  if (h < 0) {
    h += 360;
  }
  const v = max;
  return [h, s, v];