[WebGL entry] 12, model data and vertex attributes, webgl Vertex

[WebGL entry] 12, model data and vertex attributes, webgl Vertex

Note: The article is translated from http://wgld.org/, the original author shanbenya (doxas). If I have additional instructions in the article, I will add [lufy:]. In addition, the research on webgl is not in-depth enough, and some professional words are required, if the translation is incorrect, please correct me.

Vertices attributes

In the previous article, we introduced the connection from the generation, compilation, to the generation of program objects and the coloring machine. This time, let's briefly talk about the definition of model data and the processing of vertex attributes. In addition, we will introduce how to generate VBO based on model data.
The use of VBO is more difficult to understand than the generation, but don't worry, it will be explained later.
Next, let's take a look at the vertex attributes.
A simple vertex is a variety of elements contained in a vertex. In WebGL, the vertex must contain at least positional intelligence, which has been mentioned many times before.
A vertex is any point in a 3D space. Therefore, it must have positional intelligence. If there is no positional intelligence, it cannot be defined in a 3D space, because each vertex is different, therefore, location intelligence is required. Lufy: I feel so cool. I want to emphasize it, but it's really cool, so cool .....
However, the vertex may contain other attributes, for example, the color of the vertex. The polygon is colored or transparent based on the color attribute of the vertex.
In addition, there are also information related to the vertex's normal and texture coordinates, which can be freely defined in the vertex attributes. DirectX implements these functions based on the so-called vertex format, but various attributes of vertices in WebGL can be defined in vertex attributes.

Vertex attributes and VBO since vertex attributes can be freely defined, how should we implement them?
After reading previous articles, we should know that the number of vertex attributes is the same as the number of VBO generated. If the vertex has three attributes, we need three vbrs, because the vertex attributes must be transmitted to the vertex coloring ER through VBO. VBO is also called the vertex cache. Like its name, VBO caches vertex-related intelligence. The vertex attributes are allocated one-to-one with VBO and then transmitted to the vertex shader.
To generate a VBO, first prepare a matrix corresponding to the number of vertices. Here we use a common javascript Array. Of course, the Array object can also be used, but the associated Array cannot be used, use a one-dimensional array.
For example, when three vertices define a polygon, they are written as follows.

> Example of saving an array of model data

var vertex_position = [    // X,   Y,   Z     0.0, 1.0, 0.0,     1.0, 0.0, 0.0,    -1.0, 0.0, 0.0];

To make it easier for everyone to see, we can see that this is a one-dimensional array with nine elements, and all three vertices contain X, Y, Z coordinates. The number of vertices x is 3x3 = 9, so the number of elements in the array is 9.

After VBO is generated using a matrix to prepare vertex data, you can use this matrix to generate VBO. When VBO is generated, the createBuffer function of WebGL is used to generate cache. However, this function is not used to directly generate VBO. It only generates a cache object. It does not need to be used based on the content stored in it.
To operate the cache, you must first bind it to WebGL. That is to say, when you want to write data to the "cache" disc, you must connect to the "Optical Drive" WebGL.
After the cache is bound, use the bufferData function to write data to the cache and write the processing into a function. This is what follows.

> VBO generation function

Function create_vbo (data) {// generate the cache object var vbo = gl. createBuffer (); // bind the cache gl. bindBuffer (gl. ARRAY_BUFFER, vbo); // write data to the cache gl. bufferData (gl. ARRAY_BUFFER, new Float32Array (data), gl. STATIC_DRAW); // sets the bound cache to invalid gl. bindBuffer (gl. ARRAY_BUFFER, null); // return the generated VBO return vbo ;}

This function accepts a matrix as a parameter and returns the generated VBO. First, use createBuffer to generate the cache object, bind the cache, and then write data.
BindBuffer function is used to bind cache. This function has two parameters. The first parameter is the cache type, and the second parameter is the cache object. Specify gl. ARRAY_BUFFER as the first parameter to generate a VBO.
In addition, the Float32Array object that appears in the second parameter of the bufferData function is an Array of the javascript type. Similar to an ordinary Array object, it is an Array object used to process floating point decimal places. The precision of decimals in the 3D world is very important, so data is transmitted using arrays of types. The gl. STATIC_DRAW constant in the third parameter defines the update frequency of the content in the cache. In VBO, the model data is basically used repeatedly, so this constant is used.
You can bind the cache of WebGL. Only one cache can be bound at a time. Therefore, when you want to operate other caches, you must bind the corresponding cache. So at the end of the function, use the bindBuffer function again and set the second parameter to null to invalidate the last binding. This is to prevent consistent cache retention in WebGL, however, this is inconsistent with the expectation.

Summary The attributes in the vertex are freely added by the programmer. The number of vbrs required is the number of attributes added.
Each data in the vertex attribute uses a pure one-dimensional array. Of course, the number of elements in the array must be defined based on the number of vertices to be drawn.
When a VBO is generated, bind the cache to WebGL, convert the corresponding data to the corresponding type, and then use the specified constant to write data. To avoid unexpected errors, the cache bound to WebGL is invalid after the data is written.
In this way, after a series of processing, the model data can be used by the vertex coloring tool. Next, let's take a look at the steps to pass the VBO to the shadow. First, let's take a look at the preparation section of the VBO.

Next time, let's talk about how to prepare a coordinate transformation matrix.

Reprinted Please note: