Apprendre OpenGL moderne

Lorsque vous attachez une texture à un tampon d’image, toutes les commandes de rendu écriront dans la texture comme si c’était un tampon de couleurs, de profondeur ou de pochoir. L’avantage d’utiliser les textures est que le résultat de toutes les opérations de rendu seront stockées dans une image que nous pouvons réutiliser dans nos shaders.

Créer une texture pour un tampon d’image est globalement identique à la création d’une texture classique :

unsigned int texture;
glGenTextures(1, &texture);
glBindTexture(GL_TEXTURE_2D, texture);
  
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, 800, 600, 0, GL_RGB, GL_UNSIGNED_BYTE, NULL);

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

Les seules différences sont que nous définissons la dimension à celle de la taille de la fenêtre (même si ce n’est pas une nécessité) et nous passons NULL pour les données de la texture. Ainsi, nous ne faisons qu’allouer la mémoire. La définition de la texture s’effectuera lors du rendu dans le tampon d’image. Aussi, nous ne nous soucions pas de la méthode de dépassement (wrapping) ni du mipmapping, sachant que nous n’en avons pas besoin dans la plupart des cas.

Maintenant que vous avez créé une texture, il ne reste plus qu’à l’attacher au tampon d’image :

glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, texture, 0);

La fonction glFrameBufferTexture2D() possède les paramètres suivants :

• target : le type de tampon d’image que nous utilisons (rendu, lecture ou les deux) ;
• attachment : le type d’attache que nous allons utiliser. Actuellement, nous attachons un tampon de couleurs. Notez que le 0 à la fin suggère que nous pouvons attacher plus d’un tampon de couleurs. Nous explorerons ceci dans un prochain tutoriel ;
• textarget : le type de texture que nous souhaitons attacher ;
• texture : la texture à attacher ;
• level : le niveau de mipmap. Nous le gardons à 0.

En plus de l’attache pour les couleurs, nous pouvons attacher une texture pour la profondeur ou le pochoir au tampon d’image. Pour attacher une texture pour la profondeur, nous devons spécifier le type GL_DEPTH_ATTACHMENT. Notez que le format de la texture et le format interne (internalformat) de la texture doivent devenir GL_DEPTH_COMPONENT pour correspondre au format de stockage du tampon de profondeur. Pour attacher un tampon de pochoir, vous devez utiliser GL_STENCIL_ATTACHMENT comme deuxième argument et spécifier GL_STENCIL_INDEX comme format de texture.

Il est aussi possible d’attacher un tampon de profondeur et de pochoir à une unique texture. Chaque valeur sur 32 bits de la texture consistera en deux informations : 24 bits pour la profondeur et 8 bits pour le pochoir. Pour attacher une texture de ce type, nous devons utiliser le type GL_DEPTH_STENCIL_ATTACHMENT et configurer les formats de la texture pour contenir les deux valeurs. En voici un exemple :

glTexImage2D(
  GL_TEXTURE_2D, 0, GL_DEPTH24_STENCIL8, 800, 600, 0, 
  GL_DEPTH_STENCIL, GL_UNSIGNED_INT_24_8, NULL
);

glFramebufferTexture2D(GL_FRAMEBUFFER, GL_DEPTH_STENCIL_ATTACHMENT, GL_TEXTURE_2D, texture, 0);

Les tampons de rendu ont été ajoutés dans OpenGL peu après les textures. À l’origine, seules les textures pouvaient être utilisées. Tout comme pour une texture, un tampon de rendu est un tampon, c’est-à-dire, un tableau d’octets, d’entiers, de pixels ou autre. Un tampon de rendu possède l’avantage d’utiliser le format natif d’OpenGL pour le stockage des données. Celui-ci est optimisé pour le rendu hors écran dans un tampon d’image.

Les tampons de rendu stockent les données de rendu directement dans leur tampon sans effectuer de conversion spécifique au format de la texture et sont donc plus rapide. Toutefois, les tampons de rendu ne sont généralement accessible qu’en écriture. Vous ne pouvez donc pas les lire dans un shader (contrairement aux textures). Il est possible de les lire avec glReadPixels(), qui retourne une zone provenant du tampon d’image actuellement lié, mais il n’existe pas de méthode pour obtenir les pixels de l’attache directement.

Comme leurs données sont déjà au format natif, ils sont plutôt rapides à l’écriture et lors de la copie dans d’autres tampons. Les opérations telles que le changement des tampons est donc rapide lors de l’utilisation d’un tampon de rendu. La fonction glfwSwapBuffers() que nous avons utilisée à la fin de chaque itération peut aussi être implémentée avec les objets de rendu : nous écrivons simplement dans le tampon de rendu, puis l’échangeons avec un autre à la fin. Les tampons de rendu sont parfaits pour ce type d’opération.

