[WebGL Primer] 12, model data and vertex properties

Note: The article is translated from http://wgld.org/, the original author Sambonja 広 (doxas), the article assumes that I have additional instructions, I will add [Lufy:]. Other than that. My own WEBGL research is not deep enough, some professional words. Suppose the translation is wrong. You are welcome to correct me.

the meaning of the vertex attribute

In the last article, we introduced the generation of shaders, the compilation, the generation of program objects, and the connection of shaders. This time, simply describe the definition of model data and the processing of vertex attributes.

In addition, the method of generating VBO based on model data is introduced.
The use of VBO is more difficult to understand than the generation. But don't worry, the back will explain slowly.
Next, look at the vertex properties.
The vertex attribute, the simple point, is the various elements that the vertex includes. In WebGL. The element to be included at least at the vertex is location intelligence. This has been said so many times before.
Vertex is a random point in three-dimensional space, so we must have location intelligence, assuming there is no location information. It is not possible to define this point in a three-dimensional space, because each point is different, so location intelligence is necessary. Lufy: I feel so wordy, the author is to emphasize it. But really good wordy ah, good wordy ah, wordy ah, ah, ah ...
However, it is possible to include other attributes in the vertex, for example, the color of the vertex, and so on.

Depending on the color properties of the vertices, the polygons are colored, or transparent, and a variety of processing.
In addition, there are related intelligence, such as vertex normals, texture coordinates, which can be defined freely in vertex attributes. These are implemented in DirectX based on the so-called vertex format, but the various attributes of vertices in WEBGL can be defined in the vertex properties.

Vertex properties and Vbo Since the vertex attributes are freely defined, how should the details be implemented?
Read the previous article, you should know that the number of vertex attributes and the number of generated VBO is consistent. Assuming that there are three attributes in the vertex, then three vbo are required. Because vertex properties must be passed to the vertex shader through VBO.

Vbo is also called Vertex caching, which, like its name, caches vertex-related intelligence.

Vertex properties and VBO are assigned to one-to-one, and then to the vertex shader.
To generate the VBO, first prepare the matrix corresponding to the number of vertices. This is the normal JavaScript array, and of course the array object can. However, associative arrays cannot be used. To use a one-dimensional array.

For example, when a polygon is defined by three vertices, it is written as follows.

> Sample to save 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, add a newline in the middle to see that this is a one-dimensional array. Includes 9 elements, and three vertices each include x, Y. coordinates of Z. The number of vertices x features is 3x3=9, so the number of elements in the array is 9.

generation of Vbo Once the vertex data has been prepared with the matrix, the matrix can be used to generate the VBO, and the Vbo createbuffer function is used to generate the cache. But this function is not used to generate VBO directly, it just generates a cache object, depending on what is stored in it. The use is also not necessary.
To manipulate the cache, you must first bind to WebGL. So. To write data to the "cache" disc, you must connect to the "CD drive" of WebGL.
After the cache is bound. Use the Bufferdata function to write data to the cache, writing the processing as a function. It is the following.

> Generating VBO functions

function Create_vbo (data) {    //Generate Cache object    var Vbo = Gl.createbuffer ();        Bind Cache    Gl.bindbuffer (GL. Array_buffer, VBO);        Writes data to the cache    Gl.bufferdata (GL. Array_buffer, new Float32array (data), GL. Static_draw);        Set the bound cache to an invalid    Gl.bindbuffer (GL. Array_buffer, null);        Returns the generated VBO    return VBO;}

This function. Accepts a matrix as a parameter and finally returns the generated VBO. The cache object is first generated using Createbuffer. The cache is then bound and then the data is written.

Using the Bindbuffer function when binding the cache, this function has two parameters. The first number of parameters is the type of cache. The second parameter is a specified cache object.

Specify the first number of parameters as GL. Array_buffer is able to generate VBO.
In addition, the Float32array object that appears in the second parameter of the Bufferdata function is an array of JavaScript types. Similar to the normal array object, is the array object used when processing floating-point decimals. The accuracy of decimal in the 3D world is very important, so use an array of types to pass the data. and the third parameter in the GL. Static_draw This constant, which defines how often the content in this cache is updated.

VBO, the model data is basically just so repetitive, so use this constant.

The ability to bind a WEBGL cache can only bind one at a time. So it's time to manipulate the other caches. The corresponding cache must be bound.

So at the end of the function, use the Bindbuffer function again. Set the second parameter to NULL to invalidate the last binding, in order to prevent cache consistent retention in WebGL. and expected inconsistencies.

Summary The attributes in the vertex are joined by the program Ape, and the number of VBO required is the number of attributes added.
The individual data of the vertex attribute, using a purely one-dimensional array, of course, the number of elements of the array to be defined according to the number of vertices you want to draw.
When the VBO is generated. The first thing to do is bind the cache to WebGL. The corresponding data is then converted to the corresponding type, and then the data is written using the specified constants.

To avoid unintended errors, after the data write is finished, the cached bindings in WebGL are invalidated.
Thus, after a series of processing, the model data can be exploited by the vertex shader. After the next one. Tell me about the steps to pass the VBO to the shader, first make a good understanding of the Vbo's preparation section.

Next time, say how to prepare the coordinate transformation matrix.

reprint Please specify:Turn from Lufy_legend's blog Http://blog.csdn.net/lufy_legend

[WebGL Primer] 12, model data and vertex properties