Sunday, October 14, 2012

Qt5 and normal mapping - reloaded

(This is part II of the normal mapping journey, check the part I first for details.)

So you have all now played with Qt5 NMapper tool, right? Goody, that means we have gained experience of normal mapping and created some perfectly tuned normal mapped textures. Now it's time to use these in a separate application.

Let's assume that you are working on a 2D QML application, but would want 3D-looking effect into some part(s) of the UI. To visualize, here's an example NMapCarousel demo application:

(Qt5 NMap Carousel, running on PC and on Raspberry Pi)

Here normal mapping is used to make the carousel icons more dynamic by applying lighting. To increase the 3D impression, there are also extra shadows reflected behind the icons.

To implement something similar, here's how to proceed:

  1. If not already, setup Qt5 to your PC/Mac/RPi or equivalent platform.
  2. Create normal maps of your graphic assets using Gimp, Blender, Photoshop etc. tool of your choice. Name the normal mapped image with extra "n" in the end, so images are something like "thing.png" and "thingn.png".
  3. Test your graphics with NMapper by copying these images into "images" folder and adding "thing" into imageFiles array property. Play with the light intensity, diffuse, switching x&y coordinates etc. If you are not happy with the results, jump back to step 2 to edit the images and iterate.
  4. Make your own application. Copy NMapEffect.qml and NMapLightSource.qml from NMapper, use your freshly made images, the lighting settings you tested earlier and implement rest of the UI.
  5. Profit! (Sorry that this took a bit more steps than normally... but on the positive side there is no unknown ???-step in the middle!)

Source codes of this demo are available from here. I'm waiting to see cool normal mapping uses!

PS: To learn shaders from the master, check out Andrew's!

Friday, October 12, 2012

Qt5 and normal mapping

This one has been on my "blog at some point" back burner for some time now...

'Normal mapping' is a graphics rendering technique used for faking the lighting conditions. In 3D software it is often used for bringing small bumps and dents of textures visible to achieve more realistic graphical appearance without using huge amount of polygons. Normal mapping is kinda advanced version of preceding 'Bump mapping'  technique. Where bump mapping uses just one channel for 'bumps', normal mapping uses 3-channel (RGB) bitmaps and can therefore contain more detailed normal vector information.

Normal mapping technique can also be used in 2D applications to get 3D'ish looking UI elements, which means it can be used also in normal non-Qt3D QML applications. Combining image textures with specifically made normal map textures using a suitable shader is all you need. And normal maps can be automatically created with Gimp, Blender, Photoshop etc. drawing tools, although for best results some tweaking may be required.

But enough about theoretical mumbling, here comes visuals:

(Qt5 NMapper tool, running on PC and on Raspberry Pi)

To experiment with normal mapping I implemented a simple Qt5 NMapper application. As seen from video, it can be used to play with different graphical assets, change lighting conditions, switch normal map x&y-coordinates etc. It also includes the essential 'cave mode' for wiggly fire light.. ;-)

Download NMapper application from here and try it on PC/Mac/RPi or equivalent platform with Qt5.

After this brief intro I'll make a follow-up post within few days about example usage. Have a hacking weekend everyone!

Friday, September 21, 2012

Qt5 & Raspberry Pi

I received a Raspberry Pi this week (thanks Nokia & QtonPi!) and naturally baked Qt5 into it as the first thing. Started by just installing premade RPi Qt5 package, but as qmlscene is not yet included, went for building Qt5 following loosely these instructions. About 2 hours later, I had system setup with latest Raspbian image running Qt5 QML apps.

Last month when Qt5 first beta was coming together I prepared this "Qt5 Cinematic Experience" technology demo and got some good feedback. Samuel Rødal (btw check out his awesome "Qt 5 based 3D Wayland compositor" video!) kindly tested that it works also in RPi. Yes, it worked and was pretty fast also, but not even close to perfect... Now armed with RPi I wanted to spend some quality time with it, experimenting what the GPU (Broadcom VideoCore IV) likes and hates. So here comes "Qt5 Cinematic Experience - Raspberry Pi Edition":

The changes made for this RPi version are:
  • Original version was quite scalable, but it was optimized for ~N9 screen resolutions. I wanted to run RPi in full HD 1080p (1920x1080) so adjusted things to fit better for the larger screen, making everything bigger and better. Though more pixels means more work for CPU&GPU so..
  • Added FPS item in the top-left corner which shows how frequently QML animation loop gets called. Seeing this all the time while developing gives good feedback on how different changes affect the performance and also adds some demonstration sugar.
  • Reduced smoke particles amount & size as that was a clear bottleneck.
  • Another slowdown was DropShadow effect for big movie title texts, switched it now to plain Text.Outline style.
  • On the other hand, increased shooting star sprite and its particles sizes as these changes didn't notably decrease the performance.
  • On the RPi side used 128/128 CPU/GPU memory split and to get even more juices out, overclocked it to "medium" 700MHz -> 900MHz (see instructions)
  • Went for a more colorful theme by default, raspberries are bright!
