gl.crearColor(red, green, blue, alpha)
Specifies the background color of the drawing area
gl.clear(buffer)
Sets the specified buffer to a predetermined value. If the color buffer is cleared, the value specified by gl.clearColor() will be used (as the predetermined value).
WebGL relies on a new drawing mechanism called shaders. Shaders provide a flexible and powerful way to draw 2D or 3D graphics, and all WebGL programs must use it.
WebGL requires two shaders
Vertex shader: A vertex shader is a program used to describe vertex characteristics (such as position, color, etc.). A vertex is a point in a 2D or 3D control, such as the endpoint or intersection of a 2D or 3D graphic.
Fragment shader: A program that performs fragment-by-fragment processing such as lighting. Fragment is a WebGL term that you can understand as a pixel (unit of image).
The process of program execution is probably: first run the JavaScript program, call the relevant methods of WebGL, then the vertex shader and the fragment shader will be executed, and draw in the color buffer, then the drawing area is emptied, and finally, The content of the color buffer is automatically displayed on the browser's <canvas>.
Shaders are written using the C-like OpenGL ES Shader Language (GLSL ES).
The vertex shader executes first, it assigns the gl_Position variable and the gl_PointSize variable, and passes them into the fragment shader, which then executes. In fact, the fragment shader receives rasterized fragment values.
A WebGL program consists of two parts, the JavaScript running in the browser and the shader program running in the WebGL system.
vertex shader
void main () { gl_Position = vec4(0.0, 0.0, 0.0, 1.0); gl_PointSize = 10.0; }
Vertex shader built-in variables
| Type and variable names | describe |
| vec4 gl_Position | Indicates the vertex position |
| float gl_PointSize | Indicates the size of the point |
Note that the glPosition variable must be assigned a value or the shader will not work properly. On the contrary, gl_PointSize is not required, if you don't assign it, the shader will take the default value of 1.0 for it.
Data Types in GLSE
| Types of | describe |
| float | Represents a floating point number |
| vec4 | represents a vector of four floats |
Shaders provide the built-in function vec4() to help you create variables of type vec4.
vec4 vec4(v0, v1, v2, v3)
Create a vec4 object based on v0, v1, v2, v3 values.
A vector consisting of 4 components is called homogeneous coordinates, and is widely used in 3D graphics systems because it can improve the efficiency of processing 3D data. Although the homogeneous coordinate is four-dimensional, if its last component is 1.0, then this homogeneous coordinate can represent the point where "the first three components are coordinate values".
Homogeneous coordinates are described using the following notation: (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 a homogeneous coordinate is 1, you can use it as a 3D coordinate. The value of w must be greater than or equal to 0. If w approaches 0, the point it represents will approach infinity, so there can be an infinite concept in a homogeneous coordinate system. The existence of homogeneous coordinates makes it possible to describe vertex transformations by matrix multiplication. In the calculation process of 3D graphics systems, homogeneous coordinates are usually used to represent the 3D coordinates of vertices.
fragment shader
The role of the fragment shader is to process the fragment so that it is displayed on the screen.
void main () { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); }
| Types and Variables | describe |
| vec4 gl_FragColor | Specifies the fragment color (RGBA format) |
draw operation
gl.drawArrays(mode, first, count)
Executes the vertex shader, drawing the shape as specified by the mode parameter.
WebGL coordinate system
Since WebGL deals with 3D graphics, it uses a 3D coordinate system with X, Y and Z axes. Typically, in WebGL, when you are facing the computer screen, the X axis is horizontal (positive direction is right), the Y axis is vertical (positive direction is down), and the Z axis is perpendicular to the screen (positive direction is out). This coordinate system is also known as the right-handed coordinate system.
Using attribute variables
Our goal is to pass position 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 to be transferred, attribute variables transfer data that is relevant to the vertices, and uniform variables transfer data that is the same for all vertices.
In this line, the keyword attribute is called a storage qualifier, and it indicates that the following variable is an attribute variable. The attribute variable must be declared as a global variable to which data is passed from outside the shader. Variable declarations must be in the following format: <storage qualifier> <type> <variable name>.
Get the storage location of the attribute variable
WebGL parses the shader and identifies the attribute variables that the shader has, each variable has a memory address, so that data can be transferred to the variable through the memory 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.
Assign value to attribute variable
gl.vertexAttrib3f(location, v0, v1, v2)
Pass the data (v0, v1, v2) 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 vertex shaders can use attribute variables, when using fragment shaders, you need to use uniform variables.