Improving Graphical Performance with Progressive Rendering

In this video and article, we discuss the challenge of balancing between graphical performance and visual quality in automotive user interfaces.


What is progressive rendering?

Progressive rendering is a rendering mode in which the program gradually updates small parts of the entire image, refining it from low quality to final result rather than focusing on one small part of the image at a time.

The progressive rendering process consists of controlled techniques that continuously update an entire visual display from low to high quality. This maximizes performance while retaining high visual quality.

Progressive Rendering in Rightware Kanzi

Visual quality in graphics is paramount in the automotive industry. Car makers want the digital displays in the cockpit to have the same brand quality as the rest of the vehicle. There is however another, even more important part in the equation, which is graphical performance. Especially in the instrument cluster it's essential for your user interface to maintain a high framerate (usually 60 frames per second) - due to both safety reasons and driver expectations. This is where progressive rendering comes in.


Every automotive hardware platform has its limits, and car makers tend to find that in order to increase performance on the hardware they've selected, they need to reduce the visual quality and vice versa. Quite often, the user interface ends up looking like a watered-down version of what the UI designers intended it to look.

Here at Rightware, we wanted to make it possible to maintain a high framerate without significantly reducing graphical quality. To explain what we did, let's first talk graphics:

Progressive Rendering in the Rightware Fast Cluster

In order to run graphics at 60 frames per second, you need hardware that can calculate and draw every on-screen element in under 16.6 milliseconds (1000ms / 60 = 16.6 ms ). If your hardware isn't fast enough and the update time goes over 16.6ms, the entire user interface will start to slow down, resulting in jerky movement and a bad user experience.

Example performance analysis on automotive hardware, with content types separated

Image: Example performance analysis on automotive hardware, with content types separated. Render time of each frame exceeds 16.6ms - performance will be affected.

With the new Progressive Rendering in Kanzi introduced in Kanzi 3.1.1, you can now assign different framerates for different content in your user interface. This means that you can distribute the rendering load of selected elements across multiple frames - rendering them a bit slower, but giving more system resources for your performance-critical elements.

With Progressive Rendering now enabled

Image: Progressive Rendering is now enabled. Rendering load for each frame has been reduced. Objects in green group will now render in 60 fps. Objects in blue group will render every second frame (30 fps).

How does Progressive Rendering work in Kanzi?

For more information on this feature, check out the documentation in Kanzi, as well as the dedicated tutorial. But in a nutshell:

  1. Decide on which content you want to use Progressive Rendering for (your car model, media player, maps, entire pages, individual animations etc.)
  2. Divide your content into a few equal-size groups (similar graphical complexity) in Kanzi
  3. Create a Progressive Rendering render pass for each of your groups in Kanzi
  4. Voila.

Any questions? Ask usin the comments section, or contact us.

The Future of Automotive UX - Download presentation deck