Workbook 7: Transformation and Hierarchy in Three.js
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.
CS559 Spring 2023 Sample Solution
This is a sample solution for the Workbook. You are welcome to refer to it to learn one way to do the assignment but only after you have turned in your own assignment
Learning Goals
- To gain some experience doing hierarchical modeling, particularly for animation
- To get some practice working with 3D rotations
- To get some experience working with the CS559 framework code
- To get more practice working with a modern scene graph API
- To see some details of how different rotation representation are used
- To get some exposure to modern JavaScript features like classes
- To get some experience working with another person’s code
Warnings to Start…
This workbook is a little “bigger” than some of the others: you need to make a number of objects. This will give you more practice at making things. Most students like making stuff - it’s one of the fun parts of doing graphics.
But there is also some substantial content: we will try to understand transformations in 3D, we will get more practice using the specific 3D API (THREE.js) and how it implements transformations and other things, and you’ll use the class software framework that will help make UIs for building things in THREE.js.
Also… in this workbook, you are required to fill out text files on some pages explaining what your assignment does. On page 6, 8 and 9 it isn’t enough to do the work: you must also edit the text file and tell us.
Recommended Reading
Over the course of this assignment, you will probably need to read some of the THREE.js Documentation (current). When you wonder what you can do with a class like BufferGeometry, or what a function like DataTextureLoader.load does, this is the place to look. Even though the documentation is for the “current” version of THREE, it still applies to the version we are using.
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 textbook readings are meant to complement the lectures. They talk about what is going on inside of THREE (so they may not important for doing the workbook, but they are helpful in understanding how things work - which you should want to know, and may need for the exams)
- FCG Chapter 12 - Section 12.2 (other chapter 12 sections are things we will get to later in class)
- Hart, Chapter 7 is written in terms of explicit matrix stacks (which we did with Canvas2D), but gives examples on how to think about hierarchical modeling
- Hart, Chapter 8 can help you if you want to see viewing another way (this was also optional in the last workbook).
- The Real Time Rendering Book has a very thorough discussion of transformations in sections 1-3, 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.
From the previous workbook, but still relevant:
- FCG Chapter 6 6.2, 6.3, 6.4, and 6.5:
- FCG Chapter 7
- Hart, Chapter 6
The readings are here to help you understand the things we discussed in class.
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 the workbooks, we’ll let THREE do this work for us. However, the stack model is discussed in lecture, and you should understand it.
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.
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
There are lots of opportunities for advanced points on this assignment, but we limit the total number you can earn for this workbook.
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.