Qt5 + Distance Field Effects - Nokia N950

Aug 24, 2011

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!

Source The Blog

Leave a Reply

Your email address will not be published.


About us

IoT Gadgets is dedicated to bring you all the Internet of Things IoT news that pertains to gadgets. Simple. We love for you to join us on this journey.

Contact us: [email protected]


linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram