OpenGL VSH, FSH simple introduction +COCOS2DX 3.0 shader Gray

Understanding Shaders

Understanding the OpenGL rendering pipeline is important for learning OpenGL. The following is the OpenGL rendering pipeline: (The light blue area in the diagram is a programmable stage)

This figure is taken from the wiki, OpenGL's rendering pipeline mainly includes:

1. Prepare vertex data (pass data to OpenGL via Vbo, Vao, and vertex attribute)

2. Vertex processing (mainly done by vertex shader, which can be seen, it also includes optional tessellation and geometry shader stages)

3. Vertex post-processing (mainly including clipping, vertex-coordinate normalization, and viewport transformations)

4. Primitive assembly (e.g. 3 points assembled into a 3-angle shape)

5. Rasterization into pixels

6. Use fragment shader to process these pixels

7. Sampling processing (mainly includes scissor test, Depth test, Blending, stencil test, etc.).

OpenGL Shader Language, abbreviated GLSL, is a language similar to the C language specifically designed for GPUs, which can be run in parallel in the GPU. OpenGL ES has a shader with. FSH and. Vsh two files. These two files are compiled and linked to generate an executable program to interact with the GPU. Vsh is a vertex shader, which, with vertex calculations, can understand the position of the control vertex, in which we usually pass in the position of the current vertex, and the coordinates of the texture. For example:

 1 attribute vec4 position; 
 2 attribute vec4 inputTextureCoordinate;
 3 
 4 varying vec2 textureCoordinate;
 5 
 6 precision mediump float;
 7 uniform float overTurn;
 8 
 9 void main()
10 {
11 gl_Position = position;
12     if (overTurn>0.0) {
13         textureCoordinate = vec2(inputTextureCoordinate.x,overTurn-inputTextureCoordinate.y);
14     }
15     else
16         textureCoordinate = vec2(inputTextureCoordinate.x,inputTextureCoordinate.y);
17 }

First, each shader program has a main function, which is the same as the C language.

There are two kinds of variables, one is attribute and the other is varying.

attribute is passed in from outside, each vertex has these two properties, so it is also called vertex attribute (vertex attribute).

Variables of the varying type are used to pass data between vertex shader and fragment shader.

The variable naming rules here are the same as C, note that the variable name at the beginning of the Gl_ is a built-in variable, so don't start with Gl_ when you define your own variable name.

And Cc_mvpmatrix is a variable of type MAT4, it is set inside cocos2d-x.

That

Attribute: Variables for external incoming VSH files each frame of the variable variable rate of variation of the rendering is used to define each point.

Varying: Used to transfer parameters between Vsh and FSH.

Precision Mediump Float defines a medium-precision floating-point number.

Uniform the variable rate of change for external incoming vsh files is a constant that may not change throughout the rendering process.

In main () when overturn is greater than 0, the thing inside the function is to invert the y-axis of the texture.

Vertex shader is a function of each vertex, if Vertex has three points, then vertex shader will be executed three times.

. FSH is a fragment of shader. In this case I can recalculate each pixel point.

1 varying highp vec2 textureCoordinate;
 2 precision mediump float;
 3 uniform sampler2D videoFrame;
 4 
 5 vec4 memoryRender(vec4 color)
 6 {
 7     float gray;
 8     gray = color.r*0.3+color.g*0.59+color.b*0.11;
 9     color.r = gray;
10     color.g = gray;
11     color.b = gray;
12     
13     color.r += color.r*1.5;
14     color.g = color.g*2.0;
15     
16     if(color.r > 255.0)
17     color.r = 255.0;
18     if(color.g > 255.0)
19     color.g = 255.0;
20     
21     return color;
22 }
23 
24 void main()
25 {
26     vec4 pixelColor;
27 
28     pixelColor = texture2D(videoFrame, textureCoordinate);
29     
30     gl_FragColor = memoryRender(pixelColor);
31 }

Varying HIGHP vec2 texturecoordinate is the texture coordinates passed from the vsh.

Uniform sampler2d Videoframe is our real texture map.

Texture2d (Videoframe, texturecoordinate) takes each pixel point color in the texture out to the pixelcolor.

You can use Memoryrender (Pixelcolor) to re-process the pixel points.

There is also a main function in fragment shader, and we see that there is also a variable texturecoordinate that is the same as vertex shader. As we said earlier, this variable is used to pass data between vertex shader and fragment shader. Therefore, their parameter types must be exactly the same. If the one is VEC3, one is Vec4,shader compile the time will be error.

And Gl_fragcolor We know it must be a system built-in variable that defines the color of the pixel that is ultimately drawn on top of the screen.

Summarize:

Programming the shader is not very difficult, it's all C syntax. However, debug is cumbersome, and the constraints on types are strict and must be of the same type to perform arithmetic operations. After we understand these two files, we can use our imagination to do all kinds of processing of texture images.

Others concluded:

VSH is responsible for the pixel position, fill in the gl_posizion variable, occasionally fix a point size problem, fill in gl_pixelsize.

FSH takes care of pixel appearance, fills in Gl_fragcolor, and occasionally fills in another set of variables.

They are all run one pixel at a time, and may run multiple times. For "This pixel" and strive to calculate.

The version of the program is COCOS2DX 3.0.vs 2012.

The code is as follows:

GltestinglayerGLTestingLayer.cpp

There is a code that uses shader to make the sprite gray.

Below are the VSH and FSH files used to darken the ash.

1 attribute vec4 a_position;
 2 attribute vec2 a_texCoord;
 3 attribute vec4 a_color;
 4                     
 5 
 6 varying vec4 v_fragmentColor;
 7 varying vec2 v_texCoord;
 8                                 
 9 void main()    
10 {                            
11     gl_Position = CC_PMatrix * a_position;
12     v_fragmentColor = a_color;
13     v_texCoord = a_texCoord;
14 }

Gray.fsh

OpenGL VSH, FSH simple introduction +COCOS2DX 3.0 shader Gray