一、封装工具类

Shader.h
Shader.cpp
ShaderNode.cpp
ShaderNode.h
使用方法如下：

  2. auto sprite       = ShaderSprite::create(......);
  3. auto shader       = Shader::createWithSrc(......);
  5. shader->drawCallOnSprite = function;        // 在Sprite的draw中执行的回调，一般就是gl call指令
  6. shader->setUniformsAndAttribs = function;    // 设置shader程序的uniform变量、attribute变量
  8. // ******************* 方 法 一：设置Sprite的shader
  9. // shader->setUniformsAndAttribs();            // 别忘了先设置好shader需要的数据
  10. sprite->setMainShader(shader);                // 设置sprite的Shader
  12. // ******************* 方 法 二：给Sprite额外的shader，多个效果叠加
  13. // 在Sprite的draw中，先执行zorder<0的shader，再执行sprite的shader，然后执行zorder>=0的shader
  14. shader->setLocalZorder(...);    // 设置zorder
  15. sprite->addShader(shader);        // 添加到队列中。
  17. addChild(sprite);

二、多纹理（MultiTexture）

GIF.gif

C++：

  2. const auto textureFile1 = "Images/grossini_sister1.png";
  3. const auto textureFile1 = "Images/grossini_sister2.png";
  4. const auto vShaderFile  = "shaders/multiTexture.vsh";
  5. const auto fShaderFile  = "shaders/multiTexture.fsh";
  6. const auto winSize        = Director::getInstance()->getWinSize();
  8. auto  texture1       = TextureCache::getInstance()->addImage(textureFile1);
  9. auto  texture2       = TextureCache::getInstance()->addImage(textureFile2);
  10. auto  sprite       = Sprite::createWithTexture(texture1);
  12. // autorelease对象。如果我们要直接访问program，要自己retain起来维护，
  13. auto  program        = GLProgram::createWithFileNames(vShaderFile, fShaderFile);
  15. // programState已经缓存，且缓存中通过cocos2d::Map retain住了program
  16. // 因此program不会被销毁。programState也是autorelease对象，因此也要自己retain起来维护。
  17. auto  programState = GLProgramState::getOrCreateWithGLProgram(program);
  18. float factor        = 0.5f;
  20. sprite->setPosition(Vec2(winSize.width>>1, winSize.height>>1));
  21. addChild(sprite);
  23. // 设置自定义的Shader
  24. programState->retain();        // 我们自己retain起来，GLProgramStateCache可能会清掉它。
  25. sprite->setProgramState(programState);
  27. // 在程序中动态设置shader的uniform值
  28. programState->setUniformFloat("factor", factor);
  29. programState->setUniformTexture("texture1", texture2);

顶点着色器：

  2. ccPositionTextureColor_noMVP_vert 
  4. // #include "renderer/ccShader_PositionTextureColor_noMVP.vert"
  6. // Position Texture Color without MVP shader
  7. // 
  8. // gl_Position  = CC_PMatrix * a_position
  9. // gl_FragColor = texutreColor * a_color
  10. //

片段着色器：

  2. uniform float       factor;
  3. uniform sampler2D texture1;
  5. // 下面是GLProgram内部自动添加，对应Sprite::create(texture)里的texture
  6. // uniform Sampler2D CC_Texture0;    
  8. #ifdef GL_ES
  9.     precision mediump float;
  10. #endif
  12. varying vec4 v_fragmentColor;
  13. varying vec2 v_texCoord;
  15. void main(){
  16.     gl_FragColor = v_fragmentColor *
  17.         mix(texture2D(CC_Texture0, v_texCoord), 
  18.             texture2D(texture1, v_texCoord), 
  19.             factor);
  20. }

三、Lens Flare：镜头光晕

GIF.gif
C++：

  2. const auto winSize = Director::getInstance()->getWinSize();
  3. const auto frameSize = Director::getInstance()->getOpenGLView()->getFrameSize();
  4. const auto visibleSize = Director::getInstance()->getVisibleSize();
  5. const auto retinaFactor = Director::getInstance()->getOpenGLView()->getRetinaFactor();
  6. const auto SizeX = 256;
  7. const auto SizeY = 256;
  8. const auto _resolution = Vec2( SizeX, SizeY );
  10. auto shaderNode = NodeShader::createWithFile( "", "Shaders/shadertoy_LensFlare.fsh" );
  11. auto position = Vec2( winSize.width / 2, winSize.height / 2 );
  12. auto _center = Vec2( position.x * frameSize.width / visibleSize.width * retinaFactor,
  13.                     position.y * frameSize.height / visibleSize.height * retinaFactor );
  15. shaderNode->setAnchorPoint( Vec2( 0.5f, 0.5f ) );
  16. shaderNode->setPosition( position );
  17. shaderNode->setContentSize( winSize / 2 );
  18. addChild( shaderNode );
  20. shaderNode->setDrawCall(
  21.     [=]( GLProgramState * const programState, const Mat4 & transform, uint32_t flags ) {
  22.         GLfloat vertices[12] = { 0,     0,
  23.                                 SizeX, 0,
  24.                                 SizeX, SizeY,
  25.                                 0,     0,
  26.                                 0,     SizeY,
  27.                                 SizeX, SizeY
  28.                                 };
  30.         programState->setUniformVec2( "resolution", _resolution );
  31.         programState->setUniformVec2( "center", _center );
  32.         programState->setVertexAttribPointer( "a_position", 2, GL_FLOAT, GL_FALSE, 0, ( GLvoid * ) vertices );
  34.         programState->apply( transform );
  36.         glDrawArrays( GL_TRIANGLES, 0, 6 );
  38.         CC_INCREMENT_GL_DRAWN_BATCHES_AND_VERTICES( 1, 6 );
  39.     } );

