Qu'est-ce qu'un tampon d'index et comment est-il lié aux tampons de sommet?

J'ai un tampon de vertex comme celui-ci:

0.0, 0.0,
1.0, 0.0,
0.0, 0.6,
1.0, 0.6,
0.5, 1.0

J'ai le tampon d'index suivant:

0, 2,
2, 4,
4, 3,
3, 2,
2, 1,
1, 0,
0, 3,
3, 1

Je sais que je veux dessiner en gl.LINESutilisant WebGL, signifie plusieurs segments de ligne séparés.

gl.drawElements(gl.LINES, 16, gl.UNSIGNED_SHORT, indexBuffer);

Il semble permettre de dessiner plusieurs segments de ligne en un seul appel de dessin dans WebGL.

Quelqu'un pourrait-il ELI5 pour moi, qu'est-ce qu'un tampon d'index et comment est-il lié aux tampons de sommet? Comment générer des tampons d'index à partir de mes primitives?

Quelqu'un pourrait-il ELI5 pour moi, qu'est-ce qu'un tampon d'index et comment est-il lié aux tampons de sommet

Votre tampon de sommets contient les coordonnées X et Y de 5 sommets. Elles sont:

index |  X  |  Y
  0   | 0.0 | 0.0 
  1   | 1.0 | 0.0
  2   | 0.0 | 0.6
  3   | 1.0 | 0.6
  4   | 0.5 | 1.0

Votre tampon d'index contient des informations sur les lignes à tracer entre ces sommets. Il utilise l'index de chaque sommet du tampon de sommets comme valeur.

Puisque vous dessinez des lignes, chaque paire de valeurs consécutives dans votre tampon d'index indique un segment de ligne. Par exemple, si le tampon d'index commence par 0, 2, cela signifie tracer une ligne entre les 0e et 2e sommets du tableau de sommets, qui dans ce cas tracerait une ligne allant de [0.0, 0.0]à [0.0, 0.6].

Dans le graphique suivant, chaque paire d'indices est de couleur coordonnée avec la ligne qu'elle indique:

De même, si vous dessinez des triangles au lieu de lignes, vous devrez fournir un tampon d'index où chaque 3 valeurs consécutives indiquent les indices de trois sommets dans le tampon de vertex, par exemple

0, 1, 2,
2, 1, 3,
2, 3, 4,

Si vous avez un tampon de vertex comme celui-ci:

var vertices = [
  0.0, 0.0, 0.0,
  1.0, 0.0, 0.0,
  0.0, 0.6, 0.0,
  1.0, 0.6, 0.0,
  0.5, 1.0, 0.0
]

Et dessinez-le simplement tel quel:

// Create an empty buffer object
var vertex_buffer = gl.createBuffer();

// Bind appropriate array buffer to it
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);

// Pass the vertex data to the buffer
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

/* [...] */

// Draw the lines
gl.drawArrays(gl.LINES, 0, 5);

Il faudrait deux coordonnées dédiées pour chaque segment de ligne. Avec le verticestel que défini ci-dessus, il ne serait possible que de tracer deux lignes :

Si vous avez défini les indices suivants:

var indices = [
  0, 2,
  2, 4,
  4, 3,
  3, 2,
  2, 1,
  1, 0,
  0, 3,
  3, 1
]

Il est possible de tracer des lignes qui coupent encore et encore les mêmes sommets. Cela réduit la redondance. Si vous liez le tampon d'index et dites au GPU de dessiner des segments de ligne reliant les sommets par l'ordre spécifié dans le tableau indecies:

var index_buffer = gl.createBuffer();

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer);

gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

// draw geometry lines by indices
gl.drawElements(gl.LINES, 16, gl.UNSIGNED_SHORT, index_buffer);

On peut dessiner des figures plus complexes sans redéfinir les mêmes sommets encore et encore. Voici le résultat:

Pour obtenir le même résultat sans index, le tampon de vertex doit ressembler à ceci:

var vertices = [
  0.0, 0.0, 0.0,
  0.0, 0.6, 0.0,
  0.0, 0.6, 0.0,
  0.5, 1.0, 0.0,
  0.5, 1.0, 0.0,
  1.0, 0.6, 0.0,
  1.0, 0.6, 0.0,
  0.0, 0.6, 0.0,
  0.0, 0.6, 0.0,
  1.0, 0.0, 0.0,
  1.0, 0.0, 0.0,
  0.0, 0.0, 0.0,
  0.0, 0.0, 0.0,
  1.0, 0.6, 0.0,
  1.0, 0.6, 0.0,
  1.0, 0.0, 0.0
]

/* [...] */

// Draw the lines
gl.drawArrays(gl.LINES, 0, 16);

Ce qui donne la même image:

Notez l'énorme redondance des sommets stockés.