These RPi tuned sources as well as original ones are are available from here if you wanna grab and hack!

Thursday, August 16, 2012

Qt5 Cinematic Experience

During the past ~20 months I've made several blog posts about Qt5, QML Scene Graph, shaders and whatnot. As Qt5 beta is getting reeeeally close, I thought this would be a good time for a fresh Qt5 technology demo. This one is called 'Cinematic Experience' and looks a bit like this:

(best viewed in HD)

Cinematic Experience collects many of the new Qt5 QtQuick 2.0 features into the same UX demo application. It uses particles, sprites, path animation, custom shaders etc. features which Qt5 introduces for QML UIs. As usual, source codes are available from here.

Performance note: The GPU in N9 (SGX530, released Jul 2005) is showing its age. Especially fragment shaders need to be very conservative as the GPU just isn't powerful enough for the N9 screen resolution. To get the application perform in N9, some optimizations were required like disabling the normal-mapping lighting and reducing the amount of fog particles. As seen in the video, after these tweakings N9 can run the demo okeyish. Definitely far from velvet, but I would say it's more like butter ;P

PS. In case you own RPi, Beagleboard, Pandaboard, Snowball or any other embedded hardware running Qt5, please grab the demo and give it a go. I'm waiting for feedback and videos!

Saturday, June 9, 2012

Qt5 LedScreen component

Howdy! Do you remember the time before HD, amoled etc. super sharp screens? When pixels were so big that you could easily count them and any colors were luxury? This is your ticket back to these good ol' times: LedScreen Qt5 & QtQuick 2.0 component! Here is a video presenting it with example applications:

This component allows you to use any QML content as the source for the ledscreen, define led size and color or use colors from the source item. So it doesn't contain kitchen sink yet, but there's only so much you can fit into 60 lines of QML + GLSL with API documentation.. ;-)

Feel free to grab sources from here & modify & use as you want!

PS: Hoping to be able to develop & demo Qt5 soon on Raspberry Pi!

Tuesday, March 20, 2012

Smoke The Bugs!

Smoke the Bugs is now available to download from Nokia Store for Harmattan N9 and for Anna/Belle. No bugs (except software bugs!) were harmed while developing the game, but to know whether this virtual bug smoking is suitable for you, check this video of game play on N9:

As explained here earlier, this was partly an expedition on making a game with pure QML + JavaScript + shader effects. Plan was to make it totally without C++ (excluding the launcher which Qt SDK generates automatically) and to see what the outcome would be.

So summing up some random development notes here:

  • Harmattan version of the game utilizes Qt-components for portrait main window and for disabling swipe while playing. Symbian version does not use Qt-components as pure QML was enough.

  • It's good to use Loader for separating rest of the UI from initial "splash screen" for faster startup. Another option on Harmattan would be to show static splash screen image with invoker.

  • In this game, loaders are also used for help and high score views. As these are not often used, it is better to save memory and only load them when needed. Loading is fast enough not to cause notable delay.

  • ShaderEffectItem is available on Harmattan, Belle and Anna+Qt 4.7.4, so it's possible to target quite a many devices. Exception is Nokia 500 which is lacking GPU for OpenGL.

  • With Symbian, setting QGLWidget for viewport is required to be able to use ShaderEffectItem. On Harmattan this is not needed as the default graphics system is already set to use OpenGL.

  • When application is minimized, unload ShaderEffectItems or set their 'visible' property to false. Not doing this causes minimized application to use resources unnecessarily. Application state can be tracked with

  • When writing shaders, be careful to keep them performing well. Symbian devices and especially newer Belle ones can handle heavy fragment shaders better than N9. As an example, moving night effect math from fragment shader to vertex shader improved performance notably on N9.

  • Avoid too many ShaderEffectItems to save resources. As an example, instead of each bug containing its own burning effect, there are three global effect items in a queue, positioned and animated when needed. If three simultaneously burning bugs are not enough, it's easy to add more effect items into queue.

  • QML performance notes give good general guidelines what to avoid. Qt5 version of this document is even better and provides also information on how Qt5 scenegraph and V8 engine changes reflect to optimizing QML performance.

P.S. I joined Nokia ~month ago which may increase my bias towards Qt... But it's not like I wouldn't have made my opinion pretty clear already ;-)