Cocos2D-X shader(四) 利用shader改变图片色相Hue

背景

美术给出一套资源后，可以通过改变图片色相，复用同一套资源产生出多套资源的效果：

上图中蓝色是原始图片，利用代码改变图片色相后，可以产生效果差异明显的资源出来。像一些传统的游戏，如星际争霸等，都是通过这种技术实现了同一兵种，不同颜色种族的特效。

实现理论原理

看上去非常神奇的转换，实际上是利用了HSV格式图像处理的技术：

传统RGB模型：RGB是一种加色模式 将不同比例的RED/GREEN/BLUE混合在一起得到新的颜色

HSV(HSB)模型：通过色相/饱和度/亮度来得到颜色
H(hue):色相 表示颜色的类型 值域[0,360]
S(Saturation):饱和度 从灰度到纯色 值域[0,1]
V(Value or Brightness):亮度 从黑色到特定饱和度的颜色 值域[0,1]

HSV模型图

RGB到HSV的转换公式

HSV到RGB的转换公式

公式可以参考
http://baike.baidu.com/subview/541362/8445478.htm?fr=aladdin

普通代码实现

利用上述转换公式，实现代码如下（透明像素不处理）：

[cpp] view plain copy

1. <spanstyle="font-family:Simsun;font-size:14px;">Texture2D*HelloWorld::initTextureWithImage(Image*image,float_fhue)
2. {
4. unsignedchar*tempData=NULL;
5. boolhasAlpha=image->hasAlpha();
6. SizeimageSize=Size((float)(image->getWidth()),(float)(image->getHeight()));
7. Texture2D::PixelFormatpixelFormat;
9. unsignedintwidth=image->getWidth();
10. unsignedintheight=image->getHeight();
12. //Repackthepixeldataintotherightformat
13. unsignedintlength=width*height;
14. unsignedintnewDataLen=0;
16. //Convert"RRRRRRRRRGGGGGGGGBBBBBBBBAAAAAAAA"to"RRRRRRRRGGGGGGGGBBBBBBBB"
17. float_f=_fhue/60;//节省运算
18. if(hasAlpha)
19. {
20. //computepixelformat
21. pixelFormat=Texture2D::PixelFormat::RGBA8888;
22. tempData=newunsignedchar[length*4];
23. newDataLen=length*4;
24. unsignedchar*outPixel8=tempData;
25. unsignedint*inPixel32=(unsignedint*)image->getData();
26. for(unsignedinti=0;i<length;++i,++inPixel32)
27. {
28. unsignedchar*_colRGB=outPixel8;
29. *outPixel8++=(*inPixel32>>0)&0xFF;//R
30. *outPixel8++=(*inPixel32>>8)&0xFF;//G
31. *outPixel8++=(*inPixel32>>16)&0xFF;//B
32. *outPixel8=(*inPixel32>>24)&0xFF;//A
33. //透明图层不做处理
34. if(*outPixel8++)
35. {
36. unsignedchar_r=*_colRGB;
37. unsignedchar_g=*(_colRGB+1);
38. unsignedchar_b=*(_colRGB+2);
39. unsignedcharmin=(_r<_g)?_r:_g;
40. min=(min<_b)?min:_b;
42. unsignedcharmax=(_r>_g)?_r:_g;
43. max=(max>_b)?max:_b;
45. unsignedchartemp=(max-min);
46. floathsbH=0;//temp
48. if(temp)
49. {
50. if(max==_r){
51. if(_g>=_b)
52. {
53. hsbH=(float)(_g-_b)/(float)temp;
54. }
55. else
56. {
57. hsbH=((float)(_g-_b)/(float)temp)+6;
58. }
59. }
60. elseif(max==_g){
61. hsbH=((float)(_b-_r)/(float)temp)+2;
62. }
63. elseif(max==_b){
64. hsbH=((float)(_r-_g)/(float)temp)+4;
65. }
66. }
67. else
68. {
69. hsbH=0;
70. }
72. hsbH+=_f;
73. if(hsbH<0)
74. hsbH+=6;
75. elseif(hsbH>6)
76. hsbH-=6;
78. chari=(int)hsbH;
79. hsbH=hsbH-i;
80. switch(i){
81. case6:
82. case0:
83. (*_colRGB++)=max;
84. (*_colRGB++)=min+(int)(hsbH*temp);
85. (*_colRGB++)=min;
86. break;
87. case1:
88. (*_colRGB++)=max-(int)(hsbH*temp);
89. (*_colRGB++)=max;
90. (*_colRGB++)=min;
91. break;
92. case2:
93. (*_colRGB++)=min;
94. (*_colRGB++)=max;
95. (*_colRGB++)=min+(int)(hsbH*temp);
96. break;
97. case3:
98. (*_colRGB++)=min;
99. (*_colRGB++)=max-(int)(hsbH*temp);
100. (*_colRGB++)=max;
101. break;
102. case4:
103. (*_colRGB++)=min+(int)(hsbH*temp);
104. (*_colRGB++)=min;
105. (*_colRGB++)=max;
106. break;
107. case5:
108. (*_colRGB++)=max;
109. (*_colRGB++)=min;
110. (*_colRGB++)=max-(int)(hsbH*temp);
111. break;
112. default:
113. break;
114. }
115. }
116. }
117. }
118. else
119. {
120. pixelFormat=Texture2D::PixelFormat::RGB888;
121. tempData=newunsignedchar[length*3];
122. newDataLen=length*3;
123. unsignedchar*out3=image->getData();
124. unsignedchar*outPixel8=tempData;
125. for(unsignedinti=0;i<length;++i)
126. {
127. unsignedchar_r=*out3++;
128. unsignedchar_g=*out3++;
129. unsignedchar_b=*out3++;
130. //changeHSLForRgb(255,0);
131. //unsignedchar*_NowRGB=changeHSLForRgb(_r,_g,_b,_fhue);
132. //_r=*_NowRGB++;
133. //_g=*_NowRGB++;
134. //_b=*_NowRGB++;
135. *outPixel8++=_r;//R
136. *outPixel8++=_g;//G
137. *outPixel8++=_b;//B
138. }
139. }
141. Texture2D*_text2d=newTexture2D();
142. _text2d->initWithData(tempData,newDataLen,pixelFormat,width,height,imageSize);
145. delete[]tempData;
146. //_text2d->_hasPremultipliedAlpha=image->hasPremultipliedAlpha();
147. return_text2d;
148. }</span>

