Shader Beginner's Notes

In short, there are two links in the render pipeline that are open to us, namely Vertex Shader (vertex shader) and Fragment/pixel Shader (fragment shader).

Shader or pipeline related to the entry information is very much, but not much Chinese information is a beginner can really understand. Like the difference of computer books at home and abroad, we have been from childhood to the simple Thing (FU) face (za). Therefore, it is recommended to read English information first.

This is a study note, but also consider how to avoid the complicated detours, really shallow introduction. Thus, this article starts from such a question: The above diagram we understand the rendering process, then think back, in we do not understand this knowledge, do not use shader when we do not also implement the image display, animation play it? Does it mean that the vertex shader and fragment shader in the pipeline can be skipped? First answer, can't skip. What You said that you did not use shader to learn OpenGL also drew a triangle, ah, look at the title of the picture above "OpenGL 2.0" you understand it then shader do what? Look down.

Vertex Shader

Vertex shader acts on each vertex. Take a look at the simple vertex Shader:

Vcolor == = modelviewprojection * position;

Read by line:

Vcolor = color;

Color is the amount of input, vertex, and value. Vcolor for output, we did not do any operation, the input amount out, left to Yimeimei use, Yimeimei of course is fragment shader.

Vtexcoord = Texcoord;

Texcoord is the amount of input, texture coordinates. The Vtexcoord is output, and there is no action. The texture coordinate is the coordinate of the vertex corresponding to the texture (the beginner tentatively understands the product after the image is loaded), which can be used to get the color value of the corresponding point in the texture.

gl_position = modelviewprojection * Position;

Gl_position is the coordinate of the vertex, which is what the vertex shader will eventually get, informing the pipe of the vertex's coordinates. Modelviewprojection * Position temporarily unknown solution, we understand it through the matrix operation to achieve the coordinate transformation of our customary coordinates converted to OpenGL coordinates.

Fragmen Shader

Acting on each rasterized pixel, we have four vertices, but there are 36 fragments/dots. Therefore, the vertex shader and fragment shader run times are not one by one correspondence, the former to the latter is used to pass the value of the difference operation rather than the seat.

Lowp vec4 col = texture2d (texture, vtexcoord) *= col;

lowp vec4 col = texture2d (texture, vtexcoord) * Vcolor;

Define a local variable, and the difference operation gets the texture color.

Gl_fragcolor = col;

Gl_fragcolor is the color of the fragment, which is what fragment shader will eventually get.

Summary

As above, what you see is the two shader that we used by default in the game engine to answer the previous question.

Below, we can be simple familiar with the grammar specification, try to modify the small shader slowly accumulate confidence. For example, how about implementing a horizontal mirror shader? It is recommended to bypass the daunting complex environment and edit it online using the playground provided below. Otherwise it is not a headache to write float 1 instead of 1.0 so that the beginner's mistake leads to no results and no traces to be found.

Basic keywords and data type reference:

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

Primary shader Analysis:

http://my.oschina.net/freeblues/blog/336055

Playground

http://www.babylonjs.com/cyos/

Https://www.shadertoy.com/new

Shader Beginner's Notes