顶点着色器：

  2. ccPositionTextureColor_vert 
  4. // #include "renderer/ccShader_PositionTextureColor.vert"
  6. // Position Texture Color shader
  7. // 
  8. // gl_Position  = CC_MVPMatrix * a_position（顶点数据传入的顶点坐标）
  9. // gl_FragColor = texutreColor * a_color（顶点数据传入的color）
  10. //

片段着色器：

  2. uniform vec2 center;
  3. uniform vec2 resolution;
  5. //uniform float     iChannelTime[4];       // channel playback time (in seconds)
  6. //uniform vec3      iChannelResolution[4]; // channel resolution (in pixels)
  7. vec4      iMouse = vec4(0,0,0,0);                // mouse pixel coords. xy: current (if MLB down), zw: click
  8. //uniform sampler2D iChannel0;          // input channel. XX = 2D/Cube
  10. /*by musk License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
  12.  Trying to get some interesting looking lens flares.
  14.  13/08/13:
  15.  published
  17.  muuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuusk!*/
  19. float noise(float t)
  20. {
  21.     return 0.;
  22. }
  23. float noise(vec2 t)
  24. {
  25.     return 0.;
  26. }
  28. vec3 lensflare(vec2 uv,vec2 pos)
  29. {
  30.     vec2 main = uv-pos;
  31.     vec2 uvd = uv*(length(uv));
  33.     float ang = atan(main.x,main.y);
  34.     float dist=length(main); dist = pow(dist,.1);
  35.     float n = noise(vec2(ang*16.0,dist*32.0));
  37.     float f0 = 1.0/(length(uv-pos)*16.0+1.0);
  39.     f0 = f0+f0*(sin(noise((pos.x+pos.y)*2.2+ang*4.0+5.954)*16.0)*.1+dist*.1+.8);
  41.     float f1 = max(0.01-pow(length(uv+1.2*pos),1.9),.0)*7.0;
  43.     float f2 = max(1.0/(1.0+32.0*pow(length(uvd+0.8*pos),2.0)),.0)*00.25;
  44.     float f22 = max(1.0/(1.0+32.0*pow(length(uvd+0.85*pos),2.0)),.0)*00.23;
  45.     float f23 = max(1.0/(1.0+32.0*pow(length(uvd+0.9*pos),2.0)),.0)*00.21;
  47.     vec2 uvx = mix(uv,uvd,-0.5);
  49.     float f4 = max(0.01-pow(length(uvx+0.4*pos),2.4),.0)*6.0;
  50.     float f42 = max(0.01-pow(length(uvx+0.45*pos),2.4),.0)*5.0;
  51.     float f43 = max(0.01-pow(length(uvx+0.5*pos),2.4),.0)*3.0;
  53.     uvx = mix(uv,uvd,-.4);
  55.     float f5 = max(0.01-pow(length(uvx+0.2*pos),5.5),.0)*2.0;
  56.     float f52 = max(0.01-pow(length(uvx+0.4*pos),5.5),.0)*2.0;
  57.     float f53 = max(0.01-pow(length(uvx+0.6*pos),5.5),.0)*2.0;
  59.     uvx = mix(uv,uvd,-0.5);
  61.     float f6 = max(0.01-pow(length(uvx-0.3*pos),1.6),.0)*6.0;
  62.     float f62 = max(0.01-pow(length(uvx-0.325*pos),1.6),.0)*3.0;
  63.     float f63 = max(0.01-pow(length(uvx-0.35*pos),1.6),.0)*5.0;
  65.     vec3 c = vec3(.0);
  67.     c.r+=f2+f4+f5+f6; c.g+=f22+f42+f52+f62; c.b+=f23+f43+f53+f63;
  68.     c = c*1.3 - vec3(length(uvd)*.05);
  69.     c+=vec3(f0);
  71.     return c;
  72. }
  74. vec3 cc(vec3 color, float factor,float factor2) // color modifier
  75. {
  76.     float w = color.x+color.y+color.z;
  77.     return mix(color,vec3(w)*factor,w*factor2);
  78. }
  80. void main(void)
  81. {
  82.     vec2   iResolution = resolution;           // viewport resolution (in pixels)
  83.     float  iGlobalTime = CC_Time[1];           // shader playback time (in seconds)
  85.     //vec2 uv = gl_FragCoord.xy / iResolution.xy - 0.5;
  86.     vec2 uv = (gl_FragCoord.xy - center.xy) / iResolution.xy;
  87.     uv.x *= iResolution.x/iResolution.y; //fix aspect ratio
  88.     vec3 mouse = vec3(iMouse.xy/iResolution.xy - 0.5,iMouse.z-.5);
  89.     mouse.x *= iResolution.x/iResolution.y; //fix aspect ratio
  90.     if (iMouse.z<.5)
  91.     {
  92.         mouse.x=sin(iGlobalTime)*.5;
  93.         mouse.y=sin(iGlobalTime*.913)*.5;
  94.     }
  96.     vec3 color = vec3(1.4,1.2,1.0)*lensflare(uv,mouse.xy);
  97.     color -= noise(gl_FragCoord.xy)*.015;
  98.     color = cc(color,.5,.1);
  99.     gl_FragColor = vec4(color,1.0);
  100. }

