WEBVTT

00:00:00.929 --> 00:00:02.740
Welcome to the first what we hope will be

00:00:02.740 --> 00:00:04.999
a number of tutorials about QML/3d

00:00:04.999 --> 00:00:06.781
It's important to remember

00:00:06.781 --> 00:00:08.870
that QML/3d is still under development

00:00:08.870 --> 00:00:10.495
so what you see in this tutorial

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

00:00:14.350 --> 00:00:15.882
That being said however

00:00:15.882 --> 00:00:17.696
this tutorial should give you some idea

00:00:17.696 --> 00:00:20.093
of the capabilities of QML/3d as they currently stand

00:00:20.093 --> 00:00:22.246
and give you a grounding in QML/3d development

00:00:22.246 --> 00:00:25.031
as newer versions become available

00:00:25.031 --> 00:00:26.734
So now i've done the boring introduction part

00:00:26.734 --> 00:00:29.954
let's actually get down to writing some QML code

00:00:29.954 --> 00:00:31.409
If you've already dabbled in QML

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

00:00:33.810 --> 00:00:36.255
QML/3d files also import headers

00:00:36.255 --> 00:00:38.686
for example the Qt 4.7 import

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

00:00:42.528 --> 00:00:45.790
this contains all the 3d information we'll need

00:00:45.790 --> 00:00:47.325
Now if you're watching this tutorial

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

00:00:50.527 --> 00:00:52.477
however for the newcomers

00:00:52.477 --> 00:00:55.031
a 3d application basically needs 3 things

00:00:55.031 --> 00:00:57.481
first up we need somewhere to actually draw stuff

00:00:57.481 --> 00:00:59.893
in QML/3d this specified as a viewport

00:00:59.893 --> 00:01:02.018
a viewport can be the actual window itself

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

00:01:06.882 --> 00:01:09.150
Secondly we need a camera position

00:01:09.150 --> 00:01:11.610
The camera position specifies

00:01:11.610 --> 00:01:13.886
what angle we're looking at the world from

00:01:13.886 --> 00:01:16.997
where we're actually looking in 3d space

00:01:16.997 --> 00:01:20.016
In QML/3d we have an actual camera object

00:01:20.016 --> 00:01:22.169
here I'm setting the camera's eye position

00:01:22.169 --> 00:01:25.311
this will give me a view from slightly above

00:01:25.311 --> 00:01:29.120
The final thing we need for a 3d scene is and actual 3d object

00:01:29.120 --> 00:01:32.748
and I'll also assign the mesh property of the item3d

00:01:32.748 --> 00:01:36.223
Mesh object is an actual thing which supports a variety of file formats

00:01:36.223 --> 00:01:41.923
.3ds files, .obj files and bezier patches

00:01:42.446 --> 00:01:44.768
It's a monkey. It's flat shaded

00:01:44.768 --> 00:01:47.137
but not very exciting

00:01:47.137 --> 00:01:49.645
though you can see that I can already manipulate it in 3d space

00:01:49.645 --> 00:01:51.688
which is quite useful

00:01:51.688 --> 00:01:53.499
So let's do a little bit more

00:01:53.499 --> 00:01:57.632
So here I am setting the ForceSmooth parameter

00:01:57.632 --> 00:02:02.276
and I'm also going to assign a few more variables to this

00:02:02.276 --> 00:02:04.366
we'll set a different scale

00:02:04.366 --> 00:02:08.360
and give the monkey a particular position

00:02:08.360 --> 00:02:10.403
as you can see here

00:02:10.403 --> 00:02:12.632
I'll also move the camera slightly

00:02:12.632 --> 00:02:15.807
and most intersetingly, we'll apply an effect

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

00:02:20.730 --> 00:02:23.246
Actually create a material object

00:02:24.384 --> 00:02:26.730
and assign some properties for that object

00:02:26.730 --> 00:02:28.754
in this case

00:02:29.847 --> 00:02:33.640
the ambient colours

00:02:33.640 --> 00:02:35.063
and the specular colours for the object

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

00:02:42.991 --> 00:02:47.008
and I'll also assign the shinyness of this particular material to 200

00:02:47.008 --> 00:02:49.576
that's a value between 0 and 255

00:02:49.576 --> 00:02:51.982
so this is quite a shiny object

00:02:51.982 --> 00:02:54.243
let's see what that looks like

