Offscreen Rendering: τι είναι, τεχνικές και εφαρμογή σε εφαρμογές

Τι είναι το Offscreen Rendering;

Offscreen Rendering — είναι μια μέθοδος απόδοσης γραφικού περιεχομένου σε ένα ενδιάμεσο buffer στην μνήμη βίντεο, και όχι στο κύριο framebuffer που εμφανίζεται στην οθόνη. Το αποτέλεσμα της εκτός οθόνης απόδοσης αποθηκεύεται σε μια υφή ή renderbuffer.

Ο κύριος σκοπός του offscreen rendering είναι η πολυδιαδρομική απόδοση (multi-pass rendering). Μια σύνθετη σκηνή χωρίζεται σε πολλά περάσματα: αρχικά η σκηνή αποδίδεται σε μια υφή (offscreen), στη συνέχεια αυτή η υφή χρησιμοποιείται ως είσοδος για το επόμενο πέρασμα, και ούτω καθεξής μέχρι την λήψη της τελικής εικόνας. Αυτή η προσέγγιση επιτρέπει εφερμογές που είναι αδύνατες σε ένα μόνο πέρασμα.

Framebuffer Object (FBO)

Ο κλειδί μηχανισμός της εκτός οθόνης απόδοσης στο OpenGL ES είναι το Framebuffer Object (FBO). Το FBO είναι ένα δοχείο στο οποίο μπορούν να προσαρτηθούν εικόνες υφής ή αντικείμενα renderbuffer. Μετά τη σύνδεση του FBO, όλες οι επόμενες εντολές απόδοσης κατευθύνονται προς την συνδεδεμένη υφή, και όχι στην οθόνη.

Πώς λειτουργεί το Offscreen Rendering;

Offscreen Rendering υλοποιείται μέσω της δημιουργίας ενός ξεχωριστού αντικειμένου framebuffer, της προσάρτησης μιας υφής ή renderbuffer σε αυτό, της εναλλαγής του περιεχομένου απόδοσης σε αυτό το FBO και της εκτέλεσης εντολών σχεδίασης. Μετά το πέρασμα, το περιεχόμενο επιστρέφει στο κύριο framebuffer.

Τυπικός κύκλος offscreen rendering

Η διαδικασία αποτελείται από τρία βήματα: δημιουργία FBO και προσάρτηση υφής — απόδοση σκηνής σε offscreen υφή — χρήση της ληφθείσας υφής στο επόμενο πέρασμα. Το GL_COLOR_ATTACHMENT0 καθορίζει σε ποια υφή χρώματος θα γίνει η απόδοση.

// Δημιουργία FBO για offscreen rendering (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);

Τεχνικές εκτός οθόνης απόδοσης

Offscreen Rendering χρησιμοποιείται για μια ευρεία γαμμά γραφικών εφερμογών. Κάθε τεχνική απαιτεί ένα ή πολλά εκτός οθόνης περάσματα και συγεκριμενη διαμόρφωση FBO.

Render-to-Texture (RTT)

Η βασική τεχνική κατά την οποία το αποτέλεσμα της απόδοσης αποθηκεύεται σε μια υφή για μελλοντική χρήση. Το Render-to-Texture χρησιμοποιείται για τη δημιουργία μικρών χαρτών, υφή δυναμικών αντικειμένων και προεπικοποίησης σύνθετων υλικών.

Πολυδιαδρομική απόδοση (Multi-pass)

Σύνθετα εφερμογές (HDR, bloom, βάθος πεδίου) απαιτούν πολλά διαδοχικά περάσματα. Κάθε πέρασμα αποδίδει τη σκηνή σε μια offscreen υφή, εφαρμόζει ένα φίλτρο και μεταφέρει το αποτέλεσμα στο επόμενο πέρασμα. Αυτή η προσέγγιση επιτρέπει τη συσσώρευση εφερμογών χωρίς απώλεια ποιότητας της τελικής εικόνας.

Χάρτες σκιών (Shadow Mapping)

Shadow Mapping — ένα κλασικό παράδειγμα χρήσης offscreen rendering. Η σκιά δημιουργείται σε δύο περάσματα: αρχικά η σκηνή αποδίδεται από τη σκοπιά της πηγής φωτός σε μια υφή βάθους (offscreen), στη συνέχεια κατά την κύρια απόδοση κάθε τμήμα συγκρίνεται με αυτόν τον χάρτη βάθους για να εξακριβωθεί αν βρίσκεται σε σκιά.

Διαδικασία δημιουργίας σκιών

Πρώτο πέρασμα: η κάμερα τοποθετείται στη θέση της πηγής φωτός, η σκηνή αποδίδεται στο offscreen buffer, γράφοντας μόνο το βάθος (depth) στην υφή. Δεύτερο πέρασμα: κύρια απόδοση με έλεγχο κάθε τμήματος — αν το βάθος του είναι μεγαλύτερο από την τιμή στον χάρτη βάθους, το τμήμα σκιάζεται.

// Fragment Shader για χάρτες σκιών
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;
}

Απόδοση offscreen rendering

Offscreen Rendering προσθέτει επιπλέον διαδρομές GPU, αυξάνοντας το συνολικό υπολογιστικό φορτίο και την κατανάλωση ενέργειας. Στην κινητή ανάπτυξη, αυτό είναι ιδιαίτερα κρίσιμο: κάθε εναλλαγή FBO απαιτεί εκκενωτικό pipeline (pipeline flush) και επιπλέον χρόνο.

Παράγοντες απόδοσης

• Αριθμός διαδρομών — κάθε επιπλέον διάδρομη αποδίδει ολόκληρη τη σκηνή, διπλάζοντας τον αριθμό των κορυφών και τμημάτων που επεξεργάζονται.
• Ανάλυση offscreen υφής — η επιλογή πολύ υψηλής ανάλυσης αυξάνει το φορτίο στο εύρος ζώνης μνήμης.
• Εναλλαγή FBO — η συχνή αλλαγή του αντικειμένου framebuffer προκαλεί στάση pipeline και μειώνει τη χρησιμοποίηση της GPU.

Βελτιστοποίηση offscreen rendering

Για κινητές συσκευές συνιστάται: χρήση renderbuffer αντί για υφή εάν δεν απαιτείται η ανάγνωση του αποτελέσματος (διάδρομη μόνο βάθους)η επιλογή της ελάχιστης απαραίτητης ανάλυσης για offscreen υφέςη συνδυασμός διαδρομών όπου είναι δυνατός μέσω MRT (Multiple Render Targets).

Παραδείγματα κώδικα Offscreen Rendering

Offscreen Rendering σε διαφορετικές πλατφόρμες υλοποιείται μέσω ιδίων API. Ας εξετάσουμε παραδείγματα για OpenGL ES και Apple Metal.

Παράδειγμα σε OpenGL ES 3.0: απόδοση σε υφή

// Ρύθμιση FBO και απόδοση σκηνής σε υφή
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);
// Επιστροφή στο προκαθορισμένο framebuffer
glBindFramebuffer(GL_FRAMEBUFFER, 0);

Παράδειγμα σε Metal (iOS)

// Metal: offscreen διάδρομη απόδοσης σε υφή
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];