Cocos2d-js Shader Series 2: Using Shader on Cc.sprite (black and white, grayscale, old effects)

Using shader to do special color processing in a sprite is simple, just bind the shader program to the sprite:

Sprite.shaderprogram = Alphatestshader;

Cocos2d built-In some shader, detailed can see the code:

Among them, Ccshadercache caches some shader instances, and Glprogram the GL API with a simple encapsulation to make the interface more friendly.

It is important to note that cocos2d will automatically add some parameters when compiling the shader program using Glprogram.

_compileshader:function(shader, type, source) {if(!source | |!shader)return false; //var prestr = (Type = = This._glcontext.vertex_shader)? "Precision HIGHP float;\n": "Precision mediump float;\n"; Source = "precision highp float;         \ n "+" uniform mat4 Cc_pmatrix;        \ n "+" uniform mat4 Cc_mvmatrix;       \ n "+" uniform mat4 Cc_mvpmatrix;            \ n "+" uniform vec4 cc_time;         \ n "+" uniform vec4 cc_sintime;         \ n "+" uniform vec4 cc_costime;        \ n "+" uniform vec4 cc_random01; \ n "+"//cc includes END \ n "+source;  This. _glcontext.shadersource (shader, source);  This. _glcontext.compileshader (shader); varStatus = This. _glcontext.getshaderparameter (Shader, This. _glcontext.compile_status); if(!status) {Cc.log ("Cocos2d:ERROR:Failed to compile shader:\n" + This. _glcontext.getshadersource (shader)); if(Type = = This. _glcontext.vertex_shader) Cc.log ("Cocos2d: \ n" + This. Vertexshaderlog ()); ElseCc.log ("Cocos2d: \ n" + This. Fragmentshaderlog ()); }         return(Status = = 1 ); }

In addition, after binding to the Sprite, Cocos2d will automatically set some values, we just need to do a binding in advance, and this binding operation is also a friendly package. Specifically, you can look at the code.

                Program.addattribute (CC. Attribute_name_position, CC. vertex_attrib_position);                 Program.addattribute (CC. Attribute_name_color, CC. Vertex_attrib_color);                 Program.addattribute (CC. Attribute_name_tex_coord, CC. Vertex_attrib_tex_coords);

The effect on a sprite is nothing more than a color change or filter. Since Cocos does not have a native filter and is not as convenient as flash, then we have to do our own.

The bottom of the implementation of two grayscale and old sepia effect, similar to flash shaderfilter.

(The green ball is the original image, the upper and lower 2 balls are made using different sepia parameters to get the old effect)

varSUGAR4 = Sugar.create (0,0,2); sugar4.x= SIZE.WIDTH/4; Sugar4.y = size.height/1.5; This. AddChild (SUGAR4); Sugar4.scale= 3; varSugar = sugar.create (0,0,2); Sugar.x= SIZE.WIDTH/2; Sugar.y = SIZE.HEIGHT/2; This. AddChild (sugar); Sugar.scale= 3; varSUGAR2 = Sugar.create (0,0,2); sugar2.x= SIZE.WIDTH/3; Sugar2.y = SIZE.HEIGHT/3; This. AddChild (SUGAR2); Sugar2.scale= 2; varSUGAR3 = Sugar.create (0,0,2); sugar3.x= size.width/3*2; Sugar3.y = size.height/3*2; This. AddChild (SUGAR3); Sugar3.scale= 2;         Filter.grayscale (sugar); Filter.sepia (SUGAR2,0.5); Filter.sepia (SUGAR3,0.9);

The code for the filter class:

/** * Created by Kenkozheng on 2014/11/4.*/ /** * can only be used to control the color of sprite, etc., the goal is to implement a flash-like built-in basic filter * Static Class*/ varFilter ={default_vertex_shader:"Attribute Vec4 a_position; \ n "+" attribute vec2 A_texcoord; \ n "+" varying mediump vec2 v_texcoord;  \ n "+" void main () \ n "+" {\ n "+" gl_position = (Cc_pmatrix * cc_mvmatrix) * a_position; \ n "+" V_texcoord = A_texcoord; \ n "+"} ", Gray_scale_fragment_shader:"Varying vec2 v_texcoord; \ n "+" uniform sampler2d cc_texture0;  \ n "+" void main () \ n "+" {\ n "+" vec4 Texcolor = texture2d (cc_texture0, V_texcoord); \ n "+" float Gray = TEXCOLOR.R * 0.299 + texcolor.g * 0.587 + texcolor.b * 0.114;  \ n "+" Gl_fragcolor = Vec4 (Gray, Gray, Gray, TEXCOLOR.A); \ n "+"} ", Sepia_fragment_shader:"Varying vec2 v_texcoord; \ n "+" uniform sampler2d cc_texture0; \ n "+" uniform float u_degree;  \ n "+" void main () \ n "+" {\ n "+" vec4 Texcolor = texture2d (cc_texture0, V_texcoord); \ n "+" Float r = TEXCOLOR.R * 0.393 + texcolor.g * 0.769 + texcolor.b * 0.189; \ n "+" float g = TEXCOLOR.R * 0.349 + texcolor.g * 0.686 + texcolor.b * 0.168; \ n "+" Float b = texcolor.r * 0.272 + texcolor.g * 0.534 + texcolor.b * 0.131;  \ n "+" Gl_fragcolor = Mix (Texcolor, VEC4 (R, G, B, Texcolor.a), u_degree); \ n "+"} ", programs:{},/** * Grayscale * @param sprite*/Grayscale:function(Sprite) {varprogram = filter.programs["Grayscale"]; if(!Program ) { Program=Newcc.             Glprogram ();             Program.initwithvertexshaderbytearray (Filter.default_vertex_shader, Filter.gray_scale_fragment_shader); Program.addattribute (CC. Attribute_name_position, CC.        Vertex_attrib_position); //Cocos will do the initialization workProgram.addattribute (CC. Attribute_name_tex_coord, CC.             Vertex_attrib_tex_coords);             Program.link ();             Program.updateuniforms (); filter.programs["Grayscale"] =Program ;         } gl.useprogram (Program.getprogram ()); Sprite.shaderprogram=Program ; },     /** * Build old * @param sprite * @param degree old degree 0~1*/Sepia:function(Sprite, degree) {varprogram = filter.programs["Sepia" +degree]; if(!Program ) { Program=Newcc.             Glprogram ();             Program.initwithvertexshaderbytearray (Filter.default_vertex_shader, Filter.sepia_fragment_shader); Program.addattribute (CC. Attribute_name_position, CC.        Vertex_attrib_position); //Cocos will do the initialization workProgram.addattribute (CC. Attribute_name_tex_coord, CC.             Vertex_attrib_tex_coords);             Program.link ();             Program.updateuniforms (); varDegreelocation = Program.getuniformlocationforname ("U_degree");             PROGRAM.SETUNIFORMLOCATIONF32 (degreelocation, degree); filter.programs["Sepia" +degree] =Program ;         } gl.useprogram (Program.getprogram ()); Sprite.shaderprogram=Program ; } };

Cocos2d-js Shader Series 2: Using Shader on Cc.sprite (black and white, grayscale, old effects)