1
00:00:00,929 --> 00:00:02,740
Welcome to the first what we hope will be

2
00:00:02,740 --> 00:00:04,999
a number of tutorials about QML/3d

3
00:00:04,999 --> 00:00:06,781
It's important to remember

4
00:00:06,781 --> 00:00:08,870
that QML/3d is still under development

5
00:00:08,870 --> 00:00:10,495
so what you see in this tutorial

6
00:00:10,495 --> 00:00:14,350
may have changed considerably by the time QML/3d is officially released

7
00:00:14,350 --> 00:00:15,882
That being said however

8
00:00:15,882 --> 00:00:17,696
this tutorial should give you some idea

9
00:00:17,696 --> 00:00:20,093
of the capabilities of QML/3d as they currently stand

10
00:00:20,093 --> 00:00:22,246
and give you a grounding in QML/3d development

11
00:00:22,246 --> 00:00:25,031
as newer versions become available

12
00:00:25,031 --> 00:00:26,734
So now i've done the boring introduction part

13
00:00:26,734 --> 00:00:29,954
let's actually get down to writing some QML code

14
00:00:29,954 --> 00:00:31,409
If you've already dabbled in QML

15
00:00:31,409 --> 00:00:33,810
a lot of what I'm doing will be familiar to you

16
00:00:33,810 --> 00:00:36,255
QML/3d files also import headers

17
00:00:36,255 --> 00:00:38,686
for example the Qt 4.7 import

18
00:00:38,686 --> 00:00:42,528
but in addition to that we add the labs.threed 1.0

19
00:00:42,528 --> 00:00:45,790
this contains all the 3d information we'll need

20
00:00:45,790 --> 00:00:47,325
Now if you're watching this tutorial

21
00:00:47,325 --> 00:00:50,527
I'm sure you're fairly familiar with 3d applications as it stands

22
00:00:50,527 --> 00:00:52,477
however for the newcomers

23
00:00:52,477 --> 00:00:55,031
a 3d application basically needs 3 things

24
00:00:55,031 --> 00:00:57,481
first up we need somewhere to actually draw stuff

25
00:00:57,481 --> 00:00:59,893
in QML/3d this specified as a viewport

26
00:00:59,893 --> 00:01:02,018
a viewport can be the actual window itself

27
00:01:02,018 --> 00:01:06,574
or it can be an area of the window in which we are drawing 3d content

28
00:01:06,882 --> 00:01:09,150
Secondly we need a camera position

29
00:01:09,150 --> 00:01:11,610
The camera position specifies

30
00:01:11,610 --> 00:01:13,886
what angle we're looking at the world from

31
00:01:13,886 --> 00:01:16,997
where we're actually looking in 3d space

32
00:01:16,997 --> 00:01:20,016
In QML/3d we have an actual camera object

33
00:01:20,016 --> 00:01:22,169
here I'm setting the camera's eye position

34
00:01:22,169 --> 00:01:25,311
this will give me a view from slightly above

35
00:01:25,311 --> 00:01:29,120
The final thing we need for a 3d scene is and actual 3d object

36
00:01:29,120 --> 00:01:32,748
and I'll also assign the mesh property of the item3d

37
00:01:32,748 --> 00:01:36,223
Mesh object is an actual thing which supports a variety of file formats

38
00:01:36,223 --> 00:01:41,923
.3ds files, .obj files and bezier patches

39
00:01:42,446 --> 00:01:44,768
It's a monkey. It's flat shaded

40
00:01:44,768 --> 00:01:47,137
but not very exciting

41
00:01:47,137 --> 00:01:49,645
though you can see that I can already manipulate it in 3d space

42
00:01:49,645 --> 00:01:51,688
which is quite useful

43
00:01:51,688 --> 00:01:53,499
So let's do a little bit more

44
00:01:53,499 --> 00:01:57,632
So here I am setting the ForceSmooth parameter

45
00:01:57,632 --> 00:02:02,276
and I'm also going to assign a few more variables to this

46
00:02:02,276 --> 00:02:04,366
we'll set a different scale

47
00:02:04,366 --> 00:02:08,360
and give the monkey a particular position

48
00:02:08,360 --> 00:02:10,403
as you can see here

49
00:02:10,403 --> 00:02:12,632
I'll also move the camera slightly

50
00:02:12,632 --> 00:02:15,807
and most intersetingly, we'll apply an effect

51
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

52
00:02:20,730 --> 00:02:23,246
Actually create a material object

53
00:02:24,384 --> 00:02:26,730
and assign some properties for that object

54
00:02:26,730 --> 00:02:28,754
in this case

55
00:02:29,847 --> 00:02:33,640
the ambient colours

56
00:02:33,640 --> 00:02:35,063
and the specular colours for the object

57
00:02:35,063 --> 00:02:42,007
So, we'll just specify that in the standard kind of format

58
00:02:42,991 --> 00:02:47,008
and I'll also assign the shinyness of this particular material to 200

