[note] The WEBGL Programming Guide-Getting Started with WebGL

Gl.crearcolor (red, green, blue, alpha)

Specify the background color of the drawing area

Gl.clear (buffer)

Sets the specified buffer to the predetermined value. If the color buffer is emptied, the value specified by Gl.clearcolor () is used (as a predetermined value).

WebGL relies on a new drawing mechanism called a shader (shader). Shaders provide a flexible and powerful way to draw two-or three-dimensional graphics that all WebGL programs must use.

WebGL requires two kinds of shaders

Vertex shader (Vertex shader): A vertex shader is a program used to describe vertex attributes such as position, color, and so on. Vertex (vertex) refers to a point in a two-dimensional or three-dimensional control, such as an endpoint or intersection of two-dimensional or three-dimensional graphics.

Chip shader (Fragment shader): A program that processes the process of wafer-by-element processing, such as illumination. The element (fragment) is a WebGL term that you can interpret as pixels (the unit of an image).

The process of executing the program is probably: first run the JavaScript program, call the relevant methods of WebGL, then the vertex shader and the element shader will be executed, in the color buffer to draw, then the plot area is emptied, and finally, the content in the color buffer automatically in the browser < displayed on the canvas>.

Shaders are written using the OpenGL es shader language (GLSL es) similar to C.

The vertex shader executes first, assigning values to gl_position variables and gl_pointsize variables, passing them into the slice shader, and then executing the slice shader. In fact, the slice shader receives a rasterized element value.

The WEBGL program runs high on JavaScript in the browser and two parts of the shader program running in the WEBGL system.

Vertex shader

void Main () {    = vec4 (0.00.00.01.0);     10.0 ;}

Built-in variables for vertex shaders

Type and variable name	Describe
VEC4 gl_position	Represents vertex position
Float gl_pointsize	Represents the size of a point

Note that the glposition variable must be assigned, otherwise the shader will not function properly. Instead, Gl_pointsize is not required, and if you do not assign a value, the shader will take the default value of 1.0.

Data types in the Glse

Type	Describe
Float	Represents a floating-point number
Vec4	Represents a vector consisting of four floating-point

Shaders provide built-in functions Vec4 () to help you create variables of type VEC4.

Vec4 vec4 (V0, V1, v2, v3)

Creates a Vec4 object based on the V0,v1,v2,v3 value.

A vector of 4 components is called homogeneous coordinates, because it can improve the efficiency of processing three-dimensional data, so it is widely used in three-dimensional graphics system. Although the homogeneous coordinates are four-dimensional, if the last component is 1.0, the homogeneous coordinate can represent the point at which the first three components are coordinate values.

The homogeneous coordinates are described using the following symbols: (x, Y, Z, W), homogeneous coordinates (x, Y, Z, W) are equivalent to three-dimensional coordinates (X/W, y/w, z/w). So if the 4th component of the homogeneous coordinate is 1, you can use it as a three-dimensional coordinate. The value of W must be greater than or equal to 0. If W approaches 0, the points it represents will tend to infinity, so there can be infinite concepts in the homogeneous coordinate system. The existence of homogeneous coordinates makes it possible to describe the vertex transformation by matrix multiplication, in which the three-dimensional graphics system usually uses homogeneous coordinates to represent the three-dimensional coordinates of vertices.

Slice shader

The purpose of the slice shader is to process the slices so that they appear on the screen.

void Main () {    = VEC4 (1.00.00.01.0);}

Types and variables	Describe
VEC4 Gl_fragcolor	Specify the slice color (RGBA format)

Drawing operations

Gl.drawarrays (mode, first, count)

Executes the vertex shader and draws the graphic as specified by the mode parameter.

WebGL coordinate system

Because WebGL handles three-dimensional graphics, it uses a three-dimensional coordinate system with X-axis, Y-axis, and Z-axis. Typically, in WebGL, when you target a computer screen, the X-axis is horizontal (the positive direction is right), the Y-axis is vertical (the positive direction is down), and the Z-axis is perpendicular to the screen (the positive direction is outside). This coordinate system is also called the right-hand coordinate system.

Using the attribute variable

Our goal is to pass the location information from the JavaScript program to the vertex shader. There are two ways to do this: attribute variables and uniform variables. Which variable to use depends on the data that needs to be transferred, the attribute variable transmits the data that is related to the vertex, and the uniform variable transmits the data that is the same for all vertices.

In this line, the keyword attribute is called the Storage qualifier (storage qualifier), which indicates that the next variable is a attribute variable. The attribute variable must be declared as a global variable, and the data is passed from outside the shader to the variable. The declaration of a variable must be in the following format:< storage qualifier > < type > < variable name >.

Gets the location where the attribute variable is stored

WebGL parses the shader and identifies the attribute variable for the shader, each with a storage address to transfer data to the variable through the storage address. We use Gl.getattriblocation () to get the address of the attribute variable.

Gl.getattriblocation (program, name)

Gets the storage address of the attribute variable specified by the name parameter.

Assigning a value to a attribute variable

GL.VERTEXATTRIB3F (location, V0, V1, v2)

The data (V0, V1, v2) is passed to the attribute variable specified by the location parameter.

GL.VERTEXATTRIB1F (location, V0)

GL.VERTEXATTRIB2F (location, V0, v1)

GL.VERTEXATTRIB3F (location, V0, V1, v2)

gl.vertexattrib4f (location, V0, V1, v2, v3)

Uniform variable

Only the vertex shader can use the attribute variable, and when you use the slice shader, you need to use the uniform variable.

[Notes] WebGL Programming Guide-Getting Started with WebGL