Offscreen Rendering: ce este, tehnici și aplicare în aplicații

Ce este Offscreen Rendering?

Offscreen Rendering — este o metodă de randare a conținutului grafic într-un buffer intermediar în memoria video, nu în bufferul principal de cadru (framebuffer) care este afișat pe ecran. Rezultatul randării în afara ecranului este salvat într-o textură sau renderbuffer.

Scopul principal al offscreen rendering este randarea multi-trecere (multi-pass rendering). O scenă complexă este împărțită în mai multe treceri: mai întâi scena este randată într-o textură (offscreen), apoi această textură este utilizată ca date de intrare pentru următoarea trecere, și așa mai departe până la obținerea imaginii finale. O astfel de abordare permite realizarea efectelor imposibile într-o singură trecere.

Framebuffer Object (FBO)

Mecanismul cheie al randării în afara ecranului în OpenGL ES este Framebuffer Object (FBO). FBO este un container la care pot fi atașate imagini textură sau obiecte renderbuffer. După atașarea FBO, toate comenzile de randare ulterioare sunt direcționate către textura atașată, nu către ecran.

Cum funcționează Offscreen Rendering?

Offscreen Rendering se realizează prin crearea unui obiect framebuffer separat, atașarea unei texturi sau renderbuffer la acesta, comutarea contextului de randare la acest FBO și executarea comenzilor de desenare. După finalizarea trecerii, contextul este comutat înapoi la framebufferul principal.

Ciclul tipic al offscreen rendering

Procesul constă în trei pași: crearea FBO și atașarea texturii — randarea scenei în textura offscreen — utilizarea texturii obținute în următoarea trecere. GL_COLOR_ATTACHMENT0 determină în ce textură de culoare va fi efectuată randarea.

// Crearea unui FBO pentru randare în afara ecranului (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);

Tehnici de randare în afara ecranului

Offscreen Rendering este utilizat pentru o gamă largă de efecte grafice. Fiecare tehnică necesită una sau mai multe treceri în afara ecranului și o configurație specifică FBO.

Render-to-Texture (RTT)

Tehnica de bază în care rezultatul randării este salvat într-o textură pentru utilizare ulterioară. Render-to-Texture este utilizat pentru crearea mini-hărților, texturilor obiectelor dinamice și vizualizării prealabile a materialelor complexe.

Randare multi-trecere (Multi-pass)

Efectele complexe (HDR, bloom, adâncimea de câmp) necesită mai multe treceri succesive. Fiecare trecere randază scena într-o textură offscreen, aplică un filtru și transmite rezultatul următoarei treceri. O astfel de abordare permite acumularea efectelor fără pierderea calității imaginii finale.

Harta umbrelor (Shadow Mapping)

Shadow Mapping — un exemplu clasic de utilizare a offscreen rendering. Umbra este creată în două treceri: mai întâi scena este randată din punctul de vedere al sursei de lumină într-o textură de adâncime (offscreen), apoi în randarea principală fiecare fragment este comparat cu această hartă de adâncime pentru a determina dacă se află în umbră.

Procesul de generare a umbrelor

Prima trecere: camera este plasată în poziția sursei de lumină, scena este randată în bufferul offscreen, scriind doar adâncimea (depth) în textură. A doua trecere: randarea principală cu verificarea fiecărui fragment — dacă adâncimea sa este mai mare decât valoarea din harta de adâncime, fragmentul este umbrit.

// Fragment Shader pentru maparea umbrelor
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;
}

Performanța offscreen rendering

Offscreen Rendering adaugă treceri suplimentare GPU, ceea ce crește încărcarea computațională totală și consumul de energie. În dezvoltarea mobilă, acest lucru este deosebit de critic: fiecare comutare FBO necesită resetarea pipeline-ului (pipeline flush) și timp suplimentar.

Factori de performanță

• Numărul de treceri — fiecare trecere suplimentară randază întreaga scenă, dublând numărul de vârfuri și fragmente procesate.
• Rezoluția texturii offscreen — alegerea unei rezoluții prea mari crește încărcarea asupra lățimii de bandă a memoriei.
• Comutarea FBO — schimbarea frecventă a obiectului framebuffer cauzează oprirea pipeline-ului și reduce utilizarea GPU.

Optimizarea offscreen rendering

Pentru dispozitivele mobile se recomandă: utilizarea renderbuffer în loc de textură dacă nu este necesară citirea rezultatului (trecere doar de adâncime); alegerea rezoluției minim necesare pentru texturile offscreen; combinarea trecerilor acolo unde este posibil prin MRT (Multiple Render Targets).

Exemple de cod Offscreen Rendering

Offscreen Rendering pe diferite platforme se realizează prin API-uri proprii. Să analizăm exemple pentru OpenGL ES și Apple Metal.

Exemplu pe OpenGL ES 3.0: randare în textură

// Configurarea FBO și randarea scenei în textură
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);
// Revenirea la framebufferul implicit
glBindFramebuffer(GL_FRAMEBUFFER, 0);

Exemplu pe Metal (iOS)

// Metal: trecere de randare offscreen în textură
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];