The OpenGL coloring language in WebGL, webglopengl

The OpenGL coloring language in WebGL, webglopengl

In webgl, The OpenGL-ES-2.0 API is called, while in OpenGL-ES, designed for embedded devices, it uses GLSL (GL Shading Language), like other devices) to compile the fragment program and execute it on the GPU's shader to render the object. GLSL plays a very important role in this process. Therefore, to have a good experience with webgl, we need to understand GLSL. This article mainly introduces the basic use and composition of shader.

 

The entire pipeline processing process:

1. Specify the geometric object

• Vertex array (directly transmits vertex data to the shader)
• Vertex index (store vertex data in the buffer zone and use indexes to retrieve data from the buffer zone and pass the data to the shader)

2. vertex-by-vertex operations

3. Assemble Elements

A number of vertices are grouped into one element based on the specified primitive assembly method, openGL supports a bit of geometric elements, line, non-closed line, closed line, polygon, triangle, linear continuous filled triangle, slice continuous filled triangle, quadrilateral, and continuous filled quadrilateral.

The elements supported by webgl are POINTS, LINE_STRIP, LINE_LOOP, and LINES ), TRIANGLE_STRIP (triangle with sequentially connected vertices), TRIANGLE_FAN (combination triangle with slice sequence), and TRIANGLES (combination of each three vertices into a triangle ).

The three ways to draw a sequence of triangles explain the differences between the three triangle draw methods.

4. Metadata Processing

5. Raster (generating fragment)

6. segment meta Processing

7. multipart operations

8. Frame Buffer operations

 

In these eight steps, the most important thing is the operations on the top point and the slice element. In the entire pipeline, the part of our program that we can add is the vertex coloring tool and the part of the chip coloring tool.

 

Coloring er

 

Vertex shader:

You can perform the following operations on vertex values and their associated data:

• Vertex Transformation
• Normal Transformation and Normalization
• Texture coordinate generation
• Texture Coordinate Transformation
• Illumination
• Color material application

The Vertex coloring tool must calculate the homogeneous position of coordinates in the cropping space and store the result in a special output variable gl_Position. It also has a special output variable gl_ClipVertex and gl_PointSize.

The output of the vertex processor will be sent to the subsequent processing phase, that is, metadata assembly, user cropping, horizontal cropping, perspective division, view texture, polygon offset, polygon mode, and shadow mode, and so on.

Fragment coloring tool:

Processing a piece of element value and its associated data can perform traditional graphic operations, such:

Operations on the value after Interpolation

• Access texture
• Apply texture
• Atomization
• Color Summary

The metadatabase has special input variables gl_FragCoord (the relative coordinates of the window of the metadatabase) and gl_FrontFacing (the front element is true, and the opposite is false ), after calculating the color and depth, write these values into special output variables gl_FragColor and gl_FragDepth, or discard (using the discard keyword) the slice.

A major advantage of the chip processor is that it can access the texture memory multiple times and can combine the read value in any way, the results of one texture access can be used as the basis for executing another texture access.

 

There are three precision options: lowp highp mediump

Precision can be set to variable or default precision.

By default, float and init In the vertex coloring tool are precise to highp.

Float does not have the default precision in the Cell Coloring tool, so you must specify the default precision for it, for example, precision mediump float;

 

Multiple executions of the shader can occur in parallel. Each vertex will execute a vertex colorant once, and a partial colorant will be executed for each element.

 

Qualifier

 

To pass data into the shadow, we need to understand the composition of the variables and the input method.

Attribute variable ):

　　These variables represent the values that are frequently passed from the application to the vertex processor. They are only used to define vertex data in the program, so they are only allowed as part of the vertex shader, this value can change as frequently as every vertex.

Consistent variable (uniform ):

It is used to pass data values from an application to a vertex processor or a chip processor. Consistent variables are usually used to provide values that do not change frequently.

Variable (varying ):

Defines the data transferred from the vertex processor to the chip processor.

Constant variable (const ):

For example, constant variables in C

 

Data Type

 

Scalar:

Float, int, and boolean values are supported)

Vector:

Floating Point vector:

Vec2 (two floating point number vectors)

