WebGL Drawing and transformation

1. Using a buffer object to pass data from multiple vertices to the vertex shader requires the following five steps:

1.1 Create Buffer Object (Gl.createbuffer ()).

1.2 Bind Buffer Object (Gl.bindbuffer ()).

1.3 writes data to the buffer object (Gl.bufferdata ()).

1.4 Assigns the buffer object to a attribute variable (gl.vertexattribpointer ()).

1.5 Turn on the attribute variable (Gl.enablevertexattribarray ()).

2. Create a Buffer object (Gl.createbuffer ())

When using WebGL, you need to call the Gl.createbuffer () method to create a buffer object. The upper part of the diagram below is the state before execution, and the next part is the state after execution.

The corresponding Createbuffer is the Gl.deletebuffer (buffer) function, which is used to delete the created buffer object. A buffer object that represents the delete.

3. Binding buffer (Gl.bindbuffer (target, buffer))

Binds a buffer object to a target that already exists in the WEBGL system. Parameters:

Target: The destination of the binding. You can make one of the following: GL. A array_buffer that represents the data in the buffer object that contains the vertices; A element_ that represents the index value that contains the vertex in the buffer object.

Buffer: Specifies the bound buffer object that was previously returned by Gl.createbuffer ().

The internal state of the WEBGL system changes after the binding has been executed. ：

4. Write data to the buffer object (Gl.bufferdata (target, data, usage))

To open up storage space, the buffer object to bind to the target is always written to data. Parameters:

Target:gl. Array_buffer or Gl.element_array_buffer.

Data: Writes to the buffer object.

Usage: Represents how the program will use the data stored in the buffer object. The parameter values are: GL. Static_draw, the data is written only once to the buffer object, but it needs to be drawn many times; Stream_draw, the data is only written once to the buffer object and then plotted several times; Dynamic_draw, you would want to write the data multiple times in the buffer object and draw it many times.

5. Typed arrays

The various typed arrays used by WEBGL include:

Array type/number of bytes per element/description (total data type for C language)

INT8ARRAY/1/8 bit shaping number (signed char)

UINT8ARRAY/1/8-bit unsigned shaping number (unsigned char)

INT16/2/16 bit shaping number (signed short)

UINT16ARRAY/2/16-bit unsigned shaping number (unsigned short)

INT32ARRAY/4/32 bit shaping number (signed int)

UINT32ARRAY/4/32-bit unsigned shaping number (unsigned int)

FLOAT32ARRAY/4/Single-precision 32-bit floating point (float)

float64array/8/Double-precision 64-bit floating-point number (double)

6. Methods, properties, and constants for typed arrays

Methods, properties, and constants/descriptions

Get (index)/Get the value of index element

Set (index, offset)/sets the value of index element

Set (array, offset)/starting from the first offset element, the values in array arrays are filled in

length/Array length

bytes_per_element/the number of bytes per element in the array

7. Assign the buffer object to the attribute variable (gl.vertexattribpointer (location, size, type, normalized, stride, offset))

will be bound to GL. The Array_buffer buffer object is assigned to the attribute variable that has the location designation. Parameters:

Location: Specifies where to store the attribute variable with the allocation.

Size: Specifies the number of components (1 to 4) for each vertex in the buffer. If size is smaller than the number of components in the attribute variable book order, the exact component will be complete according to the same rules as gl.vertexattrib[1234]f ().

Type: Specify the data format using the type: GL. Unsigned_byte, unsigned byte, Uint8array;gl. Short, INT16ARRAY;GL. Unsigned_short, unsigned short-shaped, uint16array;gl.int, plastic, INT32ARRAY;GL. Unsigned_int, unsigned shaping, UINT32ARRAY;GL. float, floating-point, Float32array.

Normalize: Pass in true or false to indicate whether to generalize non-floating-point data to the [0,1] or [ -1,1] interval.

Stride: Specifies the number of bytes between the two vertices of the ring, which defaults to 0.

Offset: Specifies the offset in the buffer object to be directly in the unit. If it is the starting position, offset is 0.

8. Turn on the attribute variable (gl.enablevertexattribarray (location))

In order for the fixed-point shader to have access to the data in the buffer, the attribute variable needs to be turned on using the Gl.enablevertexattribarray () method.

WebGL Drawing and transformation