Offscreen Rendering : ce que c'est, techniques et application dans les applications

Qu'est-ce que Offscreen Rendering ?

Offscreen Rendering est une méthode de rendu de contenu graphique dans un tampon intermédiaire dans la mémoire vidéo, plutôt que dans le framebuffer principal qui est affiché à l'écran. Le résultat du rendu hors écran est sauvegardé dans une texture ou un renderbuffer.

Le principal objectif du rendu hors écran est le rendu multi-passes (multi-pass rendering). Une scène complexe est divisée en plusieurs passes : d'abord la scène est rendue dans une texture (offscreen), puis cette texture est utilisée comme entrée pour la passe suivante, et ainsi de suite jusqu'à l'obtention de l'image finale. Cette approche permet de réaliser des effets impossibles en une seule passe.

Framebuffer Object (FBO)

Le mécanisme clé du rendu hors écran dans OpenGL ES est le Framebuffer Object (FBO). Un FBO est un conteneur auquel des images de texture ou des objets renderbuffer peuvent être attachés. Après avoir lié le FBO, toutes les commandes de rendu suivantes sont dirigées vers la texture attachée, pas vers l'écran.

Comment fonctionne Offscreen Rendering ?

Offscreen Rendering est implémenté en créant un objet framebuffer séparé, en y attachant une texture ou un renderbuffer, en basculant le contexte de rendu vers ce FBO et en exécutant des commandes de dessin. Une fois la passe terminée, le contexte revient au framebuffer principal.

Cycle typique de rendu hors écran

Le processus comprend trois étapes : création du FBO et attachement d'une texture — rendu de la scène dans la texture hors écran — utilisation de la texture résultante dans la passe suivante. GL_COLOR_ATTACHMENT0 détermine dans quelle texture de couleur le rendu sera effectué.

// Création d'un FBO pour le rendu hors écran (OpenGL ES 3.0)
GLuint fbo, offscreenTex;
glGenFramebuffers(1, &fbo);
glGenTextures(1, &offscreenTex);
glBindTexture(GL_TEXTURE_2D, offscreenTex);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA,
               width, height, 0,
               GL_RGBA, GL_UNSIGNED_BYTE, NULL);
glBindFramebuffer(GL_FRAMEBUFFER, fbo);
glFramebufferTexture2D(GL_FRAMEBUFFER),
    GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D,
    offscreenTex, 0);

Techniques de rendu hors écran

Offscreen Rendering est utilisé pour une large gamme d'effets graphiques. Chaque technique nécessite une ou plusieurs passes hors écran et une configuration FBO spécifique.

Render-to-Texture (RTT)

Une technique de base dans laquelle le résultat du rendu est sauvegardé dans une texture pour une utilisation ultérieure. Render-to-Texture est utilisé pour créer des mini-cartes, des textures d'objets dynamiques et la prévisualisation de matériaux complexes.

Rendu multi-passes

Les effets complexes (HDR, bloom, depth of field) nécessitent plusieurs passes séquentielles. Chaque passe rend la scène dans une texture hors écran, applique un filtre et transmet le résultat à la passe suivante. Cette approche permet d'accumuler les effets sans perte de qualité de l'image finale.

Shadow Mapping

Shadow Mapping est un exemple classique d'utilisation du rendu hors écran. L'ombre est créée en deux passes : d'abord la scène est rendue du point de vue de la source lumineuse dans une texture de profondeur (offscreen), puis lors du rendu principal chaque fragment est comparé à cette carte de profondeur pour déterminer s'il est dans l'ombre.

Processus de génération d'ombres

Première passe : la caméra est placée à la position de la source lumineuse, la scène est rendue dans un tampon hors écran, enregistrant uniquement la profondeur dans la texture. Deuxième passe : rendu principal avec vérification de chaque fragment — si sa profondeur est supérieure à la valeur dans la carte de profondeur, le fragment est ombré.

// Fragment Shader pour le shadow mapping
in vec4 vShadowCoord;
uniform sampler2D uShadowMap;

float calcShadow(vec4 coord) {
    vec3 uvw = coord.xyz / coord.w;
    float depth = texture(uShadowMap, uvw.xy).r;
    return (uvw.z > depth + 0.005) ? 0.3 : 1.0;
}

Performances du rendu hors écran

Offscreen Rendering ajoute des passes GPU supplémentaires, ce qui augmente la charge de calcul globale et la consommation d'énergie. Dans le développement mobile, c'est particulièrement critique : chaque changement de FBO nécessite un vidage de pipeline et du temps supplémentaire.

Facteurs de performance

• Nombre de passes — chaque passe supplémentaire rend toute la scène, doublant le nombre de sommets et de fragments traités.
• Résolution de la texture hors écran — choisir une résolution trop élevée augmente la charge de la bande passante mémoire.
• Changement de FBO — les changements fréquents d'objet framebuffer provoquent des blocages de pipeline et réduisent l'utilisation du GPU.

Optimisation du rendu hors écran

Pour les appareils mobiles, il est recommandé : d'utiliser un renderbuffer au lieu d'une texture si la lecture du résultat n'est pas nécessaire (passe de profondeur uniquement) ; de choisir la résolution minimale nécessaire pour les textures hors écran ; de fusionner les passes lorsque c'est possible avec MRT (Multiple Render Targets).

Exemples de code Offscreen Rendering

Offscreen Rendering sur différentes plateformes est implémenté via leurs propres API. Voyons des exemples pour OpenGL ES et Apple Metal.

Exemple avec OpenGL ES 3.0 : rendu dans une texture

// Configuration FBO et rendu de scène vers texture
glBindFramebuffer(GL_FRAMEBUFFER, fbo);
glViewport(0, 0, texWidth, texHeight);
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glUseProgram(offscreenProgram);
glBindVertexArray(sceneVAO);
glDrawElements(GL_TRIANGLES, indexCount, GL_UNSIGNED_SHORT, 0);
// Retour au framebuffer par défaut
glBindFramebuffer(GL_FRAMEBUFFER, 0);

Exemple avec Metal (iOS)

// Metal : passe de rendu hors écran vers texture
MTLRenderPassDescriptor passDesc = [MTLRenderPassDescriptor renderPassDescriptor];
passDesc.colorAttachments[0].texture = offscreenTexture;
passDesc.colorAttachments[0].loadAction = MTLLoadActionClear;
passDesc.colorAttachments[0].clearColor =
    MTLClearColorMake(0.0, 0.0, 0.0, 0.0);

id<MTLCommandBuffer> cmdBuffer = [commandQueue commandBuffer];
id<MTLRenderCommandEncoder> enc =
    [cmdBuffer renderCommandEncoderWithDescriptor:passDesc];
[enc drawIndexedPrimitives:MTLPrimitiveTypeTriangle
             indexCount:indexCount
              indexType:MTLIndexTypeUInt16
            indexBuffer:indexBuffer
      indexBufferOffset:0];
[enc endEncoding];