Offscreen Rendering: co to jest, techniki i zastosowanie w aplikacjach

Co to jest Offscreen Rendering?

Offscreen Rendering — to metoda renderowania treści graficznej do pośredniego bufora w pamięci wideo, a nie do głównego bufora ramki (framebuffer), który jest wyświetlany na ekranie. Wynik renderowania pozaekranowego jest zapisywany do tekstury lub renderbuffer.

Głównym celem offscreen rendering jest renderowanie wieloprzebiegowe (multi-pass rendering). Złożona scena jest dzielona na kilka przepustek: najpierw scena jest renderowana do tekstury (offscreen), następnie ta tekstura jest używana jako dane wejściowe dla kolejnej przepustki, i tak aż do uzyskania końcowego obrazu. Takie podejście pozwala zrealizować efekty niemożliwe do osiągnięcia w jednej przepustce.

Framebuffer Object (FBO)

Kluczowym mechanizmem renderowania pozaekranowego w OpenGL ES jest Framebuffer Object (FBO). FBO to kontener, do którego można dołączyć obrazy tekstur lub obiekty renderbuffer. Po podłączeniu FBO wszystkie kolejne polecenia renderowania są kierowane do podłączonej tekstury, a nie na ekran.

Jak działa Offscreen Rendering?

Offscreen Rendering jest realizowany poprzez utworzenie osobnego obiektu framebuffer, podłączenie do niego tekstury lub renderbuffer, przełączenie kontekstu renderowania na ten FBO i wykonanie poleceń rysowania. Po zakończeniu przepustki kontekst jest przełączany z powrotem na główny framebuffer.

Typowy cykl offscreen rendering

Proces składa się z trzech kroków: utworzenie FBO i podłączenie tekstury — renderowanie sceny do tekstury offscreen — wykorzystanie uzyskanej tekstury w następnej przepustce. GL_COLOR_ATTACHMENT0 określa, do której tekstury kolorowej będzie wykonywane renderowanie.

// Tworzenie FBO do renderowania pozaekranowego (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);

Techniki renderowania pozaekranowego

Offscreen Rendering jest używany do szerokiego spektrum efektów graficznych. Każda technika wymaga jednej lub kilku przepustek pozaekranowych i określonej konfiguracji FBO.

Render-to-Texture (RTT)

Podstawowa technika, w której wynik renderowania jest zapisywany do tekstury w celu późniejszego użycia. Render-to-Texture jest stosowany do tworzenia minimap, tekstur dynamicznych obiektów i wstępnej wizualizacji złożonych materiałów.

Renderowanie wieloprzebiegowe (Multi-pass)

Złożone efekty (HDR, bloom, głębia ostrości) wymagają kilku następujących po sobie przepustek. Każda przepustka renderuje scenę do tekstury offscreen, stosuje filtr i przekazuje wynik do następnej przepustki. Takie podejście pozwala kumulować efekty bez utraty jakości końcowego obrazu.

Mapowanie cieni (Shadow Mapping)

Shadow Mapping — klasyczny przykład użycia offscreen rendering. Cień jest tworzony w dwóch przepustkach: najpierw scena jest renderowana z punktu widzenia źródła światła do tekstury głębi (offscreen), następnie podczas głównego renderowania każdy fragment jest porównywany z tą mapą głębi w celu określenia, czy znajduje się w cieniu.

Proces generowania cieni

Pierwsza przepustka: kamera jest ustawiana w pozycji źródła światła, scena jest renderowana do bufora offscreen, zapisując tylko głębię (depth) do tekstury. Druga przepustka: główne renderowanie ze sprawdzaniem każdego fragmentu — jeśli jego głębia jest większa niż wartość w mapie głębi, fragment jest zacieniany.

// Shader fragmentów dla mapowania cieni
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;
}

Wydajność offscreen rendering

Offscreen Rendering dodaje dodatkowe przepustki GPU, co zwiększa całkowite obciążenie obliczeniowe i zużycie energii. W programowaniu mobilnym jest to szczególnie krytyczne: każde przełączenie FBO wymaga resetu potoku (pipeline flush) i dodatkowego czasu.

Czynniki wydajności

• Liczba przepustek — każda dodatkowa przepustka renderuje całą scenę, podwajając liczbę przetwarzanych wierzchołków i fragmentów.
• Rozdzielczość tekstury offscreen — wybór zbyt wysokiej rozdzielczości zwiększa obciążenie przepustowości pamięci.
• Przełączanie FBO — częsta zmiana obiektu framebuffer powoduje zatrzymanie potoku i obniża wykorzystanie GPU.

Optymalizacja offscreen rendering

W przypadku urządzeń mobilnych zaleca się: używanie renderbuffer zamiast tekstury, jeśli nie jest wymagane odczytywanie wyniku (przepustka tylko głębi); wybór minimalnie koniecznej rozdzielczości tekstur offscreen; łączenie przepustek, gdzie to możliwe, poprzez MRT (Multiple Render Targets).

Przykłady kodu Offscreen Rendering

Offscreen Rendering na różnych platformach jest realizowany poprzez własne API. Rozważmy przykłady dla OpenGL ES i Apple Metal.

Przykład na OpenGL ES 3.0: renderowanie do tekstury

// Konfiguracja FBO i renderowanie sceny do tekstury
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);
// Przełączanie z powrotem na domyślny bufor ramki
glBindFramebuffer(GL_FRAMEBUFFER, 0);

Przykład na Metal (iOS)

// Metal: przepustka renderowania pozaekranowego do tekstury
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];