Cocos2d Shader series 1:cocos2d-js shader and OpenGL ES2.0

Cocos2d shader is almost directly with the GPU, similar to Flash Stage3D (AGAL), but no AGAL so disgusting, do not need to write assembly language directly. and fragment shader and flash pixelbender similar.

This article takes Cocos2d-js as an example, but cocos2dx other versions are the same, but the function name is slightly different.

Of course, you have to review or learn the principles of the GPU, at least to know vertex shader and fragment shader role and difference.

You can see the description of the great God in detail:

Http://www.opengpu.org/bbs/forum.php?mod=viewthread&tid=7550&extra=page%3D1

Http://www.opengpu.org/bbs/forum.php?mod=viewthread&tid=7376&extra=page%3D1

The shader steps of the cocos2d are similar:

1, write vertex shader and fragment shader

2. Define vertex buffer (the vertex area to be drawn)

3. Define textures, bind textures

4, set the parameters of the shader

5. Gl.drawarrays push to GPU draw when draw is drawn at each frame

1. Shader syntax

The syntax is somewhat similar to Flash's pixelbender, but a more complete C program can be written according to the syntax of the C program. The final output of the main function to a specified variable is the vector's multiplication, subtraction, and so on.

Vertext Shader finally assigns a vec4 to the gl_position, indicating that the point is finally drawn to the screen position; fragment shader finally assigns VEC4 to Gl_fragcolor, which indicates the color RGBA.

Detailed Description:

http://blog.csdn.net/hgl868/article/details/7846269

http://blog.csdn.net/wangyuchun_799/article/details/7770500

attribute, uniform, varying difference: http://blog.csdn.net/jackers679/article/details/6848085

Uniform variables are variables that the external application program passes to (vertex and fragment) shader, like constants

The attribute variable is a variable that can be used only in vertex shader. (It cannot declare attribute variable in fragment shader, nor can it be used in fragment shader)

The varying variable is used for data transfer between vertex and fragment shader. Generally vertex shader modifies the value of the varying variable, and then fragment shader uses the value of the varying variable. Therefore, the declaration of the varying variable between vertex and fragment shader must be consistent. Application cannot use this variable. Varying can used only with the data types float, vec2, VEC3, VEC4, Mat2, MAT3, Mat4. (Arrays of them too.)

2, vertex buffer

varSquarevertexpositionbuffer = This. Squarevertexpositionbuffer = Gl.createbuffer ();//create a buffer and record it, and then call each subsequent frame draw.Gl.bindbuffer (GL. Array_buffer, Squarevertexpositionbuffer);//bind position, the next sentence Bufferdata set the data for this locationvertices = [//here are 4 vertices256, 256,             0, 256,             256, 0,             0, 0         ]; Gl.bufferdata (GL. Array_buffer,NewFloat32array (vertices), GL. Static_draw);/*GL. Static_draw The data store contents is modified once, and used many times as the source for WebGL drawing commands. Gl. Dynamic_draw The data store contents is repeatedly respecified, and used many times as the source for WebGL drawing comma Nds. Gl. Stream_draw The data store contents is specified once, and used occasionally as the source of a WebGL drawing command.*/Gl.bindbuffer (GL. Array_buffer,NULL);//empty the pointer .

3. Binding Textures

        //Defining Textures        varTexture = This. My_texture =gl.createtexture (); Gl.bindtexture (GL.         texture_2d, TEXTURE); varpixels =NewUint8array (4096);//just a picture of 32*32, 4 bytes per pixel         for(vari=0; i<pixels.length;) {Pixels[i+ +] = I/4; //Red pixels[i+ +] = I/16; //Green pixels[i+ +] = I/8; //Blue pixels[i+ +] = 255;//Alpha} gl.teximage2d (GL. texture_2d,0, GL. RGBA, 32, 32, 0, GL. RGBA, GL.      Unsigned_byte, pixels); //bind textures before draw per frameGl.bindtexture (GL. texture_2d, This. my_texture);

　　　　

The corresponding fragment shader notation

float ; varying vec2 v_texcoord;uniform sampler2d cc_texture0; void Main () {     = texture2d (cc_texture0, V_texcoord);}

4. Set Shader parameters

//Log the shader program at initialization time, record the entry position of the parameter         This. Shader =cc.         Glprogram.create (VertexShader, Framentshader);  This. Shader.retain ();  This. Shader.addattribute ("Avertex", CC. Vertex_attrib_position);//add a new parameter to shader and specify it as the first number of         This. Shader.link ();  This. Shader.updateuniforms ();//some of the parameters that are appended by default with cocos2d are actually added to the shader program when _compileshader.        varprogram = This. Shader.getprogram ();  This. Uniformcenter = Gl.getuniformlocation (program, "Center");//Record Uniform parameter entry         This. uniformresolution = Gl.getuniformlocation (program, "Resolution");//override the original draw function, which is called at draw at each frame:         This. Shader.use ();  This. Shader.setuniformsforbuiltins ();//If you use some of the uniform parameters that are cocos2d by default in shader, you need to set each frame (for example, time, etc.), with reference to the specific parameter meaning Ccglprogram.setuniformsforbuiltins         This. SHADER.SETUNIFORMLOCATIONF32 ( This. Uniformcenter, WINSIZE.WIDTH/2, WINSIZE.HEIGHT/2);  This. SHADER.SETUNIFORMLOCATIONF32 ( This. uniformresolution, 256, 256);//setting the uniform parameter, the Ccglprogram class encapsulates the interface of the OpenGL underlying. For example, this is the corresponding uniform2f .Gl.bindbuffer (GL. Array_buffer, This. Squarevertexpositionbuffer); Gl.vertexattribpointer (CC. Vertex_attrib_position,2, GL. FLOAT,false, 0, 0);//Setting the attribute parameter

Parameter reference:

http://msdn.microsoft.com/zh-cn/library/ie/dn302460 (v=vs.85). aspx

The first parameter of the function: Indicates the attribute parameter of the shader program

5. Draw Call

Gl.drawarrays (GL. Triangle_strip, 0, 4);

Parameter reference:

http://msdn.microsoft.com/zh-cn/library/ie/dn302460 (v=vs.85). aspx

http://msdn.microsoft.com/zh-cn/library/ie/dn302395 (v=vs.85). aspx

Finally, attach some of COCOS2DX's official tutorials:

http://cn.cocos2d-x.org/tutorial/show?id=1336

http://cn.cocos2d-x.org/tutorial/show?id=1337

Cocos2d Shader series 1:cocos2d-js shader and OpenGL ES2.0