0:00:00.929,0:00:02.740
Welcome to the first what we hope will be

0:00:02.740,0:00:04.999
a number of tutorials about QML/3d

0:00:04.999,0:00:06.781
It's important to remember

0:00:06.781,0:00:08.870
that QML/3d is still under development

0:00:08.870,0:00:10.495
so what you see in this tutorial

0:00:10.495,0:00:14.350
may have changed considerably by the time QML/3d is officially released

0:00:14.350,0:00:15.882
That being said however

0:00:15.882,0:00:17.696
this tutorial should give you some idea

0:00:17.696,0:00:20.093
of the capabilities of QML/3d as they currently stand

0:00:20.093,0:00:22.246
and give you a grounding in QML/3d development

0:00:22.246,0:00:25.031
as newer versions become available

0:00:25.031,0:00:26.734
So now i've done the boring introduction part

0:00:26.734,0:00:29.954
let's actually get down to writing some QML code

0:00:29.954,0:00:31.409
If you've already dabbled in QML

0:00:31.409,0:00:33.810
a lot of what I'm doing will be familiar to you

0:00:33.810,0:00:36.255
QML/3d files also import headers

0:00:36.255,0:00:38.686
for example the Qt 4.7 import

0:00:38.686,0:00:42.528
but in addition to that we add the labs.threed 1.0

0:00:42.528,0:00:45.790
this contains all the 3d information we'll need

0:00:45.790,0:00:47.325
Now if you're watching this tutorial

0:00:47.325,0:00:50.527
I'm sure you're fairly familiar with 3d applications as it stands

0:00:50.527,0:00:52.477
however for the newcomers

0:00:52.477,0:00:55.031
a 3d application basically needs 3 things

0:00:55.031,0:00:57.481
first up we need somewhere to actually draw stuff

0:00:57.481,0:00:59.893
in QML/3d this specified as a viewport

0:00:59.893,0:01:02.018
a viewport can be the actual window itself

0:01:02.018,0:01:06.574
or it can be an area of the window in which we are drawing 3d content

0:01:06.882,0:01:09.150
Secondly we need a camera position

0:01:09.150,0:01:11.610
The camera position specifies

0:01:11.610,0:01:13.886
what angle we're looking at the world from

0:01:13.886,0:01:16.997
where we're actually looking in 3d space

0:01:16.997,0:01:20.016
In QML/3d we have an actual camera object

0:01:20.016,0:01:22.169
here I'm setting the camera's eye position

0:01:22.169,0:01:25.311
this will give me a view from slightly above

0:01:25.311,0:01:29.120
The final thing we need for a 3d scene is and actual 3d object

0:01:29.120,0:01:32.748
and I'll also assign the mesh property of the item3d

0:01:32.748,0:01:36.223
Mesh object is an actual thing which supports a variety of file formats

0:01:36.223,0:01:41.923
.3ds files, .obj files and bezier patches

0:01:42.446,0:01:44.768
It's a monkey. It's flat shaded

0:01:44.768,0:01:47.137
but not very exciting

0:01:47.137,0:01:49.645
though you can see that I can already manipulate it in 3d space

0:01:49.645,0:01:51.688
which is quite useful

0:01:51.688,0:01:53.499
So let's do a little bit more

0:01:53.499,0:01:57.632
So here I am setting the ForceSmooth parameter

0:01:57.632,0:02:02.276
and I'm also going to assign a few more variables to this

0:02:02.276,0:02:04.366
we'll set a different scale

0:02:04.366,0:02:08.360
and give the monkey a particular position

0:02:08.360,0:02:10.403
as you can see here

0:02:10.403,0:02:12.632
I'll also move the camera slightly

0:02:12.632,0:02:15.807
and most intersetingly, we'll apply an effect

0:02:15.807,0:02:20.730
in this case the effect object I'm going to specify is the material for the mokey

0:02:20.730,0:02:23.246
Actually create a material object

0:02:24.384,0:02:26.730
and assign some properties for that object

0:02:26.730,0:02:28.754
in this case

0:02:29.847,0:02:33.640
the ambient colours

0:02:33.640,0:02:35.063
and the specular colours for the object

0:02:35.063,0:02:42.007
So, we'll just specify that in the standard kind of format

