[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.93,0:00:02.74,Default,,0000,0000,0000,,Welcome to the first what we hope will be
Dialogue: 0,0:00:02.74,0:00:04.100,Default,,0000,0000,0000,,a number of tutorials about QML/3d
Dialogue: 0,0:00:04.100,0:00:06.78,Default,,0000,0000,0000,,It's important to remember
Dialogue: 0,0:00:06.78,0:00:08.87,Default,,0000,0000,0000,,that QML/3d is still under development
Dialogue: 0,0:00:08.87,0:00:10.50,Default,,0000,0000,0000,,so what you see in this tutorial
Dialogue: 0,0:00:10.50,0:00:14.35,Default,,0000,0000,0000,,may have changed considerably by the time QML/3d is officially released
Dialogue: 0,0:00:14.35,0:00:15.88,Default,,0000,0000,0000,,That being said however
Dialogue: 0,0:00:15.88,0:00:17.70,Default,,0000,0000,0000,,this tutorial should give you some idea
Dialogue: 0,0:00:17.70,0:00:20.09,Default,,0000,0000,0000,,of the capabilities of QML/3d as they currently stand
Dialogue: 0,0:00:20.09,0:00:22.25,Default,,0000,0000,0000,,and give you a grounding in QML/3d development
Dialogue: 0,0:00:22.25,0:00:25.03,Default,,0000,0000,0000,,as newer versions become available
Dialogue: 0,0:00:25.03,0:00:26.73,Default,,0000,0000,0000,,So now i've done the boring introduction part
Dialogue: 0,0:00:26.73,0:00:29.95,Default,,0000,0000,0000,,let's actually get down to writing some QML code
Dialogue: 0,0:00:29.95,0:00:31.41,Default,,0000,0000,0000,,If you've already dabbled in QML
Dialogue: 0,0:00:31.41,0:00:33.81,Default,,0000,0000,0000,,a lot of what I'm doing will be familiar to you
Dialogue: 0,0:00:33.81,0:00:36.26,Default,,0000,0000,0000,,QML/3d files also import headers
Dialogue: 0,0:00:36.26,0:00:38.69,Default,,0000,0000,0000,,for example the Qt 4.7 import
Dialogue: 0,0:00:38.69,0:00:42.53,Default,,0000,0000,0000,,but in addition to that we add the labs.threed 1.0
Dialogue: 0,0:00:42.53,0:00:45.79,Default,,0000,0000,0000,,this contains all the 3d information we'll need
Dialogue: 0,0:00:45.79,0:00:47.32,Default,,0000,0000,0000,,Now if you're watching this tutorial
Dialogue: 0,0:00:47.32,0:00:50.53,Default,,0000,0000,0000,,I'm sure you're fairly familiar with 3d applications as it stands
Dialogue: 0,0:00:50.53,0:00:52.48,Default,,0000,0000,0000,,however for the newcomers
Dialogue: 0,0:00:52.48,0:00:55.03,Default,,0000,0000,0000,,a 3d application basically needs 3 things
Dialogue: 0,0:00:55.03,0:00:57.48,Default,,0000,0000,0000,,first up we need somewhere to actually draw stuff
Dialogue: 0,0:00:57.48,0:00:59.89,Default,,0000,0000,0000,,in QML/3d this specified as a viewport
Dialogue: 0,0:00:59.89,0:01:02.02,Default,,0000,0000,0000,,a viewport can be the actual window itself
Dialogue: 0,0:01:02.02,0:01:06.57,Default,,0000,0000,0000,,or it can be an area of the window in which we are drawing 3d content
Dialogue: 0,0:01:06.88,0:01:09.15,Default,,0000,0000,0000,,Secondly we need a camera position
Dialogue: 0,0:01:09.15,0:01:11.61,Default,,0000,0000,0000,,The camera position specifies
Dialogue: 0,0:01:11.61,0:01:13.89,Default,,0000,0000,0000,,what angle we're looking at the world from
Dialogue: 0,0:01:13.89,0:01:16.100,Default,,0000,0000,0000,,where we're actually looking in 3d space
Dialogue: 0,0:01:16.100,0:01:20.02,Default,,0000,0000,0000,,In QML/3d we have an actual camera object
Dialogue: 0,0:01:20.02,0:01:22.17,Default,,0000,0000,0000,,here I'm setting the camera's eye position
Dialogue: 0,0:01:22.17,0:01:25.31,Default,,0000,0000,0000,,this will give me a view from slightly above
Dialogue: 0,0:01:25.31,0:01:29.12,Default,,0000,0000,0000,,The final thing we need for a 3d scene is and actual 3d object
Dialogue: 0,0:01:29.12,0:01:32.75,Default,,0000,0000,0000,,and I'll also assign the mesh property of the item3d
Dialogue: 0,0:01:32.75,0:01:36.22,Default,,0000,0000,0000,,Mesh object is an actual thing which supports a variety of file formats
Dialogue: 0,0:01:36.22,0:01:41.92,Default,,0000,0000,0000,,.3ds files, .obj files and bezier patches
Dialogue: 0,0:01:42.45,0:01:44.77,Default,,0000,0000,0000,,It's a monkey. It's flat shaded
Dialogue: 0,0:01:44.77,0:01:47.14,Default,,0000,0000,0000,,but not very exciting
Dialogue: 0,0:01:47.14,0:01:49.64,Default,,0000,0000,0000,,though you can see that I can already manipulate it in 3d space
Dialogue: 0,0:01:49.64,0:01:51.69,Default,,0000,0000,0000,,which is quite useful
Dialogue: 0,0:01:51.69,0:01:53.50,Default,,0000,0000,0000,,So let's do a little bit more
Dialogue: 0,0:01:53.50,0:01:57.63,Default,,0000,0000,0000,,So here I am setting the ForceSmooth parameter
Dialogue: 0,0:01:57.63,0:02:02.28,Default,,0000,0000,0000,,and I'm also going to assign a few more variables to this
Dialogue: 0,0:02:02.28,0:02:04.37,Default,,0000,0000,0000,,we'll set a different scale
Dialogue: 0,0:02:04.37,0:02:08.36,Default,,0000,0000,0000,,and give the monkey a particular position
Dialogue: 0,0:02:08.36,0:02:10.40,Default,,0000,0000,0000,,as you can see here
Dialogue: 0,0:02:10.40,0:02:12.63,Default,,0000,0000,0000,,I'll also move the camera slightly
Dialogue: 0,0:02:12.63,0:02:15.81,Default,,0000,0000,0000,,and most intersetingly, we'll apply an effect
Dialogue: 0,0:02:15.81,0:02:20.73,Default,,0000,0000,0000,,in this case the effect object I'm going to specify is the material for the mokey
Dialogue: 0,0:02:20.73,0:02:23.25,Default,,0000,0000,0000,,Actually create a material object
Dialogue: 0,0:02:24.38,0:02:26.73,Default,,0000,0000,0000,,and assign some properties for that object
Dialogue: 0,0:02:26.73,0:02:28.75,Default,,0000,0000,0000,,in this case
Dialogue: 0,0:02:29.85,0:02:33.64,Default,,0000,0000,0000,,the ambient colours
Dialogue: 0,0:02:33.64,0:02:35.06,Default,,0000,0000,0000,,and the specular colours for the object
Dialogue: 0,0:02:35.06,0:02:42.01,Default,,0000,0000,0000,,So, we'll just specify that in the standard kind of format
Dialogue: 0,0:02:42.99,0:02:47.01,Default,,0000,0000,0000,,and I'll also assign the shinyness of this particular material to 200
Dialogue: 0,0:02:47.01,0:02:49.58,Default,,0000,0000,0000,,that's a value between 0 and 255
Dialogue: 0,0:02:49.58,0:02:51.98,Default,,0000,0000,0000,,so this is quite a shiny object
Dialogue: 0,0:02:51.98,0:02:54.24,Default,,0000,0000,0000,,let's see what that looks like
Dialogue: 0,0:02:54.24,0:02:55.73,Default,,0000,0000,0000,,That's much cooler
Dialogue: 0,0:02:55.73,0:02:57.25,Default,,0000,0000,0000,,It's a shiny monkey idol!
Dialogue: 0,0:02:57.25,0:03:01.86,Default,,0000,0000,0000,,The kind of thing that Indiana Jones would love to have on his mantlepiece
Dialogue: 0,0:03:01.86,0:03:03.25,Default,,0000,0000,0000,,so having added one object
Dialogue: 0,0:03:03.25,0:03:05.78,Default,,0000,0000,0000,,let's add another just for fun
Dialogue: 0,0:03:05.78,0:03:07.34,Default,,0000,0000,0000,,we'll have to assign an ID
Dialogue: 0,0:03:07.34,0:03:08.31,Default,,0000,0000,0000,,this time: penguin
Dialogue: 0,0:03:08.31,0:03:12.08,Default,,0000,0000,0000,,and once again set the mesh property to mesh object
Dialogue: 0,0:03:12.08,0:03:16.44,Default,,0000,0000,0000,,this time a file called penguin.3ds
Dialogue: 0,0:03:16.44,0:03:18.34,Default,,0000,0000,0000,,No prizes for guessing what that is
Dialogue: 0,0:03:18.34,0:03:22.80,Default,,0000,0000,0000,,Oh my God! A monkey has vomitted out a giant penguin!
Dialogue: 0,0:03:22.80,0:03:25.68,Default,,0000,0000,0000,,This is part of the problem with using 3rd party models
Dialogue: 0,0:03:25.68,0:03:27.45,Default,,0000,0000,0000,,very often they're too large
Dialogue: 0,0:03:27.45,0:03:28.79,Default,,0000,0000,0000,,on the wrong axis
Dialogue: 0,0:03:28.79,0:03:29.88,Default,,0000,0000,0000,,off centre
Dialogue: 0,0:03:29.88,0:03:31.67,Default,,0000,0000,0000,,any number of problems
Dialogue: 0,0:03:31.67,0:03:34.60,Default,,0000,0000,0000,,and what we have to do is actually correct those at the code level
Dialogue: 0,0:03:34.60,0:03:37.48,Default,,0000,0000,0000,,Now this is a problem that is being worked on in QML/3d
Dialogue: 0,0:03:37.48,0:03:40.62,Default,,0000,0000,0000,,but for the moment I can demonstrate a simple solution
Dialogue: 0,0:03:40.62,0:03:41.91,Default,,0000,0000,0000,,by rescaling it
Dialogue: 0,0:03:41.91,0:03:44.80,Default,,0000,0000,0000,,and applying a transform
Dialogue: 0,0:03:49.62,0:03:53.33,Default,,0000,0000,0000,,and we apply a rotation 3d
Dialogue: 0,0:03:54.19,0:03:57.23,Default,,0000,0000,0000,,we give it angle
Dialogue: 0,0:03:58.47,0:04:03.24,Default,,0000,0000,0000,,and we apply it to a particular axis
Dialogue: 0,0:04:05.25,0:04:07.02,Default,,0000,0000,0000,,again we do the same thing
Dialogue: 0,0:04:07.02,0:04:10.63,Default,,0000,0000,0000,,this time a different axis
Dialogue: 0,0:04:11.80,0:04:14.91,Default,,0000,0000,0000,,and now the penguin should be in the correct position
Dialogue: 0,0:04:18.87,0:04:19.94,Default,,0000,0000,0000,,Low and behold
Dialogue: 0,0:04:19.94,0:04:24.12,Default,,0000,0000,0000,,our tiny penguin is now worshiping a golden monkey idol
Dialogue: 0,0:04:24.12,0:04:28.49,Default,,0000,0000,0000,,quite inspired really
Dialogue: 0,0:04:32.09,0:04:34.56,Default,,0000,0000,0000,,let's make it a bit more exciting
Dialogue: 0,0:04:34.56,0:04:38.56,Default,,0000,0000,0000,,QML/3d uses exactly the same kind of animations animations as QML
Dialogue: 0,0:04:38.56,0:04:41.60,Default,,0000,0000,0000,,so here I'm setting a sequential animaiton
Dialogue: 0,0:04:41.60,0:04:42.71,Default,,0000,0000,0000,,setting it to be running
Dialogue: 0,0:04:42.71,0:04:45.42,Default,,0000,0000,0000,,and it's a number animation
Dialogue: 0,0:04:45.42,0:04:49.03,Default,,0000,0000,0000,,and what we're going to be animating with this particular one
Dialogue: 0,0:04:49.03,0:04:51.71,Default,,0000,0000,0000,,is the penguin tilt
Dialogue: 0,0:04:51.71,0:04:57.48,Default,,0000,0000,0000,,which as you saw from earlier is a rotation 3d
Dialogue: 0,0:04:57.85,0:05:00.61,Default,,0000,0000,0000,,so we'll set it to go to -45 degrees
Dialogue: 0,0:05:00.61,0:05:02.28,Default,,0000,0000,0000,,that's an easing curve there
Dialogue: 0,0:05:02.28,0:05:07.13,Default,,0000,0000,0000,,it just tells you how fast the animation accelerates and decelerates
Dialogue: 0,0:05:07.13,0:05:11.55,Default,,0000,0000,0000,,gives you an idea of what it's going look loke when it actually animates
Dialogue: 0,0:05:11.55,0:05:13.39,Default,,0000,0000,0000,,and we'll apply another animation
Dialogue: 0,0:05:13.39,0:05:16.21,Default,,0000,0000,0000,,this time directly onto a property of the item itself
Dialogue: 0,0:05:16.21,0:05:22.04,Default,,0000,0000,0000,,it's on the Y property there - of the parent item
Dialogue: 0,0:05:22.91,0:05:26.68,Default,,0000,0000,0000,,and again a number animation
Dialogue: 0,0:05:29.63,0:05:31.52,Default,,0000,0000,0000,,slightly shorter this time
Dialogue: 0,0:05:31.52,0:05:35.22,Default,,0000,0000,0000,,and the same easing curve
Dialogue: 0,0:05:36.34,0:05:40.01,Default,,0000,0000,0000,,It's a dancing penguin
Dialogue: 0,0:05:40.72,0:05:43.52,Default,,0000,0000,0000,,So now our little penguin worshiper is jumping up and down and dancing
Dialogue: 0,0:05:43.52,0:05:47.31,Default,,0000,0000,0000,,what he really needs though is some friends
Dialogue: 0,0:05:47.31,0:05:48.41,Default,,0000,0000,0000,,if I wanted to do that normally
Dialogue: 0,0:05:48.41,0:05:51.83,Default,,0000,0000,0000,,I'd have to cut and paste this entire section time and time and time again
Dialogue: 0,0:05:51.83,0:05:53.52,Default,,0000,0000,0000,,which can get tiresome
Dialogue: 0,0:05:53.52,0:05:55.95,Default,,0000,0000,0000,,so what we can do instead is create a new file
Dialogue: 0,0:05:55.95,0:05:57.85,Default,,0000,0000,0000,,grab the imports there
Dialogue: 0,0:05:57.85,0:06:00.23,Default,,0000,0000,0000,,take that entire Item3d
Dialogue: 0,0:06:00.23,0:06:02.42,Default,,0000,0000,0000,,drop it in there like so
Dialogue: 0,0:06:02.42,0:06:04.40,Default,,0000,0000,0000,,and call it "Penguin.qml"
Dialogue: 0,0:06:04.40,0:06:05.76,Default,,0000,0000,0000,,now it needs to start with a capital P
Dialogue: 0,0:06:05.76,0:06:09.11,Default,,0000,0000,0000,,because it's going to be invoked as a separate object of its own
Dialogue: 0,0:06:09.11,0:06:11.47,Default,,0000,0000,0000,,there we go - I'm invoking it
Dialogue: 0,0:06:11.47,0:06:13.42,Default,,0000,0000,0000,,and we get the same effect
Dialogue: 0,0:06:13.42,0:06:17.97,Default,,0000,0000,0000,,but now we no longer need to have that entire big chunk of text in our main file
Dialogue: 0,0:06:17.97,0:06:19.46,Default,,0000,0000,0000,,one of the advantages of that
Dialogue: 0,0:06:19.46,0:06:21.41,Default,,0000,0000,0000,,is that we can quickly and easily
Dialogue: 0,0:06:21.41,0:06:23.45,Default,,0000,0000,0000,,put multiple penguins in
Dialogue: 0,0:06:23.45,0:06:27.99,Default,,0000,0000,0000,,each of them can be manipulated as if it were its own item
Dialogue: 0,0:06:29.40,0:06:32.23,Default,,0000,0000,0000,,so I'll throw four penguins in
Dialogue: 0,0:06:32.23,0:06:34.04,Default,,0000,0000,0000,,give them slightly separate positions
Dialogue: 0,0:06:34.04,0:06:37.06,Default,,0000,0000,0000,,offset from each other
Dialogue: 0,0:06:39.09,0:06:40.14,Default,,0000,0000,0000,,and behold
Dialogue: 0,0:06:40.14,0:06:42.05,Default,,0000,0000,0000,,a mighty tribe of penguins
Dialogue: 0,0:06:42.05,0:06:44.49,Default,,0000,0000,0000,,well, four ...
Dialogue: 0,0:06:44.49,0:06:47.79,Default,,0000,0000,0000,,one of the other things we can do with QML/3d
Dialogue: 0,0:06:47.79,0:06:49.28,Default,,0000,0000,0000,,which is very similar to QML
Dialogue: 0,0:06:49.28,0:06:52.70,Default,,0000,0000,0000,,is use the inheritance property on animations
Dialogue: 0,0:06:52.70,0:06:55.08,Default,,0000,0000,0000,,which is basically part of the entire structure
Dialogue: 0,0:06:55.08,0:06:56.41,Default,,0000,0000,0000,,of the QML language
Dialogue: 0,0:06:56.41,0:07:00.61,Default,,0000,0000,0000,,here we're encasing all the penguins in an Item3d
Dialogue: 0,0:07:00.62,0:07:04.09,Default,,0000,0000,0000,,and anything we do to that Item3d in terms of transformations
Dialogue: 0,0:07:04.09,0:07:06.09,Default,,0000,0000,0000,,or animations
Dialogue: 0,0:07:06.09,0:07:09.15,Default,,0000,0000,0000,,will automatically be applied to those child items
Dialogue: 0,0:07:09.15,0:07:11.66,Default,,0000,0000,0000,,in this case our family of penguins
Dialogue: 0,0:07:11.66,0:07:15.42,Default,,0000,0000,0000,,so here I'll apply a transformation
Dialogue: 0,0:07:15.42,0:07:21.23,Default,,0000,0000,0000,,rotating them slightly around the axis there
Dialogue: 0,0:07:21.23,0:07:25.73,Default,,0000,0000,0000,,so now you can see the slight offset from the centre
Dialogue: 0,0:07:25.73,0:07:27.40,Default,,0000,0000,0000,,and added to that
Dialogue: 0,0:07:27.40,0:07:29.07,Default,,0000,0000,0000,,we'll add an animation
Dialogue: 0,0:07:29.07,0:07:31.16,Default,,0000,0000,0000,,I've only been using the SequentialNumber animations here
Dialogue: 0,0:07:31.16,0:07:33.53,Default,,0000,0000,0000,,but the full range of QML animations are available
Dialogue: 0,0:07:33.53,0:07:37.02,Default,,0000,0000,0000,,and I could animate such properties as colour and so on
Dialogue: 0,0:07:37.02,0:07:41.38,Default,,0000,0000,0000,,in this case we're going to be animating the transformation we just made
Dialogue: 0,0:07:41.38,0:07:43.66,Default,,0000,0000,0000,,around the vertical axis
Dialogue: 0,0:07:43.66,0:07:46.16,Default,,0000,0000,0000,,so the penguins, all being well
Dialogue: 0,0:07:46.16,0:07:48.49,Default,,0000,0000,0000,,will move backwards and forwards in sync
Dialogue: 0,0:07:48.49,0:07:50.44,Default,,0000,0000,0000,,while they jump up and down
Dialogue: 0,0:07:50.44,0:07:55.34,Default,,0000,0000,0000,,and bow to their mighty monkey God
Dialogue: 0,0:07:57.33,0:07:59.06,Default,,0000,0000,0000,,Behold the mightyMonkey God!
Dialogue: 0,0:07:59.06,0:08:02.20,Default,,0000,0000,0000,,as his followers dance in obescence to his glory
Dialogue: 0,0:08:02.20,0:08:07.56,Default,,0000,0000,0000,,it kind of makes me wish I was a disembodied monkey head really
Dialogue: 0,0:08:07.56,0:08:09.52,Default,,0000,0000,0000,,here's the thing
Dialogue: 0,0:08:09.52,0:08:11.62,Default,,0000,0000,0000,,I have to make a bit of a confession
Dialogue: 0,0:08:11.62,0:08:15.19,Default,,0000,0000,0000,,to make things more interesting I've slipped in a couple of extra items here
Dialogue: 0,0:08:15.19,0:08:18.70,Default,,0000,0000,0000,,just enough to make things just that touch cooler
Dialogue: 0,0:08:18.70,0:08:20.27,Default,,0000,0000,0000,,check it out
Dialogue: 0,0:08:20.27,0:08:23.13,Default,,0000,0000,0000,,monkeys dancing on a pedistal
Dialogue: 0,0:08:23.13,0:08:26.06,Default,,0000,0000,0000,,okay, in my life it doesn't get much better than that
Dialogue: 0,0:08:26.06,0:08:31.32,Default,,0000,0000,0000,,but, I think we can still go one better
Dialogue: 0,0:08:31.32,0:08:32.93,Default,,0000,0000,0000,,we can give it a background image
Dialogue: 0,0:08:32.93,0:08:36.69,Default,,0000,0000,0000,,now this is a classic example of integrating standard QML
Dialogue: 0,0:08:36.69,0:08:38.70,Default,,0000,0000,0000,,with QML/3d
Dialogue: 0,0:08:38.70,0:08:43.26,Default,,0000,0000,0000,,in this case using QML StandardImage
Dialogue: 0,0:08:48.18,0:08:52.31,Default,,0000,0000,0000,,and I'm also going to throw some lights on the penguins there
Dialogue: 0,0:08:52.31,0:08:55.21,Default,,0000,0000,0000,,just to make it a bit more exciting
Dialogue: 0,0:08:55.21,0:08:58.23,Default,,0000,0000,0000,,let's check that out