OpenGL

En apprenant OpenGL, vous avez choisi de faire tout le dur travail vous-même. Inévitablement, cela signifie que vous allez être jeté dans les profondeurs, mais, une fois que vous avez compris les bases, vous allez voir que faire les choses à la dure n'est pas si difficile après tout. De plus, les exercices à la fin de ce chapitre vous montreront que vous avez le contrôle absolu sur le processus de rendu grâce à la méthode moderne.

Le pipeline graphique couvre toutes les étapes à suivre afin de produire l'image finale grâce aux données en entrée. Je vais expliquer ces étapes en m'aidant de la figure suivante.

Tout commence par les sommets (« vertices »). Ce sont des points à partir desquels les formes telles que le triangle seront construites. Chacun de ces points est stocké avec des attributs et c'est à vous de décider de ce que constituent ces attributs. Les attributs habituels sont la position 3D dans le monde et les coordonnées de texture.

Le vertex shader est un petit programme s'exécutant sur votre carte graphique et qui traite chacun de ces sommets individuellement. C'est l'étape où la transformation de la perspective prend place, projetant les sommets du monde 3D sur l'écran 2D ! Le programme transfère les attributs importants comme la couleur et les coordonnées de texture à la suite du pipeline.

Après la transformation des sommets, la carte graphique va construire les triangles, lignes et points à partir de ceux-ci. Ces formes sont appelées des primitives, car elles constituent la base de formes plus complexes. Il y a d'autres modes de dessin que l'on peut choisir, comme les séries de triangles et les séries de lignes. Ils permettent de réduire le nombre de sommets nécessaire à transférer si vous souhaitez créer des objets où l'ensemble des primitives se suit, comme avec une ligne constituée de plusieurs segments.

L'étape suivante, le geometry shader, est totalement optionnelle et n'a été introduite que récemment. Contrairement au vertex shader, le geometry shader peut produire plus de données qu'il n'en reçoit. Il prend, comme entrée, les primitives à partir de l'étape d'assemblage de forme et peut soit passer une primitive à la suite du pipeline, en la modifiant, ou complètement la supprimer, ou encore la remplacer par d'autre(s) primitive(s). Sachant que la communication entre le GPU et le reste du PC est relativement lente, cette étape peut aider à réduire le nombre de données devant être transférées. Par exemple, pour un jeu en voxel, vous pouvez passer des sommets en tant que points, avec des attributs représentant leur position dans le monde, la couleur et le matériel, et le cube pourra être produit dans le geometry shader à partir du point.

Après avoir composé la liste finale des formes et après l'avoir convertie en coordonnées écran, le rasteriseur transforme les parties visibles des formes en fragments de la taille du pixel. Les attributs provenant du vertex shader ou du geometry shader sont interpolés et passés en entrée au fragment shader pour chaque fragment. Comme vous pouvez le voir sur l'image, les couleurs composent un doux dégradé sur les fragments constituant le triangle, même si nous n'avons spécifié que trois points.

Le fragment shader traite chaque fragment avec ses attributs interpolés et doit fournir la couleur finale. Cela se fait généralement en échantillonnant une texture grâce aux coordonnées de texture interpolées provenant du vertex shader ou simplement en définissant une couleur. Dans des scénarios plus aboutis, il peut aussi y avoir des calculs pour la lumière et l'ombre et des effets spéciaux dans ce programme. Le shader possède aussi la possibilité de retirer certains fragments, de telle sorte qu'il est possible de voir à travers la forme.

Finalement, le résultat est une composition de la fusion de tous les fragments de forme, et sur lesquels on applique un test de profondeur (« depth test ») et de pochoir (« stencil test »). Pour le moment, tout ce que vous devez savoir à propos de ces deux derniers est qu'ils vous permettent d'utiliser des règles supplémentaires pour éliminer certains fragments et laisser les autres. Par exemple, si un triangle est caché par un second, le fragment du triangle le plus proche doit être affiché à l'écran.

Maintenant que vous savez comment votre carte graphique transforme un tableau de sommets en une image à l'écran, allons-y !

La première chose est de déterminer les données que la carte graphique nécessite pour dessiner votre scène correctement. Comme dit précédemment, les données viennent sous la forme d'attributs de sommets. Vous êtes libre de choisir n'importe quel type d'attributs que vous souhaitez, mais cela démarre inévitablement avec la position dans le monde. Que ce soit pour des graphismes 2D ou 3D, c'est cet attribut qui déterminera où et de quelle façon les objets vont être sur votre écran.

