Offscreen Rendering: bu nima, texnikalar va ilovalarda qo'llanilishi

Offscreen Rendering nima?

Offscreen Rendering — grafik tarkibni asosiy kadr buferiga (framebuffer) emas, video xotirada oraliq buferga renderlash usulidir. Ekrandan tashqari renderlash natijasi tekstura yoki renderbuffer da saqlanadi.

Offscreen renderingning asosiy maqsadi ko'p o'tishli renderlash (multi-pass rendering) dir. Murakkab sahna bir necha o'tishga bo'linadi: avval sahna teksturaga (offscreen) renderlanadi, keyin bu tekstura keyingi o'tish uchun kirish ma'lumoti sifatida ishlatiladi va hokazo. Bunday yondashuv bir o'tishda mumkin bo'lmagan effektlarni amalga oshirish imkonini beradi.

Framebuffer Object (FBO)

OpenGL ES da ekrandan tashqari renderlashning asosiy mexanizmi Framebuffer Object (FBO) dir. FBO — tekstura tasvirlari yoki renderbuffer obyektlari biriktirilishi mumkin bo'lgan konteyner. FBO ulangandan so'ng, barcha keyingi renderlash buyruqlari ekranga emas, biriktirilgan teksturaga yo'naltiriladi.

Offscreen Rendering qanday ishlaydi?

Offscreen Rendering alohida framebuffer obyektini yaratish, unga tekstura yoki renderbuffer biriktirish, renderlash kontekstini ushbu FBO ga o'tkazish va chizish buyruqlarini bajarish orqali amalga oshiriladi. O'tish tugagach, kontekst asosiy framebuffer ga qaytariladi.

Offscreen renderingning odatiy sikli

Jarayon uch bosqichdan iborat: FBO yaratish va teksturani biriktirish — sahnani offscreen teksturasiga renderlash — olingan teksturani keyingi o'tishda ishlatish. GL_COLOR_ATTACHMENT0 renderlash qaysi rang teksturasiga amalga oshirilishini belgilaydi.

// Offscreen rendering uchun FBO yaratish (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);

Ekrandan tashqari renderlash texnikalari

Offscreen Rendering keng spektrli grafik effektlar uchun ishlatiladi. Har bir texnika bir yoki bir necha ekrandan tashqari o'tish va ma'lum FBO konfiguratsiyasini talab qiladi.

Render-to-Texture (RTT)

Renderlash natijasi keyingi foydalanish uchun teksturada saqlanadigan asosiy texnika. Render-to-Texture mini-xaritalar, dinamik obyekt teksturalari va murakkab materiallarni oldindan ko'rish uchun qo'llaniladi.

Ko'p o'tishli renderlash (Multi-pass)

Murakkab effektlar (HDR, bloom, depth of field) bir necha ketma-ket o'tishni talab qiladi. Har bir o'tish sahnani offscreen teksturasiga renderlaydi, filtr qo'llaydi va natijani keyingi o'tishga uzatadi. Bunday yondashuv yakuniy tasvir sifatini yo'qotmasdan effektlarni to'plash imkonini beradi.

Soya xaritalari (Shadow Mapping)

Shadow Mapping — offscreen renderingdan foydalanishning klassik namunasidir. Soya ikki o'tishda yaratiladi: avval sahna yorug'lik manbai nuqtai nazaridan depth teksturasiga (offscreen) renderlanadi, so'ngra asosiy renderlashda har bir fragment bu depth xaritasi bilan solishtirilib, soya ichida ekanligi aniqlanadi.

Soya yaratish jarayoni

Birinchi o'tish: kamera yorug'lik manbai holatiga qo'yiladi, sahna offscreen buferga renderlanadi va faqat chuqurlik (depth) teksturaga yoziladi. Ikkinchi o'tish: asosiy renderlash har bir fragmentni tekshiradi — agar uning chuqurligi depth xaritasidagi qiymatdan katta bo'lsa, fragment soyalanadi.

// Soya xaritasi uchun 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 ishlashi

Offscreen Rendering qo'shimcha GPU o'tishlarini qo'shadi, bu esa umumiy hisoblash yukini va energiya sarfini oshiradi. Mobil ishlab chiqishda bu ayniqsa muhim: har bir FBO o'zgarishi quvur liniyasini tozalashni (pipeline flush) va qo'shimcha vaqtni talab qiladi.

Ishlash omillari

• O'tish soni — har bir qo'shimcha o'tish butun sahnani renderlaydi, qayta ishlanadigan uchlar va fragmentlar sonini ikki baravar oshiradi.
• Offscreen teksturasining o'lchami — juda yuqori o'lchamni tanlash xotira o'tkazish qobiliyatiga yukni oshiradi.
• FBO o'zgarishi — framebuffer obyektini tez-tez o'zgartirish quvur liniyasi to'xtashiga va GPU dan foydalanishning kamayishiga olib keladi.

Offscreen rendering optimallashtirish

Mobil qurilmalar uchun tavsiya etiladi: agar natijani o'qish talab qilinmasa, tekstura o'rniga renderbuffer ishlating (faqat depth o'tishi); offscreen teksturalarining minimal zarur o'lchamini tanlang; iloji bo'lganda o'tishlarni MRT (Multiple Render Targets) orqali birlashtiring.

Offscreen Rendering kod namunalari

Offscreen Rendering turli platformalarda o'z API lari orqali amalga oshiriladi. OpenGL ES va Apple Metal uchun namunalarni ko'rib chiqamiz.

OpenGL ES 3.0 namunasi: teksturaga renderlash

// FBO sozlash va sahnani teksturaga renderlash
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);
// Standart framebuffer ga qaytish
glBindFramebuffer(GL_FRAMEBUFFER, 0);

Metal namunasi (iOS)

// Metal: offscreen render o'tishi teksturaga
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];