Getting Started with WebGL

1. Clear the drawing area

Emptying the plot area fills the canvas with the specified background color and sets the background color using Gl.clearcolor. Gl.clearcolor (red, green, blue, alpha). The color value of OpenGL returns is 0-1.

Call the Gl.clear () function to empty the drawing area with the background color specified by Clearcolor. Gl.clear (G.color_buffre_bit), cleans up the drawing area, actually cleans the color buffer (colour buffers), passing the GL. Color_buffer_bit is telling WebGL to clean up the color buffers. The buffer also includes:
Gl. Color_buffer_bit color buffer, gl. Depth_buffer_bit depth buffer, GL. Stencil_buffer_bit the template buffer. The cleanup functions are Gl.clearcolor (Red,green,blue,alpha), gl.cleardepth (depth), gl.clearstencil (s), respectively.

2. What is a shader

WebGL has two types of shaders:

Vertex shader (Vertex shader): A vertex shader is a program used to describe vertex attributes such as position, size, and so on. A vertex (vertext) is a point in a two-dimensional or three-dimensional space, such as an endpoint or intersection of two-dimensional or three-dimensional graphics.
Chip shader (Fragment shader): A program that is involved in the process of wafer processing, such as illumination. The element (fragment) is a WEBGL term that you can interpret as pixels (the unit of an image).

Data types in 3.GLSE

Float: Indicates floating-point number

VEC4: Represents a vector consisting of four floating-point numbers

It is important to note that if WebGL needs parameters that are floating-point types, such as 10.0. If pass 10 will be an error, because 10 is considered an integer.

4.VEC4 function

When we use WebGL, we assign a value to the vertex shader parameter, with the gl_position data type vec4,gl_position = VEC4 (0.0, 0.0, 0.0, 1.0). But the location coordinates that are actually needed are only three (x, y, z) values. Fortunately, WebGL provides the VEC4 function. A vector of 4 components, called homogeneous coordinates, can improve the efficiency of three-dimensional data, and is used extensively in three-dimensional graphics systems. If the last component is set to 1.0, then the homogeneous coordinates can represent the point at which the first three components are coordinate values. All you need to do is to set the last component to 1.0 when you want to use homogeneous coordinates to represent vertices.

5.gl.drawarrays (mode, first, count) function

Mode: Specifies how to draw, including GL. POINTS, GL. LINES, GL. Line_strip, GL. Triangles, GL. Triangle_strip, GL. Triangle_fan.

First: Specifies which vertex to draw from (number of reshape)
Count: Specifies how many vertices (number of shapes) are needed to draw

6.attribute variables

You want 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. Attribute the data that is associated with the vertex when the variable is transmitted, the uniform variable transmits all the same vertices (regardless of vertex) data. For example attribute Vec4 a_position, the attribute variable a_position is of type VEC4. The general attribute variable starts with A_, and the uniform variable starts with u_. How do I get the storage location of the attribute variable?
var a_position = gl.getattriblocation (Gl.program, ' a_position ');
How do I set a value for a vertex position?
GL.VERTEXATTRIB3F (a_position, 0.0, 0.0, 0.0);

7.gl.getattriblocation (program, name) function

Program: Specifies the shader object that contains the vertex shader and the slice shader
Name: Names of attribute variables that want to get the storage address
Return value: The storage address of the variable greater than or equal to 0,attribute, less than 0, the specified attribute variable does not exist

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

Location: Specifies where to store the attribute variable that will be modified
The value of the first component of a V0:attribute variable
The value of the second component of a V1:attribute variable
The value of the third component of a V2:attribute variable
The value of the fourth component of a V2:attribute variable
Description: GL.VERTEXATTRIB3F has several kindred functions. GL.VERTEXATTRIB1F (location, V0), gl.vertexattrib2f (location, V0, v1), gl.vertexattrib3f (location, V0, V1, v2).

9.gl.getuniformlocation (program, name)

Program: Specifies the shader object that contains the vertex shader and the slice shader
Name: Names of uniform variables that want to get the storage address

Return value: Not-null, the position of the specified uniform variable, NULL, the specified uniform variable does not exist, or its name is Gl_ or webgl_ prefix.

Description: The difference between getuniformlocation and getattriblocation is null and-1 if the variable does not exist.

10.gl.uniform4f (location, V0, V1, v2, v3)

Assigns a value to the variable at the location, and the parameter is similar to the vertexattrib4f function parameter.

Getting Started with WebGL