四、Gaussian blur：高斯模糊

GIF.gif
C++：

  2. auto blurShader   = Shader::createWithSrc( ccPositionTextureColor_noMVP_vert, FileUtils::getInstance()->getStringFromFile( FileUtils::getInstance()->fullPathForFilename( "Shaders/example_Blur.fsh" ) ) );
  3. auto programState = blurShader->getGLProgramState();
  5. blurShader->drawCallOnSprite = [blurShader, programState](
  6.     cocos2d::Sprite             * target,
  7.     cocos2d::Renderer           * render,
  8.     const cocos2d::Mat4         & transform,
  9.     std::uint32_t               flags,
  10.     float                       globalZOrder,
  11.     cocos2d::Texture2D          * texture,
  12.     cocos2d::BlendFunc          & blendFunc,
  13.     cocos2d::V3F_C4B_T2F_Quad   * quad,
  14.     TrianglesCommand::Triangles * triangles )
  15. {
  16.     blurShader->quadCommand.init( globalZOrder, texture->getName(), programState, blendFunc, quad, 1, transform, flags );
  17.     render->addCommand( &blurShader->quadCommand );
  18. };
  20. blurShader->setUniformsAndAttribs = [shaderSprite, programState]
  21.         {
  22.             Size size = shaderSprite->getTexture()->getContentSizeInPixels();
  23.             programState->setUniformVec2( "resolution", size );
  24.             #if (CC_TARGET_PLATFORM != CC_PLATFORM_WINRT)
  25.             programState->setUniformFloat( "blurRadius", 10 );    // 模板半径
  26.             programState->setUniformFloat( "sampleNum", 5 );    // 采样数
  27.             #endif
  28.         };

顶点着色器：

  2. ccPositionTextureColor_noMVP_vert
  4. // #include "renderer/ccShader_PositionTextureColor_noMVP.vert"
  6. // Position Texture Color without MVP shader
  7. // 
  8. // gl_Position  = CC_PMatrix * a_position
  9. // gl_FragColor = texutreColor * a_color
  10. //

片段着色器：

  2. #ifdef GL_ES
  3. precision mediump float;
  4. #endif
  6. varying vec4 v_fragmentColor;
  7. varying vec2 v_texCoord;
  9. uniform vec2  resolution;
  10. uniform float blurRadius;
  11. uniform float sampleNum;
  13. vec4 blur(vec2);
  15. void main(void)
  16. {
  17.     vec4 col = blur(v_texCoord); //* v_fragmentColor.rgb;
  18.     gl_FragColor = vec4(col) * v_fragmentColor;
  19. }
  21. vec4 blur(vec2 p)
  22. {
  23.     if (blurRadius > 0.0 && sampleNum > 1.0)
  24.     {
  25.         vec4 col = vec4(0);
  26.         vec2 unit = 1.0 / resolution.xy;
  28.         float r = blurRadius;
  29.         float sampleStep = r / sampleNum;
  31.         float count = 0.0;
  33.         for(float x = -r; x < r; x += sampleStep)
  34.         {
  35.             for(float y = -r; y < r; y += sampleStep)
  36.             {
  37.                 float weight = (r - abs(x)) * (r - abs(y));
  38.                 col += texture2D(CC_Texture0, p + vec2(x * unit.x, y * unit.y)) * weight;
  39.                 count += weight;
  40.             }
  41.         }
  43.         return col / count;
  44.     }
  46.     return texture2D(CC_Texture0, p);
  47. }