59
00:02:47,008 --> 00:02:49,576
that's a value between 0 and 255

60
00:02:49,576 --> 00:02:51,982
so this is quite a shiny object

61
00:02:51,982 --> 00:02:54,243
let's see what that looks like

62
00:02:54,243 --> 00:02:55,729
That's much cooler

63
00:02:55,729 --> 00:02:57,246
It's a shiny monkey idol!

64
00:02:57,246 --> 00:03:01,860
The kind of thing that Indiana Jones would love to have on his mantlepiece

65
00:03:01,860 --> 00:03:03,252
so having added one object

66
00:03:03,252 --> 00:03:05,776
let's add another just for fun

67
00:03:05,776 --> 00:03:07,339
we'll have to assign an ID

68
00:03:07,339 --> 00:03:08,314
this time: penguin

69
00:03:08,314 --> 00:03:12,075
and once again set the mesh property to mesh object

70
00:03:12,075 --> 00:03:16,441
this time a file called penguin.3ds

71
00:03:16,441 --> 00:03:18,345
No prizes for guessing what that is

72
00:03:18,345 --> 00:03:22,803
Oh my God! A monkey has vomitted out a giant penguin!

73
00:03:22,803 --> 00:03:25,682
This is part of the problem with using 3rd party models

74
00:03:25,682 --> 00:03:27,447
very often they're too large

75
00:03:27,447 --> 00:03:28,794
on the wrong axis

76
00:03:28,794 --> 00:03:29,879
off centre

77
00:03:29,879 --> 00:03:31,673
any number of problems

78
00:03:31,673 --> 00:03:34,599
and what we have to do is actually correct those at the code level

79
00:03:34,599 --> 00:03:37,478
Now this is a problem that is being worked on in QML/3d

80
00:03:37,478 --> 00:03:40,623
but for the moment I can demonstrate a simple solution

81
00:03:40,623 --> 00:03:41,906
by rescaling it

82
00:03:41,906 --> 00:03:44,803
and applying a transform

83
00:03:49,618 --> 00:03:53,333
and we apply a rotation 3d

84
00:03:54,194 --> 00:03:57,227
we give it angle

85
00:03:58,473 --> 00:04:03,236
and we apply it to a particular axis

86
00:04:05,251 --> 00:04:07,015
again we do the same thing

87
00:04:07,015 --> 00:04:10,628
this time a different axis

88
00:04:11,797 --> 00:04:14,906
and now the penguin should be in the correct position

89
00:04:18,873 --> 00:04:19,941
Low and behold

90
00:04:19,941 --> 00:04:24,121
our tiny penguin is now worshiping a golden monkey idol

91
00:04:24,121 --> 00:04:28,487
quite inspired really

92
00:04:32,092 --> 00:04:34,555
let's make it a bit more exciting

93
00:04:34,555 --> 00:04:38,564
QML/3d uses exactly the same kind of animations animations as QML

94
00:04:38,564 --> 00:04:41,596
so here I'm setting a sequential animaiton

95
00:04:41,596 --> 00:04:42,712
setting it to be running

96
00:04:42,712 --> 00:04:45,421
and it's a number animation

97
00:04:45,421 --> 00:04:49,028
and what we're going to be animating with this particular one

98
00:04:49,028 --> 00:04:51,707
is the penguin tilt

99
00:04:51,707 --> 00:04:57,481
which as you saw from earlier is a rotation 3d

100
00:04:57,852 --> 00:05:00,607
so we'll set it to go to -45 degrees

101
00:05:00,607 --> 00:05:02,277
that's an easing curve there

102
00:05:02,277 --> 00:05:07,126
it just tells you how fast the animation accelerates and decelerates

103
00:05:07,126 --> 00:05:11,553
gives you an idea of what it's going look loke when it actually animates

104
00:05:11,553 --> 00:05:13,394
and we'll apply another animation

105
00:05:13,394 --> 00:05:16,209
this time directly onto a property of the item itself

106
00:05:16,209 --> 00:05:22,035
it's on the Y property there - of the parent item

107
00:05:22,914 --> 00:05:26,675
and again a number animation

108
00:05:29,630 --> 00:05:31,521
slightly shorter this time

109
00:05:31,521 --> 00:05:35,219
and the same easing curve

110
00:05:36,335 --> 00:05:40,009
It's a dancing penguin

111
00:05:40,717 --> 00:05:43,519
So now our little penguin worshiper is jumping up and down and dancing

112
00:05:43,519 --> 00:05:47,310
what he really needs though is some friends

113
00:05:47,310 --> 00:05:48,413
if I wanted to do that normally

114
00:05:48,413 --> 00:05:51,832
I'd have to cut and paste this entire section time and time and time again

115
00:05:51,832 --> 00:05:53,518
which can get tiresome

116
00:05:53,518 --> 00:05:55,951
so what we can do instead is create a new file

