Offscreen Rendering: apa itu, teknik dan penerapan dalam aplikasi

Apa itu Offscreen Rendering?

Offscreen Rendering — adalah metode rendering konten grafis ke buffer perantara di memori video, bukan ke buffer bingkai utama (framebuffer) yang ditampilkan di layar. Hasil rendering di luar layar disimpan dalam tekstur atau renderbuffer.

Tujuan utama offscreen rendering adalah rendering multi-lintasan (multi-pass rendering). Adegan kompleks dibagi menjadi beberapa lintasan: pertama adegan dirender ke tekstur (offscreen), kemudian tekstur ini digunakan sebagai data masukan untuk lintasan berikutnya, dan seterusnya hingga diperoleh gambar akhir. Pendekatan ini memungkinkan efek yang tidak mungkin dicapai dalam satu lintasan.

Framebuffer Object (FBO)

Mekanisme kunci rendering di luar layar di OpenGL ES adalah Framebuffer Object (FBO). FBO adalah wadah yang dapat ditempeli gambar tekstur atau objek renderbuffer. Setelah FBO dipasang, semua perintah rendering selanjutnya diarahkan ke tekstur yang terpasang, bukan ke layar.

Bagaimana cara kerja Offscreen Rendering?

Offscreen Rendering diimplementasikan dengan membuat objek framebuffer terpisah, menempelkan tekstur atau renderbuffer ke objek tersebut, mengalihkan konteks rendering ke FBO ini, dan menjalankan perintah menggambar. Setelah lintasan selesai, konteks dialihkan kembali ke framebuffer utama.

Siklus tipikal offscreen rendering

Proses terdiri dari tiga langkah: membuat FBO dan menempelkan tekstur — merender adegan ke tekstur offscreen — menggunakan tekstur yang diperoleh di lintasan berikutnya. GL_COLOR_ATTACHMENT0 menentukan ke tekstur warna mana rendering akan dilakukan.

// Membuat FBO untuk 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);

Teknik rendering di luar layar

Offscreen Rendering digunakan untuk berbagai efek grafis. Setiap teknik memerlukan satu atau beberapa lintasan di luar layar dan konfigurasi FBO tertentu.

Render-to-Texture (RTT)

Teknik dasar di mana hasil rendering disimpan dalam tekstur untuk penggunaan selanjutnya. Render-to-Texture digunakan untuk membuat peta mini, tekstur objek dinamis, dan visualisasi awal material kompleks.

Rendering multi-lintasan (Multi-pass)

Efek kompleks (HDR, bloom, depth of field) memerlukan beberapa lintasan berurutan. Setiap lintasan merender adegan ke tekstur offscreen, menerapkan filter, dan meneruskan hasilnya ke lintasan berikutnya. Pendekatan ini memungkinkan akumulasi efek tanpa kehilangan kualitas gambar akhir.

Peta bayangan (Shadow Mapping)

Shadow Mapping — contoh klasik penggunaan offscreen rendering. Bayangan dibuat dalam dua lintasan: pertama adegan dirender dari sudut pandang sumber cahaya ke tekstur kedalaman (offscreen), kemudian saat rendering utama setiap fragmen dibandingkan dengan peta kedalaman ini untuk menentukan apakah fragmen berada dalam bayangan.

Proses pembuatan bayangan

Lintasan pertama: kamera ditempatkan di posisi sumber cahaya, adegan dirender ke buffer offscreen, hanya menulis kedalaman (depth) ke tekstur. Lintasan kedua: rendering utama dengan pemeriksaan setiap fragmen — jika kedalamannya lebih besar dari nilai di peta kedalaman, fragmen menjadi gelap.

// Fragment Shader untuk pemetaan bayangan
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;
}

Kinerja offscreen rendering

Offscreen Rendering menambahkan lintasan GPU tambahan, yang meningkatkan beban komputasi total dan konsumsi daya. Dalam pengembangan mobile, ini sangat kritis: setiap pergantian FBO memerlukan penyetelan ulang pipeline (pipeline flush) dan waktu tambahan.

Faktor kinerja

• Jumlah lintasan — setiap lintasan tambahan merender seluruh adegan, menggandakan jumlah verteks dan fragmen yang diproses.
• Resolusi tekstur offscreen — memilih resolusi terlalu tinggi meningkatkan beban pada bandwidth memori.
• Pergantian FBO — perubahan objek framebuffer yang sering menyebabkan pipeline stall dan mengurangi pemanfaatan GPU.

Optimasi offscreen rendering

Untuk perangkat mobile disarankan: gunakan renderbuffer sebagai pengganti tekstur jika pembacaan hasil tidak diperlukan (lintasan hanya kedalaman); pilih resolusi minimum yang diperlukan untuk tekstur offscreen; gabungkan lintasan jika memungkinkan melalui MRT (Multiple Render Targets).

Contoh kode Offscreen Rendering

Offscreen Rendering di platform yang berbeda diimplementasikan melalui API masing-masing. Mari kita lihat contoh untuk OpenGL ES dan Apple Metal.

Contoh pada OpenGL ES 3.0: rendering ke tekstur

// Pengaturan FBO dan rendering adegan ke tekstur
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);
// Kembali ke framebuffer default
glBindFramebuffer(GL_FRAMEBUFFER, 0);

Contoh pada Metal (iOS)

// Metal: lintasan render offscreen ke tekstur
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];