(转)Cocos2dx-JS 在 Sprite 上使用 Shader

Posted 2020-12-29 程序喵星人

//例如如下一个简单的变色程序，蓝色变红色 ,js 代码:

1.  
   var url = "res/sb.jpg";
2.  
   var sp = new cc.Sprite(url);
3.  
   sp.setAnchorPoint(0,0);
4.  
   this.addChild(sp);
5.  
   this.shader = new cc.GLProgram("res/Shaders/example_Flower.vsh", "res/Shaders/example_Flower.fsh");
6.  
   this.shader.retain();
7.  
   this.shader.link();
8.  
   this.shader.updateUniforms();
9.  
   var program = this.shader.getProgram();
10.  
    sp.shaderProgram = this.shader;

 

VertexShader

 

1.  
   attribute vec4 a_position;
2.  
   attribute vec2 a_texCoord;
3.  
   attribute vec4 a_color;
4.  
    
5.  
   #ifdef GL_ES
6.  
   varying lowp vec4 v_fragmentColor;
7.  
   varying mediump vec2 v_texCoord;
8.  
   #else
9.  
   varying vec4 v_fragmentColor;
10.  
    varying vec2 v_texCoord;
11.  
    #endif
12.  
     
13.  
    void main()
14.  
    {
15.  
    gl_Position = CC_PMatrix * a_position;
16.  
    v_fragmentColor = a_color;
17.  
    v_texCoord = a_texCoord;
18.  
    }

 

FragmentShader

 

1.  
   #ifdef GL_ES
2.  
   precision lowp float;
3.  
   #endif
4.  
    
5.  
   varying vec4 v_fragmentColor;
6.  
   varying vec2 v_texCoord;
7.  
    
8.  
   void main()
9.  
   {
10.  
    gl_FragColor = v_fragmentColor * texture2D(CC_Texture0, v_texCoord);
11.  
    float r = gl_FragColor[0];
12.  
    float g = gl_FragColor[1];
13.  
    float b = gl_FragColor[2];
14.  
    float a = gl_FragColor[3];
15.  
    if(b > r && b > g && b > (r*0.5 + g*0.5)*1.5) {
16.  
    gl_FragColor[0] = b;
17.  
    gl_FragColor[2] = r;
18.  
    }
19.  
    }

     

     

    原文地址：https://blog.csdn.net/jiexiaopei_2004/article/details/50542860