Offscreen Rendering: какво е, техники и приложение в приложенията

Какво е Offscreen Rendering?

Offscreen Rendering — е метод за рендиране на графично съдържание в междинен буфер в видео паметта, а не в основния 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 за извънекранно рендиране (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. Сенката се създава в два прохода: първо сцената се рендира от гледната точка на източника на светлина в depth текстура (offscreen), след това при основното рендиране всяка фрагмент се сравнява с тази depth карта, за да се определи дали е в сенка.

Процес на генериране на сенки

Първи проход: камерата се поставя в позицията на източника на светлина, сцената се рендира в offscreen буфер, като се записва само дълбочината (depth) в текстурата. Втори проход: основно рендиране с проверка на всяка фрагмент — ако нейният дълбочина е по-голяма от стойността в 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 flush) и допълнително време.

Фактори на производителността

• Брой проходи — всяка допълнителна проход рендира цялата сцена, удвоявайки броя на обработваните върхове и фрагменти.
• Резолюция на offscreen текстурата — изборът на търде висока резолюция увеличава натоварването върху пропускателната способност на паметта.
• Преключване на FBO — честото сменяне на framebuffer обекта причинява спиране на тръбопровода и намалява използването на GPU.

Оптимизация на offscreen rendering

За мобилни устройства се препоръчва: използвайте renderbuffer вместо текстура, ако не се изисква четене на резултата (само depth проход); изберете минимално необходимата резолюция за 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];