La création d’un tampon de rendu ressemble à la création d’un tampon d’image :

unsigned int rbo;
glGenRenderbuffers(1, &rbo);

De même, nous voulons lier le tampon de rendu afin que les opérations suivantes l’affectent :

glBindRenderbuffer(GL_RENDERBUFFER, rbo);

Comme les tampons de rendu sont généralement des tampons en écriture seule, nous les utilisons souvent comme attaches pour la profondeur et le pochoir. Habituellement, nous n’avons pas besoin de lire les valeurs de profondeur et de pochoir, juste de les tester lors du rendu. Lorsqu’il n’y a pas besoin d’échantillonner les tampons, les tampons de rendu sont préférables, car plus optimisés.

Créer un tampon de rendu pour la profondeur et le pochoir s’effectue ainsi :

glRenderbufferStorage(GL_RENDERBUFFER, GL_DEPTH24_STENCIL8, 800, 600);

Créer un tampon de rendu est similaire à la création des textures, la différence étant que l’objet est conçu pour être utilisé comme une image et non pour des données génériques. Ici, nous avons choisi le format interne GL_DEPTH24_STENCIL8, permettant de contenir les 24 bits de profondeur et les 8 bits de pochoir.

La dernière chose à faire est d’attacher le tampon de rendu :

glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_DEPTH_STENCIL_ATTACHMENT, GL_RENDERBUFFER, rbo);

Les tampons de rendu peuvent apporter des optimisations à vos tampons d’image, mais il est important de comprendre quand utiliser un tampon de rendu et quand utiliser une texture. La règle générale est que, si vous n’avez pas besoin d’échantillonner un tampon, alors il est préférable d’utiliser un tampon de rendu. Si vous devez échantillonner des données d’un tampon, telles des couleurs ou les valeurs de profondeur, vous devez utiliser une texture. Du côté des performances, l’impact n’est pas énorme.

Comme nous avons accès aux couleurs du rendu, il devient simple d’inverser les couleurs dans le fragment shader. Nous prenons donc la couleur de la texture et nous la soustrayons à 1.0 :

void main()
{
    FragColor = vec4(vec3(1.0 - texture(screenTexture, TexCoords)), 1.0);
}

Même si l’inversion est un effet très simple, il permet d’obtenir des résultats amusant :

La scène entière a maintenant ses couleurs inversées avec juste une ligne de code dans le fragment shader. Super, n’est-ce pas ?

Un autre effet intéressant est de supprimer les couleurs à part le blanc, le gris et le noir afin d’avoir une image en nuances de gris. Une façon simple pour ce faire est de prendre chaque composante de la couleur et d’en faire la moyenne :

void main()
{
    FragColor = texture(screenTexture, TexCoords);
    float average = (FragColor.r + FragColor.g + FragColor.b) / 3.0;
    FragColor = vec4(average, average, average, 1.0);
}

Cela donne de bons résultats, mais l’œil humain est plus sensible aux teintes vertes et moins aux bleues. Pour obtenir un effet plus proche de la physique, nous devons ajouter des poids aux canaux de couleur :

void main()
{
    FragColor = texture(screenTexture, TexCoords);
    float average = 0.2126 * FragColor.r + 0.7152 * FragColor.g + 0.0722 * FragColor.b;
    FragColor = vec4(average, average, average, 1.0);
}

Vous pouvez ne pas voir la différence immédiatement, mais, avec des scènes plus complexes, l’ajout des poids permet d’avoir un résultat plus réaliste.

Un autre avantage d’effectuer un post-traitement sur une texture est que vous pouvez échantillonner les valeurs de couleurs des autres parties de la texture. Par exemple, nous pouvons obtenir les valeurs autour de la coordonnées de texture actuelle. Nous pouvons ainsi créer des effets intéressants en les combinant.

Un noyau (ou matrice de convolution) est une simple matrice de valeurs centrées sur le pixel actuel et qui permet de multiplier les pixels avec leur valeur correspondante dans le noyau puis d’en faire la somme afin d’obtenir une seule valeur finale. En résumé, en ajoutant un petit décalage aux coordonnées de texture du pixel actuel et ce dans toutes les directions, nous pouvons obtenir les valeurs de texture des alentours et les combiner grâce au noyau. Voici un exemple d’un noyau :