五、heart：心跳

GIF.gif
C++：

  2. const auto winSize      = Director::getInstance()->getWinSize();
  3. const auto frameSize    = Director::getInstance()->getOpenGLView()->getFrameSize();
  4. const auto visibleSize  = Director::getInstance()->getVisibleSize();
  5. const auto retinaFactor = Director::getInstance()->getOpenGLView()->getRetinaFactor();
  6. const auto SizeX        = 256;
  7. const auto SizeY        = 256;
  8. const auto _resolution  = Vec2( SizeX, SizeY );
  10. auto shaderNode         = NodeShader::createWithFile( "", "Shaders/example_Heart.fsh" );
  11. auto position           = Vec2( winSize.width / 2, winSize.height / 2 );
  12. auto _center            = Vec2( position.x * frameSize.width / visibleSize.width * retinaFactor,
  13.                                position.y * frameSize.height / visibleSize.height * retinaFactor );
  15. shaderNode->setAnchorPoint( Vec2( 0.5f, 0.5f ) );
  16. shaderNode->setPosition( position );
  17. shaderNode->setContentSize( winSize / 2 );
  18. addChild( shaderNode );
  20. shaderNode->setDrawCall(
  21.     [ = ]( GLProgramState * const programState, const Mat4 & transform, uint32_t flags )
  22.     {
  23.         GLfloat vertices[12] = { 0,     0,
  24.                                 SizeX, 0,
  25.                                 SizeX, SizeY,
  26.                                 0,     0,
  27.                                 0,     SizeY,
  28.                                 SizeX, SizeY
  29.                                 };
  31.         programState->setUniformVec2( "resolution", _resolution );
  32.         programState->setUniformVec2( "center", _center );
  33.         programState->setVertexAttribPointer( "a_position", 2, GL_FLOAT, GL_FALSE, 0, ( GLvoid * ) vertices );
  35.         programState->apply( transform );
  37.         glDrawArrays( GL_TRIANGLES, 0, 6 );
  39.         CC_INCREMENT_GL_DRAWN_BATCHES_AND_VERTICES( 1, 6 );
  40.     } );

顶点着色器：

  2. ccPositionTextureColor_vert 
  4. // #include "renderer/ccShader_PositionTextureColor.vert"
  6. // Position Texture Color shader
  7. // 
  8. // gl_Position  = CC_MVPMatrix * a_position（顶点数据传入的顶点坐标）
  9. // gl_FragColor = texutreColor * a_color（顶点数据传入的color）
  10. //

片段着色器：

  2. // Shader from http://www.iquilezles.org/apps/shadertoy/
  4. #ifdef GL_ES
  5. precision highp float;
  6. #endif
  8. uniform vec2 center;
  9. uniform vec2 resolution;
  11. void main(void)
  12. {
  13.     float time = CC_Time[1];
  14.     vec2 p = 2.0 * (gl_FragCoord.xy - center.xy) / resolution.xy;
  16.     // animate
  17.     float tt = mod(time,2.0)/2.0;
  18.     float ss = pow(tt,.2)*0.5 + 0.5;
  19.     ss -= ss*0.2*sin(tt*6.2831*5.0)*exp(-tt*6.0);
  20.     p *= vec2(0.5,1.5) + ss*vec2(0.5,-0.5);
  23.     float a = atan(p.x,p.y)/3.141593;
  24.     float r = length(p);
  26.     // shape
  27.     float h = abs(a);
  28.     float d = (13.0*h - 22.0*h*h + 10.0*h*h*h)/(6.0-5.0*h);
  30.     // color
  31.     float f = step(r,d) * pow(1.0-r/d,0.25);
  33.     gl_FragColor = vec4(f,0.0,0.0,1.0);
  34. }

六、Glow：荧光