00:02:54.243 --> 00:02:55.729
That's much cooler

00:02:55.729 --> 00:02:57.246
It's a shiny monkey idol!

00:02:57.246 --> 00:03:01.860
The kind of thing that Indiana Jones would love to have on his mantlepiece

00:03:01.860 --> 00:03:03.252
so having added one object

00:03:03.252 --> 00:03:05.776
let's add another just for fun

00:03:05.776 --> 00:03:07.339
we'll have to assign an ID

00:03:07.339 --> 00:03:08.314
this time: penguin

00:03:08.314 --> 00:03:12.075
and once again set the mesh property to mesh object

00:03:12.075 --> 00:03:16.441
this time a file called penguin.3ds

00:03:16.441 --> 00:03:18.345
No prizes for guessing what that is

00:03:18.345 --> 00:03:22.803
Oh my God! A monkey has vomitted out a giant penguin!

00:03:22.803 --> 00:03:25.682
This is part of the problem with using 3rd party models

00:03:25.682 --> 00:03:27.447
very often they're too large

00:03:27.447 --> 00:03:28.794
on the wrong axis

00:03:28.794 --> 00:03:29.879
off centre

00:03:29.879 --> 00:03:31.673
any number of problems

00:03:31.673 --> 00:03:34.599
and what we have to do is actually correct those at the code level

00:03:34.599 --> 00:03:37.478
Now this is a problem that is being worked on in QML/3d

00:03:37.478 --> 00:03:40.623
but for the moment I can demonstrate a simple solution

00:03:40.623 --> 00:03:41.906
by rescaling it

00:03:41.906 --> 00:03:44.803
and applying a transform

00:03:49.618 --> 00:03:53.333
and we apply a rotation 3d

00:03:54.194 --> 00:03:57.227
we give it angle

00:03:58.473 --> 00:04:03.236
and we apply it to a particular axis

00:04:05.251 --> 00:04:07.015
again we do the same thing

00:04:07.015 --> 00:04:10.628
this time a different axis

00:04:11.797 --> 00:04:14.906
and now the penguin should be in the correct position

00:04:18.873 --> 00:04:19.941
Low and behold

00:04:19.941 --> 00:04:24.121
our tiny penguin is now worshiping a golden monkey idol

00:04:24.121 --> 00:04:28.487
quite inspired really

00:04:32.092 --> 00:04:34.555
let's make it a bit more exciting

00:04:34.555 --> 00:04:38.564
QML/3d uses exactly the same kind of animations animations as QML

00:04:38.564 --> 00:04:41.596
so here I'm setting a sequential animaiton

00:04:41.596 --> 00:04:42.712
setting it to be running

00:04:42.712 --> 00:04:45.421
and it's a number animation

00:04:45.421 --> 00:04:49.028
and what we're going to be animating with this particular one

00:04:49.028 --> 00:04:51.707
is the penguin tilt

00:04:51.707 --> 00:04:57.481
which as you saw from earlier is a rotation 3d

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

00:05:00.607 --> 00:05:02.277
that's an easing curve there

00:05:02.277 --> 00:05:07.126
it just tells you how fast the animation accelerates and decelerates

00:05:07.126 --> 00:05:11.553
gives you an idea of what it's going look loke when it actually animates

00:05:11.553 --> 00:05:13.394
and we'll apply another animation

00:05:13.394 --> 00:05:16.209
this time directly onto a property of the item itself

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

00:05:22.914 --> 00:05:26.675
and again a number animation

00:05:29.630 --> 00:05:31.521
slightly shorter this time

00:05:31.521 --> 00:05:35.219
and the same easing curve

00:05:36.335 --> 00:05:40.009
It's a dancing penguin

00:05:40.717 --> 00:05:43.519
So now our little penguin worshiper is jumping up and down and dancing

00:05:43.519 --> 00:05:47.310
what he really needs though is some friends

00:05:47.310 --> 00:05:48.413
if I wanted to do that normally

00:05:48.413 --> 00:05:51.832
I'd have to cut and paste this entire section time and time and time again

00:05:51.832 --> 00:05:53.518
which can get tiresome

00:05:53.518 --> 00:05:55.951
so what we can do instead is create a new file

00:05:55.951 --> 00:05:57.854
grab the imports there

00:05:57.854 --> 00:06:00.234
take that entire Item3d

