[Getting started with WebGL] 9. Foundation of vertex cache, webgl Vertex

[Getting started with WebGL] 9. Foundation of vertex cache, 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.

Local coordinates

You can use WebGL to draw a variety of 3D models, and draw points and lines to determine what vertices are required for painting.
If there is no vertex, there will be no polygon, because there is no way to draw points and lines. Therefore, in WebGL programming, vertex intelligence must be processed. In addition, the vertex must contain intelligence, that is, the coordinates of the vertex position.
Since the coordinates of the vertex locations are required, how do we define the information?
When the vertex is finally drawn on the screen, it must undergo model coordinate transformation, view coordinate transformation, and projection coordinate transformation. This has been said many times. However, before using coordinate intelligence, you must first define the composition of these vertex groups, otherwise there is no way to start.
The coordinates of a fixed-point group are usually called local coordinates. Local coordinates are the coordinates of each vertex of the model relative to the origin (x, y, z are 0.
For example, if a local coordinate is a vertex (1.0, 0.0, 0.0), the distance from the X axis to the origin is 1.0. Similarly, each vertex defines the local coordinates in sequence, so that the vertex location is formed.

Store vertex intelligence

The local coordinates of These vertices must be transformed in the WebGL program and then transmitted to the vertex coloring tool. In WebGL, to process the vertex information and save the vertex information, you need to use the vertex cache.
Buffer is a common computer term used to represent the data storage space. In WebGL, there are also various caches such as frame cache and index cache. However, you only need to think of it as a space to store data. Vertex caching is one of the methods used to store vertex information. The vertex caching in WebGL is called VBO (vertex buffer object ).


The vertex cache is required and is not the only function of the vertex cache. It not only stores the vertex position, but also stores information related to the vertex outside the position.
For example, all vertex-related information, such as the normal, color, and coordinate of a vertex, can be saved and managed using the vertex cache. However, when appending information to vertex information, you must use the corresponding VBO.


In the last article of vertex cache and attribute, we have introduced the mechanism for the vertex shader to receive data and the variables defined by the attribute modifier.
In fact, VBO is used to input data to this attribute variable. In the WebGL program, the vertex information is saved to the VBO, and then the VBO in the coloring tool is associated with the attribute variable, then the vertex coloring tool can correctly process these vertices.
Based on the previous content, the specific process of processing the vertex cache is as follows.
Information about vertex is saved to the array.
・ Use WebGL to generate VBO
The ingress uses the WebGL method to pass the information in the array to VBO.
Combine the attribute function in vertex coloring tool with VBO
During VBO generation, data must be saved to the array first, because the vertex information (position) must contain x, y, z, therefore, the length of the array must be the number of vertices x3. At this time, you must note that multi-dimensional arrays cannot be used for arrays. One-dimensional arrays are required for VBO generation.
After preparing the array for storing vertex information, use the WebGL context method to generate VBO. Of course, when the VBO is generated, it is empty and then the array of vertex information is passed to it.
Then, for example, associate the attribute function in the vertex coloring tool with VBO. As mentioned above, VBO does not have to store only one type of information. When other information such as normal and color exists, you must prepare a suitable VBO, then, it notifies WebGL which VBO is associated with which attribute variable.


In conclusion, we should understand the vertex cache.
The programmer can decide the information to add to the vertex. DirectX has a mechanism called [flexible vertex format], which is not available in WebGL, programmers must process all vertex intelligence on their own.
You only need to add the VBO of the vertex information you want to add. The VBO generation method and how to pass the array information to VBO will be described in detail in future articles. First, let's take a look at the general process.
The most difficult thing to understand is how to associate attribute variables. This will be detailed later. This time, you only need to understand the role of the vertex cache.


Next time, let's talk about the calculation method of the matrix that is indispensable in coordinate transformation. After talking about this, we can draw a polygon on the screen. Let's look forward to it.

Reprinted Please note: