Workbook 4: 3D

In this workbook, we’ll move on to 3D graphics. The important thing is to understand the key concepts of how we make pictures that look 3D. However, in terms of how to “practice” that, we’ll use a high-level API that hides a lot of the details. All of the programming we will do will be at a high level - but it is important to understand how things are working underneath (otherwise, the high-level stuff won’t make sense when things get tricky).

In this workbook, we’ll use a JavaScript library called three.js (generally, we’ll just say THREE or three from now on). If I spell out the word three, I am probably referring to the library, not the number.

Workbook Operations

The workbook uses both type-in forms that rely on browser local storage and “page boxes” that are files that must be checked in to GitHub.

Right now, please put your name on the workbook and press the “checkpoint” button so that we know that you have at least seen this workbook.

This workbook contains type-ins that are part of the assignment. Some of these have specific rubric checkboxes at the end of the page.

The checkboxes for boxes and rubric elements are to help students keep track of their work. The Last Page (rubric) page has a list of all boxes and rubric items.

Remember to save your local storage to the JSON file periodically in case something goes wrong. You should also make a checkpoint periodically.

Remember to commit your work as you edit files in for_students (you should not need to edit files outside of that directory). Remember to push your work to GitHub - at least at the end, or periodically after you commit, to make a backup. And, when you have completed the workbook, remember to use the submit button on the last page to signal us that your workbook is ready for grading.

We only grade the main branch. It must be pushed to GitHub. And you must use the “submit” button.

Module Goals

The main goals of this module are to introduce you to the basic concepts of 3D computer graphics. We will also see how those concepts are embodied in a modern 3D API, and use that API to practice using the concepts. We want you to learn to use the particular API because it is how we will practice the concepts (both now and in future workbooks).

1. Provide experience with the basic concepts of 3D Graphics
2. Be able to work with standard camera models, lighting models, and primitives used in computer graphics
3. Make images and Animations using a high-level 3D API
4. Understand standard models for viewing and lighting
5. Practice using transformations and 3D, including rotations
6. Practice creating and animating hierarchical models
7. Experience working with a modern scene graph API

The idea is that once you’ve gotten started, it will be easier to explain both what is happening “under the hood” as well as fancier things. However, one downside 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).

In the past, we used the lectures and textbook to cover the math. However, as part of my goal of being “textbook free” this year, I will try to make the workbook self-contained.

A warning, though: Three does a good job of hiding the details happening underneath. You can do most programming without even seeing the matrices. This is like what we saw with the 2D Canvas. However, understanding the math is critical if you want to do more complicated stuff, or to appreciate the elegance of how things work. Also, if you want to move to a different API, the concepts and math are the same, even if the high-level embodiment is different.

I mention the textbook chapters not because I expect you to get the textbook, but to name the topics it covers:

• 3D Linear Transformations - We saw linear, affine, and projective transformations in 2D. They are basically the same in 3D (except the matrices are bigger). The homogeneous coordinates trick will turn out to be more important in 3D. You can look up the matrices. (Section 6.2 of the book)
• Viewing - We’ll learn a special transformation that converts things from a 3D world to the 2D screen (which will turn out to just be a different 2D world). It will turn out to be a cool use of homogeneous coordinates. (Chapter 7 of the book).
• Scene Graphs - We are using a scene graph API. I think you will learn it better by using a real example API. (Section 12.2 of the book)
• The Graphics Pipeline - Understanding how the API and hardware actually do the drawing is valuable for understanding why things are the way they are. We’ll talk about it a little now, and a lot more later.

The Old Lectures

The topics in this workbook were spread out across multiple workbooks in the past. These workbooks relied on the textbook for the details. But the material was covered well in the lectures, which include the background detail and practical aspects of programming with three.

You can see the lecture outline here

There are six relevant lectures:

The most relevant snippets will be provided on the workbook pages.

Exercises

This workbook has a lot of small programming exercises and examples. Make sure you understand how they work.

There are some “bigger” programming examples where we ask you to make things to check that you understand the concepts. We want you to make things using the parts of 3D graphics that we are learning: you can use fancier features when we learn about them later in the semester. Therefore, there are some ground rules for this workbook (see Ground Rules ).

The “big” exercises in this workbook are:

• Making a Snowman (on page Page  18  (Snowman))
• Making a Space-Age Sculpture Museum (on page Page  19  (Space-Age Sculpture Museum))
• Making a Quad-Copter (and propeller aircraft) (on page Page  27  (Exercise: Quadcopter))

There are smaller exercises (including type-in boxes) throughout the workbook. Those are important too.

Ground Rules

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 no more than 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 make your own new kinds of materials (by writing shaders).
• If you add object models (in the places that they are allowed), make sure to give proper attribution.

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. You can submit regular checkpoints as well.

Page  1  (Introduction: Welcome to 3D)