Possible Duplicate:
Rendering meshes with multiple indices
This is about using index buffers to render custom geometry, like from an OBJ file. I know a bit about 3d graphics conventions, but I haven’t done much of anything with WebGL.
The short form of my question is “how do you use Index Buffers in WebGL?”
What I would like to do is, for a piece of custom geometry, build a list of the position vectors at play, and a list of the UV vectors at play (lets skip the normals). Then, when I go to draw the triangles, I just want to define each triangle with pointers to three of the existing position vectors, and pointers to three existing UV vectors. (simply because that’s how OBJ’s are set up)
From what I’ve read (I swear I googled this a hundred different ways and couldn’t get a conclusive answer), you have to lump the UV and the position together as a vertex, and then the triangles are defined as pointers to three of these verticies. But what happens when the list of UVs is a different length than the list of positions?
Lets say I have a cube. That’s eight position vectors. But given that each face has the same, square UV layout (each side should look the same when rendered). That’s four (unique) UVs. Now what?
It’s like I have to abandon this method, bite the bullet, and for all 12 triangles, define each position and UV– at the “cost” of repeating position vectors along the cube edges and repeating uvs along the face diagonals. If this is the accepted practice, that’s fine, I just want to be sure I’m going about this the right way.
Your arrays containing vertex positions, texture coordinates, normals, etc. must be the same length. That means redundant data in many cases. A cube is one example where the redundancy is especially bad. You’ll actually have to pass in 24 vertices, and 24 texcoords.