Coordonnées du périphérique

Lorsque vos sommets ont été traités par le pipeline décrit ci-dessus, leurs coordonnées ont été transformées en coordonnées du périphérique. Les coordonnées X et Y du périphérique sont comprises entre -1 et 1.

Tout comme dans un graphe, le centre est aux coordonnées (0,0) et l'axe des y est positif au-dessus du centre. Cela semble illogique, car les applications graphiques situent le point (0,0) dans le coin supérieur gauche et (largeur, hauteur) dans le coin inférieur droit, mais c'est une méthode excellente pour simplifier les calculs 3D et être indépendant de la résolution.

Le triangle ci-dessus est constitué de trois sommets positionnés en (0, 0.5), (0.5, -0.5) et (-0.5, -0.5) en suivant le sens des aiguilles d'une montre. Il est évident que la seule variation entre les sommets est la position, donc c'est l'unique attribut dont nous avons besoin. Comme nous utilisons directement des coordonnées de périphérique, seuls X et Y suffisent pour déterminer la position.

OpenGL s'attend à recevoir tous les sommets dans un seul tableau, ce qui peut être source de confusion au début. Pour comprendre le format de ce tableau, voyons à quoi il ressemblerait pour notre triangle.

float vertices[] = {
     0.0f,  0.5f, // Sommet 1 (X, Y)
     0.5f, -0.5f, // Sommet 2 (X, Y)
    -0.5f, -0.5f  // Sommet 3 (X, Y)
};

Comme vous pouvez le voir, le tableau doit simplement être une liste de tous les sommets avec leurs attributs mis bout à bout. L'ordre des attributs n'importe pas, tant que vous gardez le même ordre pour chaque sommet. L'ordre des sommets n'a pas besoin d'être séquentiel (c'est-à-dire l'ordre nécessaire pour dessiner la forme), mais cela nous demanderait de fournir des données additionnelles sous la forme d'un tampon d'éléments. Cela sera détaillé à la fin du chapitre afin de ne pas compliquer les choses.

La prochaine étape est d'envoyer les données des sommets à la carte graphique. C'est important, car la mémoire de votre carte graphique est beaucoup plus rapide et que vous ne voulez pas envoyer les données à chaque fois que la scène doit être affichée (environ 60 fois par seconde).

Cela se fait en créant un Vertex Buffer Object (VBO) :

GLuint vbo;
glGenBuffers(1, &vbo); // Génère 1 tampon

La mémoire est gérée par OpenGL, donc au lieu de recevoir un pointeur, vous avez un nombre positif. GLuint est simplement un substitut multiplateforme pour les unsigned int, tout comme GLint l'est pour les int. Vous allez avoir besoin de ce numéro pour activer le VBO et le détruire lorsque vous aurez fini de l'utiliser.

Pour envoyer les données, vous devez d'abord rendre l'objet actif en appelant glBindBuffer :

glBindBuffer(GL_ARRAY_BUFFER, vbo);

Comme laisse penser le GL_ARRAY_BUFFER, il y a d'autres types de tampons, mais ils ne sont pas importants pour le moment. Cette ligne permet d'assigner le VBO que nous venons de créer comme le array buffer actif. Maintenant qu'il est actif, nous pouvons y copier des données.

glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

Remarquez que cette fonction n'utilise pas l'identifiant de notre VBO, mais se sert du tampon actif. Le second paramètre indique la taille en octets. Le dernier paramètre est très important et sa valeur dépend de l'utilisation des données. Je vais décrire ceux en rapport avec le rendu :

• GL_STATIC_DRAW : les données seront transférées une seule fois et dessinées plusieurs fois (par exemple, le monde) ;
• GL_DYNAMIC_DRAW : les données seront modifiées quelques fois, mais dessinées plus de fois ;
• GL_STREAM_DRAW : les données seront modifiées presque toutes les fois qu'on les dessine (par exemple : l'interface utilisateur).

Le nombre d'utilisations va déterminer dans quel type de mémoire les données seront stockées sur la carte graphique pour une meilleure efficacité. Par exemple, les données des VBO avec GL_STREAM_DRAW pourront être placées dans une mémoire permettant une écriture plus rapide en contrepartie d'un affichage un peu plus lent.

Les sommets et leurs attributs ont été copiés sur la carte graphique, mais nous ne sommes pas encore prêts à les utiliser. Rappelez-vous que nous pouvons déterminer n'importe quels attributs dans n'importe quel ordre, donc, maintenant nous devons expliquer à la carte graphique comment gérer ces attributs. C'est là que vous allez vous rendre compte de la réelle flexibilité d'OpenGL moderne.

