图片变色HSV-shader

一、认识颜色

颜色在程序眼中是红、绿、蓝（rgb），在设计师眼中却是色相、饱和度和明度（hsv）。

1.色相（Hues）

H色彩所呈现出来的面貌，是色彩的首要特征，指饱和度和亮度都为100%时的颜色。比如下面图中色相环上的12种颜色、就是12个色相，每一个颜色就是一种色相。色相取值范围是0°~360°，这个值告诉我们我们是啥颜色。色相环有6色相环、12色相环、24色相环、48色相环等，就是给[红、橙、黄、绿、蓝、紫、红]之间差值。

2.饱和度（Saturability）

S饱和度，指颜色的鲜艳程度，也称颜色的纯度，数值为0时是灰色。取值范围0～100%，通过调节饱和度可以得到一个颜色的同类色（同色系）。例如：

3.亮度（Brightness）

B亮度，也称做明度。为0时是黑色，最大亮度是颜色最鲜明的状态。范围是0～100%。例如：

二、HSV与RGB的相互转换

设 (r, g, b) 分别是一个颜色的红、绿和蓝坐标，它们的值是在 0 到 1 之间的实数

设 max 等于 r, g, b 中的最大者

设 min 等于 r, g, b 中的最小者

1.rgb2hsv


float retmax(float a,float b,float c)//求最大值
{float max = 0;max = a;if(max<b)max = b;if(max<c)max = c;return max;
}float retmin(float a,float b,float c)//求最小值
{float min = 0;min = a;if(min>b)min = b;if(min>c)min = c;return min;
}//R,G,B参数传入范围（0~100）
//转换结果h(0~360),s(0~100),v(0~100)
void rgb_to_hsv(float *h,float *s,float *v,float R,float G,float B)
{float max = 0,min = 0;R = R/100;G = G/100;B = B/100;max = retmax(R,G,B);min = retmin(R,G,B);*v = max;if(max == 0)*s = 0;else*s = 1 - (min/max);if(max == min)*h = 0;else if(max == R && G>=B)*h = 60*((G-B)/(max-min));else if(max == R && G<B)*h = 60*((G-B)/(max-min)) + 360;else if(max == G)*h = 60*((B-R)/(max-min)) + 120;else if(max == B)*h = 60*((R-G)/(max-min)) + 240;*v = *v * 100;*s = *s * 100;
}

1.hsv2rgb

//参数入参范围h(0~360),s(0~100),v(0~100),这里要注意，要把s,v缩放到0~1之间
//转换结果R(0~100),G(0~100),B(0~100)，如需转换到0~255，只需把后面的乘100改成乘255
void hsv_to_rgb(int h,int s,int v,float *R,float *G,float *B)
{float C = 0,X = 0,Y = 0,Z = 0;int i=0;float H=(float)(h);float S=(float)(s)/100.0;float V=(float)(v)/100.0;if(S == 0)*R = *G = *B = V;else{H = H/60;i = (int)H;C = H - i;X = V * (1 - S);Y = V * (1 - S*C);Z = V * (1 - S*(1-C));switch(i){case 0 : *R = V; *G = Z; *B = X; break;case 1 : *R = Y; *G = V; *B = X; break;case 2 : *R = X; *G = V; *B = Z; break;case 3 : *R = X; *G = Y; *B = V; break;case 4 : *R = Z; *G = X; *B = V; break;case 5 : *R = V; *G = X; *B = Y; break;}}*R = *R *100;*G = *G *100;*B = *B *100;
}

三、Spine零件换色问题

1.Spine的图片是一张图集

换色时需要传递Spine零件对应碎图的坐标和宽高，在Shader中只修改这一区域

2.Spine多零件换色

将多个零件的换色数据以float[]的形式传入Shader，然后解析处理。

如：每7个float作为一个零件的换色数据，前4个分别对应uv坐标范围，后3个分别对应hsv。

for (int i = 0; i < 70; i += 7) {float u0 = config[i + 0];float u1 = config[i + 1];float v0 = config[i + 2];float v1 = config[i + 3];float h = config[i + 4];float s = config[i + 5];float v = config[i + 6];// 修改范围内像素的值if (v_uv0.x > u0 && v_uv0.x < u1 && v_uv0.y > v0 && v_uv0.y < v1) {vec3 hsv = rgb2hsv(color.rgb);hsv.x = mod(hsv.x + h, 1.0);hsv.y *= s;hsv.z *= v;color.rgb = hsv2rgb(hsv);}
}

【注】上面用到的hsv为了方便计算，取值范围都是0～1

图片变色HSV-shader相关推荐

css3实现鼠标移入图片变色
css3实现鼠标移入图片变色方法一:准备两张图片,直接更改hover后的背景图片.这种方法简单粗暴,我就不过多赘述了. 方法二,利用css3的filter滤镜.不知道filter的同学可以去W3c多 ...
解决java 图片压缩图片图片变色问题
最近有人遇到在处理在用Java进行图片压缩的时候,压缩后图片的背景色发生了变色,如图所示: 压缩前: 压缩后: 经查阅相关资料后发现可以用阿里巴巴的SImpleImage可以解决这个问题. 主要依赖以 ...
html中菜单触碰变色,利用css filter实现菜单图片变色效果
需求场景在制作菜单时,未增加响应效果,往往会加入鼠标移入移出时字体和图标进行变色的效果,字体的颜色变化比较好控制,通过color便可以设置,但如果图标是使用的图片,往往要一个图标制作两份不同颜色的图 ...
Unity 图片画线Shader
上周分享了一个水墨风格的Shader,这周分享一个图片画点连线的Shader,话不多说,先看效果我做的是一个百度人脸识别划线功能,图中所有蓝色的点都是通过百度人脸识别获取到的,要做的也只是把Vect ...
unity 给图片边缘_Unity Shader 屏幕后效果——边缘检测
关于屏幕后效果的控制类详细见之前写的另一篇博客: 这篇主要是基于之前的控制类,实现另一种常见的屏幕后效果--边缘检测. 概念和原理部分: 首先,我们需要知道在图形学中经常处理像素的一种操作--卷积. ...
iOS - 解决设置导航栏按钮图片变色的问题
问题描述今天在利用以下代码给导航栏按钮设置图片时,发现原本是黑色的切图显示成了蓝色. UIButton *editButton = [UIButton buttonWithType:UIButton ...
图片变色_一张图看懂手机CMF史，附带手机渐变色工艺解析
自智能手机面世以来,功能的开发似乎已经到了极致,更多的革命开始转移到外观上,其中,颜色作为美观第一要素,从vivo X20的梦幻粉.OPPO R15的星云色,到华为P20的极光色,再到OPPO Fin ...
#彻底解决# opencv imdecode函数中打开图片，图片变色的问题
大部分人使用imdecode函数打开图像文件是因为 opencv中的imread函数无法打开中文估路径下的图像文件,网上使用imdecode函数打开图片的语法有很多这里简单列举一些: 方法一: def ...
鼠标移入后，图片变成另外的一张图片（1）| 直接给图片变色（只能变纯色）（2）
纯css (1) 在鼠标移入后,让本来的那张图片变成另外一张图片,用到的是hover属性 <a href=""><img src="../../publ ...

图片变色HSV-shader

图片变色HSV-shader相关推荐

最新文章

热门文章