opengl三角形剖分与三角形条带化

转自：http://www.corehtml5.com/trianglestripfundamentals.php

The WebGL TRIANGLE and the grid.

Constructing something as simple as a grid can require extensive position data and compute time. WebGL is limited to triangles for surface rendering. One way to specify the simple grid triangles in Figure 1 is to set up a javascript array with xyz data for the following list of vertexes:
1, 5, 2,
2, 5, 6,
2, 6, 3,
3, 6, 7,
3, 7, 4,
4, 7, 8

Notice that this list is in a counterclockwise direction to ensure surface normals are the same.

The WebGL TRIANGLE_STRIP

The triangle strip logic is quite simple. Starting with the coordinates of the first triangle, each subsequent triangle is produced using the next vertex and the previous two.
The grid in Figure 2 is produced with the following vertex list:
1, 5, 2, 6, 3, 7, 4. 8
This is equivalent to 
1, 5, 2, counterclockwise
5, 2, 6, clockwise
2, 6, 3, counterclockwise
6, 3, 7, clockwise
3, 7, 4, counterclockwise
7, 4, 8 clockwise
Notice that the order of the triangles are alternately in a counterclockwise and clockwise direction which means the surface normals are not the same.

Fortunately specifying TRIANGLE_STRIP automatically reverses every other triangle to produce the desired result.

A BIGGER grid.

First we need to define what we mean by rows and columns, There are rows and columns of grid spaces and rows and columns of vertexes outlining the grid. For discussion purposes we will use the terms rows and cols to mean vertexes grid rows and grid cols for grid spaces. Expanding the number of grid rows in the grid causes some special problems.
As we get to the end of the first grid row the sequence continues to the next grid row
1, 5, 2, 6, 3, 7, 4, 8, 5, 9, 6, 10, 7, 11, 8, 12
------------------7, 4, 8......ok
---------------------4, 8, 5......problem
------------------------8, 5, 9......problem
----------------------------5, 9, 6......ok
However as shown in Figure 3 the TRIANGLE_STRIP logic would give us unwanted triangles 
4, 8, 5 and 8, 5, 9
when what we really need is:
5,9,6
To do this we need to make the transition from 7, 4, 8 to 5, 9, 6 WITHOUT creating any triangles.
This can be done by creating degenerate triangles which will not be processed. To do this repeat the last vertex which gives us 4, 8, 8 (NOT a triangle!) and repeat the next vertex which gives us 8, 8, 5 (NOT a triangle!)
The complete sequence for the TRIANGLE_STRIP would then be:
1, 5, 2, 6, 3, 7, 4, 8, 8, 5, 5, 9, 6, 10, 7, 11, 8, 12

For each subsequent row added to the grid you will have to add 2 extra vertexes in order to have it rendered with the TRIANGLE_STRIP with only one gl.drawArrays.