Comment les attributs couleur travail dans VBO?

Question

Je suis codage à OpenGL ES 2.0 (WebGL). J'utilise VBOs pour dessiner des primitives. Je tableau de vertex, un tableau couleur et tableau d'indices. Je l'ai regardé les codes échantillons, livres et tutoriel, mais une chose je ne suis pas - si la couleur est définie par sommet comment elle affecte les surfaces polygonales adjacentes à ces sommets? (Je suis un débutant à OpenGL (ES))

Je vais vous expliquer avec un exemple. J'ai un cube à dessiner. D'après ce que je lis dans le livre de OpenGLES, la couleur est définie comme un attribut de sommet. Dans ce cas, si je veux dessiner 6 faces du cube avec 6 couleurs différentes comment dois-je définir les couleurs. La source de ma confusion est: chaque sommet est commun à 3 faces, alors comment peut-il aider la définition d'une couleur par sommet? (Ou la couleur doit être définie par l'index?). Le fait que nous devons diviser ces visages en triangles, il est plus difficile pour moi de comprendre comment cette relation fonctionne. La même confusion va pour les bords. Au lieu de triangles dessin, disons que je veux tirer des bords à l'aide de primitives LIGNES. Chaque bord de couleur différente. Comment suis-je censé définir des attributs de couleur dans ce cas?

J'ai vu quelques exemples de travail. Plus précisément ce tutoriel: http://learningwebgl.com/blog/?p=370

Je vois comment tableau de couleurs est définie dans l'exemple ci-dessus pour dessiner un cube avec 6 faces différentes couleurs, mais je ne comprends pas pourquoi est défini de cette façon. (Pourquoi chaque couleur copiée 4 fois en unpackedColors par exemple?)

Quelqu'un peut-il expliquer comment les attributs couleur travail VBO?

[Le lien ci-dessus semble inaccessible, donc je vais poster le code correspondant ici]

cubeVertexPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
vertices = [
  // Front face
  -1.0, -1.0,  1.0,
   1.0, -1.0,  1.0,
   1.0,  1.0,  1.0,
  -1.0,  1.0,  1.0,

  // Back face
  -1.0, -1.0, -1.0,
  -1.0,  1.0, -1.0,
   1.0,  1.0, -1.0,
   1.0, -1.0, -1.0,

  // Top face
  -1.0,  1.0, -1.0,
  -1.0,  1.0,  1.0,
   1.0,  1.0,  1.0,
   1.0,  1.0, -1.0,

  // Bottom face
  -1.0, -1.0, -1.0,
   1.0, -1.0, -1.0,
   1.0, -1.0,  1.0,
  -1.0, -1.0,  1.0,

  // Right face
   1.0, -1.0, -1.0,
   1.0,  1.0, -1.0,
   1.0,  1.0,  1.0,
   1.0, -1.0,  1.0,

  // Left face
  -1.0, -1.0, -1.0,
  -1.0, -1.0,  1.0,
  -1.0,  1.0,  1.0,
  -1.0,  1.0, -1.0,
];
gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(vertices), gl.STATIC_DRAW);
cubeVertexPositionBuffer.itemSize = 3;
cubeVertexPositionBuffer.numItems = 24;

cubeVertexColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexColorBuffer);
var colors = [
  [1.0, 0.0, 0.0, 1.0],     // Front face
  [1.0, 1.0, 0.0, 1.0],     // Back face
  [0.0, 1.0, 0.0, 1.0],     // Top face
  [1.0, 0.5, 0.5, 1.0],     // Bottom face
  [1.0, 0.0, 1.0, 1.0],     // Right face
  [0.0, 0.0, 1.0, 1.0],     // Left face
];
var unpackedColors = []
for (var i in colors) {
  var color = colors[i];
  for (var j=0; j < 4; j++) {
    unpackedColors = unpackedColors.concat(color);
  }
}
gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(unpackedColors), gl.STATIC_DRAW);
cubeVertexColorBuffer.itemSize = 4;
cubeVertexColorBuffer.numItems = 24;

cubeVertexIndexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
var cubeVertexIndices = [
  0, 1, 2,      0, 2, 3,    // Front face
  4, 5, 6,      4, 6, 7,    // Back face
  8, 9, 10,     8, 10, 11,  // Top face
  12, 13, 14,   12, 14, 15, // Bottom face
  16, 17, 18,   16, 18, 19, // Right face
  20, 21, 22,   20, 22, 23  // Left face
]
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new WebGLUnsignedShortArray(cubeVertexIndices), gl.STATIC_DRAW);
cubeVertexIndexBuffer.itemSize = 1;
cubeVertexIndexBuffer.numItems = 36;

Answer 1

La façon dont j'aime regarder est que chaque sommet est pas un point dans l'espace, mais plutôt un ensemble d'attributs. Ceux-ci en général (mais pas toujours) comprennent son emplacement et peut inclure sa couleur, les coordonnées de texture, etc., etc., etc. Un triangle (ou une ligne ou une autre primitive) est défini en spécifiant un ensemble de sommets, puis à générer des valeurs pour chaque attribut à chaque pixel par interpolation linéaire les valeurs par sommet.

Comme Liam dit, et que vous avez réalisé dans votre commentaire, cela signifie que si vous voulez avoir un point dans l'espace qui est utilisé par un sommet pour plusieurs primitives - par exemple, le coin d'un cube - avec d'autres attributs non localisation variable sur une base par primitive, vous avez besoin d'un sommet pour chaque combinaison d'attributs.

Ceci est un gaspillage de la mémoire dans une certaine mesure - mais la complexité de le faire d'une autre façon ferait qu'empirer les choses, et il faudrait le matériel graphique pour faire beaucoup plus de travail du déballage et de données remballage. Pour moi, il se sent comme les déchets est comparable à celui des déchets que nous obtenons en utilisant des valeurs RGBA 32 bits pour chaque pixel dans notre mémoire vidéo au lieu de garder une table de consultation « palette » de toutes les couleurs que nous voulons utiliser et puis juste stocker une indice dans ce pixel par pixel (ce qui est, bien sûr, ce que nous avons utilisé pour faire quand la RAM était plus cher).

Answer 2

Si la couleur d'un ensemble de polygones est le même alors un sommet partagé par tous les polygones, ainsi que sa couleur, peut être définie une fois et partagée par les polygones (à l'aide d'un index).

Si la couleur des polygones est différente, alors même si la position d'un sommet peut être commun, la couleur n'est pas, et donc le sommet dans son ensemble ne peut pas être partagée. Vous devrez définir le sommet pour chaque polygone.