0:02:42.991,0:02:47.008
and I'll also assign the shinyness of this particular material to 200

0:02:47.008,0:02:49.576
that's a value between 0 and 255

0:02:49.576,0:02:51.982
so this is quite a shiny object

0:02:51.982,0:02:54.243
let's see what that looks like

0:02:54.243,0:02:55.729
That's much cooler

0:02:55.729,0:02:57.246
It's a shiny monkey idol!

0:02:57.246,0:03:01.860
The kind of thing that Indiana Jones would love to have on his mantlepiece

0:03:01.860,0:03:03.252
so having added one object

0:03:03.252,0:03:05.776
let's add another just for fun

0:03:05.776,0:03:07.339
we'll have to assign an ID

0:03:07.339,0:03:08.314
this time: penguin

0:03:08.314,0:03:12.075
and once again set the mesh property to mesh object

0:03:12.075,0:03:16.441
this time a file called penguin.3ds

0:03:16.441,0:03:18.345
No prizes for guessing what that is

0:03:18.345,0:03:22.803
Oh my God! A monkey has vomitted out a giant penguin!

0:03:22.803,0:03:25.682
This is part of the problem with using 3rd party models

0:03:25.682,0:03:27.447
very often they're too large

0:03:27.447,0:03:28.794
on the wrong axis

0:03:28.794,0:03:29.879
off centre

0:03:29.879,0:03:31.673
any number of problems

0:03:31.673,0:03:34.599
and what we have to do is actually correct those at the code level

0:03:34.599,0:03:37.478
Now this is a problem that is being worked on in QML/3d

0:03:37.478,0:03:40.623
but for the moment I can demonstrate a simple solution

0:03:40.623,0:03:41.906
by rescaling it

0:03:41.906,0:03:44.803
and applying a transform

0:03:49.618,0:03:53.333
and we apply a rotation 3d

0:03:54.194,0:03:57.227
we give it angle

0:03:58.473,0:04:03.236
and we apply it to a particular axis

0:04:05.251,0:04:07.015
again we do the same thing

0:04:07.015,0:04:10.628
this time a different axis

0:04:11.797,0:04:14.906
and now the penguin should be in the correct position

0:04:18.873,0:04:19.941
Low and behold

0:04:19.941,0:04:24.121
our tiny penguin is now worshiping a golden monkey idol

0:04:24.121,0:04:28.487
quite inspired really

0:04:32.092,0:04:34.555
let's make it a bit more exciting

0:04:34.555,0:04:38.564
QML/3d uses exactly the same kind of animations animations as QML

0:04:38.564,0:04:41.596
so here I'm setting a sequential animaiton

0:04:41.596,0:04:42.712
setting it to be running

0:04:42.712,0:04:45.421
and it's a number animation

0:04:45.421,0:04:49.028
and what we're going to be animating with this particular one

0:04:49.028,0:04:51.707
is the penguin tilt

0:04:51.707,0:04:57.481
which as you saw from earlier is a rotation 3d

0:04:57.852,0:05:00.607
so we'll set it to go to -45 degrees

0:05:00.607,0:05:02.277
that's an easing curve there

0:05:02.277,0:05:07.126
it just tells you how fast the animation accelerates and decelerates

0:05:07.126,0:05:11.553
gives you an idea of what it's going look loke when it actually animates

0:05:11.553,0:05:13.394
and we'll apply another animation

0:05:13.394,0:05:16.209
this time directly onto a property of the item itself

0:05:16.209,0:05:22.035
it's on the Y property there - of the parent item

0:05:22.914,0:05:26.675
and again a number animation

0:05:29.630,0:05:31.521
slightly shorter this time

0:05:31.521,0:05:35.219
and the same easing curve

0:05:36.335,0:05:40.009
It's a dancing penguin

0:05:40.717,0:05:43.519
So now our little penguin worshiper is jumping up and down and dancing

0:05:43.519,0:05:47.310
what he really needs though is some friends

0:05:47.310,0:05:48.413
if I wanted to do that normally

0:05:48.413,0:05:51.832
I'd have to cut and paste this entire section time and time and time again

0:05:51.832,0:05:53.518
which can get tiresome

0:05:53.518,0:05:55.951
so what we can do instead is create a new file