利用Shader实现

Shader可以利用GPU提升渲染效率：

colorHSL.fsh

[cpp] view plain copy

1. #ifdefGL_ES
2. precisionmediumpfloat;
3. #endif
5. varyingvec2v_texCoord;
6. uniformsampler2DCC_Texture0;
7. uniformfloatu_dH;
8. uniformfloatu_dS;
9. uniformfloatu_dL;
11. voidmain(){
13. vec4texColor=texture2D(CC_Texture0,v_texCoord);
14. floatr=texColor.r;
15. floatg=texColor.g;
16. floatb=texColor.b;
17. floata=texColor.a;
18. //convertrgbtohsl
19. floath;
20. floats;
21. floatl;
22. {
23. floatmax=max(max(r,g),b);
24. floatmin=min(min(r,b);
25. //----h
26. if(max==min){
28. h=0.0;
29. }elseif(max==r&&g>=b){
30. h=60.0*(g-b)/(max-min)+0.0;
31. }elseif(max==r&&g<b){
32. h=60.0*(g-b)/(max-min)+360.0;
33. }elseif(max==g){
34. h=60.0*(b-r)/(max-min)+120.0;
35. }elseif(max==b){
36. h=60.0*(r-g)/(max-min)+240.0;
37. }
38. //----l
39. l=0.5*(max+min);
40. //----s
41. if(l==0.0||max==min){
42. s=0.0;
43. }elseif(0.0<=l&&l<=0.5){
44. s=(max-min)/(2.0*l);
45. }elseif(l>0.5){
46. s=(max-min)/(2.0-2.0*l);
47. }
48. }
49. //(h,s,l)+(dH,dS,dL)->(h,l)
50. h=h+u_dH;
51. s=min(1.0,max(0.0,s+u_dS));
52. l=l+u_dL;
53. //convert(h,l)torgbandgotfinalcolor
54. vec4finalColor;
55. {
56. floatq;
57. if(l<0.5){
58. q=l*(1.0+s);
59. }elseif(l>=0.5){
60. q=l+s-l*s;
61. }
62. floatp=2.0*l-q;
63. floathk=h/360.0;
64. floatt[3];
65. t[0]=hk+1.0/3.0;t[1]=hk;t[2]=hk-1.0/3.0;
66. for(inti=0;i<3;i++){
67. if(t[i]<0.0)t[i]+=1.0;
68. if(t[i]>1.0)t[i]-=1.0;
69. }//gott[i]
70. floatc[3];
71. for(inti=0;i<3;i++){
72. if(t[i]<1.0/6.0){
73. c[i]=p+((q-p)*6.0*t[i]);
74. }elseif(1.0/6.0<=t[i]&&t[i]<0.5){
75. c[i]=q;
76. }elseif(0.5<=t[i]&&t[i]<2.0/3.0){
77. c[i]=p+((q-p)*6.0*(2.0/3.0-t[i]));
78. }else{
79. c[i]=p;
80. }
81. }
82. finalColor=vec4(c[0],c[1],c[2],a);
83. }
85. finalColor+=vec4(u_dL,u_dL,0.0);
87. gl_FragColor=finalColor;
89. }

以下适用COCOS2.2版本

.H中增加以下代码

[cpp] view plain copy

1. voidsetHSLMode();
2. voidsetHSL(floath,floats,floatl);
3. voidupdateHSL();
5. floatm_dH;
6. floatm_dS;
7. floatm_dL;
9. gluintm_dhlocation;
10. gluintm_dSlocation;
11. gluintm_dLlocation;

具体实现

[cpp] view plain copy

1. voidGameColorSprite::setHSLMode(){
3. ccBlendFuncblendFunc={GL_SRC_ALPHA,GL_ONE_MINUS_SRC_ALPHA};
4. this->setBlendFunc(blendFunc);
6. GLchar*fragSource=(GLchar*)CCString::createWithContentsOfFile(CCFileUtils::sharedFileUtils()->fullPathForFilename("colorHSL.fsh").c_str())->getCString();
8. CGLProgramWithUnifos*pProgram=newCGLProgramWithUnifos();
9. pProgram->initWithVertexShaderByteArray(ccPositionTextureColor_vert,fragSource);
10. this->setShaderProgram(pProgram);
11. pProgram->release();
13. CHECK_GL_ERROR_DEBUG();
15. this->getShaderProgram()->addAttribute(kCCAttributeNamePosition,kCCVertexAttrib_Position);
16. this->getShaderProgram()->addAttribute(kCCAttributeNameColor,kCCVertexAttrib_Color);
17. this->getShaderProgram()->addAttribute(kCCAttributeNameTexCoord,kCCVertexAttrib_TexCoords);
18. CHECK_GL_ERROR_DEBUG();
20. this->getShaderProgram()->link();
21. CHECK_GL_ERROR_DEBUG();
23. this->getShaderProgram()->updateUniforms();
24. CHECK_GL_ERROR_DEBUG();
26. m_dhlocation=glGetUniformlocation(getShaderProgram()->getProgram(),"u_dH");
27. m_dSlocation=glGetUniformlocation(getShaderProgram()->getProgram(),"u_dS");
28. m_dLlocation=glGetUniformlocation(getShaderProgram()->getProgram(),"u_dL");
30. updateHSL();
31. }

[cpp] view plain copy

1. voidGameColorSprite::setHSL(floath,floatl){
2. m_dH=h;
3. m_dS=s;
4. m_dL=l;
5. updateHSL();
6. }

[cpp] view plain copy

1. voidGameColorSprite::updateHSL(){
2. gluniform1f(m_dhlocation,m_dH);
3. gluniform1f(m_dSlocation,m_dS);
4. gluniform1f(m_dLlocation,m_dL);
5. }