[Getting started with WebGL] 8. Description and basics of the coloring tool, webgl coloring

[Getting started with WebGL] 8. Description and basics of the coloring tool, webgl coloring

Note: The article is translated from http://wgld.org/, the original author shanbenya (doxas). If I have additional instructions in the article, I will add [lufy:]. In addition, the research on webgl is not in-depth enough, and some professional words are required, if the translation is incorrect, please correct me.

Fixed rendering pipelines cannot be used to understand GLSLWebGL, which has been briefly described in the previous article (4. Rendering preparation.
Therefore, instead, it is a coloring Language in the Editable rendering pipeline, called GLSL (OpenGL Shading Language ).

Is a language used to color programming in OpenGL. GLSL uses C language and has its own independent syntax. One of the difficulties of WebGL is the GLSL, which cannot be rendered if you do not understand GLSL. Therefore, learning WebGL not only requires basic knowledge about WebGL, but also GLSL. It's crazy.

However, it is not difficult to do only basic things. After you get used to it, it will be a great benefit to be able to write your own shader. This is a matter of time.

The role of the shader

The knowledge of GLSL does not need to be thoroughly understood from scratch. You only need to first understand the most basic things. For details, let's talk about it later. First, let's take a thorough understanding of the basic part.

* At the beginning, I will introduce it in the easiest way to understand, so it will simplify a lot of things.

First, there are two kinds of paintors in WebGL: vertex paintors and fragment paintors. You can use GLSL to write either of them. Vertex pasters and fragment pasters are mutually dependent and indispensable. The first called is the vertex pasters.

All vertex-related intelligence can be passed to the vertex coloring tool. For example, the vertex position, the vertex normal, the texture coordinate, and the vertex color. All intelligence related to the vertex can be transmitted to the vertex coloring tool. Here, you can freely decide the content to pass into the shader. This flexibility is the benefit of Editable rendering pipelines. However, although the content passed into the shadow is free to decide, the vertex location intelligence is required, because if you do not know the vertex location, there is no way to draw a model.

The Vertex coloring er, like its literal meaning, accepts vertex-related intelligence and finally decides how to process these vertices. The part coloring tool determines the color used for output on the screen. Fragment is used to separate fragments. The pixels on the screen are the smallest parts on the screen, so the part coloring tool operates on the color.

To put it simply, the vertex coloring tool processes vertex-related information, and the clip coloring tool processes the color information on the screen.

The basis for compiling GLSL

Now, I have understood what the coloring machine is doing. Next, let's take a look at the GLSL compiling method.

First, a main function must be defined for both the vertex coloring tool and the fragment coloring tool. The function records the processing you want to do. In addition, the vertex coloring tool must pass the vertex information to a variable called gl_Position.

For example, the following is an example of a very simple vertex shader.

attribute vec3 position;void main(void) {    gl_Position = position;}

Here is a strange word. What is the attribute in the top line?
In fact, it is used to declare variables. The variable defined by this modifier (the position above) is used to receive vertex intelligence. That is to say, the above Code defines a position in the WebGL program. After some processing, it is passed to the colorant.

The attribute modifier is used to receive different information from different vertices. If there are many vertices, the positions of these vertices are different. It is used to receive different information from different vertices, and attribute modifiers are used to define variables.

GLSL is also used for coordinate transformation.

As mentioned earlier, the vertex coloring tool processes vertex-related information, but do not forget that vertex-related processing is coordinate transformation. Model changes, view transformations, and projection transformations are also part of the work of vertex coloring machines.

Basically, it is relatively free to use the vertex coloring tool. However, in the WebGL program, the model, view, and projection matrices are first generated and then merged, this is a general practice to pass the matrix of the obtained coordinate transformation to the vertex shader.

So, how can we pass the matrix of coordinate transformation to the vertex coloring machine?

Use the previous attribute, but the attribute transmits different intelligence of different vertices. While the coordinate transformation matrix is the same for all vertices, it is a bit strange to use the attribute modifier.

The modifier used at this time is uniform. With the uniform modifier, You can transmit intelligence for consistent processing of all vertices. Based on this, modify the code just now. * This is just an example.

attribute vec3 position;uniform mat4 mvpMatrix;void main(void) {    gl_Position = mvpMatrix * position;}

The mvpMatrix shown here is the matrix after the transformation matrix of the model, view, and projection is combined. Pass the coordinate transformation matrix from the WebGL side to the variable defined by the uniform modifier.
> Types available in GLSL

In the code example just given, the modifier is followed by vec3 and mat4. This is the type of the variable. Here is just a brief introduction.

Vec * Indicates a vector, and * Indicates a 2 ~ The number of 4, vec2 represents a 2-dimensional loud.

Mat * Indicates a square matrix. Like a vector, the specified range is also 2 ~ 4. If it is mat3, it indicates a 3x3 matrix.

In addition, int is an integer, float is a floating point type, and bool is a boolean type, which is the same as that in C. Elements in vec * And mat * Are float.

Connection with the fragment shader

Although it takes a long time to write, add more things. Attribute and uniform modifiers have been understood.

A particularly important modifier in GLSL is the varying modifier. This varying modifier serves as a bridge between the vertex shader and the fragment shader.

For example, how can we make a model become semi-transparent?

Although there are many methods, the general practice is to add color intelligence information to the vertex, and then make the model translucent or completely transparent by operating the color transparency change. At this time, if you want to operate the color information in the vertex and the color information on the screen, you need to input some necessary information to the fragment shader.

But how do I transmit this information? Varying is used now. Based on the previous code example, we can modify it a little. This time, not only the vertex coloring tool, but also the part coloring tool.

First, the vertex color part.

attribute vec4 position;attribute vec4 color;uniform mat4 mvpMatrix;varying vec4 vColorvoid main(void) {    vColor = color;    gl_Position = mvpMatrix * position;}

The fragment shader then receives the variable vColor defined by the varying modifier.

varying vec4 vColor;void main(void){    gl_FragColor = vColor;}

In this way, to transmit data from the vertex shader to the fragment shader, you need to use the variable defined by the varying modifier. In addition, similar to the vertex coloring tool, the part coloring tool must transmit data to gl_FragColor.

Unlike the vertex shader, The gl_FragColor of the frager does not have to be assigned a value. But what color is usually output, so gl_FragColor becomes necessary.

The summary of this article is a little too long, and the content of the introduction is also a bit deep, it may be a bit difficult to understand all at once.

Simply summarize this article.

Vertices and fragment splitters can both be written using GLSL. Basically, they are a combination. You must define a main function in the internal part of the coloring tool, and add your own processing in this function. In addition, some variables defined by special modifiers are used to transmit data from the WebGL side to the shader.

When you want to pass different information of each vertex to the shader, use the attribute modifier to declare the variable, and pass the same information for all vertices to the shader, declare a variable using the uniform modifier.

In addition, the varying modifier is used to declare variables when data is transferred from the vertex coloring tool to the fragment coloring tool.

The built-in variable gl_Position In the vertex coloring tool must be assigned a value. The built-in variable gl_FragColor of the part coloring tool does not have to be assigned a value, but is usually assigned a value.

The official content of GLSL is very deep. This content is the most basic part of the introduction. And the relevant content, will gradually come into use in the future, and then slowly explain. First, let's take a thorough understanding of this article.

Next time, we will introduce the content related to vertex cache.

Reprinted Please note: