3D on the N9

sprocketexponentialMobile - Wireless

Dec 10, 2013 (3 years and 7 months ago)


Company Confidential
Company Confidential
3D on the N9
3D Programming using Qt Quick on N9
Sarah Smith
Senior Engineer & Team Lead - Qt3D
Tuesday, 11 October 2011
Company Confidential
A plug for Qt Quick

Free! Easy to get started

Powerful scripting

Fast iterations and development

Great IDE
Tuesday, 11 October 2011
How many of you here are mobile developers - youʼve written at least one app,
even if it was a hello world, and put it on a device? Hands up?
I have spoken to a few mobile developers over the years, and recently I had
an opportunity to speak to a group that were developing for a range of platforms.
These guys had a number of tools to choose from - I was intrigued for example
by MonoTouch which is a commercial development environment for coding iOS
apps in dot-net. MonoTouch came with its own IDE, but the guy presenting on
MonoTouch said you have to be careful with saving often as it was pretty unstable.
There are a number of limitations with compiling, but in theory you can create
apps in dot-net and run them on several different platforms. Pretty neat.
Another speaker that day talked about AppCeleratorʼs Titanium development
environment - a powerful compiled Javascript tool chain. It works pretty well too,
apparently but there are some caveats and some issues with its IDE.
Of course there is Appleʼs default environment - XCode. You can get version 3
of XCode for free, providing of course you have a Mac. Version 4 of XCode
requires you to be in the Apple developer program. MonoTouch of course is
the same, you canʼt get your apps on the device without joining the developer
And to get started with any of these you need one thing first - your credit card.
Iʼm not saying you should not charge for good software, and sometimes making
a business relationship is a good start for getting on board with something as a
developer. But it makes it hard for a struggling garage developer, or even
someone inside a larger company trying to champion a new approach, to just
get started trying out something.
Qt Quick allows you to be that champion. You get to be a coding hero, because
pretty soon after downloading the free QtSDK you can be up and running with
app creation. Its easy to infect your colleagues and friends with the idea as well,
because they can try it out without a lot of red tape.
But not only is it Free, its actually **good** as well. The scripting environment
includes Javascript - just now coming on line with the v8 javascript engine - and
follows a simple syntax. Of course there is always stuff to learn but there is
plenty of examples, and the online documentation is great.
The last thing I will mention at the risk of this sounding like a complete advertising
spiel is the IDE - Qt Creator. Its designed and built for one job, and it does that
well, on all the platforms you choose. Iʼm using a Mac today, and Qt Creator
runs just fine on Mac - it also runs great on Linux and Windows. You have to think
carefully if your tools are going to restrict you from using your favorite working
environment where youʼre most productive.
Qt Quick was originally an acronym with the u-i-c-k standing for User Interface
Creation Toolkit - that is, Qt Quick also means Qt Creator - youʼre meant to use
them together, and - as I will demonstrate in a minute - that integration is a big
part of what makes Qt Quick so cool.
Company Confidential
I can haz 3D...?

You want to create a
great looking app

You know 3D content
looks good and is cool

But OpenGL, math and
matrix ops make you
come out in a rash

And QML has convinced
you that C++ is too

Answer: QtQuick3D
Tuesday, 11 October 2011
We all want our apps to look good, and also to have that visual
excitement that makes an app cool, and engaging.
3D content that looks alive is a good way to get this.
But OpenGL is complicated, and you know from experience that
it usually requires C++ or even C to get access to it. Sure there
some managed languages providing bindings, but most of those
just mirror the same confusing API in a different runtime.
If youʼre thinking like this then Qt Quick 3D is for you.
Company Confidential
What is QtQuick3D?

QML bindings for the Qt3D libraries

Access the power of OpenGL and 3D graphics hardware

QML Item3D elements live in 3-D space

OpenGL, 3D h/w and C++ put them on a 2D screen**
**No funny glasses required!
Tuesday, 11 October 2011
Qt Quick 3D is built on top of our Qt 3D libraries, and allow you
to access the power of your OpenGL 3D graphics hardware.
The Qt3D libraries are written in C++ and use all the good
performance features like vertex-buffer objects, behind the
What this means for you is that you can create a 3-D
world in QML code, and Qt Quick 3D will project this on your
2D screen. OpenGL gives us all the depth cues like occlusion
and perspective, both of which are even more compelling when
you use animation.
As mentioned this is all done with the power of your OpenGL
So to clarify - no stereo scopic stuff here - you donʼt need funny
glasses. Its a 3D world, projected on to 2D - and if that does not
make sense - I will give a demo shortly.
Company Confidential
What can you do?
Write QtQuick3D scripts
in QML to

load a 3D asset

build a scene with
many objects

change materials &

animate using QML
standards like
Tuesday, 11 October 2011
Using modelling packages like 3D studio Max from Autodesk, or the
OpenSource tool Blender, you can create all kinds of objects - maybe
a sports car, or a penguin; anything you can imagine. If youʼre not
the artistic kind these assets can also be downloaded from the internet
ready to go.
QtQuick3D knows how to load a wide range of model formats, and you
can then build a scene that uses those with your materials, and transforms,
and even your own effects implemented with inline shader code.
Standard QML animations can then be applied to create your 3D app.
Company Confidential
Much to Learn?
If you’ve written QML
apps then you know most
of what you need to know

states & transitions
“just work”

3D properties like x, y
and z position can be
animated just like in 2D

create re-usable 3D
Tuesday, 11 October 2011
This app shows states and transitions being used - clicking the
handle rotates the teapot to the “pour left” state, and clicking it
again rotates the teapot back to the “pour right” state.
QMLʼs component system is great for 3D - you can create
reusable 3D components and once you have them looking
as you want, save them off as a component for later reuse.
Company Confidential
Quick demo
It’s hacking time...
Tuesday, 11 October 2011
After displaying this slide and having done a pitch for Qt Quick 3D
I open the QtSDK and make a couple of changes to the Rectangle
for the hello world app.
I do this with the
“New File or Project” -> “Qt Quick Project” -> “Qt Quick UI”
to create a project that is pure QML, no C++
I take the hello world and wrap an extra rectangle around it, and
make that the full screen size. The original inner rect I make 1/6
of its parents height, transparent and blue, and change the text
to “Quit”.
The first changes I do using the editor to show the completion,
and the color, text change and transparency I do using the designer
tab. Flipping back to the editor shows the changes reflected there.
Now lets turn the app into 3D.
First I add the import Qt3D 1.0 and import Qt3D.Shapes 1.0 lines
to get QtQuick3D happening.
Then I alter the current text based qml file so that instead of the
wrapping rectangle I have a Viewport for our 3D App. Inside of that
I add a Cylinder {} which will be our 3D content.
Letʼs run it and see if it works.
Check out these error messages - the button displays, but we have
no OpenGL! I have to run this with the -graphicssystem opengl switch
or else the OpenGL content will not display.
Now compile and run, and iterate until I get what I want,
Inside of the cylinder I put a texture onto it with the Dev Days logo.
Then I add some animations and rotations to make it into a revolving
Dev Days signboard.
Company Confidential
Get Real 3D
I can’t
believe it’s
not fake

In 2D you have to fake zoom and turn effects

It never looks quite right...

QtQuick3D gives you the real thing... fast.
Tuesday, 11 October 2011
Often when writing 2D apps and youʼre looking for that extra effect or
a way to show a UI element that carries some punch, you reach for
fake 3D - you know, doing a “zoom” by changing the 2D scale of an object;
or a “revolving door” effect with a 2D transform. Of course those 2D
effects are all using your main CPU and not passing any work to the
graphics processor.
But also, your eye quickly picks up that this is not the real thing.
Now you know what 3D looks like, and you know how effective it can be
(no funny glasses required) you can use Qt Quick 3D to do this stuff, and
do it fast, and have it perform well on the device - without using fake
Company Confidential
Quick demo
Lets see some Qt Quick 3D
Tuesday, 11 October 2011
Now lets have a look at some apps on the N9.
These will demonstrate some of what I have been talking about that you can do with Qt Quick 3D.
These are the standard example apps you get when you install our harmattan packages - check the last slide of this presentation for
the URL of those if youʼre interested.
Company Confidential
How do I start?
Get Qt Quick 3D and then add some
3D content to your 2D app:

got an image or icon?

why not have a 3D one for extra
standout zing?

using a Repeater and 2D

why not display them on 3D
objects for extra punch!

in apps that are mostly 3D use 2D
elements to reduce clutter
Tuesday, 11 October 2011
Company Confidential
Not Rocket Science

Lots can be done
without knowing any
OpenGL or 3D math.

Just experiment!

If you want to access
advanced stuff like
camera position and
projection, that can be
done in QML.

More advanced stuff
can be done by writing
Tuesday, 11 October 2011
Company Confidential
Quick demo
It’s hacking time...
Tuesday, 11 October 2011
Now lets put the app onto the N9 and see how it goes.
Since we already have the Qt Quick 3D package on the N9, all we need to do is install our app.
Now I convert it to an N9 project by wrapping it in a C++ project.
I do this with the “New File or Project” -> “Qt Quick Project” -> “Qt Quick Application” to create a project that is QML and C++, and I
use the creation wizard to point to the existing QML file.
I will have to make some changes again to get the OpenGL context that we need for the Declarative view.
Also I need to tell the project to compile for the N9 and to use its maemo packaging magic.
Company Confidential
Thanks for listening!



Tuesday, 11 October 2011