OpenGL

Jusqu'à présent, nous n'avons utilisé qu'un seul type de tampon : le tampon de couleurs. Ce chapitre portera sur deux autres types de tampons, le tampon de profondeur et le tampon pochoir (« stencil buffer »). Pour chacun d'eux, un problème sera présenté et ensuite résolu en utilisant ce tampon.

La meilleure méthode pour démontrer l'utilisation de ces tampons est de dessiner un cube au lieu d'une géométrie plate. Le vertex shader doit être modifié pour accepter une troisième coordonnée :

in vec3 position;
...
gl_Position = proj * view * model * vec4(position, 1.0);

Nous allons aussi avoir besoin d'altérer les couleurs dans la suite de ce chapitre, donc assurez-vous que le fragment shader multiplie la couleur de la texture avec la couleur de l'attribut :

vec4 texColor = mix(texture(texKitten, Texcoord),
                     texture(texPuppy, Texcoord), 0.5);
outColor = vec4(Color, 1.0) * texColor;

Maintenant les sommets sont composés de huit nombres à virgule flottante, vous devez donc mettre à jour le décalage des attributs de sommets ainsi que ceux du pas. Finalement, ajoutez les nouvelles coordonnées aux tableaux de sommets :

float vertices[] = {
  // X      Y     Z     R     G     B     U     V
    -0.5f,  0.5f, 0.0f, 1.0f, 0.0f, 0.0f, 0.0f, 0.0f,
     0.5f,  0.5f, 0.0f, 0.0f, 1.0f, 0.0f, 1.0f, 0.0f,
     0.5f, -0.5f, 0.0f, 0.0f, 0.0f, 1.0f, 1.0f, 1.0f,
    -0.5f, -0.5f, 0.0f, 1.0f, 1.0f, 1.0f, 0.0f, 1.0f
};

Confirmez que vos changements sont effectifs en exécutant le programme et en vérifiant qu'il affiche bien une image rotative plate d'un petit chat mélangée à l'image d'un chiot. Un simple cube est composé de 36 sommets (6 côtés * 2 triangles * 3 sommets), donc je vais vous faciliter la vie en vous fournissant le tableau ici.

glDrawArrays(GL_TRIANGLES, 0, 36);

Nous n'avons pas besoin d'un tampon d'éléments pour dessiner ce cube, vous pouvez donc utiliser glDrawArrays pour l'afficher. Si vous êtes confus avec cette explication, vous pouvez comparer votre programme avec ce code.

En voyant le résultat, il est évident que le cube n'est pas affiché comme prévu. Les côtés du cube sont dessinés, mais ils se recouvrent d'une étrange manière ! Le problème est que lorsque OpenGL dessine votre cube triangle par triangle, il va simplement écrire sur les pixels, même s'il y avait autre chose de dessiné auparavant. Dans ce cas, OpenGL va joyeusement dessiner les triangles de l'arrière sur les triangles de l'avant.

Heureusement OpenGL offre des méthodes pour indiquer quand il faut ou non dessiner un pixel. Dans ce chapitre, je vais présenter deux des méthodes les plus courantes qui sont le test de profondeur et le test de pochoir.

Le Z-buffering est une technique pour garder la profondeur de chaque pixel de l'écran. La profondeur est proportionnelle à la distance entre le plan écran et le fragment qui a été dessiné. Cela signifie que les fragments sur les côtés du cube qui sont le plus loin du spectateur ont une plus haute valeur en profondeur, alors que les fragments les plus proches ont une plus petite valeur.

Si la profondeur est stockée avec la couleur lorsqu'un fragment est écrit, les fragments affichés plus tard peuvent comparer leur profondeur avec celle inscrite dans le tampon afin de savoir si le nouveau fragment est plus proche du spectateur que l'ancien fragment. Si c'est le cas, il doit être dessiné par-dessus, sinon il sera simplement oublié. Cela s'appelle le test de profondeur.

OpenGL permet de stocker ces valeurs de profondeur dans un tampon supplémentaire, appelé le tampon de profondeur et exécute automatiquement les vérifications nécessaires pour les fragments. Le fragment shader ne va pas s'exécuter pour les fragments qui sont invisibles, ce qui peut radicalement améliorer les performances. Cette fonctionnalité peut être activée en appelant la fonction glEnable (doc).

