OpenGL shader Language in WebGL

In WebGL, the opengl-es-2.0 API is called, and the opengl-es is designed for embedded devices, which, like other devices, use GLSL (GL shading Language) to write fragment programs and execute on the GPU shader. To complete rendering of the object. GLSL plays a very important role in it, so to play good webgl, we have to understand GLSL, this article mainly introduces the basic use of shader and composition.

The entire pipeline processing process:

1. Specifying Geometry objects

1. vertex array ( directly transferring vertex data to shader)

2. Vertex index ( save vertex data in buffer, index to get data from buffer into shader)

2. Vertex-by-pixel operation

3. Entity Assembly

Composes a number of vertices into an entity based on the specified element assembly, and OpenGL supports geometric elements such as a bit, line, unclosed polyline, closed polyline, polygon, triangle, linear continuous fill triangle, sector continuous fill triangle, quadrilateral, and continuous fill quadrilateral.

The WEBGL supported primitives are points (points), Line_strip (non-closed polylines), Line_loop (closed polylines), LINES (separate segments), Triangle_strip (vertices in sequential triangles), triangle_ Fan (sector-ordered combination triangle), triangles (each three vertices are combined into a single triangle).

　　The three ways to draw a triangle sequence explain the difference between the three triangle drawing methods.

4. Primitive processing

5. Rasterize (Generate slice fragment)

6. Chip processing

7. Slice-by-element operation

8. Frame buffer operation

In these eight steps, the most important thing for us is the operation of vertices and slices, and the part of our own program that we can join in the entire pipeline is the vertex shader and the slice Shader section.

Coloring device

Vertex shader:

The action is the vertex value and its associated data, which can do the following:

• Vertex transformations
• Normal transformation and Normalization
• Texture coordinate generation
• Texture coordinate transformation
• Light
• Color Material Application

The vertex shader must calculate the alignment of coordinates in the clipping space and store the results in a special output variable gl_position , which also has a special output variable gl_clipvertex,gl_pointsize .

The output of the vertex processor will be sent to the subsequent processing stages, namely: element assembly, user clipping, flat cutting, perspective partitioning, viewport mapping, polygon offset, polygon mode, shadow mode, blanking, etc.

Slice shader:

Processes the slice values and their associated data, which can perform traditional graphics operations such as:

Operations on values to wait for interpolation

• accessing textures
• Apply Textures
• Atomization
• Color Summary

The element shader has a special input variable gl_fragcoord(the element's window relative coordinates) and gl_frontfacing(The positive element is true, and vice versa), The calculated colors and depths write these values to special output variables gl_fragcolor and gl_fragdepth , or completely discard (using the discard keyword ) slice.

One of the great advantages of the chip processor is that it can access the texture memory any number of times, and can combine the read value in any way, and the result of one texture access can be used as the basis for performing another texture access.

There are three precision options:lowp highp mediump

Precision can be specified in variable or set default precision

The default precision of float and init in the vertex shader is HIGHP

Float has no default precision in the element shader, so it must be given default precision, such as: precision Mediump float;

Shader multiple executions can occur in parallel, the vertex shader is executed once for each vertex, and the slice shader is executed once for each slice.

Qualifier

We want to pass the data to the shader, we need to know the composition of the variables and how to enter them.

Attribute variable (attribute):

　　These variables represent values that are passed very frequently from the application to the vertex processor and are only used to define vertex data in the program, so it is only allowed as part of the vertex shader, which can change as often as each vertex

Consistent variable (uniform):

Used to pass data values from an application to a vertex processor or a chip processor, consistent variables are often used to provide values that are not frequently changed .

Volatile variable (varying):

Defines the data that is passed from the vertex processor to the chip processor.

Constant Volume (const):

such as the constant variable in C

Data type

Scalar:

Supports the use of floating-point (float), integer (int), and Boolean (bool) values

Vector:

Floating-point vector:

VEC2 (vector of 2 floating-point numbers)

VEC3 (vector of 3 floating-point numbers)

VEC4 (vector of 4 floating-point numbers)

Integer vectors:

IVEC2 (vector of 2 integers)

IVEC3 (vector of 3 integers)

IVEC4 (vector of 4 integers)

Boolean vector:

BVEC2 (Vector of 2 Boolean values)

BVEC3 (Vector of 3 Boolean values)

BVEC4 (Vector of 4 Boolean values)

Matrix:

MAT2 (2x2 floating-point matrix)

MAT3 (3x3 floating-point matrix)

MAT4 (4x4 floating-point matrix)

The mat matrix is like a VEC array, which can also be accessed using arrays.

Sampling device:

SAMPLER1D (Access a one-dimensional texture)

Sampler2d (access to a two-dimensional texture)

Sampler3d (access to a three-dimensional texture)

Samplercube (access a cubic map texture)

Sampler1dshadow (accesses a one-dimensional depth texture with contrast)

Sampler2dshadow (Access a contrasting two-dimensional depth texture)

Sampler can only be received from the application via the Uniform qualified sampler

When used: uniform sampler2d texture;

Operation

If you want to partially manipulate vectors, you can use portions of the access vectors, and in shader, there are three groups of combinations to use:

• 　X y z W
• s T P q
• R G B A

These four values just read the first, second, third, and fourth values in the vector, just to write conveniently, semantically three groups of combinations, respectively, coordinates, textures, colors , but use them to read out the value is the same, such as:

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, not mixed groups, such as:

VEC4 values = VEC4 (1.0,2.0,3.0,4.0= values.xy;   // same group, correct vec3 combination2 = Values.rgb;      //　same group, correct vec3 combination3 = values.xt;   // different groups, incorrect　

The reading of the matrix can be like an array:

= matrix[0= matrix[1];

Operation

For the calculation of vectors:

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

For matrix and vector calculations:

// the process adheres to the calculation provisions in linear algebra, that is, to do the two matrices of the dot multiplication, the number of rows in the previous matrix is equal to the column count of the latter matrix.   * m;    // the row vector is multiplied by the matrix m * v;    // The matrix is multiplied by the column vector m * m;    // matrix and matrix multiplication

Order of Operations:

// when multiple matrices are applied simultaneously on vertex vectors, they are multiplied by the reverse order matrix // if you want to implement the first Ma and then MB operation  = Mb * (Ma * v); // that  = (MB * Ma) * v; // that  = Mb * Ma * v;

Differences with C and C + +

The shading language, as a language for processing numbers, rather than a language that handles character or string data, does not contain support for pointers, strings, characters, or any operations based on these types.

and to make the implementation of the compiler and graphics hardware less burdensome, the language does not support double-precision floating-point numbers, bytes, short integers, long integers, or unsigned variations of these types.

It includes some of the important language features of C + +: Support for function overloading, support for basic type bool.

Note:

When you pass a value to a vertex shader, the vertex shader reads each vertex sequentially from the cache, if you are using a vertex array method:

If incoming: New Float32array ([1.0,1.0,1.0,0.0,

0.5,0.5,0.5,0.0]);

Then in the shader, false with attribute VEC4 position;

Four numbers are read sequentially from the cache to be processed as position, a total of two vertex shaders are performed, with a total of two vertices.

If there is attribute vec2 position in shader;

Two numbers are read sequentially from the cache to be processed as position, a total of four vertices, and the vertex shader executes four times.

Report:

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.

OpenGL shader Language in WebGL