0:05:55.951,0:05:57.854
grab the imports there

0:05:57.854,0:06:00.234
take that entire Item3d

0:06:00.234,0:06:02.417
drop it in there like so

0:06:02.417,0:06:04.400
and call it "Penguin.qml"

0:06:04.400,0:06:05.761
now it needs to start with a capital P

0:06:05.761,0:06:09.106
because it's going to be invoked as a separate object of its own

0:06:09.106,0:06:11.473
there we go - I'm invoking it

0:06:11.473,0:06:13.423
and we get the same effect

0:06:13.423,0:06:17.974
but now we no longer need to have that entire big chunk of text in our main file

0:06:17.974,0:06:19.460
one of the advantages of that

0:06:19.460,0:06:21.411
is that we can quickly and easily

0:06:21.411,0:06:23.454
put multiple penguins in

0:06:23.454,0:06:27.986
each of them can be manipulated as if it were its own item

0:06:29.401,0:06:32.231
so I'll throw four penguins in

0:06:32.231,0:06:34.043
give them slightly separate positions

0:06:34.043,0:06:37.061
offset from each other

0:06:39.091,0:06:40.145
and behold

0:06:40.145,0:06:42.049
a mighty tribe of penguins

0:06:42.049,0:06:44.492
well, four ...

0:06:44.492,0:06:47.789
one of the other things we can do with QML/3d

0:06:47.789,0:06:49.275
which is very similar to QML

0:06:49.275,0:06:52.705
is use the inheritance property on animations

0:06:52.705,0:06:55.080
which is basically part of the entire structure

0:06:55.080,0:06:56.413
of the QML language

0:06:56.413,0:07:00.606
here we're encasing all the penguins in an Item3d

0:07:00.621,0:07:04.089
and anything we do to that Item3d in terms of transformations

0:07:04.089,0:07:06.086
or animations

0:07:06.086,0:07:09.151
will automatically be applied to those child items

0:07:09.151,0:07:11.659
in this case our family of penguins

0:07:11.659,0:07:15.421
so here I'll apply a transformation

0:07:15.421,0:07:21.226
rotating them slightly around the axis there

0:07:21.226,0:07:25.730
so now you can see the slight offset from the centre

0:07:25.730,0:07:27.402
and added to that

0:07:27.402,0:07:29.074
we'll add an animation

0:07:29.074,0:07:31.164
I've only been using the SequentialNumber animations here

0:07:31.164,0:07:33.532
but the full range of QML animations are available

0:07:33.532,0:07:37.015
and I could animate such properties as colour and so on

0:07:37.015,0:07:41.380
in this case we're going to be animating the transformation we just made

0:07:41.380,0:07:43.656
around the vertical axis

0:07:43.656,0:07:46.164
so the penguins, all being well

0:07:46.164,0:07:48.486
will move backwards and forwards in sync

0:07:48.486,0:07:50.436
while they jump up and down

0:07:50.436,0:07:55.343
and bow to their mighty monkey God

0:07:57.328,0:07:59.061
Behold the mightyMonkey God!

0:07:59.061,0:08:02.205
as his followers dance in obescence to his glory

0:08:02.205,0:08:07.562
it kind of makes me wish I was a disembodied monkey head really

0:08:07.562,0:08:09.524
here's the thing

0:08:09.524,0:08:11.615
I have to make a bit of a confession

0:08:11.615,0:08:15.189
to make things more interesting I've slipped in a couple of extra items here

0:08:15.189,0:08:18.704
just enough to make things just that touch cooler

0:08:18.704,0:08:20.268
check it out

0:08:20.268,0:08:23.130
monkeys dancing on a pedistal

0:08:23.130,0:08:26.056
okay, in my life it doesn't get much better than that

0:08:26.056,0:08:31.321
but, I think we can still go one better

0:08:31.321,0:08:32.930
we can give it a background image

0:08:32.930,0:08:36.690
now this is a classic example of integrating standard QML

0:08:36.690,0:08:38.704
with QML/3d

0:08:38.704,0:08:43.265
in this case using QML StandardImage

0:08:48.179,0:08:52.311
and I'm also going to throw some lights on the penguins there

0:08:52.311,0:08:55.206
just to make it a bit more exciting

0:08:55.206,0:08:58.231
let's check that out