117
00:05:55,951 --> 00:05:57,854
grab the imports there

118
00:05:57,854 --> 00:06:00,234
take that entire Item3d

119
00:06:00,234 --> 00:06:02,417
drop it in there like so

120
00:06:02,417 --> 00:06:04,400
and call it "Penguin.qml"

121
00:06:04,400 --> 00:06:05,761
now it needs to start with a capital P

122
00:06:05,761 --> 00:06:09,106
because it's going to be invoked as a separate object of its own

123
00:06:09,106 --> 00:06:11,473
there we go - I'm invoking it

124
00:06:11,473 --> 00:06:13,423
and we get the same effect

125
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

126
00:06:17,974 --> 00:06:19,460
one of the advantages of that

127
00:06:19,460 --> 00:06:21,411
is that we can quickly and easily

128
00:06:21,411 --> 00:06:23,454
put multiple penguins in

129
00:06:23,454 --> 00:06:27,986
each of them can be manipulated as if it were its own item

130
00:06:29,401 --> 00:06:32,231
so I'll throw four penguins in

131
00:06:32,231 --> 00:06:34,043
give them slightly separate positions

132
00:06:34,043 --> 00:06:37,061
offset from each other

133
00:06:39,091 --> 00:06:40,145
and behold

134
00:06:40,145 --> 00:06:42,049
a mighty tribe of penguins

135
00:06:42,049 --> 00:06:44,492
well, four ...

136
00:06:44,492 --> 00:06:47,789
one of the other things we can do with QML/3d

137
00:06:47,789 --> 00:06:49,275
which is very similar to QML

138
00:06:49,275 --> 00:06:52,705
is use the inheritance property on animations

139
00:06:52,705 --> 00:06:55,080
which is basically part of the entire structure

140
00:06:55,080 --> 00:06:56,413
of the QML language

141
00:06:56,413 --> 00:07:00,606
here we're encasing all the penguins in an Item3d

142
00:07:00,621 --> 00:07:04,089
and anything we do to that Item3d in terms of transformations

143
00:07:04,089 --> 00:07:06,086
or animations

144
00:07:06,086 --> 00:07:09,151
will automatically be applied to those child items

145
00:07:09,151 --> 00:07:11,659
in this case our family of penguins

146
00:07:11,659 --> 00:07:15,421
so here I'll apply a transformation

147
00:07:15,421 --> 00:07:21,226
rotating them slightly around the axis there

148
00:07:21,226 --> 00:07:25,730
so now you can see the slight offset from the centre

149
00:07:25,730 --> 00:07:27,402
and added to that

150
00:07:27,402 --> 00:07:29,074
we'll add an animation

151
00:07:29,074 --> 00:07:31,164
I've only been using the SequentialNumber animations here

152
00:07:31,164 --> 00:07:33,532
but the full range of QML animations are available

153
00:07:33,532 --> 00:07:37,015
and I could animate such properties as colour and so on

154
00:07:37,015 --> 00:07:41,380
in this case we're going to be animating the transformation we just made

155
00:07:41,380 --> 00:07:43,656
around the vertical axis

156
00:07:43,656 --> 00:07:46,164
so the penguins, all being well

157
00:07:46,164 --> 00:07:48,486
will move backwards and forwards in sync

158
00:07:48,486 --> 00:07:50,436
while they jump up and down

159
00:07:50,436 --> 00:07:55,343
and bow to their mighty monkey God

160
00:07:57,328 --> 00:07:59,061
Behold the mightyMonkey God!

161
00:07:59,061 --> 00:08:02,205
as his followers dance in obescence to his glory

162
00:08:02,205 --> 00:08:07,562
it kind of makes me wish I was a disembodied monkey head really

163
00:08:07,562 --> 00:08:09,524
here's the thing

164
00:08:09,524 --> 00:08:11,615
I have to make a bit of a confession

165
00:08:11,615 --> 00:08:15,189
to make things more interesting I've slipped in a couple of extra items here

166
00:08:15,189 --> 00:08:18,704
just enough to make things just that touch cooler

167
00:08:18,704 --> 00:08:20,268
check it out

168
00:08:20,268 --> 00:08:23,130
monkeys dancing on a pedistal

169
00:08:23,130 --> 00:08:26,056
okay, in my life it doesn't get much better than that

170
00:08:26,056 --> 00:08:31,321
but, I think we can still go one better

171
00:08:31,321 --> 00:08:32,930
we can give it a background image

172
00:08:32,930 --> 00:08:36,690
now this is a classic example of integrating standard QML

173
00:08:36,690 --> 00:08:38,704
with QML/3d

174
00:08:38,704 --> 00:08:43,265
in this case using QML StandardImage

175
00:08:48,179 --> 00:08:52,311
and I'm also going to throw some lights on the penguins there

176
00:08:52,311 --> 00:08:55,206
just to make it a bit more exciting

177
00:08:55,206 --> 00:08:58,231
let's check that out