Webgl/Opengl drawElements and uniqueness of vertices

Question

Consider the typical draw call

webgl.bindBuffer(webgl.ELEMENT_ARRAY_BUFFER, faces); 
webgl.drawElements(webgl.TRIANGLES, nfaces * 3, webgl.UNSIGNED_SHORT, 0);

Now, let's say for simplicity that I am rendering a cube. If the component of each Vertex are its position px, py, pz and its normal nx, ny, nz, then I have 8 unique vertices.

I can then keep a buffer with these 8 vertices, keep another “faces” buffer with indices to which vertex each face uses, and there you go, shared vertices through an indexed drawElements call. Fine.

When we introduce UV coordinates, though, I don't have 8 unique vertices anymore. I end up with each face requiring exactly three unique vertices.

The faces buffer, then, might as well be [(0,1,2), (3,4,5), (6,7,8) … and so on].

So, as vertices carry more information, they become impossible to share. Yet, I need an index buffer in order to be able to call drawElements. An index buffer whose content ends up being nothing but a sequence of 0 … nverts-1 integers.

Am I missing something?

In this case you don't need index buffer. Use drawArrays instead of drawElements. — Hihikomori
let's say for simplicity that I am rendering a cube. If the component of each Vertex are its position px, py, pz and its normal nx, ny, nz, then I have 8 unique vertices. - I'd even argue that in this case of a cube (with sharp corners) you also would have six times four (24) unique vertices. — Kai Burjack
also in the case of that cube with texture coordinates, you can still share the two vertices of the two triangles on each face, because for the two triangles they connect with, they will still have the same texture coordinates. So, for a cube, you have 24 unique vertices and 36 indices. — Kai Burjack

gman gman · Accepted Answer · 2021-01-05T21:07:06

A cube with positions and normals needs 24 vertices minimum. The shared position on each corner of the cube has a different normal on each face of the cube

As for indices or not, you don't need to have an index buffer. You can call gl.drawArrays instead of gl.drawElements

As for sharing vertices, cubes have the issue that each face of the cube faces in a different direction and so needs different normals and the texture coordinates are often not shared either for a vertex with the same position. But, other shapes (a sphere, a torus, a human, an animal, a cup, a plate, a bottle, a mountain, a plant) have lots of opportunities to use shared vertices.

Also note that there are other ways of organizing vertices

Webgl/Opengl drawElements and uniqueness of vertices

1 Answers