Comme nous l'avons vu précédemment, il y a trois types de shader qui traiteront vos données de sommets. Chaque étape a un but précis et, dans les vieilles versions d'OpenGL, vous ne pouviez paramétrer que très légèrement ce que la carte graphique allait faire avec vos données. Avec les versions modernes d'OpenGL, c'est à vous de dire ce que fait la carte graphique. C'est pourquoi il est possible de décider dans l'application quels sont les attributs de sommets que vous voulez. Vous devez implémenter le vertex shader et le fragment shader afin d'obtenir quelque chose à l'écran. Le geometry shader est optionnel et sera vu plus tard.

Les shaders sont écrits dans un langage proche du C appelé GLSL (OpenGL Shading Language). OpenGL compilera votre programme à partir des sources lors de l'exécution et le copiera sur la carte graphique. Chaque version d'OpenGL possède sa propre version du langage de shader ayant son ensemble de fonctionnalités. Ici nous allons utiliser GLSL 1.50. Ce numéro de version peut sembler sorti de nulle part lorsque l'on utilise OpenGL 3.2, mais il faut se rappeler que les shaders ont été introduits dans OpenGL 2.0 en version GLSL 1.10. À partir d'OpenGL 3.3, ce problème a été corrigé et la version du GLSL correspond à la version d'OpenGL.

III-A. Vertex shader▲

#version 150

in vec2 position;

void main()
{
    gl_Position = vec4(position, 0.0, 1.0);
}

gl_Position = vec4(position, 0.0, 1.0);
gl_Position = vec4(position.x, position.y, 0.0, 1.0);

III-B. Fragment shader▲

#version 150

out vec4 outColor;

void main()
{
    outColor = vec4(1.0, 1.0, 1.0, 1.0);
}

III-C. Compiler les shaders▲

GLuint vertexShader = glCreateShader(GL_VERTEX_SHADER);
glShaderSource(vertexShader, 1, &vertexSource, NULL);

glCompileShader(vertexShader);

GLint status;
glGetShaderiv(vertexShader, GL_COMPILE_STATUS, &status);

char buffer[512];
glGetShaderInfoLog(vertexShader, 512, NULL, buffer);

GLuint fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
glShaderSource(fragmentShader, 1, &fragmentSource, NULL);
glCompileShader(fragmentShader);

III-D. Combiner les shaders en un programme▲

GLuint shaderProgram = glCreateProgram();
glAttachShader(shaderProgram, vertexShader);
glAttachShader(shaderProgram, fragmentShader);

glBindFragDataLocation(shaderProgram, 0, "outColor");

glLinkProgram(shaderProgram);

glUseProgram(shaderProgram);

III-E. Faire le lien entre les données de sommets et les attributs▲

GLint posAttrib = glGetAttribLocation(shaderProgram, "position");

glVertexAttribPointer(posAttrib, 2, GL_FLOAT, GL_FALSE, 0, 0);

glEnableVertexAttribArray(posAttrib);

III-F. Vertex Array Objects▲

GLuint vao;
glGenVertexArrays(1, &vao);

glBindVertexArray(vao);

Maintenant que vous avez chargé vos données de sommets, créé les programmes de shaders et lié les données aux attributs, vous être prêt pour dessiner le triangle. Le VAO qui a été utilisé pour stocker les informations des attributs est déjà lié, donc vous n'avez pas à vous inquiéter de cela. Tout ce qu'il vous reste à faire est d'appeler la fonction glDrawArrays (doc) dans la boucle principale.

glDrawArrays(GL_TRIANGLES, 0, 3);

Le premier paramètre indique le type de primitives (généralement des points, des lignes ou des triangles), le second paramètre indique combien de sommets doivent être ignorés au début et le dernier paramètre indique le nombre de sommets (pas les primitives) à traiter.

Lorsque vous exécutez le programme, vous devriez voir ceci :

Si vous ne voyez rien, assurez-vous que les shaders ont été compilés correctement, que le programme a été lié correctement, que le tableau d'attribut a été activé, que le VAO a été lié avant la spécification des attributs, que les données de sommets sont correctes et que la fonction glGetError (doc) retourne 0. Si vous ne pouvez pas trouver le problème, essayez en comparant votre code à celui-ci.

