Yoann Lopes blogged recently about Text Rendering in the QML Scene Graph using distance field alpha testing. This technique brings smoothly scalable fonts with fast OpenGL rendering to Qt5.

Distance field is of course not limited for just fonts (although they are the most usual use-case), same technique can be used also with suitable images. Here is a video of an example application running on PC and N950 which demonstrates the effect:



As you can see, the original image becomes quite pixelated when zooming in, which is expected as image is only 256x160 pixels (smiley 64x64 pixels). But enabling smoothing with distance field shader makes it very scalable with nice anti-aliasing, outline and transparency. As the pixmap required for this is so small, GPU / fragment shader has less to process leading to better performance. Like with fonts, adding effects such as outline, smoothing, glow and shadow can be implemented very effectively.

This application is under 300 lines of QML with a GLSL shader, including slider and toggle button components. So if you have Qt5 built up and want to give it a try, source codes are available from here. Creative usage ideas and astonishing shaders are welcomed!