WebGL Shader Language (GLSL ES)

1. Type conversion built-in functions

Conversion/Function/description

Convert to shaped number/int (float)/delete the decimal part of a floating-point number, convert to an integer (for example, convert 3.14 to 3)

Convert to reshape number/INTL (bool)/true converted to 1,false is converted to 0

Convert to floating-point/float (int)/convert number of shapes to floating-point numbers (for example, convert 8 to 8.0)

Convert to floating point/float (BOOL)/true converted to 1.0,false is converted to 0.0

Converted to Boolean/bool (int)/0 converted to false, other non 0 times times converted to true

Converted to Boolean/0.0 converted to false, other non 0 values are converted to true

2. Vector and matrix types

Type/glel ES data type/description

Vector/vec2, VEC3, vec4/with 2, 3, 4 floating-point elements

Vector/ivec, IVEC3, ivec4/with 2, 3, 4 shaped elements

Vector/bvec, BVEC3, bvec4/with 2, 3, 4 Boolean elements

matrix of floating-point elements for/mat2, MAT3, mat4/2*2, 3*3, 4*4 (with 4, 9, 16 elements, respectively)

3. Component names

Category/Description

X, Y, Z, w/to get vertex coordinate components

R, G, B, a/To get the color component

S, T, p, q/to get texture coordinate components

Because vectors can be used to store vertex coordinates, colors, and texture coordinates, GLSL ES supports the above three component names to enhance the readability of the program. In fact, the X, r, or s components of any vector return the first component, Y, G, t components return the second component, and so on. Like what:

// Set V3 to (1.0, 2.0, 3.0) float  // set F to 1.0F =  // set F to 2.0// set F to 3.0  // set F to 1.0 // set F to 1.0

By placing multiple component names together in a point operator, you can extract multiple components from the vector simultaneously. This process is called blending (swizzing). In the following example, we use X, Y, Z, and W, and the other collections have the same effect:

// Set V2 to (1.0, 2.0) // Set v2 bit (2.0, 3.0) to omit any component // Set v2 Bit (1.0, 3.0) to skip any component //  // Set V2 to (1.0, 1.0) can repeat any component    // set V3A bit (3.0, 2.0, 1.0), All components can be used

4.[] Operator

The elements in the matrix are still read in the column main sequence. As in JavaScript, the following table starts with 0, so by [0] You can access the first column element in the matrix, [1] can access the second column element, [2] can access to the third column element, as follows:

In addition, two consecutive [] operators can access an element of a column:

float M23 = m4[1][2]; Set M23 to the third element in the second column of M4 (7.0).

5. Arrays

GLSL ES supports only one-dimensional arrays, and array objects do not support operations such as POP () and push (), nor do they need to use the new operator when creating arrays. The declaration is as follows:

float // declares an array containing 4 floating-point elements // declares an array containing two VEC4 objects

The length of the array must be an integer constant expression greater than 0, as defined below:

1. Shaping literal (0, 1)

2. Global or local variables modified with the const qualifier, with no function arguments

Therefore, the following code will make an error:

int size = 4// error. If the first behavior is const int size = 4;

6. Sampler (texture)

We must access the texture through the sampler (sampler) type variable. There are two basic types of samplers: Sampler2d and Samplercube. The sampler variable can only be a uniform variable, or a function that requires access to the texture, such as the parameters of the texture2d () function. Like what:

Uniform smapler2d U_sampler;

In addition, the only thing that can be assigned to the sampled variable is the texture unit number, and you must use the WebGL method gl.uniform1i () to assign the value. For example:

// Pass the texture unit number 0 to the shader

7. Specification Statement

If the function definition is after its invocation, then we must declare the specification of the function before making the call. The specification declaration does not pre-tell WebGL system functions of parameters, parameter types, return value types, and so on. For example:

float // Specification Statement Main () {    ...     float // Luma () was called before it was defined. }float  luma (vec4 color) {    return 0.2126 * COLOR.R + 0.7162 * color.g + 0.07 * COLOR.R;}

8. Built-in functions

9. Store qualifier Words

In GLSL es, we often use attriute, varying, and uniform qualifiers to modify variables:

In addition, we sometimes use the Const qualifier, which represents a variable in the shader to make a constant constant. Several storage-qualified uses are as follows:

1.Attribute variables

The attribute variable can only appear in the fixed-point shader and can only be declared as a global variable, and is used to represent vertex-wise information. The maximum number of attribute variables that can fit in a vertex shader is device-related, and you can get that value by accessing the built-in global constants. However, supporting a WEBGL environment supports at least 8 attribute variables. As shown below:

2.uniform variables

Can be used in vertex shaders and in the slice shader, and must be a global variable. The uniform variable is read-only and can be any type other than an array or struct. If the uniform variable with the same name is declared in the vertex shader and the slice shader, it is shared by both shaders.

3.varying variables

Must be a global variable whose task is to transfer data from the vertex shader to the slice shader. We must declare varying variables of the same name and type in the beam total shader. It can only be of the following types: float, vec2, VEC3, VEC4, MAT2, Mat 3, Mat4.

10. Precision-Qualified words

GLSL ES introduces precision qualifiers to help shader programs improve operational efficiency and reduce memory costs. With precision qualifiers, you can finely control the balance between effects and performance. However, the precision qualifier is optional, and if you are unsure, you can use the following modest default value:

float ; #endif

As shown below, the WEBGL program supports three types of precision, with qualifiers of HIGHP, Mediump, LOWP, respectively.

Here are a few examples of declaring variable accuracy:

float // floating-point variable with medium precision // Vec4 object with high-precision floating-point elements // Vec4 object with low-precision floating-point elements

It is tedious to declare precision for each variable, and we can also use the keyword precision to declare the default precision of the shader, and this line of code must be placed at the top of the vertex shader or the slice shader in the following format:

float;

We have already sent the use of precision qualifiers are generally used only in the chip shader, because, in addition to the element shader's float type has no default precision, other types have default precision. The default precision for data types is as follows:

11. Pre-processing instructions

GLSL ES supports preprocessing directives. Preprocessing directives are used to preprocess code before it is actually compiled. All started with the # #. The following is the pre-processing instruction for the predefined float type accuracy:

float ; #endif

Here are three pre-processing instructions that we may use in GLSL es.

# If conditional expression if the condition is true, execute here #endif#ifdef if a macro is defined, execute here #endif#ifndef if a macro is not defined, execute here #endif

You can use the specified macro definition:

#define Macro Name Macro content

You can use the UNDEF macro name to end the macro definition. For example:

#define NUM = = If the macro num is 100, execute here #Else Otherwise, execute here #endif

Predefined built-in macros are:

Macro/Description

Gl_es/is defined in OpenGL ES2.0 as 1

gl_fragement_precision_high/chip shader supports HIGHP accuracy

WebGL Shader Language (GLSL ES)