How Youku Achieves 60fps Danmaku Rendering on Mobile: Architecture and Performance Tricks

Youku's high‑performance danmaku rendering engine aims to deliver smooth, real‑time overlay comments (danmaku) across all platforms, supporting text, emoji, static images, APNG animations, 3D meshes, and special effects such as rhythm, fire, penetrating, and flowing‑light danmaku.

Background and Value

Danmaku originated as a military term describing dense fire covering an area; today it refers to scrolling subtitle‑like comments over video. For users, danmaku provides a free, interactive space to comment in sync with the storyline, reducing loneliness and increasing engagement. For products, danmaku adds community attributes, improves stickiness, and serves as a valuable real‑time feedback channel.

Basic Performance Requirements

Render frame rate must exceed 40 fps to avoid visible stutter.

Frame intervals must be uniform; large variance (e.g., 10 ms vs 30 ms) causes perceptible jitter.

Power consumption must stay low to prevent device heating and rapid battery drain.

Industry Landscape

Popular open‑source solutions include Android's DanmakuFlameMaster ("烈焰弹幕使") and similar iOS libraries, which many vendors customize for commercial use. Their typical pipeline consists of:

R2LDanmaku – encapsulates all information of a single right‑to‑left danmaku (text, images, coordinates, style).

DanmakuView – custom view that hosts the rendering container.

DrawHandler – asynchronous message controller that drives display logic.

CacheManagingDrawTask & DrawingCacheHolder – background thread that converts resources to bitmap caches.

DanmakuRenderer – measures, layouts, and draws cached bitmaps onto the view.

Displayer – holds the Canvas and performs the final on‑screen draw.

These pipelines split work across a UI thread and a background cache thread, but still encounter bottlenecks when CPU load spikes.

Common Pain Points

Stutter caused by insufficient performance and uneven frame intervals, noticeable when frame rate drops below 40 fps.

High power consumption leading to device heating.

GPU Rendering Process

To achieve higher efficiency, Youku leverages GPU APIs (OpenGL, Vulkan, Metal) instead of pure Canvas. The process is simplified into three steps:

Resource Preparation : Convert text, images, and animations into bitmap textures, then upload them to the GPU.

Data Interaction : Compile shaders, upload vertex data, and bind textures.

GPU Rendering : Set viewport, bind buffers/textures, and issue draw calls (e.g., glDrawElements) to render and present frames.

Youku Engine Architecture

The engine is organized into four layers plus common modules:

Integration Layer : Android's OprBarrageView and iOS's OprBarrageLayer encapsulate danmaku operations and view containers, offering a single entry point for developers.

Worker Layer : Initializes OpenGL/Metal contexts, handles resource parsing, bitmap‑to‑texture uploads, and manages danmaku CRUD operations.

Render Layer : Dedicated rendering thread runs a timer (typically 60 fps) to update positions, textures, and issue draw calls.

Protocol Layer : Wraps platform‑specific graphics APIs (OpenGL ES, Metal) for cross‑platform compatibility.

Common Modules : opr_platform (JNI, DisplayLink), UI controls for text/image/apng, and core utilities (mutex, thread, timer).

Danmaku Rendering Flow

Insert Operation : The integration API forwards a request to the worker thread, which creates textures, uploads them to the GPU, initializes shader programs, computes vertex data, and inserts the node into the scene graph.

Rendering Operation (driven by a 60 fps timer):

BeginFrame : Acquire shared EGL/Metal context, set viewport, update vertex/texture data for all visible nodes, and sort nodes by Z‑order.

Draw : Iterate the command queue, issue draw calls to the GPU.

EndFrame : Swap buffers (e.g., eglSwapBuffers) to present the frame.

Performance Boost Techniques

The engine adopts several optimizations:

Parallel Rendering : Uses a shared EGL/Metal context across a worker thread and a render thread, effectively separating heavy CPU work from GPU drawing. Tests show >60% frame‑rate improvement.

Pre‑loading & Caching : Parses and uploads static resources (especially APNG sequences) ahead of time to avoid runtime stalls.

Deferred Submission : Batches GPU program parameter updates to reduce CPU‑GPU synchronization overhead.

Shared Rendering Units : Reuses programs, shaders, textures, and vertex buffers whenever possible.

Batch Removal : Marks invisible nodes and removes them in bulk on the render thread.

Draw Call Reduction : Merges draw calls to minimize GPU state changes.

Engine‑Level Optimizations : Native implementation, smart pointers, efficient hash‑map traversal, fine‑grained locking, and other low‑level code improvements.

Engine Benefits

Stable frame rate around 60 fps.

Consistent frame interval ~16 ms, eliminating jitter.

Most work runs on GPU, resulting in low CPU power draw and minimal battery impact.

Stress tests: Android (Redmi K20 Pro) sustains 1,200 concurrent danmaku; iPhone 8 Plus sustains 1,600, far exceeding typical screen capacity.

Innovative Effects Enabled

Thanks to the engine's performance headroom, Youku supports novel interactive danmaku styles such as:

Rhythm Danmaku : Generates auxiliary danmaku of the same text in varying colors that move in sync with audio volume, creating a vibrant, music‑responsive visual.

Fire Danmaku : Displays a central "fire" glyph with surrounding danmaku that change color and shake, delivering a dramatic impact during high‑energy video moments.

Future Outlook

Building on the current engine, Youku plans to continue optimizing the pipeline and adding new danmaku effects, further enriching user interaction and experience.