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 通过创建一个独立的框架缓冲对象，向其附加纹理或 renderbuffer，将渲染上下文切换到该 FBO，并执行绘图命令来实现。通过结束后，上下文切换回主框架缓冲区。

离屏渲染的典型循环

过程包括三个步骤：创建 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），然后在主渲染时，每个片段与该深度图进行比较，以确定它是否处于阴影中。

阴影生成过程

第一个通过：摄像机被置于光源位置，场景被渲染到 offscreen 缓冲区，只将深度（depth）写入纹理。第二个通过：主渲染检查每个片段——如果其深度大于深度图中的值，则该片段被 阴影覆盖。

// 用于阴影映射的片段算子
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 切换 —— 频繁更改框架缓冲对象会导致流水线停滢并降低 GPU 利用率。

离屏渲染优化

对于移动设备，建议：如果不需要读取结果，请使用 renderbuffer 代替纹理（仅深度通过）；为 offscreen 纹理选择最小必要的分辨率；尽可能通过 MRT（多渲染目标）合并通过。

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);
// 切换回默认框架缓冲区
glBindFramebuffer(GL_FRAMEBUFFER, 0);

Metal 示例（iOS）

// Metal：离屏渲染通过到纹理
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];