How fast a GPU do you need for your user interface?

Graphical user interfaces (GUIs) are common across all walks of life, from your smartphones to your TVs and even in your cars. Over the past decade their complexity has evolved, moving from a simple background with basic icons into beautiful device differentiators, with 3D elements and micro-interactions that enhance the experience: shifting the perception when a phone tilts, or providing an animation upon hitting a button. Much of this processing is handled by the device’s GPU.

If you want to provide a rich and responsive graphical user interface to your consumers, you need to build the right GPU into your system. This guide will help you understand how powerful a GPU your system needs. 

Step 1: Calculating your required fillrate 

#1 What is the resolution of your screen? 

To understand what level of performance you need from a GPU, you first need to understand how many pixels there are on the screen you are targeting. The higher resolution the screen, the more pixels it contains and the more pixel processing the GPU will need to do. The differences are not insubstantial – an 8k screen has over 40 times more pixels than a standard HD screen. For specific devices: 

• Digital TVs are now predominantly 4K 

• Smartphones have narrow, dense resolutions with pixel counts typically on par with or higher than Full HD screens   

• Smartwatches have tiny screens with about a quarter of the pixels of a standard HD screen 

• The screens used in car infotainment units and cockpits vary massively; pillar-to-pillar displays can be 8K, but most cars typically have HD screens. 

#2 How many layers does your GUI have? 

Every GUI consists of multiple layers, such as the background, the program icons, the pointer. The GPU needs to process each of these to work out what to render to the display.  A typical GUI has about six layers and that’s what we’ll use for our calculations – if your GUI has more layers, you’ll need to adjust the calculations accordingly and plan for a GPU with a higher fillrate (and vice versa if your GUI is simpler). 

#3 What is your desired frame rate? 

User interfaces need to be responsive – whether on a phone or interacting with a TV, consumers don’t tolerate a lag when moving from application to application. In cars in particular, a slow user interface can impact vehicle safety as it draws the driver’s attention away from the road.  60 frames per second (fps) is an acceptable rate for a responsive user interface, while the smoothest GUIs target a frame rate of 120fps to completely remove any user frustration. 

Results 

By multiplying these three measures together we can understand the GPU fillrate requirements of our GUI – i.e. the total number of pixels that need to be processed per second: 

Fillrate requirement = Pixel Count x GUI Layers x Frame Rate 

As you can see, we are starting to look at huge numbers – over 11Bn pixels per second that need to be processed by the GPU! Thankfully, this is exactly the workload for which GPUs have been optimised. They are ultra-parallel processing machines that are designed to handle the huge numbers of pixels on today’s screens. 

Step 2: Calculating a GPU’s real-world fillrate  

#1 What is the pixel per clock metric of the GPU? 

The pixel per clock (ppc) metric of the GPU defines how many pixels the GPU can render to the screen in a single clock.  Most GPU providers share this information openly to help you work out which GPU is best for your target project. In Imagination we even put the number in the product name – the first number in our product configuration relates to the pixel per clock, so an IMG BXE-2-32 has the potential to render 2 pixels per clock. 

This might not sound like a lot, but thankfully these processors run at immensely high clock speeds. 

#2 Choose your frequency 

Measured in Hz, the clock speed (or frequency) of a GPU describes how fast its cores can execute instructions. The same GPU running at a higher clock will render graphics and process computations more quickly, leading to higher frame rates or the ability to handle a more complex GUI.  The trade-off of a higher clock speed is that the processor can consume more power and generate more heat, because it is doing more work in a shorter time. For specific devices:

• Digital TVs typically range from 300 - 800MHz (million Hz)
• Smartphones typically range from 500MHz – 1 GHz
• Smartwatches are lower powered and therefore clock lower at 100 – 400 MHz
• The infotainment unit of a car will clock at a similar rate to a smartphone; a GPU deployed in a higher performance controller like an ADAS SoC will clock at higher than 1GHz

Imagination GPUs can scale from low clock rates up to 1.6Ghz and beyond, but for our calculations below we’re choosing a middle-of-the-road clock speed of 550MHz. 

#3 Theoretical performance 

By multiplying the pixel per clock metric with the speed that the GPU is running at, you get an idea of how many pixels per second the GPU can handle. 

#4 Real-world performance  

However, no GPU runs at 100% utilization all the time. This is due to numerous factors, including bottlenecks from the CPU, limitations in application-level software efficiency, or memory latency.  System designers need to take this into account when choosing their GPU. Factoring in a GPU utilisation measure of 70% will provide you with a reasonable guide of real-world performance. 

Results 

By multiplying these three measures together we can understand the real-world fillrate performance of the GPU and then map this back against the fillrate requirement of the GUI. 

Real-world GPU fillrate = Pixel Per Clock x Frequency x Utilisation 

Final Thoughts 

This guide gives you a rough idea of how powerful a GPU you need to run your graphical user interface. However, there are many more factors to consider. Take for example the fact that even if a GUI has six layers, not every pixel in that layer needs to be calculated every frame – for example if there is clear overdraw, and the GPU understands this early on in the pipeline – then the overdrawn pixel information can be discarded and the GPU runs more efficiently. Another consideration is whether you need to process all the pixels on an 8K screen, or whether a GPU-based super resolution solution can scale the user interface just as effectively.

Finally, the GPU not only needs to have the performance you need, but also the feature set you need. If you want access to a broader colour range, for example, for smoother and more vibrant images with less banding you need a GPU that natively supports full 10-bit HDR (RGBA and YUV), like the IMG CXM.

If you’d like more information on any of the GPUs mentioned, including the IMG BXE, BXM, CXM, DXT or BXT series, or have specific technical requirements to discuss when considering a GPU, our experts are here to help. Get in touch with our team to find the ideal GPU configuration for your project.