Actuellement, la couleur blanche du triangle a été écrite en dur dans le code du shader, mais que se passe-t-il si vous souhaitez la changer après la compilation du shader ? En effet, il existe une autre méthode pour passer des données à vos programmes de shaders. Cette autre façon est appelée variables uniformes (« uniforms »). Ce sont principalement des variables globales, possédant la même valeur pour tous les sommets et/ou tous les fragments. Pour montrer comment les utiliser, faisons en sorte que l'on puisse changer la couleur du triangle à partir du programme.

En obtenant la couleur du fragment shader à partir d'une variable uniforme, celui-ci ressemblera à ceci :

#version 150

uniform vec3 triangleColor;

out vec4 outColor;

void main()
{
    outColor = vec4(triangleColor, 1.0);
}

Le dernier composant de la couleur de sortie est la transparence, ce qui ne nous intéresse pas pour le moment. Si vous exécutez ce programme, vous allez voir le triangle noir, car la valeur de la variable triangleColor n'a pas été définie.

Changer la valeur d'une variable uniforme s'effectue de la même façon que définir un attribut de sommet, vous devez d'abord récupérer l'emplacement :

GLint uniColor = glGetUniformLocation(shaderProgram, "triangleColor");

Les valeurs des variables uniformes sont définies avec les fonctions glUniformXY, (doc), où X est le nombre de composants et Y le type. Les types classiques sont f (float), d (double) et i (entier).

glUniform3f(uniColor, 1.0f, 0.0f, 0.0f);

Si vous exécutez votre programme maintenant, vous allez voir le triangle en rouge. Pour rendre les choses un peu plus amusantes, essayez de varier la couleur du triangle selon le temps en faisant quelque chose comme cela dans votre boucle principale :

auto t_start = std::chrono::high_resolution_clock::now();

...

auto t_now = std::chrono::high_resolution_clock::now();
float time = std::chrono::duration_cast<std::chrono::duration<float>>(t_now - t_start).count();

glUniform3f(uniColor, (sin(time * 4.0f) + 1.0f) / 2.0f, 0.0f, 0.0f);

Bien que cet exemple puisse ne pas être très amusant, il montre que les variables uniformes sont essentielles pour contrôler le comportement des shaders à l'exécution. Les attributs de sommets sont, quant à eux, idéaux pour la description d'un sommet.

Regardez ce code, si vous avez des soucis à faire fonctionne le programme.

Bien que les variables uniformes aient leur utilité, la couleur est une chose que l'on préfère spécifier pour chaque coin d'un triangle ! Ajoutons un attribut de couleur aux sommets.

Nous allons commencer par ajouter les attributs supplémentaires aux données du sommet. La transparence n'est pas vraiment pertinente, donc nous n'ajoutons que les composantes rouge, vert et bleu.

float vertices[] = {
     0.0f,  0.5f, 1.0f, 0.0f, 0.0f, // Vertex 1: Rouge
     0.5f, -0.5f, 0.0f, 1.0f, 0.0f, // Vertex 2: Vert
    -0.5f, -0.5f, 0.0f, 0.0f, 1.0f  // Vertex 3: Bleu
};

Ensuite, nous allons changer le vertex shader pour prendre en entrée la couleur et la passer au fragment shader :

#version 150

in vec2 position;
in vec3 color;

out vec3 Color;

void main()
{
    Color = color;
    gl_Position = vec4(position, 0.0, 1.0);
}

Et la variable Color est ajoutée comme entrée du fragment shader :

#version 150

in vec3 Color;

out vec4 outColor;

void main()
{
    outColor = vec4(Color, 1.0);
}

Assurez-vous que la sortie du vertex shader et l'entrée du fragment shader ont le même nom, sinon les shaders ne vont pas pouvoir être liés.

Maintenant, nous devons simplement modifier le code lié aux attributs pour correspondre au nouvel ordre X, Y, R, G, B.

GLint posAttrib = glGetAttribLocation(shaderProgram, "position");
glEnableVertexAttribArray(posAttrib);
glVertexAttribPointer(posAttrib, 2, GL_FLOAT, GL_FALSE,
                       5*sizeof(float), 0);

GLint colAttrib = glGetAttribLocation(shaderProgram, "color");
glEnableVertexAttribArray(colAttrib);
glVertexAttribPointer(colAttrib, 3, GL_FLOAT, GL_FALSE,
                       5*sizeof(float), (void*)(2*sizeof(float)));

Le cinquième paramètre est maintenant défini à 5*sizeof(float), car chaque sommet se compose de cinq nombres à virgule flottante par valeur d'attribut. Le décalage pour la couleur est 2*sizeof(float), car nous devons passer les deux nombres à virgule flottante pour représenter la position.

