Lyra: A Cross‑Platform GPU‑Accelerated UI Rendering Engine for PC Clients

Abstract: Good video content attracts users, and a better architecture and rendering technology can further improve user experience. To this end, a high‑efficiency cross‑platform rendering engine named Lyra has been developed for PC clients, aiming to provide smoother, lighter, and more visually appealing UI.

Background : The previous iQIYI PC client UI engine, QuiLib, was built on open‑source uilib/DuiLib and used DirectUI with a single‑threaded model. Over time, QuiLib showed several drawbacks: poor drawing performance (especially with alpha or rotation), redundant layout calculations, and choppy animations due to heavy main‑thread load. Additionally, QuiLib relied on Windows GDI, did not leverage 3D graphics APIs, and thus could not exploit GPU performance or support cross‑platform rendering.

Technical Introduction : To address these issues, Lyra adopts three main techniques:

3D Rendering – utilizes GPU to accelerate graphics.

Asynchronous Rendering – splits the rendering pipeline into distinct stages (logic, style changes, layout, command generation, command execution, layer composition, screen refresh) and assigns each stage to its own thread with an independent animation timeline.

Layered Rendering – creates separate rendering layers for frequently updated elements, allowing parallel processing and later composition.

Cross‑Platform and GPU Rendering Library : After evaluating several graphics libraries, Lyra chose Skia for its cross‑platform support, efficient primitive and text rendering, rich image format handling, and seamless 2D/3D backend switching.

Skia’s 3D & 2D backend enables Lyra to select the optimal rendering path based on the device configuration, optimizing layered windows and providing automatic fallback. However, Skia’s resource consumption requires additional customizations.

Asynchronous Rendering : Lyra separates UI interaction (main thread) from graphics rendering (Render thread). The rendering flow includes Event&Message, Style Change, Layout, Paint (command generation), Execute (command execution), Composition, and Screen Refresh. Paint and Execute are run in parallel, preventing long‑running commands from blocking user interaction and improving overall responsiveness.

The animation system uses a thread‑local timer, ensuring each thread drives its own animation timeline, reducing timer overhead and supporting complex 3D effects.

Layered Rendering : Only elements that need updating are rendered in dedicated layers. Lyra builds three trees: a Control tree (event handling), a RenderObject tree (mapped to Controls), and a RenderLayer/GraphicsLayer tree (mapped one‑to‑one). When an element rotates, new layers (e.g., RL‑Rotation) are created, and rendering commands are generated on the UI thread, then transferred to the Render thread for execution.

Composition : After the Render thread processes drawing commands, the GraphicsLayer drives the final composition and pushes the result to the screen.

Conclusion : Lyra introduces several breakthroughs for UI rendering on PC clients: 1) Cross‑platform 3D/GPU rendering; 2) Asynchronous, thread‑driven animation system; 3) Layered rendering that isolates heavy updates. The engine demonstrates how modern graphics techniques can significantly improve UI smoothness and responsiveness.