Les vertex buffer objects (VBO) d'OpenGL 4

Cet article est une adaptation en langue française de 5. OpenGL 4 Vertex Buffer Objects (VBOs) for Color, de Donald Urquhart.

Le tutoriel précédent a mentionné que, puisque le pipeline de fonction fixe n'existe plus, il n'est plus possible d'appeler des primitives comme glBegin(GL_TRIANGLES). Évidemment, cela s'applique aussi aux appels à glColor, comme ils font aussi partie de ce pipeline fixe. Ainsi, comment changer la couleur des formes et arêtes dessinées ? On vient de créer un VBO pour stocker les arêtes, on peut faire la même chose pour les couleurs et placer ce nouveau VBO dans le VAO des arêtes.

Est-ce difficile ? Pas vraiment, il suffit de faire la même chose que pour les arêtes. Puisque les shaders ont été préparés dans les premiers tutoriels, on a spécifié des variables permanentes pour le passage des arêtes et des couleurs au shader, le second VBO sera donc automatiquement interprété comme la partie couleur du VAO.

Il est important de noter que chaque attribut par arête peut être stocké dans le même VAO, chacune dans son propre VBO. On peut alors lier le VBO au shader en liant les emplacements des attributs, tout comme pour in_Position et in_Color.

Pour commencer, on ouvre le fichier opengl_3.h. On avait créé un tableau pour stocker les VBO, mais de taille unitaire. On l'augmente donc à deux éléments :

unsigned int vboID[2];

Ensuite, on passe à opengl_3.cpp, où on commence à préparer le VBO pour les couleurs. Juste à l'endroit où on a créé la variable pour le tableau des arêtes, on effectue un copier-coller, en changeant le nom de la variable pour colors.

float *vertices = new float[18]; // Arêtes pour le carré
float *colors = new float[18]; // Couleurs pour les arêtes

Une arête prend trois valeurs, x, y et z. On utilisera aussi trois valeurs pour la couleur, soit r, g et b. On peut également y ajouter une nouvelle valeur, a, en ajoutant un nombre flottant pour chaque arête et en changeant aussi le VBO pour utiliser quatre variables par arête au lieu de trois.

Par simplicité, on se limitera à trois composantes, sans valeur alpha, donc sans fusion alpha. Ainsi, juste comme on a créé les arêtes, on fait la même chose pour la variable des couleurs. On utilise du blanc pour le côté en bas à gauche, du rouge en haut à gauche, du vert en haut à droite et du bleu en bas à droite.

vertices[0] = -0.5; vertices[1] = -0.5; vertices[2] = 0.0; // Coin en bas à gauche
colors[0] = 1.0; colors[1] = 1.0; colors[2] = 1.0; 
 
vertices[3] = -0.5; vertices[4] = 0.5; vertices[5] = 0.0; // Coin en haut à gauche
colors[3] = 1.0; colors[4] = 0.0; colors[5] = 0.0; 
 
vertices[6] = 0.5; vertices[7] = 0.5; vertices[8] = 0.0; // Coin en haut à droite
colors[6] = 0.0; colors[7] = 1.0; colors[8] = 0.0; 
 
vertices[9] = 0.5; vertices[10] = -0.5; vertices[11] = 0.0; // Coin en bas à droite
colors[9] = 0.0; colors[10] = 0.0; colors[11] = 1.0; 
 
vertices[12] = -0.5; vertices[13] = -0.5; vertices[14] = 0.0; // Coin en bas à gauche
colors[12] = 1.0; colors[13] = 1.0; colors[14] = 1.0; 
 
vertices[15] = 0.5; vertices[16] = 0.5; vertices[17] = 0.0; // Coin en haut à droite
colors[15] = 0.0; colors[16] = 1.0; colors[17] = 0.0;

Ceci devrait être assez rapide à comprendre. Ensuite, quelques lignes plus bas, l'appel glGenBuffers(1, &vboID[0]) doit également être modifié pour générer les deux VBO.

glGenBuffers(2, &vboID[0]); // Générer les deux VBO

Ensuite, on effectue presque un copier-coller des lignes de glBindBuffer à glEnableVertexAttrribArray. Dans ce bloc, on change l'appel à glBindBuffer pour qu'il pointe sur le deuxième vboId (soit vboId[1]) ; on change également la variable vertices de la ligne glBufferData pour colors. Finalement, on change la valeur de glEnableVertexAttribArray, qui passe de 0 à 1.

glBindBuffer(GL_ARRAY_BUFFER, vboID[1]); // Lier le deuxième VBO
glBufferData(GL_ARRAY_BUFFER, 18 * sizeof(GLfloat), colors, GL_STATIC_DRAW); // Définir la taille et les données du VBO et le définir à STATIC_DRAW  
glVertexAttribPointer((GLuint)1, 3, GL_FLOAT, GL_FALSE, 0, 0); // Définir le pointeur d'attributs des arêtes
glEnableVertexAttribArray(1); // Activer le deuxième tableau d'attributs des arêtes

Finalement, il faut encore supprimer le tableau colors avant la fin de la méthode :

delete [] colors; // Supprimer les arêtes

Tout ce qu'il reste à faire est de compiler ce code et de l'exécuter. À l'écran, un carré devrait être affiché, avec un mélange de couleurs au lieu d'une couleur unie (indéfinie, à la fin du dernier tutoriel).

Merci à Alexandre Laurent pour son aide à la traduction et à Claude Leloup pour sa relecture orthographique !