Workbook 6: 3D and Three

In this workbook, we’ll move on to doing some 3D programming. To do this, we’ll use a Javascript library called THREE.js (we’ll just say THREE from now on).

There are two major goals in this workbook: we both want you to get the idea of the specific THREE library, but also to see the general graphics concepts.

Note: because of the timing with Spring Break, this workbook is due a week later than you might expect. However, the next workbook will also be due that week - doing both at the same time might be a lot! Both Workbook 6 and Workbook 7 are due Mon, Mar 27.

Learning Goals

1. Get you set up with the mechanics of using THREE.js
2. Get you to make some basics 3D pictures and animations using THREE.js and the basic pieces
3. Provide experience with the basic concepts of 3D Graphics
4. Be able to work with standard camera models, lighting models, and primitives used in computer graphics

The idea is that once you’ve gotten started, it will be easier to explain both what is happening “underneath the hood” as well as fancier things. However, one down side of this strategy is that you may not always understand why you are doing things (since we aren’t explaining how things work), and you may wonder why we are limiting ourselves to simple things (because we are saving more complicated stuff for later).

Required and Recommended Reading

There are two parts to the reading: you need to learn about the THREE.js library in order to use it, and you need to learn about the basic concepts of transformations in 3D (since you need to know them). You don’t need to understand the graphics stuff in order to do the workbook, but you will want to know it for the quiz and exam, and if you really want to know graphics.

Learning THREE: The official documentation can be found here. This is mainly a reference. Once you get started you can look up the details of the things you need.

Be warned: a lot of the fancier stuff may not make sense until we’ve talked about what is happening “under the hood”. The documentation dives into details quite quickly. The workbook is designed to guide you through the basics. We suggest you use the official documentation as a reference to get the details as you need them.

The workbook and lectures should give you enough of an idea of how THREE works to complete the workbook, but you might find it helpful to see other materials or examples. The workbook’s version of the library does not include THREE.js in its entirety, mostly excluding many of the examples. We only included enough to get you through the workbooks. You can download the entire library if you wish, but please don’t add it to your git repo if you do.

While there are a lot of THREE resources around the web, and the API documentation is pretty complete, things tend not to be that well-organized or beginner-friendly. If you find good additional resources, please post them on Piazza. Here are some things I found useful (if you find others, post them on Piazza!):

• THREE.js Getting Started - Shows you the minimal steps for creating a scene with THREE. It’s a bit redundant with this workbook, but seeing things in someone else’s words may be useful.

• THREE.js Tutorial - This is very similar to the way we’ll introduce things in this workbook. Read this to see what we’re talking about said in different words.

• Aviator Game - this is a complicated example that builds things up from scratch. It’s a bit of a fancy application to start with, but you can see how the author builds something pretty cool using the pieces we’ll learn about.

The textbooks: Between now and the exam, you need to understand transformations in 3D and viewing and projection (which will turn out to be a special case of transformations). THREE takes care of a lot of this for us, so you may not see it when you program. THREE does a good job of hiding the matrices if you don’t want to see them (unlike 2D Canvas, it will let you see them).

When we learned about transformations, we skipped 3D transformations. Now is a good time to come back to them. You are required to read:

• The Big Fun Book of Computer Graphics, Chapter 6. This Chapter mixes in many different, but important things, including a review of the vector algebra basics. Most of the chapter is essential and required. This will tell you what you can skip.

  • 6.1 - Scale and Translation - important, but a simple extension of 2D
  • 6.2 - Handedness of Coordinate Systems - important
  • 6.3 - Vector Arithmetic - a good review including dot products and cross products. The section on Gramm-Schmidt Orthonormalization is optional (but it is a useful advanced topic).
  • 6.4 - Rotation about a Coordinate Axis - important
  • 6.5 - Properties of Rotation Matrices - the first part is important. The part on Cayley’s Formula is optional.
  • 6.6 - Rotation about an Arbitrary Axis - this is very valuable, and good for getting the intuitions about rotations, but is optional since we won’t discuss it in detail in class.

The following are also required. You may not need it immediately for the workbook, but it will come back for the exams:

• Fundamentals of CG - Chapter 6 Section 6.2 - “3D Linear Transformations”, which mainly just gives the matrices for 2D and 3D transformations. You might want to go over other parts of the Chapter (they were required in the past).
• Fundamentals of CG - Chapter 7: Viewing - this will explain how cameras work. This chapter is short.
• Fundamentals of CG - Chapter 12 Section 12.2: Scene Graphs - this reiterates what we’ve seen about using transformations to create hierarchical models. You only need Section 12.2 - we’ll come back to other parts of this chapter later in the semester.

These readings are optional:

• FCG4_Ch08.pdf (0.6mb): The Graphics Pipeline - this will explain how drawing actually happens, with all the steps that the APIs are taking care of for us.
• Hart07-jan19.pdf (14.5mb): More examples of using transformations, since getting practice is useful.
• Hart08-jan19.pdf (1.7mb): Hart’s explanation of viewing. This provides another version of what is in FCG Ch. 7 - useful if you want to see it multiple ways.

Exercises

Most pages have code examples - make sure you understand how they work.

Pages 2, 4, 5 and 6 have simple examples on them. Make sure they work, and that you understand them.

Pages 8 and 9 ask you to make pictures. For now, please focus on understanding the basic features: you will have plenty of time later to use fancier features.

Rubric for Grading

Ground Rules for Workbook 6

For the programming assignment, we are going to ask you to make some pictures by writing programs that use THREE. We want you to focus on using the parts that we’ve discussed, not trying to show off that you can figure out the fancier features on your own.

You must:

• Use one material per primitive object.
• Use solid colors (no textures).
• Use only built-in shapes (do not make your own meshes).
• Do not use reflections.
• You do not need to add shadows (but you can keep the ones we have in the starter code)
• Do not add other object models (although, you can use the sample ones we provided).
• Do not make your own new kinds of materials (by writing shaders).

You’ll get to do all of these things later in the class. For now, you can be creative and make sure you understand how to put together the basic pieces.

Get Started

Don’t forget to commit and push as you work! And don’t forget to do the handin quiz Workbook 06 Handin (due Mon, Mar 27) when you are done!

Get started on Page  1  (The THREE.js library)!