GIF.gif
C++：

  2. const auto winSize      = Director::getInstance()->getWinSize();
  3. const auto frameSize    = Director::getInstance()->getOpenGLView()->getFrameSize();
  4. const auto visibleSize  = Director::getInstance()->getVisibleSize();
  5. const auto retinaFactor = Director::getInstance()->getOpenGLView()->getRetinaFactor();
  6. const auto SizeX        = 256;
  7. const auto SizeY        = 256;
  8. const auto _resolution  = Vec2( SizeX, SizeY );
  10. auto shaderNode = NodeShader::createWithFile( "", "Shaders/shadertoy_Glow.fsh" );
  11. auto position   = Vec2( winSize.width / 2, winSize.height / 2 );
  12. auto _center    = Vec2( position.x * frameSize.width / visibleSize.width * retinaFactor,
  13.                        position.y * frameSize.height / visibleSize.height * retinaFactor );
  15. shaderNode->setAnchorPoint( Vec2( 0.5f, 0.5f ) );
  16. shaderNode->setPosition( position );
  17. shaderNode->setContentSize( winSize / 2 );
  18. addChild( shaderNode );
  20. shaderNode->setDrawCall( 
  21.     [ = ]( GLProgramState * const programState, const Mat4 & transform, uint32_t flags )
  22.     {
  23.         GLfloat vertices[12] = { 0,     0,
  24.                                 SizeX, 0,
  25.                                 SizeX, SizeY,
  26.                                 0,     0,
  27.                                 0,     SizeY,
  28.                                 SizeX, SizeY
  29.                                 };
  31.         programState->setUniformVec2( "resolution", _resolution );
  32.         programState->setUniformVec2( "center", _center );
  33.         programState->setVertexAttribPointer( "a_position", 2, GL_FLOAT, GL_FALSE, 0, ( GLvoid * ) vertices );
  35.         programState->apply( transform );
  37.         glDrawArrays( GL_TRIANGLES, 0, 6 );
  39.         CC_INCREMENT_GL_DRAWN_BATCHES_AND_VERTICES( 1, 6 );
  40.     } );

顶点着色器：

  2. ccPositionTextureColor_vert 
  4. // #include "renderer/ccShader_PositionTextureColor.vert"
  6. // Position Texture Color shader
  7. // 
  8. // gl_Position  = CC_MVPMatrix * a_position（顶点数据传入的顶点坐标）
  9. // gl_FragColor = texutreColor * a_color（顶点数据传入的color）
  10. //

片段着色器：

  2. uniform vec2 center;
  3. uniform vec2 resolution;
  5. //uniform float     iChannelTime[4];       // channel playback time (in seconds)
  6. //uniform vec3      iChannelResolution[4]; // channel resolution (in pixels)
  7. vec4      iMouse = vec4(0,0,0,0);          // mouse pixel coords. xy: current (if MLB down), zw: click
  8. //uniform sampler2D iChannel0;             // input channel. XX = 2D/Cube
  10. void main(void)
  11. {
  12.     vec2   iResolution = resolution;           // viewport resolution (in pixels)
  13.     float  iGlobalTime = CC_Time[1];           // shader playback time (in seconds)
  15.     float pointRadius = 0.06;
  16.     float linkSize = 0.04;
  17.     float noiseStrength = 0.08; // range: 0-1
  19.     float minDimension = min(iResolution.x, iResolution.y);
  20.     vec2 bounds = vec2(iResolution.x / minDimension, iResolution.y / minDimension);
  21.     //vec2 uv = gl_FragCoord.xy / minDimension;
  22.     vec2 uv = (2. * gl_FragCoord.xy - center.xy) / iResolution.xy;
  24.     vec3 pointR = vec3(0.0, 0.0, 1.0);
  25.     vec3 pointG = vec3(0.0, 0.0, 1.0);
  26.     vec3 pointB = vec3(0.0, 0.0, 1.0);
  28.     // Make the points orbit round the origin in 3 dimensions.
  29.     // Coefficients are arbitrary to give different behaviours.
  30.     // The Z coordinate should always be >0.0, as it's used directly to
  31.     //  multiply the radius to give the impression of depth.
  32.     pointR.x += 0.32 * sin(1.32 * iGlobalTime);
  33.     pointR.y += 0.3 * sin(1.03 * iGlobalTime);
  34.     pointR.z += 0.4 * sin(1.32 * iGlobalTime);
  36.     pointG.x += 0.31 * sin(0.92 * iGlobalTime);
  37.     pointG.y += 0.29 * sin(0.99 * iGlobalTime);
  38.     pointG.z += 0.38 * sin(1.24 * iGlobalTime);
  40.     pointB.x += 0.33 * sin(1.245 * iGlobalTime);
  41.     pointB.y += 0.3 * sin(1.41 * iGlobalTime);
  42.     pointB.z += 0.41 * sin(1.11 * iGlobalTime);
  44.     // Centre the points in the display
  45.     vec2 midUV = vec2(bounds.x * 0.5, bounds.y * 0.5);
  46.     pointR.xy += midUV;
  47.     pointG.xy += midUV;
  48.     pointB.xy += midUV;
  50.     // Calculate the vectors from the current fragment to the coloured points
  51.     vec2 vecToR = pointR.xy - uv;
  52.     vec2 vecToG = pointG.xy - uv;
  53.     vec2 vecToB = pointB.xy - uv;
  55.     vec2 dirToR = normalize(vecToR.xy);
  56.     vec2 dirToG = normalize(vecToG.xy);
  57.     vec2 dirToB = normalize(vecToB.xy);
  59.     float distToR = length(vecToR);
  60.     float distToG = length(vecToG);
  61.     float distToB = length(vecToB);
  63.     // Calculate the dot product between vectors from the current fragment to each pair
  64.     //  of adjacent coloured points. This helps us determine how close the current fragment
  65.     //  is to a link between points.
  66.     float dotRG = dot(dirToR, dirToG);
  67.     float dotGB = dot(dirToG, dirToB);
  68.     float dotBR = dot(dirToB, dirToR);
  70.     // Start with a bright coloured dot around each point
  71.     gl_FragColor.x = 1.0 - smoothstep(distToR, 0.0, pointRadius * pointR.z);
  72.     gl_FragColor.y = 1.0 - smoothstep(distToG, 0.0, pointRadius * pointG.z);
  73.     gl_FragColor.z = 1.0 - smoothstep(distToB, 0.0, pointRadius * pointB.z);
  74.     gl_FragColor.w = 1.0;
  76.     // We want to show a coloured link between adjacent points.
  77.     // Determine the strength of each link at the current fragment.
  78.     // This tends towards 1.0 as the vectors to each point tend towards opposite directions.
  79.     float linkStrengthRG = 1.0 - smoothstep(dotRG, -1.01, -1.0 + (linkSize * pointR.z * pointG.z));
  80.     float linkStrengthGB = 1.0 - smoothstep(dotGB, -1.01, -1.0 + (linkSize * pointG.z * pointB.z));
  81.     float linkStrengthBR = 1.0 - smoothstep(dotBR, -1.01, -1.0 + (linkSize * pointB.z * pointR.z));
  83.     // If the current fragment is in a link, we need to know how much the
  84.     //  linked points contribute of their colour.
  85.     float sumDistRG = distToR + distToG;
  86.     float sumDistGB = distToG + distToB;
  87.     float sumDistBR = distToB + distToR;
  89.     float contribRonRG = 1.0 - (distToR / sumDistRG);
  90.     float contribRonBR = 1.0 - (distToR / sumDistBR);
  92.     float contribGonRG = 1.0 - (distToG / sumDistRG);
  93.     float contribGonGB = 1.0 - (distToG / sumDistGB);
  95.     float contribBonGB = 1.0 - (distToB / sumDistGB);
  96.     float contribBonBR = 1.0 - (distToB / sumDistBR);
  98.     // Additively blend the link colours into the fragment.
  99.     gl_FragColor.x += (linkStrengthRG * contribRonRG) + (linkStrengthBR * contribRonBR);
  100.     gl_FragColor.y += (linkStrengthGB * contribGonGB) + (linkStrengthRG * contribGonRG);
  101.     gl_FragColor.z += (linkStrengthBR * contribBonBR) + (linkStrengthGB * contribBonGB);
  103.     // Use an underlying texture to provide some noise
  104.     float noiseMin = 1.0 - noiseStrength;
  105.     gl_FragColor.xyz *= (1.0 - noiseStrength) + (noiseStrength * 0.);
  106. }

