Question

I’m learning WebGL from this site: http://learningwebgl.com/blog/?p=370

I don’t understand, what are VertexIndices, and why the pyramid dont have them?

Answer 1

When defining the geometry for your 3D object, there’s two basic elements that you are working with: Vertices and Triangles. A vertex is just a position in space defined by XYZ coords, (and usually some additional information, like texture coordinates) and a triangle is just three vertices.

Defining vertices is pretty straightforward. You typically just provide a list of positions like so:

[
    1.0, 2.0, 3.0, // vertex 0
    4.0, 5.0, 6.0, // vertex 1
    7.0, 8.0, 9.0, // vertex 2
    // etc..
]

So now the question is how do we make triangles out of that? The most straighforward way is just to say that each set of three vertices is implicitly one triangle (so the array above would define a single triangle). This is easy because it doesn’t require any additional information, you just provide vertices in threes and the hardware does the rest. This is known as Non-Indexed Geometry, and it’s the method that the pyramid uses in the tutorial you linked to.

The problem is that in most models several triangles will all share the same vertex. Think of the corner of a cube: There’s at least three triangles that will all need to use that same point. With non-indexed geometry you would need to just copy the information for that vertex in your array three times. This isn’t terribly efficient, and for large complicated meshes you’ll end up with a lot of redundant data. We can fix that by using Indexed Geometry.

With indexed geometry you only define each vertex in your mesh once and then provide a second array of integers that index into your vertex array and basically “connects the dots” to tells your graphics card which points make up the triangles.

[
    0, 1, 2, // Triangle 0, uses vertices 0, 1, and 2
    3, 2, 1, // Triangle 2, uses vertices 3, 2, and 1
    // etc...
]

This is a lot more efficient, saving memory and usually rendering faster too. This is the method that the cube uses in the tutorial.

Both methods work just fine, and both have scenarios in which they are the better choice, but usually you’ll see most professional apps used Indexed Geometry because of the lower memory usage.

Does that clear things up at all?