Offscreen Rendering: mi ez, technikák és alkalmazás az alkalmazásokban

Mi az Offscreen Rendering?

Offscreen Rendering — egy módszer grafikus tartalom renderelésére egy köztes pufferbe a videómemóriában, nem a fő képkeret pufferbe (framebuffer), amely a képernyőn jelenik meg. A képernyőn kívüli renderelés eredménye egy textúrában vagy renderbuffer-ben tárolódik.

Az offscreen rendering fő célja a többmenetes renderelés (multi-pass rendering). Az összetett jelenet több menetre van bontva: először a jelenet egy textúrába (offscreen) kerül renderelésre, majd ez a textúra bemeneti adatként szolgál a következő menethez, és így tovább a végleges képig. Ez a megközelítés lehetővé teszi olyan hatásokat, amelyek egyetlen menetben lehetetlenek.

Framebuffer Object (FBO)

A képernyőn kívüli renderelés kulcsmechanizmusa OpenGL ES-ben a Framebuffer Object (FBO). Az FBO egy konténer, amelyhez textúraképek vagy renderbuffer objektumok csatolhatók. Az FBO csatolása után az összes további renderelési parancs a csatolt textúrára irányul, nem a képernyőre.

Hogyan működik az Offscreen Rendering?

Offscreen Rendering egy külön framebuffer objektum létrehozásával, egy textúra vagy renderbuffer csatolásával, a renderelési kontextus átkapcsolásával erre az FBO-ra és a rajzolási parancsok végrehajtásával valósul meg. A menet befejezése után a kontextus visszakapcsolódik a fő framebuffer-re.

Az offscreen rendering tipikus ciklusa

A folyamat három lépésből áll: FBO létrehozása és textúra csatolása — jelenet renderelése offscreen textúrába — a kapott textúra használata a következő menetben. GL_COLOR_ATTACHMENT0 határozza meg, hogy melyik szín textúrába történik a renderelés.

// FBO létrehozása offscreen rendereléshez (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);

Képernyőn kívüli renderelés technikái

Offscreen Rendering a grafikus hatások széles skálájához használatos. Minden technika egy vagy több képernyőn kívüli menetet és meghatározott FBO konfigurációt igényel.

Render-to-Texture (RTT)

Az alap technika, ahol a renderelés eredménye egy textúrában tárolódik későbbi felhasználásra. Render-to-Texture térképek, dinamikus objektum textúrák és összetett anyagok előzetes vizualizációjára szolgál.

Többmenetes renderelés (Multi-pass)

Az összetett hatások (HDR, bloom, mélységélesség) több egymást követő menetet igényelnek. Minden menet rendereli a jelenetet egy offscreen textúrába, alkalmaz egy szűrőt és továbbítja az eredményt a következő menetbe. Ez a megközelítés lehetővé teszi a hatások felhalmozását a végkép minőségének elvesztése nélkül.

Árnyéktérképek (Shadow Mapping)

Shadow Mapping — az offscreen rendering klasszikus példája. Az árnyék két menetben jön létre: először a jelenet a fényforrás szemszögéből egy mélységi textúrába (offscreen) kerül renderelésre, majd a fő renderelés során minden fragmens összehasonlításra kerül ezzel a mélységi térképpel annak meghatározására, hogy árnyékban van-e.

Árnyékgenerálási folyamat

Első menet: a kamera a fényforrás pozíciójába kerül, a jelenet az offscreen pufferbe renderelődik, csak a mélység (depth) íródik a textúrába. Második menet: fő renderelés minden fragmens ellenőrzésével — ha a mélysége nagyobb, mint a mélységi térkép értéke, a fragmens árnyékolásra kerül.

// Fragment Shader árnyéktérképezéshez
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 teljesítmény

Offscreen Rendering további GPU meneteket ad hozzá, ami növeli a teljes számítási terhelést és az energiafogyasztást. Mobil fejlesztésben ez különösen kritikus: minden FBO váltás pipeline öblítést (pipeline flush) és többletidőt igényel.

Teljesítmény tényezők

• Menetek száma — minden további menet rendereli a teljes jelenetet, megduplázva a feldolgozott csúcsok és fragmensek számát.
• Offscreen textúra felbontása — túl magas felbontás választása növeli a memóriasávszélesség terhelését.
• FBO váltás — a framebuffer objektum gyakori változtatása pipeline stall-t okoz és csökkenti a GPU kihasználtságot.

Offscreen rendering optimalizálása

Mobil eszközökhöz ajánlott: használjon renderbuffer-t textúra helyett, ha az eredmény olvasása nem szükséges (csak mélységi menet); válassza a minimálisan szükséges felbontást az offscreen textúrákhoz; vonja össze a meneteket ahol lehetséges MRT (Multiple Render Targets) segítségével.

Offscreen Rendering kód példák

Offscreen Rendering különböző platformokon saját API-k segítségével valósul meg. Nézzünk példákat OpenGL ES és Apple Metal rendszerekre.

Példa OpenGL ES 3.0-n: renderelés textúrába

// FBO beállítása és jelenet renderelése textúrába
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);
// Visszaváltás az alapértelmezett framebuffer-re
glBindFramebuffer(GL_FRAMEBUFFER, 0);

Példa Metal-on (iOS)

// Metal: offscreen render menet textúrába
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];