七、outLine：描边

image.png
C++

  2. #define getFileData(a) FileUtils::getInstance()->getStringFromFile(FileUtils::getInstance()->fullPathForFilename(a))
  4. auto outlineShader = Shader::createWithSrc( ccPositionTextureColor_noMVP_vert, getFileData( "Shaders/example_Outline.fsh" ) );
  5. auto programState = outlineShader->getGLProgramState();
  7. outlineShader->drawCallOnSprite = [outlineShader, programState](
  8.     cocos2d::Sprite             * target,
  9.     cocos2d::Renderer           * render,
  10.     const cocos2d::Mat4         & transform,
  11.     std::uint32_t               flags,
  12.     float                       globalZOrder,
  13.     cocos2d::Texture2D          * texture,
  14.     cocos2d::BlendFunc          & blendFunc,
  15.     cocos2d::V3F_C4B_T2F_Quad   * quad,
  16.     cocos2d::TrianglesCommand::Triangles * triangles )
  17. {
  18.     outlineShader->quadCommand.init( globalZOrder, texture->getName(), programState, blendFunc, quad, 1, transform, flags );
  19.     render->addCommand( &outlineShader->quadCommand );
  20. };
  22. outlineShader->setUniformsAndAttribs = [programState]
  23.     {
  24.         Vec3 color( 1.0f, 0.2f, 0.3f );
  25.         GLfloat radius = 0.01f;
  26.         GLfloat threshold = 1.75;
  27.         programState->setUniformVec3( "u_outlineColor", color );
  28.         programState->setUniformFloat( "u_radius", radius );
  29.         programState->setUniformFloat( "u_threshold", threshold );
  30.     };

顶点着色器

  2. ccPositionTextureColor_noMVP_vert