glEnable(GL_DEPTH_TEST);

Si vous activez cette fonctionnalité et que vous exécutez à nouveau votre application, vous allez obtenir un écran noir. Cela se produit, car le tampon de profondeur ne contient, par défaut, que des 0 pour la profondeur. Comme aucun fragment ne peut être plus proche que cette valeur, tous ont été ignorés.

Le tampon de profondeur peut être nettoyé en même temps que le tampon de couleurs en modifiant l'appel à glClear (doc) :

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

La valeur de réinitialisation par défaut pour la profondeur est 1.0f, qui est équivalente à la profondeur du plan lointain et donc la profondeur la plus grande possible. Tous les fragments seront plus proches que celle-ci et ne seront donc plus ignorés.

Avec l'activation du test de profondeur, le cube est maintenant affiché correctement. Tout comme pour le tampon de couleurs, le tampon de profondeur a une certaine précision que vous pouvez spécifier. Utiliser moins de bits va réduire la consommation mémoire, mais peut augmenter le nombre d'erreurs dans les scènes complexes.

Le tampon de pochoir est une extension optionnelle du tampon de profondeur qui donne plus de contrôle sur quels fragments seront affichés ou non. Comme le tampon de profondeur, une valeur est stockée pour chaque pixel, mais cette fois, vous avez le contrôle sur le changement de cette valeur et lorsque le fragment ne doit pas être dessiné suivant cette valeur. Notez que si votre test de profondeur échoue, le test de pochoir ne détermine pas si le fragment est dessiné ou non, mais ces fragments continuent d'affecter le tampon de pochoir !

Pour se familiariser avec un tampon de pochoir avant de l'utiliser, analysons ce simple exemple.

Dans ce cas, le tampon de pochoir a été réinitialisé avec des zéros et ensuite un rectangle ayant une valeur de 1 a été dessiné. L'opération de dessin du cube utilise les valeurs du tampon de pochoir pour effectuer le dessin que si la valeur de stencil est à 1.

Maintenant que vous avez compris ce que fait le tampon de pochoir, nous allons voir les fonctions OpenGL correspondantes.

glEnable(GL_STENCIL_TEST);

Le test de pochoir est activé avec un appel à la fonction glEnable (doc), tout comme pour le test de profondeur. Vous n'avez pas encore à ajouter cet appel dans votre code. Je vais d'abord détailler les fonctions dans les deux prochaines sections et nous allons faire une démonstration sympa.

IV-A. Définir les valeurs▲

glStencilFunc(GL_GEQUAL, 2, 0xFF);

glStencilFunc(GL_ALWAYS, 1, 0xFF);
glStencilOp(GL_KEEP, GL_KEEP, GL_REPLACE);
glStencilMask(0xFF);

glColorMask(GL_FALSE, GL_FALSE, GL_FALSE, GL_FALSE);
glDepthMask(GL_FALSE);

IV-B. Utiliser les valeurs dans les opérations de dessin▲

glStencilFunc(GL_EQUAL, 1, 0xFF);

glStencilMask(0x00);

Épiçons notre démo en ajoutant un sol avec une réflexion sous le cube. Je vais ajouter les sommets pour le sol dans le même tampon de sommets que celui du cube pour garder les choses simples :

float vertices[] = {
    ...

    -1.0f, -1.0f, -0.5f, 0.0f, 0.0f, 0.0f, 0.0f, 0.0f,
     1.0f, -1.0f, -0.5f, 0.0f, 0.0f, 0.0f, 1.0f, 0.0f,
     1.0f,  1.0f, -0.5f, 0.0f, 0.0f, 0.0f, 1.0f, 1.0f,
     1.0f,  1.0f, -0.5f, 0.0f, 0.0f, 0.0f, 1.0f, 1.0f,
    -1.0f,  1.0f, -0.5f, 0.0f, 0.0f, 0.0f, 0.0f, 1.0f,
    -1.0f, -1.0f, -0.5f, 0.0f, 0.0f, 0.0f, 0.0f, 0.0f
}

Maintenant ajoutez un appel supplémentaire dans la boucle principale :

glDrawArrays(GL_TRIANGLES, 36, 6);

Pour créer une réflexion du cube, il suffit de l'afficher une nouvelle fois avec l'axe des Z inversé :

