Workbook 8: Transformation and Hierarchy in Three.js

CS559 Spring 2021 Sample Solution - Workbook 8

Written by CS559 course staff

You can try out the example solutions here. The interesting code is on page 6, page 8 and page 9.

This week, we’ll continue to do more THREE programming, with a focus on using THREE’s mechanisms for transformation and hierarchy to make more interesting things.

This workbook is due on Monday, March 22, 2021.

Learning Goals

  1. To gain some experience doing hierarchical modeling, particularly for animation
  2. To get some practice working with 3D rotations
  3. To get some experience working with the CS559 framework code
  4. To get more practice working with a modern scene graph API
  5. To see some details of how different rotation representation are used
  6. To get some exposure to modern JavaScript features like classes
  7. To get some experience working with another person’s code

The readings are here to help you understand the things we discussed in class.

Over the course of this assignment, you will probably need to read a lot of the THREE.js Documentation. Unfortunately, this documentation isn’t good to read - it’s fine for when you need to look things up. So expect to read a lot of pages as you do more programming.

You will also start working with the class framework code. This will require you to spend some time reading the code and its documentation (which is derived from comments in the code). It may also cause you to need to read up on some aspects of JavaScript we haven’t used much in class yet. The framework code will be discussed on page 7.

The textbooks cover the math of the transformations - giving you the matrices. You’ve already had to read those chapters for prior workbooks. Understanding what happens inside the matrices is useful, so if you haven’t already read FCG4_Ch06.pdf (0.5mb) and the relevant portions of Hart06-jan19.pdf (2.3mb), you may want to now.

Hierarchical modeling is discussed briefly in section 2 of FCG4_Ch12.pdf (0.9mb) and Hart07-jan19.pdf (14.5mb). In both cases, the focus is more on how you implement the scene graph traversal using transformation stacks than how to think in terms of hierarchical models. In class, we’ll let THREE do this work for us.

The lookfrom/lookat/vup transformation is called the “The Camera Transformation” in section 1.3 of FCG4_Ch07.pdf (0.5mb). Other things in the chapter discuss the Perspective Transformation in depth (no pun intended), and can help you understand these concepts better. Hart discusses lookfrom/lookat in Hart08-jan19.pdf (1.7mb), but it adds little beyond what you’ve seen already. Look at it if you want to see it explained a different way. These topics will also be discussed in the lectures.

Required: (in general, we discuss the key topics in lecture - these reinforce them)

  • FCG6 6.2, 6.3, 6.4, and 6.5
  • FCG7
  • FCG 12.2
  • Hart6 (we aren’t going to talk about Gramm-Schmidt or Cayley’s formula, and don’t worry about being able to construct rotations about arbitrary axes - but these things can help you understand the basic concepts). For example, the first part of 6.5 sums up what we said in class about rotations.
  • Hart7 is written in terms of explicit matrix stacks (which we did with Canvas2D), but gives examples on how to think about hierarchical modeling
  • Hart8 is redundant, but can help you if you want to see viewing another way.

(optional) The Real Time Rendering book has a very thorough discussion of transformations in sections 1-3 of RTR4_Ch04.pdf (68.2mb), with significant attention paid to rotations and Quaternions (Section 4.3). This material is beyond what you need for class, but may be a good thing to read if you want a better understanding of 3D transformations.

Exercises

The main exercises for this workbook are:

  • Rotation Toys - We are giving you demos to play with. You should use them to help build your intuitions as to how 3D rotations work (or do not work) as the case may be.
  • The Quadcopter / Aircraft - you get to make a quadcopter again, this time in 3D. It’s a hierarchical model. And you’ll need to show that you can use a “lookat” transformation.
  • Graphics Park - before we get to Graphics Town, we’ll start smaller. This is a chance to animate some hierarchical objects in 3D and figure out the framework code.
  • Construction Equipment - another chance to use the framework code and make a different kind of hierarchical object.

Over the next few weeks, we’ll be using the framework code to make increasingly interesting objects. The idea is that by the end of the semester, all of the objects you make can fit together into Graphics Town.

Rubric for Grading

While there are lots of potential for bonus points on this assignment, but we limit the total number you can earn for this workbook. However, we do keep track of your “excess points” and may consider them if you are at a borderline at the end.

Also, the objects that you make using the framework will be usable in the future: we will use the framework for all of the future assignments, including the final “Graphics Town” assignment. If you make nice objects now, you can use them again.

Hopefully, you are making really cool stuff because you like making cool stuff and are learning from doing it, not just because we are giving you a few points.

Workbook Rubric (100 points total)
Points (85):
5 pt
Correct hand-in (includes handin quiz)
Page 2
3 pt
experimenting with the demos on page 2. (We’ll just trust that you’ve done it if you turn any other part in.)
Page 3
3 pt
experimenting with the demos on page 3. (We’ll just trust that you’ve done it if you turn any other part in.)
Box 08-06-01
2 pt
Basics in place (freebie, because we gave it to you)
Box 08-06-01
2 pt
Some aircraft that isn’t a donut
Box 08-06-01
3 pt
A propeller that spins (not the body)
Box 08-06-01
3 pt
More than one propeller spinning (per aircraft)
Box 08-06-01
3 pt
(at least) One aircraft that flies in a circle (or curved path)
Box 08-06-01
3 pt
aircraft points forward as it moves
Box 08-06-01
2 pt
multiple aircraft both moving, both with propellers
Box 08-06-01
1 pt
Radar dish (or some object)
Box 08-06-01
3 pt
Radar correctly points at aircraft (tracks as aircraft moves)
Box 08-08-01
2 pt
take out bouncing cube
Box 08-08-01
2 pt
place at least 1 more swing
Box 08-08-01
2 pt
place carousel
Box 08-08-01
4 pt
carousel has poles and ``horses''
Box 08-08-01
6 pt
carousel has correct motion (spins, horses go up and down)
Box 08-08-01
6 pt
another moving object
Box 08-08-01
6 pt
equipment 1 is identifiable (can tell what it is)
Box 08-09-01
6 pt
equipment 2 is identifiable
Box 08-09-01
6 pt
equipment 1 has correct articulation
Box 08-09-01
6 pt
equipment 2 has correct articulation
Box 08-09-01
6 pt
UI works for 1&2
Bonus points (35 possible, of which you can earn a maximum of 15):
Box 08-06-01
2 pt
cool aircraft
Box 08-06-01
2 pt
more complex motion
Box 08-06-01
2 pt
multiple types of aircraft
Box 08-06-01
4 pt
other cool features (students came up with some great things in 2D!)
Box 08-08-01
5 pt
fancier looking carousel
Box 08-08-01
6 pt
more theme park rides (with hierarchical motion)
Box 08-09-01
4 pt
third machine identifyable with working articulation
Box 08-09-01
2 pt
nice shapes
Box 08-09-01
1 pt
good use of colors/materials
Box 08-09-01
2 pt
more than the minimum degrees of freedom on the objects
Box 08-09-01
2 pt
at least one object has 4+ d.o.f. (beyond position/orientation)
Box 08-09-01
3 pt
other coolness

Get started on Page  1  (Rotations in 3D)!