Off‑Screen Rendering Optimization for Car Navigation Maps Using Anti‑Aliasing FBO

The car‑version of AMap (AMAP AUTO) serves various automotive OEMs and device manufacturers. Because the hardware configurations of these B‑side users vary widely, the rendering engine faces strict performance requirements, especially when multiple screens or views (e.g., a main map and an eagle‑eye mini‑map) are rendered simultaneously.

Initially, the car version reused the mobile screen‑rendering mode, rendering the entire map each frame. In multi‑view scenarios the CPU load spiked dramatically; the eagle‑eye view caused a drop of about two frames per second.

Beyond conventional optimizations of rendering details, batch processing, and textures, a global optimization was needed. The team investigated off‑screen rendering (using Frame Buffer Objects, FBO) and proposed a method that applies off‑screen rendering to specific map views to improve performance.

Optimization Principle

In the OpenGL pipeline, geometry and textures are transformed and rasterized into a 2‑D pixel buffer called the frame buffer. By default, OpenGL draws into the window‑system‑provided default frame buffer (on‑screen rendering). Off‑screen rendering creates a separate buffer (FBO) that is not displayed directly, allowing the scene to be rendered off‑screen first.

Compared with on‑screen rendering, off‑screen rendering has higher cost in dynamic scenes because it requires creating a new buffer and switching contexts repeatedly. However, in stable scenes it can reuse a single texture, yielding significant performance gains.

The map state is divided into immersive (stable) and non‑immersive (dynamic) states. When the map is in the immersive state—common for eagle‑eye, large vector intersections, etc.—off‑screen rendering can be applied, dramatically reducing system overhead.

Engineering Practice

The optimization workflow integrates the off‑screen rendering technique into the navigation application. The core steps are:

Create an FBO with anti‑aliasing support.

Attach a multisample color renderbuffer and a multisample depth renderbuffer.

Check the completeness of the FBO.

Bind the FBO, clear buffers, set the viewport, and perform normal rendering commands (vertex buffers, textures, shaders, etc.).

Resolve the multisample FBO to a regular framebuffer for display.

Discard unnecessary buffers after rendering.

Sample OpenGL code (iOS) used to create and use the FBO:

GLuint sampleFramebuffer;
glGenFramebuffers(1, &sampleFramebuffer);
glBindFramebuffer(GL_FRAMEBUFFER, sampleFramebuffer);

GLuint sampleColorRenderbuffer, sampleDepthRenderbuffer;
glGenRenderbuffers(1, &sampleColorRenderbuffer);
glBindRenderbuffer(GL_RENDERBUFFER, sampleColorRenderbuffer);
glRenderbufferStorageMultisampleAPPLE(GL_RENDERBUFFER, 4, GL_RGBA8_OES, width, height);
glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, sampleColorRenderbuffer);

glGenRenderbuffers(1, &sampleDepthRenderbuffer);
glBindRenderbuffer(GL_RENDERBUFFER, sampleDepthRenderbuffer);
glRenderbufferStorageMultisampleAPPLE(GL_RENDERBUFFER, 4, GL_DEPTH_COMPONENT16, width, height);
glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_DEPTH_ATTACHMENT, GL_RENDERBUFFER, sampleDepthRenderbuffer);

GLenum status = glCheckFramebufferStatus(GL_FRAMEBUFFER);
if (status != GL_FRAMEBUFFER_COMPLETE) {
    return false;
}

// Rendering sequence
glBindFramebuffer(GL_FRAMEBUFFER, sampleFramebuffer);
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glViewport(0, 0, framebufferWidth, framebufferHeight);
// ... set up VBO/IBO, shaders, draw calls ...

// Resolve multisample FBO
glBindFramebuffer(GL_DRAW_FRAMEBUFFER_APPLE, resolveFrameBuffer);
glResolveMultisampleFramebufferAPPLE();
glBindFramebuffer(GL_READ_FRAMEBUFFER_APPLE, sampleFramebuffer);

// Discard step
glBindRenderbuffer(GL_RENDERBUFFER, colorRenderbuffer);
[context presentRenderbuffer:GL_RENDERBUFFER];

Performance results show that after applying the anti‑aliasing off‑screen rendering technique, the eagle‑eye view’s frame‑rate drop disappeared, and overall rendering time was reduced to near‑baseline levels. Flame‑graph comparisons before and after optimization illustrate the dramatic reduction in rendering cost.

While full‑screen anti‑aliasing consumes additional GPU memory and processing time, the case study demonstrates that the performance gains outweigh the overhead for the targeted map views.