Impeller - Flutter's rendering engine

What is Impeller?

Flutter has introduced a new rendering engine called Impeller. But what exactly is Impeller, and how does it work under the hood? In this article, I will walk you through the details to uncover the significance of Impeller in the world of Flutter.

The Need for Impeller

Until now, Flutter had been relying on Skia, a rendering engine not specifically designed for Flutter. Skia, with its broad range of rendering features for various devices, often lacked optimization for Flutter's specific needs. This is where Impeller comes into play – a renderer built from the ground up to cater to the rendering requirements of Flutter applications.

Understanding Renderers

For those unfamiliar with the term, a renderer is software responsible for translating UI code into the pixels visible on the screen. In Flutter, the tree of widgets is backed by a tree of render objects. These render objects contain instructions for laying out and painting the widgets. The engine, utilizing a renderer (either Impeller or Skia), draws these instructions onto a surface texture, which is essentially a grid of pixel values displayed on the screen.

Rendering Process with Impeller

Let me break down how Impeller renders graphics on the GPU so you can understand better:

1. Vertex Shader: The paths drawn by the display list are tessellated into sets of triangles. Each vertex is passed through a vertex shader, a piece of code executed on the graphics device, to position it correctly on the screen.

2. Rasterization: For each triangle, specific pixels inside it are determined through rasterization. Checks are then run to decide whether to compute a color for each pixel.

3. Fragment Shader: The pixels are passed through a fragment shader, another piece of code that computes a color based on the vertex shader's output. Flutter developers can even create custom shaders for unique visual effects.

4. Render Pipeline: The output colors are blended with the existing color. Impeller uses render pipelines, which are collections of shaders, to render the display list efficiently.

Impeller Architecture

Impeller's architecture is layered, with each layer utilizing the one below it to perform its tasks. Aiks, the top layer, is responsible for turning high-level commands from the display list into simpler drawing operations called entities. These entities, containing properties and GPU instructions, are then drawn using the hardware abstraction layer, which communicates with the GPU through standard graphics APIs.

Key Architecture Decisions

Impeller makes several key decisions to enhance performance and eliminate jank, take a look at the following:

1. Precompiled Shaders: Impeller avoids runtime shader compilation by using precompiled shaders, resulting in predictable frame times and eliminating shader compilation jank.

2. MSAA for Anti-Aliasing: Impeller employs Multisample Anti-Aliasing (MSAA) for efficient and high-quality anti-aliasing on all supported devices.

3. Efficient Clipping: Impeller optimizes clipping using a stencil buffer, ensuring fast and efficient rendering even for complex clip operations.

Impeller Scene

Impeller Scene is a proof of concept built on Impeller's hardware abstraction layer, allowing developers to create 3D scenes directly within Flutter. It offers a launchpad for more advanced rendering use cases, enabling developers to have more control over rendering in their Flutter applications.

Note: with Impeller now being the default renderer on iOS for the stable version of Flutter, it marks a significant milestone. The enhancements in rendering capabilities, control over shaders, and efficient performance make Impeller a crucial component for Flutter developers. Upgrade Flutter, try out Impeller, and witness the future of Flutter rendering.

To see Impeller in action, install G. Skinner's Wondrous app, which currently uses Impeller on iOS with upcoming Android support. Personally I am excited about the possibilities Impeller brings to the framework and I look forward to experiencing a creative rendering experiences I can build with it.

You may like:

Impeller - Flutter's rendering engine

Optimizing Flutter Layouts for Low-End Mobile Devices

Flutter SDK and FlutterFlow