Vec3 (three floating point number vectors)

Vec4 (four floating point number vectors)

Integer vector:

Ivec2 (2 integer vectors)

Ivec3 (vector of three integers)

Ivec4 (vector with four integers)

Boolean vector:

Bvec2 (two Boolean vectors)

Bvec3 (3 Boolean vectors)

Bvec4 (4 Boolean vectors)

Matrix:

Mat2 (2 × 2 floating point matrix)

Mat3 (3 × 3 Floating Point matrix)

Mat4 (4x4 floating point matrix)

The mat matrix is like an vec array, which can also be accessed using arrays.

Samplezer:

Sampler1D (access a one-dimensional texture)

Sampler2D (access a two-dimensional texture)

Sampler3D (access a 3D texture)

SamplerCube (access a cube texture)

Sampler1DShadow (access a one-dimensional deep texture with comparison)

Sampler2DShadow (access a two-dimensional deep texture with comparison)

Only the uniform-qualified samplerger can be received from the application

Use Time: uniform sampler2D texture;

Operation

 

If you want to perform partial operations on the vector, you can use the part of the access Vector. In the shader, there are three groups for use:

• X y z w
• S t p q
• R g B

The four values read the first, second, third, and fourth values in the vector respectively. They are semantically combined to facilitate the compilation, they are coordinates, textures, and colors, but they are used to read the same value, for example:

vec4 values = vec4(1.0,2.0,3.0,4.0);values.z;    //3.0values.p;    //3.0values.b;    //3.0
values[2];   //3.0

These three groups must be used in groups and cannot be used together, for example:

Vec4 values = vec4 (1.0, 2.0, 3.0, 4.0); vec2 combination1 = values. xy; // correct vec3 combination2 = values in the same group. rgb; // correct vec3 combination3 = values in the same group. xt; // different groups, incorrect

Reading a matrix can be like an array:

vec2 x,y;mat2 matrix;x = matrix[0];y = matrix[1];

Operation

 

For vector calculation:

Vec3 v, u, w; w = v + u; // the calculation process is equivalent to w. x = v. x + u. x; w. y = v. y + u. y; w. z = v. z + w. z;

Calculation of Matrices and vectors:

// This process complies with the calculation rules in linear algebra, that is, two matrices of dot multiplication. The number of rows in the previous matrix is equal to the number of columns in the next matrix, vec4 v, u; mat4 m; v * m; // multiply the row vector and matrix by m * v; // multiply the matrix and column vector by m * m; // multiply the matrix by the matrix

Operation Sequence:

// When multiple matrices are added to the vertex vector at the same time, they must be multiplied by the reverse sequence matrix. // if you want to perform the Ma first and then the Mb operation, vec4 v, u; mat4 Ma, mb; u = Mb * (Ma * v); // that is, u = (Mb * Ma) * v; // that is, u = Mb * Ma * v;

 

Differences with C and C ++

A coloring language is a language used to process numbers, rather than characters or string data. It does not support pointer, String, character, or any operation based on these types.

The language does not support double-precision floating-point numbers, bytes, short integers, long integers, or unsigned variations to reduce the implementation workload of compilers and graphics hardware.

 

It includes some important language features of C ++: supports function overloading and basic bool types.

 

Note:

When values are passed to the vertex coloring tool, the vertex coloring tool reads each vertex from the cache sequentially. If the vertex array method is used:

For example, input: new Float32Array ([1.0, 1.0, 1.0, 0.0,

0.5, 0.5, 0.5, 0.0]);

In the shader, assume there is attribute vec4 position;

The System reads four numbers from the cache in order to process them as positions. Then, the system executes the vertex coloring tool two times in total.

If the shader contains attribute vec2 position;

The System reads two numbers from the cache in order to process them as position. There are four vertices in total, and the vertex coloring er executes four times.

 

Appendix:

WebGL-1.0 reference card: http://files.cnblogs.com/files/zhiyishou/webgl-reference-card-1_0.pdf

OpenGL-ES-2.0 reference card: http://files.cnblogs.com/files/zhiyishou/OpenGL-ES-2_0-Reference-card.pdf

 

The end.