[WebGL Primer] 12, model data and vertex properties

Note: The article is translated from http://wgld.org/, the original author Sambonja 広 (doxas), the article if there is my additional instructions, I will add [Lufy:], in addition, The WEBGL research is not deep enough, some professional words, if the translation is wrong, you are welcome to correct.

the meaning of the vertex attribute

Vbo is more difficult to understand than the build, but don't worry, it will be explained later. The
next looks at the vertex properties. The
Vertex property, the simple point, is the various elements that the vertex contains. In WebGL, the element that the vertex contains at least is location intelligence, which has been said many times before. The
Vertex is any point in the three-dimensional space, so there must be location intelligence, if there is no location intelligence, it is impossible to define this point in three-dimensional space, because each point is different, so location information is necessary. lufy: Feel good wordy Ah, the author is to emphasize it, but really good wordy ah, good wordy ah, wordy ah, ah, ah ....
However, there may be 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 shaded, or transparent, and a variety of treatments are performed.
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 according to the so-called vertex format, but the various attributes of vertices in WEBGL can be defined in the vertex properties.

vertex properties and Vbo Read the previous article, you should know that the number of vertex attributes and the number of generated VBO is consistent, if there are three properties in the vertex, then three Vbo is required, because the vertex property must pass VBO to the vertex shader. 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.
in order to generate VBO, first prepare the matrix corresponding to the number of vertices, here is the normal JavaScript array, of course, the array object can, but can not use associative array, to use a one-dimensional array.
For example, when a polygon is defined by three vertices, it is 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];

In order to make it easier for everyone to see, add a line in the middle, you can see that this is a one-dimensional array, contains 9 elements, three vertices are each containing x, y, z coordinates, the number of vertices × 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, using WebGL's Createbuffer function when generating VBO, which 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 not necessary.
To manipulate the cache, you must first bind to WebGL, which means that you must connect to the "CD drive" of WebGL to write data to the "cache" disc.
Once the cache is bound, use the Bufferdata function to write data to the cache, writing the processing into a function, which 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, which takes a matrix as a parameter, returns the generated VBO. Start by using Createbuffer to generate the cache object, bind the cache, and then write the data.
When binding the cache, use the Bindbuffer function, which has two parameters, the first parameter is the type of the cache, and the second parameter is the specified cache object. Specify the first parameter as GL. Array_buffer can generate VBO.
In addition, the Float32array object that appears in the second argument of the Bufferdata function is an array of JavaScript types, similar to a generic array object, which is used when working with floating-point decimals. The precision of decimal in the 3D world is very important, so use an array of types to pass the data. And the third parameter is GL. Static_draw This constant, which defines how often the content in this cache is updated. VBO, the model data is basically used directly so repeatedly, so use this constant.
You can bind a WEBGL cache, bind only one at a time, so you must bind the corresponding cache when you want to manipulate other caches. 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 the cache from being consistent in WebGL, and to expect inconsistencies.

Summary The attributes in the vertex are added by the programmer, 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 generating Vbo, the cache is first bound to WebGL, then the corresponding data is converted to the appropriate type, and then the data is written using the specified constants. In order to avoid unintended errors, the cached bindings in WebGL are invalidated after the data has been written to the end.
Thus, after a series of processing, the model data can be exploited by the vertex shader. Next time, say the steps to pass the VBO to the shader, first of all VBO the preparation part of a good understanding of it.

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