Ce noyau prend les huit pixels alentour et les multiplie par 2 et le pixel courant par -15. Ce noyau permet donc d’ajouter un poids aux pixels à proximité et contre-balance le résultat en multipliant le pixel actuel par un poids négatif.

Les noyaux sont très pratiques lors du post-traitement, car ils sont très faciles à utiliser et il y a beaucoup d’exemples en ligne. Nous devons légèrement adapter le fragment shader pour gérer les noyaux. Nous allons partir du principe que tous les noyaux ont une taille de 3x3 (comme la majorité) :

const float offset = 1.0 / 300.0;  

void main()
{
    vec2 offsets[9] = vec2[](
        vec2(-offset,  offset), // haut gauche
        vec2( 0.0f,    offset), // haut
        vec2( offset,  offset), // haut droit
        vec2(-offset,  0.0f),   // gauche
        vec2( 0.0f,    0.0f),   // centre
        vec2( offset,  0.0f),   // droit
        vec2(-offset, -offset), // bas gauche
        vec2( 0.0f,   -offset), // bas
        vec2( offset, -offset)  // bas droit    
    );

    float kernel[9] = float[](
        -1, -1, -1,
        -1,  9, -1,
        -1, -1, -1
    );
    
    vec3 sampleTex[9];
    for(int i = 0; i < 9; i++)
    {
        sampleTex[i] = vec3(texture(screenTexture, TexCoords.st + offsets[i]));
    }
    vec3 col = vec3(0.0);
    for(int i = 0; i < 9; i++)
        col += sampleTex[i] * kernel[i];
    
    FragColor = vec4(col, 1.0);
}

Dans le fragment shader, nous créons un tableau de neuf vec2 pour le décalage de la coordonnées de texture afin d’obtenir les pixels autour du pixel actuel. Le décalage est simplement une valeur constante que vous pouvez modifier comme vous le souhaitez. Ensuite, nous définissons le noyau, qui dans ce cas permet d’exacerber chaque couleur en prenant en compte les pixels avoisinants. Finalement, nous ajoutons le décalage aux coordonnées de texture lors de l’échantillonnage, puis multiplions les valeurs de la texture avec celle du noyau et en effectuons la somme.

Ce noyau donne ce résultat :

Cela peut donner des effets intéressants, notamment si le joueur suit une aventure narcotique.

V-C-3-a. Flou▲

Un noyau permettant de flouter l’image est défini ainsi :

kitxmlcodelatexdvp\begin{bmatrix} 1 & 2 & 1 \\ 2 & 4 & 2 \\ 1 & 2 & 1 \end{bmatrix} / 16finkitxmlcodelatexdvp

Comme la somme donne un résultat de 16, l’utilisation directe du résultat de l’application du noyau va donner une couleur trop claire et nous devons donc diviser par 16. Le noyau devient donc :

 

Sélectionnez

float kernel[9] = float[](
    1.0 / 16, 2.0 / 16, 1.0 / 16,
    2.0 / 16, 4.0 / 16, 2.0 / 16,
    1.0 / 16, 2.0 / 16, 1.0 / 16  
);

En changeant les valeurs du noyau, nous changeons complètement l’effet de post-traitement. Ainsi, on obtient :

Un tel effet crée des possibilités intéressantes. Il est possible de varier le floutage suivant le temps pour créer l’effet d’un personnage saoul ou lorsqu’il ne porte pas ses lunettes. Le floutage permet aussi d’adoucir les valeurs des couleurs, comme nous en aurons besoin dans les prochains tutoriels.

Vous pouvez voir que, avec une simple implémentation d’un noyau de convolution, il est possible d’obtenir des effets intéressants. Voyons voir un effet moins populaire pour finir.

V-C-3-b. Détection des bordures▲

Ci-dessous, vous pouvez trouver un noyau permettant de détecter les bordures, similaire à celui pour exacerber les couleurs :

kitxmlcodelatexdvp\begin{bmatrix} 1 & 1 & 1 \\ 1 & -8 & 1 \\ 1 & 1 & 1 \end{bmatrix}finkitxmlcodelatexdvp

Le noyau met en avant les bordures et assombrit le reste, ce qui est très utile si nous voulons ne voir que les bordures d’une image.

Ce n’est pas une surprise si ce genre de noyau est utilisé dans les outils pour manipuler les images telles que Photoshop. Comme la carte graphique permet de traiter les fragments avec un haut niveau de parallélisme, nous pouvons manipuler les images pixel par pixel en temps réel avec une grande facilité. Les outils d’édition d’images utilisent de plus en plus les cartes graphiques pour les traitements.