片段着色器

  2. /*
  3.   Created by guanghui on 4/8/14.
  4. http://www.idevgames.com/forums/thread-3010.html
  5. */
  7. varying vec2 v_texCoord;
  8. varying vec4 v_fragmentColor;
  10. uniform vec3 u_outlineColor;
  11. uniform float u_threshold;
  12. uniform float u_radius;
  14. void main()
  15. {
  16.     float radius = u_radius;
  17.     vec4 accum = vec4(0.0);
  18.     vec4 normal = vec4(0.0);
  20.     normal = texture2D(CC_Texture0, vec2(v_texCoord.x, v_texCoord.y));
  22.     accum += texture2D(CC_Texture0, vec2(v_texCoord.x - radius, v_texCoord.y - radius));
  23.     accum += texture2D(CC_Texture0, vec2(v_texCoord.x + radius, v_texCoord.y - radius));
  24.     accum += texture2D(CC_Texture0, vec2(v_texCoord.x + radius, v_texCoord.y + radius));
  25.     accum += texture2D(CC_Texture0, vec2(v_texCoord.x - radius, v_texCoord.y + radius));
  27.     accum *= u_threshold;
  28.     accum.rgb =  u_outlineColor * accum.a;
  29.     accum.a = 1.0;
  31.     normal = ( accum * (1.0 - normal.a)) + (normal * normal.a);
  33.     gl_FragColor = v_fragmentColor * normal;
  34. }

八、noise：噪声点

GIF.gif
C++

  1. auto noiseShader = Shader::createWithSrc( ccPositionTextureColor_noMVP_vert,
  2.                                          FileUtils::getInstance()->getStringFromFile(
  3.                                              FileUtils::getInstance()->fullPathForFilename( "Shaders/example_Noisy.fsh" ) ) );
  4. auto programState = noiseShader->getGLProgramState();
  6. noiseShader->drawCallOnSprite = [noiseShader, programState](
  7.     cocos2d::Sprite             * target,
  8.     cocos2d::Renderer           * render,
  9.     const cocos2d::Mat4         & transform,
  10.     std::uint32_t               flags,
  11.     float                       globalZOrder,
  12.     cocos2d::Texture2D          * texture,
  13.     cocos2d::BlendFunc          & blendFunc,
  14.     cocos2d::V3F_C4B_T2F_Quad   * quad,
  15.     cocos2d::TrianglesCommand::Triangles * triangles )
  16. {
  17.     noiseShader->quadCommand.init( globalZOrder, texture->getName(), programState, blendFunc, quad, 1, transform, flags );
  18.     render->addCommand( &noiseShader->quadCommand );
  19. };
  21. noiseShader->setUniformsAndAttribs = [ = ]
  22. {
  23.     auto s = shaderSprite->getTexture()->getContentSizeInPixels();
  24.     programState->setUniformVec2( "resolution", Vec2( s.width, s.height ) );
  25. }

顶点着色器

  1. ccPositionTextureColor_noMVP_vert

片段着色器

  1. // Shader taken from: http://webglsamples.googlecode.com/hg/electricflower/electricflower.html
  3. #ifdef GL_ES
  4. precision mediump float;
  5. #endif
  7. varying vec4 v_fragmentColor;
  8. varying vec2 v_texCoord;
  10. uniform vec2 resolution;
  12. const float intensity = 0.05;
  13. vec3 noise(vec2 uv)
  14. {
  15.     vec2 p = abs(sin(uv * 13.0 + uv.x * CC_Time[1] * sin(uv.y)));
  17.     return vec3(sin (0.2 * CC_Time[1] + sin(p * 0.5) * CC_Time[1] / cos(50.0)) * 10.0,0.3+0.5 * abs(sin(CC_Time[1] * tan(5.0))));
  19. }
  21. void main(void)
  22. {
  23.     gl_FragColor.xyz = intensity * noise(gl_FragCoord.xy / sin(resolution.xy * CC_Time[1] * 0.01)) + (1. - intensity) *
  24.             texture2D(CC_Texture0,v_texCoord.xy).xyz;
  25.     gl_FragColor.w = 1.;
  26. }

九、边缘检测

image.png
C++

  1. auto edgeDetectShader = Shader::createWithSrc( ccPositionTextureColor_noMVP_vert,
  2.                                               FileUtils::getInstance()->getStringFromFile(
  3.                                                   FileUtils::getInstance()->fullPathForFilename( "Shaders/example_EdgeDetection.fsh" ) ) );
  4. auto programState = edgeDetectShader->getGLProgramState();
  6. edgeDetectShader->drawCallOnSprite = [edgeDetectShader, programState](
  7.     cocos2d::Sprite             * target,
  8.     cocos2d::Renderer           * render,
  9.     const cocos2d::Mat4         & transform,
  10.     std::uint32_t               flags,
  11.     float                       globalZOrder,
  12.     cocos2d::Texture2D          * texture,
  13.     cocos2d::BlendFunc          & blendFunc,
  14.     cocos2d::V3F_C4B_T2F_Quad   * quad,
  15.     cocos2d::TrianglesCommand::Triangles * triangles )
  16. {
  17.     edgeDetectShader->quadCommand.init( globalZOrder, texture->getName(), programState, blendFunc, quad, 1, transform, flags );
  18.     render->addCommand( &edgeDetectShader->quadCommand );
  19. };
  21. noiseShader->setUniformsAndAttribs = [ = ]
  22. {
  23.     auto s = shaderSprite->getTexture()->getContentSizeInPixels();
  24.     programState->setUniformVec2( "resolution", Vec2( s.width, s.height ) );
  25. };

