A layer-by-layer breakdown of League of Legends' rendering process

The Riot Games Engineering Blog is frequently a goldmine for interesting breakdowns of the systems that power League of Legends, and a recent post from engineer Tony Albrecht explaining exactly how the game renders a single frame of in-game action is no exception.

This latest blog post is written to be accessible to developers and players that may not have intimate knowledge of the rendering process, but no matter your familiarity with rendering the post still contains an interesting look at how League of Legends renders scenes that simultaneously run smoothly across computers of varying power.

The current system combines 13 stages of information to create a single frame of an in-game scene. Altogether, a completed scene typically uses 200,000 triangles and renders 28 million pixels across 695 draw calls.

Starting first with the fog of war, the engine then renders shadows, static geometry, skinned meshes, outlines, grass, water, decals, special outlines, particles, post process effects, damage and health bars, and the HUD. For a game running at 60 FPS, that means this whole process happens in less than 16.66ms. 

As part of its recent sustainability initiative, a group of developers dubbed the Render Strike Team will soon be making improvements on League’s rendering engine, but this breakdown of the current system by Albrecht is intended to both explain how League currently operates and provide a basic foundation on which future blog posts about more technical changes to its rendering systems can build upon.

“There are parts of the renderer that are left over from older versions of League, and parts that never quite reached their potential. The Render Strike Team’s job is to take all of our rendering code and refactor it so that all rendering happens through the exact same interface,” explains Albrecht. “If we do our job well then you should notice no difference at all (except maybe a little speed up here and there).”

For a full breakdown of each of those steps, take a look at the Albrecht’s blog post A Trip Down the LoL Graphics Pipeline over on the Riot Games Engineering Blog.