Return to Video

QML/3D Demo - Behold the Monkey God

  • 0:01 - 0:03
    Welcome to the first what we hope will be
  • 0:03 - 0:05
    a number of tutorials about QML/3d
  • 0:05 - 0:07
    It's important to remember
  • 0:07 - 0:09
    that QML/3d is still under development
  • 0:09 - 0:10
    so what you see in this tutorial
  • 0:10 - 0:14
    may have changed considerably by the time QML/3d is officially released
  • 0:14 - 0:16
    That being said however
  • 0:16 - 0:18
    this tutorial should give you some idea
  • 0:18 - 0:20
    of the capabilities of QML/3d as they currently stand
  • 0:20 - 0:22
    and give you a grounding in QML/3d development
  • 0:22 - 0:25
    as newer versions become available
  • 0:25 - 0:27
    So now i've done the boring introduction part
  • 0:27 - 0:30
    let's actually get down to writing some QML code
  • 0:30 - 0:31
    If you've already dabbled in QML
  • 0:31 - 0:34
    a lot of what I'm doing will be familiar to you
  • 0:34 - 0:36
    QML/3d files also import headers
  • 0:36 - 0:39
    for example the Qt 4.7 import
  • 0:39 - 0:43
    but in addition to that we add the labs.threed 1.0
  • 0:43 - 0:46
    this contains all the 3d information we'll need
  • 0:46 - 0:47
    Now if you're watching this tutorial
  • 0:47 - 0:51
    I'm sure you're fairly familiar with 3d applications as it stands
  • 0:51 - 0:52
    however for the newcomers
  • 0:52 - 0:55
    a 3d application basically needs 3 things
  • 0:55 - 0:57
    first up we need somewhere to actually draw stuff
  • 0:57 - 1:00
    in QML/3d this specified as a viewport
  • 1:00 - 1:02
    a viewport can be the actual window itself
  • 1:02 - 1:07
    or it can be an area of the window in which we are drawing 3d content
  • 1:07 - 1:09
    Secondly we need a camera position
  • 1:09 - 1:12
    The camera position specifies
  • 1:12 - 1:14
    what angle we're looking at the world from
  • 1:14 - 1:17
    where we're actually looking in 3d space
  • 1:17 - 1:20
    In QML/3d we have an actual camera object
  • 1:20 - 1:22
    here I'm setting the camera's eye position
  • 1:22 - 1:25
    this will give me a view from slightly above
  • 1:25 - 1:29
    The final thing we need for a 3d scene is and actual 3d object
  • 1:29 - 1:33
    and I'll also assign the mesh property of the item3d
  • 1:33 - 1:36
    Mesh object is an actual thing which supports a variety of file formats
  • 1:36 - 1:42
    .3ds files, .obj files and bezier patches
  • 1:42 - 1:45
    It's a monkey. It's flat shaded
  • 1:45 - 1:47
    but not very exciting
  • 1:47 - 1:50
    though you can see that I can already manipulate it in 3d space
  • 1:50 - 1:52
    which is quite useful
  • 1:52 - 1:53
    So let's do a little bit more
  • 1:53 - 1:58
    So here I am setting the ForceSmooth parameter
  • 1:58 - 2:02
    and I'm also going to assign a few more variables to this
  • 2:02 - 2:04
    we'll set a different scale
  • 2:04 - 2:08
    and give the monkey a particular position
  • 2:08 - 2:10
    as you can see here
  • 2:10 - 2:13
    I'll also move the camera slightly
  • 2:13 - 2:16
    and most intersetingly, we'll apply an effect
  • 2:16 - 2:21
    in this case the effect object I'm going to specify is the material for the mokey
  • 2:21 - 2:23
    Actually create a material object
  • 2:24 - 2:27
    and assign some properties for that object
  • 2:27 - 2:29
    in this case
  • 2:30 - 2:34
    the ambient colours
  • 2:34 - 2:35
    and the specular colours for the object
  • 2:35 - 2:42
    So, we'll just specify that in the standard kind of format
  • 2:43 - 2:47
    and I'll also assign the shinyness of this particular material to 200
  • 2:47 - 2:50
    that's a value between 0 and 255
  • 2:50 - 2:52
    so this is quite a shiny object
  • 2:52 - 2:54
    let's see what that looks like
  • 2:54 - 2:56
    That's much cooler
  • 2:56 - 2:57
    It's a shiny monkey idol!
  • 2:57 - 3:02
    The kind of thing that Indiana Jones would love to have on his mantlepiece
  • 3:02 - 3:03
    so having added one object
  • 3:03 - 3:06
    let's add another just for fun
  • 3:06 - 3:07
    we'll have to assign an ID
  • 3:07 - 3:08
    this time: penguin
  • 3:08 - 3:12
    and once again set the mesh property to mesh object
  • 3:12 - 3:16
    this time a file called penguin.3ds
  • 3:16 - 3:18
    No prizes for guessing what that is
  • 3:18 - 3:23
    Oh my God! A monkey has vomitted out a giant penguin!
  • 3:23 - 3:26
    This is part of the problem with using 3rd party models
  • 3:26 - 3:27
    very often they're too large
  • 3:27 - 3:29
    on the wrong axis
  • 3:29 - 3:30
    off centre
  • 3:30 - 3:32
    any number of problems
  • 3:32 - 3:35
    and what we have to do is actually correct those at the code level
  • 3:35 - 3:37
    Now this is a problem that is being worked on in QML/3d
  • 3:37 - 3:41
    but for the moment I can demonstrate a simple solution
  • 3:41 - 3:42
    by rescaling it
  • 3:42 - 3:45
    and applying a transform
  • 3:50 - 3:53
    and we apply a rotation 3d
  • 3:54 - 3:57
    we give it angle
  • 3:58 - 4:03
    and we apply it to a particular axis
  • 4:05 - 4:07
    again we do the same thing
  • 4:07 - 4:11
    this time a different axis
  • 4:12 - 4:15
    and now the penguin should be in the correct position
  • 4:19 - 4:20
    Low and behold
  • 4:20 - 4:24
    our tiny penguin is now worshiping a golden monkey idol
  • 4:24 - 4:28
    quite inspired really
  • 4:32 - 4:35
    let's make it a bit more exciting
  • 4:35 - 4:39
    QML/3d uses exactly the same kind of animations animations as QML
  • 4:39 - 4:42
    so here I'm setting a sequential animaiton
  • 4:42 - 4:43
    setting it to be running
  • 4:43 - 4:45
    and it's a number animation
  • 4:45 - 4:49
    and what we're going to be animating with this particular one
  • 4:49 - 4:52
    is the penguin tilt
  • 4:52 - 4:57
    which as you saw from earlier is a rotation 3d
  • 4:58 - 5:01
    so we'll set it to go to -45 degrees
  • 5:01 - 5:02
    that's an easing curve there
  • 5:02 - 5:07
    it just tells you how fast the animation accelerates and decelerates
  • 5:07 - 5:12
    gives you an idea of what it's going look loke when it actually animates
  • 5:12 - 5:13
    and we'll apply another animation
  • 5:13 - 5:16
    this time directly onto a property of the item itself
  • 5:16 - 5:22
    it's on the Y property there - of the parent item
  • 5:23 - 5:27
    and again a number animation
  • 5:30 - 5:32
    slightly shorter this time
  • 5:32 - 5:35
    and the same easing curve
  • 5:36 - 5:40
    It's a dancing penguin
  • 5:41 - 5:44
    So now our little penguin worshiper is jumping up and down and dancing
  • 5:44 - 5:47
    what he really needs though is some friends
  • 5:47 - 5:48
    if I wanted to do that normally
  • 5:48 - 5:52
    I'd have to cut and paste this entire section time and time and time again
  • 5:52 - 5:54
    which can get tiresome
  • 5:54 - 5:56
    so what we can do instead is create a new file
  • 5:56 - 5:58
    grab the imports there
  • 5:58 - 6:00
    take that entire Item3d
  • 6:00 - 6:02
    drop it in there like so
  • 6:02 - 6:04
    and call it "Penguin.qml"
  • 6:04 - 6:06
    now it needs to start with a capital P
  • 6:06 - 6:09
    because it's going to be invoked as a separate object of its own
  • 6:09 - 6:11
    there we go - I'm invoking it
  • 6:11 - 6:13
    and we get the same effect
  • 6:13 - 6:18
    but now we no longer need to have that entire big chunk of text in our main file
  • 6:18 - 6:19
    one of the advantages of that
  • 6:19 - 6:21
    is that we can quickly and easily
  • 6:21 - 6:23
    put multiple penguins in
  • 6:23 - 6:28
    each of them can be manipulated as if it were its own item
  • 6:29 - 6:32
    so I'll throw four penguins in
  • 6:32 - 6:34
    give them slightly separate positions
  • 6:34 - 6:37
    offset from each other
  • 6:39 - 6:40
    and behold
  • 6:40 - 6:42
    a mighty tribe of penguins
  • 6:42 - 6:44
    well, four ...
  • 6:44 - 6:48
    one of the other things we can do with QML/3d
  • 6:48 - 6:49
    which is very similar to QML
  • 6:49 - 6:53
    is use the inheritance property on animations
  • 6:53 - 6:55
    which is basically part of the entire structure
  • 6:55 - 6:56
    of the QML language
  • 6:56 - 7:01
    here we're encasing all the penguins in an Item3d
  • 7:01 - 7:04
    and anything we do to that Item3d in terms of transformations
  • 7:04 - 7:06
    or animations
  • 7:06 - 7:09
    will automatically be applied to those child items
  • 7:09 - 7:12
    in this case our family of penguins
  • 7:12 - 7:15
    so here I'll apply a transformation
  • 7:15 - 7:21
    rotating them slightly around the axis there
  • 7:21 - 7:26
    so now you can see the slight offset from the centre
  • 7:26 - 7:27
    and added to that
  • 7:27 - 7:29
    we'll add an animation
  • 7:29 - 7:31
    I've only been using the SequentialNumber animations here
  • 7:31 - 7:34
    but the full range of QML animations are available
  • 7:34 - 7:37
    and I could animate such properties as colour and so on
  • 7:37 - 7:41
    in this case we're going to be animating the transformation we just made
  • 7:41 - 7:44
    around the vertical axis
  • 7:44 - 7:46
    so the penguins, all being well
  • 7:46 - 7:48
    will move backwards and forwards in sync
  • 7:48 - 7:50
    while they jump up and down
  • 7:50 - 7:55
    and bow to their mighty monkey God
  • 7:57 - 7:59
    Behold the mightyMonkey God!
  • 7:59 - 8:02
    as his followers dance in obescence to his glory
  • 8:02 - 8:08
    it kind of makes me wish I was a disembodied monkey head really
  • 8:08 - 8:10
    here's the thing
  • 8:10 - 8:12
    I have to make a bit of a confession
  • 8:12 - 8:15
    to make things more interesting I've slipped in a couple of extra items here
  • 8:15 - 8:19
    just enough to make things just that touch cooler
  • 8:19 - 8:20
    check it out
  • 8:20 - 8:23
    monkeys dancing on a pedistal
  • 8:23 - 8:26
    okay, in my life it doesn't get much better than that
  • 8:26 - 8:31
    but, I think we can still go one better
  • 8:31 - 8:33
    we can give it a background image
  • 8:33 - 8:37
    now this is a classic example of integrating standard QML
  • 8:37 - 8:39
    with QML/3d
  • 8:39 - 8:43
    in this case using QML StandardImage
  • 8:48 - 8:52
    and I'm also going to throw some lights on the penguins there
  • 8:52 - 8:55
    just to make it a bit more exciting
  • 8:55 - 8:58
    let's check that out
Title:
QML/3D Demo - Behold the Monkey God
Description:

A QML/3D demo/tutorial.

QML/3D combines Qt's QML with Qt/3D to provide developers and designers with a way of creating content rich 3d applications quickly and easily.

QML/3D is still under active development, so expect major changes over coming months.
more » « less
Video Language:
English
Duration:
09:35

English subtitles

Revisions

Our website uses cookies for analysis purposes.