Et c'est bon !

Vous devriez maintenant avoir une compréhension raisonnable des attributs de sommet et des shaders. Si vous rencontrez des problèmes, demandez sur le forum ou regardez ce code.

Jusqu'à présent, les sommets sont spécifiés dans l'ordre dans lequel ils sont dessinés. Si vous vouliez ajouter un autre triangle, vous auriez ajouté trois sommets supplémentaires au tableau de sommets. Il y a un moyen pour contrôler l'ordre, nous permettant aussi de réutiliser des sommets existants. Cela peut économiser beaucoup de mémoire lorsque vous travaillez avec de vrais modèles 3D, car chaque point peut être un coin pour trois triangles !

Un tableau d'éléments est rempli avec des entiers non signés référençant les sommets liés à GL_ARRAY_BUFFER. Si nous souhaitons simplement les dessiner dans l'ordre présent, le tampon sera :

GLuint elements[] = {
    0, 1, 2
};

Ils sont chargés en mémoire vidéo à travers un VBO, tout comme les données de sommets :

GLuint ebo;
glGenBuffers(1, &ebo);

...

glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, ebo);
glBufferData(GL_ELEMENT_ARRAY_BUFFER,
    sizeof(elements), elements, GL_STATIC_DRAW);

La seule chose qui change est la cible, qui, cette fois est GL_ELEMENT_ARRAY_BUFFER.

Pour utiliser ce tampon, vous devez changer la commande de dessin :

glDrawElements(GL_TRIANGLES, 3, GL_UNSIGNED_INT, 0);

Le premier paramètre est le même que pour glDrawArrays (doc) mais les autres se rapportent au tampon d'éléments. Le deuxième paramètre indique le nombre d'indices à dessiner, le troisième le type de données des éléments et le dernier indique le décalage. La seule vraie différence est que vous parlez des indices au lieu des sommets.

Pour voir comment un tampon d'éléments peut être bénéfique, essayons de dessiner un rectangle en utilisant deux triangles. Nous allons commencer sans tampon d'éléments.

float vertices[] = {
    -0.5f,  0.5f, 1.0f, 0.0f, 0.0f, // Haut gauche
     0.5f,  0.5f, 0.0f, 1.0f, 0.0f, // Haut droit
     0.5f, -0.5f, 0.0f, 0.0f, 1.0f, // Bas droit

     0.5f, -0.5f, 0.0f, 0.0f, 1.0f, // Bas droit
    -0.5f, -0.5f, 1.0f, 1.0f, 1.0f, // Bas gauche
    -0.5f,  0.5f, 1.0f, 0.0f, 0.0f  // Haut gauche
};

En appelant glDrawArrays (doc) à la place de glDrawElements (doc) comme précédemment, le tampon d'éléments est ignoré :

glDrawArrays(GL_TRIANGLES, 0, 6);

Le rectangle est affiché comme il se doit, mais la répétition des données de sommets est un gâchis de mémoire. L'utilisation d'un tampon d'éléments permet de réutiliser les données :

float vertices[] = {
    -0.5f,  0.5f, 1.0f, 0.0f, 0.0f, // Haut gauche
     0.5f,  0.5f, 0.0f, 1.0f, 0.0f, // Haut droit
     0.5f, -0.5f, 0.0f, 0.0f, 1.0f, // Bas droit
    -0.5f, -0.5f, 1.0f, 1.0f, 1.0f  // Bas gauche
};

...

GLuint elements[] = {
    0, 1, 2,
    2, 3, 0
};

...

glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);

Le tampon d'éléments indique toujours six sommets pour former deux triangles, mais maintenant nous pouvons réutiliser les sommets ! Cela peut ne pas sembler grand-chose, mais lorsque votre application graphique charge plusieurs modèles dans une mémoire graphique plutôt petite, les tampons d'éléments sont une optimisation considérable.

Si vous avez des problèmes, regardez le code source complet.

Ce chapitre a couvert tous les principes essentiels du dessin en OpenGL et il est absolument nécessaire que vous ayez une bonne compréhension de ceux-ci avant de continuer. Ainsi, je vous conseille de faire les exercices avant de plonger dans les textures.

• Modifiez le vertex shader pour afficher le triangle de haut en bas. (Solution)
• Inversez les couleurs du triangle en modifiant le fragment shader. (Solution)
• Changez le programme afin que chaque sommet ne contienne qu'une valeur de couleur, définissant un niveau de gris. (Solution)

Cet article est une traduction autorisée dont le texte original peut être trouvé sur open.gl.