00:06:00.234 --> 00:06:02.417
drop it in there like so

00:06:02.417 --> 00:06:04.400
and call it "Penguin.qml"

00:06:04.400 --> 00:06:05.761
now it needs to start with a capital P

00:06:05.761 --> 00:06:09.106
because it's going to be invoked as a separate object of its own

00:06:09.106 --> 00:06:11.473
there we go - I'm invoking it

00:06:11.473 --> 00:06:13.423
and we get the same effect

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

00:06:17.974 --> 00:06:19.460
one of the advantages of that

00:06:19.460 --> 00:06:21.411
is that we can quickly and easily

00:06:21.411 --> 00:06:23.454
put multiple penguins in

00:06:23.454 --> 00:06:27.986
each of them can be manipulated as if it were its own item

00:06:29.401 --> 00:06:32.231
so I'll throw four penguins in

00:06:32.231 --> 00:06:34.043
give them slightly separate positions

00:06:34.043 --> 00:06:37.061
offset from each other

00:06:39.091 --> 00:06:40.145
and behold

00:06:40.145 --> 00:06:42.049
a mighty tribe of penguins

00:06:42.049 --> 00:06:44.492
well, four ...

00:06:44.492 --> 00:06:47.789
one of the other things we can do with QML/3d

00:06:47.789 --> 00:06:49.275
which is very similar to QML

00:06:49.275 --> 00:06:52.705
is use the inheritance property on animations

00:06:52.705 --> 00:06:55.080
which is basically part of the entire structure

00:06:55.080 --> 00:06:56.413
of the QML language

00:06:56.413 --> 00:07:00.606
here we're encasing all the penguins in an Item3d

00:07:00.621 --> 00:07:04.089
and anything we do to that Item3d in terms of transformations

00:07:04.089 --> 00:07:06.086
or animations

00:07:06.086 --> 00:07:09.151
will automatically be applied to those child items

00:07:09.151 --> 00:07:11.659
in this case our family of penguins

00:07:11.659 --> 00:07:15.421
so here I'll apply a transformation

00:07:15.421 --> 00:07:21.226
rotating them slightly around the axis there

00:07:21.226 --> 00:07:25.730
so now you can see the slight offset from the centre

00:07:25.730 --> 00:07:27.402
and added to that

00:07:27.402 --> 00:07:29.074
we'll add an animation

00:07:29.074 --> 00:07:31.164
I've only been using the SequentialNumber animations here

00:07:31.164 --> 00:07:33.532
but the full range of QML animations are available

00:07:33.532 --> 00:07:37.015
and I could animate such properties as colour and so on

00:07:37.015 --> 00:07:41.380
in this case we're going to be animating the transformation we just made

00:07:41.380 --> 00:07:43.656
around the vertical axis

00:07:43.656 --> 00:07:46.164
so the penguins, all being well

00:07:46.164 --> 00:07:48.486
will move backwards and forwards in sync

00:07:48.486 --> 00:07:50.436
while they jump up and down

00:07:50.436 --> 00:07:55.343
and bow to their mighty monkey God

00:07:57.328 --> 00:07:59.061
Behold the mightyMonkey God!

00:07:59.061 --> 00:08:02.205
as his followers dance in obescence to his glory

00:08:02.205 --> 00:08:07.562
it kind of makes me wish I was a disembodied monkey head really

00:08:07.562 --> 00:08:09.524
here's the thing

00:08:09.524 --> 00:08:11.615
I have to make a bit of a confession

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

00:08:15.189 --> 00:08:18.704
just enough to make things just that touch cooler

00:08:18.704 --> 00:08:20.268
check it out

00:08:20.268 --> 00:08:23.130
monkeys dancing on a pedistal

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

00:08:26.056 --> 00:08:31.321
but, I think we can still go one better

00:08:31.321 --> 00:08:32.930
we can give it a background image

00:08:32.930 --> 00:08:36.690
now this is a classic example of integrating standard QML

00:08:36.690 --> 00:08:38.704
with QML/3d

00:08:38.704 --> 00:08:43.265
in this case using QML StandardImage

00:08:48.179 --> 00:08:52.311
and I'm also going to throw some lights on the penguins there

00:08:52.311 --> 00:08:55.206
just to make it a bit more exciting

00:08:55.206 --> 00:08:58.231
let's check that out