model = glm::scale(
    glm::translate(model, glm::vec3(0, 0, -1)),
    glm::vec3(1, 1, -1)
);
glUniformMatrix4fv(uniModel, 1, GL_FALSE, glm::value_ptr(model));
glDrawArrays(GL_TRIANGLES, 0, 36);

J'ai défini la couleur des sommets du sol en noir afin que le sol n'affiche pas la texture, donc si vous changez la couleur de nettoyage à blanc, vous serez capable de le voir. J'ai aussi changé les paramètres de la caméra pour avoir un meilleur aperçu de la scène.

Deux problèmes apparaissent sur l'image affichée :

• le sol cache la réflexion à cause du test de profondeur ;
• la réflexion est visible en dehors du sol.

Le premier problème est simple à corriger en désactivant temporairement l'écriture dans le tampon de profondeur lors de l'affichage du sol :

glDepthMask(GL_FALSE);
glDrawArrays(GL_TRIANGLES, 36, 6);
glDepthMask(GL_TRUE);

Pour corriger le second problème, il est nécessaire d'ignorer les fragments qui sont hors du sol. Il est donc temps de voir ce à quoi sert le test de pochoir.

Il peut être actuellement grandement bénéfique de créer une liste des étapes du rendu de la scène pour obtenir une idée correcte de ce qui se passe.

• dessiner un cube classique ;
• activer le test de pochoir et définir la fonction de test et les opérations pour écrire des 1 pour tous les pixels voulus ;
• afficher le sol ;
• définir la fonction de pochoir pour réussir le test lorsque la valeur du pochoir est à 1 ;
• afficher le cube inversé ;
• désactiver le test pochoir.

Le nouveau code de rendu ressemble à ceci :

glEnable(GL_STENCIL_TEST);

    // Afficher le sol
    glStencilFunc(GL_ALWAYS, 1, 0xFF); // Définir n'importe quelle valeur de pochoir à 1
    glStencilOp(GL_KEEP, GL_KEEP, GL_REPLACE);
    glStencilMask(0xFF); // Écrire le tampon de pochoir
    glDepthMask(GL_FALSE); // Ne pas écrire le tampon de profondeur
    glClear(GL_STENCIL_BUFFER_BIT); // Réinitialisation du tampon de pochoir (0 par défaut)

    glDrawArrays(GL_TRIANGLES, 36, 6);

    // Afficher la réflexion du cube
    glStencilFunc(GL_EQUAL, 1, 0xFF); // Réussit le test si la valeur de pochoir est 1
    glStencilMask(0x00); // Ne pas écrire dans le tampon de pochoir
    glDepthMask(GL_TRUE); // Écrire le tampon de profondeur

    model = glm::scale(
        glm::translate(model, glm::vec3(0, 0, -1)),
        glm::vec3(1, 1, -1)
    );
    glUniformMatrix4fv(uniModel, 1, GL_FALSE, glm::value_ptr(model));
    glDrawArrays(GL_TRIANGLES, 0, 36);

glDisable(GL_STENCIL_TEST);

J'ai annoté le code ci-dessus avec des commentaires, mais les étapes doivent être claires pour la section du tampon de pochoir.

Il ne reste plus qu'une touche finale, pour noircir un peu la réflexion cube afin de rendre la réflexion du sol moins proche d'un miroir parfait. J'ai choisi de créer une variable uniforme appelée overrideColor dans le vertex shader :

uniform vec3 overrideColor;
...
Color = overrideColor * color;

Et le code d'affichage de la réflexion du cube

glUniform3f(uniColor, 0.3f, 0.3f, 0.3f);
    glDrawArrays(GL_TRIANGLES, 0, 36);
glUniform3f(uniColor, 1.0f, 1.0f, 1.0f);

Où uniColor est la valeur de retour de l'appel glGetUniformLocation.

Génial ! J'espère, surtout dans les chapitres comme celui-ci, que vous trouvez que travailler avec une bibliothèque bas niveau telle qu'OpenGL peut être amusant et apporter des défis intéressants ! Comme toujours, le code final est disponible ici.

Il n'y a pas vraiment d'exercice pour ce chapitre, mais il y a beaucoup plus d'effets intéressants que vous pouvez créer avec le tampon de pochoir. Je vous laisse chercher l'implémentation d'autres effets, tels que les ombres avec pochoir et le contour d'un objet.

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