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

Cocos2d-x 前端之家
前端之家收集整理的这篇文章主要介绍了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. }

猜你在找的Cocos2d-x相关文章

创建自定义的Cocos2d-x场景
操作步骤 1、创建cocos2d-x工程 2、新建 Scene1.cpp Scene1.h Scene1.h代码 #ifndef __SCE...
给vs2010安装上cocos2d-x的模版
开发环境：OS(WINDOWS 8.1 X64 企业版) cocos2d-x 2.2.1 vs2010 想给vs安装上cocos的模版，...
Python创建Cocos2d-x 2.2方法
把创建项目做成一个批处理，当创建项目时可以省时省力很多。 操作步骤 1、在 E:cocos2d-x-...
cocos2dx 物理碰撞
https://www.cnblogs.com/JiaoQing/p/3906780.html 四个响应函数 1 EventListenerPhysics...
cocos2d-js 自定义事件监听派发
转载于 http://www.cnblogs.com/kenkofox/p/3926797.html 熟悉js的dom事件或者flash事件的...
cocos常用 实用 公共函数 lua代码
公共资源加载，缓存retain；防止被自动销毁 2. 数字滚动递增；用于得奖后，总金币跳动增加...
cocos creator box2d
title Map 使用box2d var sfloors = this.tiledMap.getObjectGroup(‘Special_Floor‘).g...
（转）让quick-cocos2d-x支持加密的plist文件
前篇：quick-cocos2d-x图片资源加密 在前篇里面，我们实现了图片资源的加密，但还没有实现...
（转）quick-cocos2d-x图片资源加密(续)
摘要: 对在quick-cocos2d-x上实现的资源加密方法的补充 前篇： quick-cocos2d-x图片资源加...
Cocos Creator 动态改变sprite图片
首先将存放图片最外层文件夹命名为resources 　　 changeBj: function(){ 　　　　var url...
iOSAndroidSwiftHybridCocos2d-xFlutterXcodeSilverlightcocoaCordova
调试桥筛选栏假异步不会丢失AndPermissio权限申请抽屉式systemUI信号栏多行排列跨多行显示viewmode数据共享录制语音视频通话多行显示Studio3.5拉伸控件望远镜发动态走势图点赞控件显示牌冷启动v3签名v2签名v1签名本地html外接键盘流式标签