顶点着色器

  1. ccPositionTextureColor_noMVP_vert

片段着色器

  1. #ifdef GL_ES
  2. precision mediump float;
  3. #endif
  5. varying vec4 v_fragmentColor;
  6. varying vec2 v_texCoord;
  8. uniform vec2 resolution;
  10. float lookup(vec2 p, float dx, float dy)
  11. {
  12.     vec2 uv = p.xy + vec2(dx , dy ) / resolution.xy;
  13.     vec4 c = texture2D(CC_Texture0, uv.xy);
  14.     return 0.2126*c.r + 0.7152*c.g + 0.0722*c.b;
  15. }
  17. void main(void)
  18. {
  19.     vec2 p = v_texCoord.xy;
  20.     // simple sobel edge detection
  21.     float gx = 0.0;
  22.     gx += -1.0 * lookup(p, -1.0, -1.0);
  23.     gx += -2.0 * lookup(p, -1.0,  0.0);
  24.     gx += -1.0 * lookup(p, -1.0,  1.0);
  25.     gx +=  1.0 * lookup(p,  1.0, -1.0);
  26.     gx +=  2.0 * lookup(p,  1.0,  0.0);
  27.     gx +=  1.0 * lookup(p,  1.0,  1.0);
  29.     float gy = 0.0;
  30.     gy += -1.0 * lookup(p, -1.0, -1.0);
  31.     gy += -2.0 * lookup(p,  0.0, -1.0);
  32.     gy += -1.0 * lookup(p,  1.0, -1.0);
  33.     gy +=  1.0 * lookup(p, -1.0,  1.0);
  34.     gy +=  2.0 * lookup(p,  0.0,  1.0);
  35.     gy +=  1.0 * lookup(p,  1.0,  1.0);
  37.     float g = gx*gx + gy*gy;
  39.     gl_FragColor.xyz = vec3(1.-g);
  40.     gl_FragColor.w = 1.;
  41. }

十、GrayScale：灰度图

image.png
C++

  1. auto grayScaleShader = Shader::createWithSrc( ccPositionTextureColor_noMVP_vert,
  2.                                              FileUtils::getInstance()->getStringFromFile(
  3.                                                  FileUtils::getInstance()->fullPathForFilename( "Shaders/example_GreyScale.fsh" ) ) );
  4. auto programState = grayScaleShader->getGLProgramState();
  5. grayScaleShader->drawCallOnSprite = [grayScaleShader, programState](
  6.     cocos2d::Sprite             * target,
  7.     cocos2d::Renderer           * render,
  8.     const cocos2d::Mat4         & transform,
  9.     std::uint32_t               flags,
  10.     float                       globalZOrder,
  11.     cocos2d::Texture2D          * texture,
  12.     cocos2d::BlendFunc          & blendFunc,
  13.     cocos2d::V3F_C4B_T2F_Quad   * quad,
  14.     cocos2d::TrianglesCommand::Triangles * triangles )
  15. {
  16.     grayScaleShader->quadCommand.init( globalZOrder, texture->getName(), programState, blendFunc, quad, 1, transform, flags );
  17.     render->addCommand( &grayScaleShader->quadCommand );
  18. };
  19. grayScaleShader->setUniformsAndAttribs = [ = ]
  20. {
  21.     auto s = shaderSprite->getTexture()->getContentSizeInPixels();
  22.     programState->setUniformVec2( "resolution", Vec2( s.width, s.height ) );
  23. };

顶点着色器

  1. ccPositionTextureColor_noMVP_vert

片段着色器

  1. #ifdef GL_ES
  2. precision mediump float;
  3. #endif
  5. varying vec4 v_fragmentColor;
  6. varying vec2 v_texCoord;
  8. void main(void)
  9. {
  10.     vec4 c = texture2D(CC_Texture0, v_texCoord);
  11.     gl_FragColor.xyz = vec3(0.2126*c.r + 0.7152*c.g + 0.0722*c.b);
  12.     gl_FragColor.w = c.w;
  13. }

十一、Glare Lens Flare

image.png