Workbook 9: Meshes and Textures

CS559 Spring 2021 Sample Solution - Workbook 9

Written by CS559 course staff

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

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

Learning Goals

  1. To get some practice with mesh data structures, and see how they are used in a practical API.
  2. To see the effects of vertex and face properties including colors and normals.
  3. To practice the basic concepts of textures, especially texture coordinates.
  4. To see how texturing is implemented in a practical API.
  5. To gain some experience using shape and texture to create interesting 3D models.

This week, we’ll move on to making the objects that we see in 3D worlds. We’ll learn about how we group triangles into meshes and use texturing to give them more interesting colors.

Learning Goals

  1. To get some practice with mesh data structures, and see how they are used in a practical API.
  2. To see the effects of vertex and face properties including colors and normals.
  3. To practice the basic concepts of textures, especially texture coordinates.
  4. To see how texturing is implemented in a practical API.
  5. To gain some experience using shape and texture to create interesting 3D models.

The required material will be discussed in the lectures. You will want to consult the THREE.JS documentation for details on how to use the API, and you may want to consult a JavaScript text to learn about JavaScript features that are important for the class software framework.

Note: the version of THREE we are using for this workbook (v124) is not the default on the THREE website. We have placed the documentation for the version we are using at THREE.js Documentation.

Required reading (these chapters are short, and the material will be covered in the lectures):

Lighting

Lighting is part of the lectures and will be on the quiz, but never mentioned in a workbook. You should read FCG4_Ch10.pdf (0.8mb) - Section 10.3 is optional, but interesting.

Basics of THREE

By now, you probably have the basics of THREE down. But the "discover threejs tutorial" is a good way to review primitives, hierarchies and other basics. Unfortunately, its one of a very few chapters of the book that has been written.

Meshes

We’ll discuss the basic concepts in class, which will be sufficient for what you need to know. Section 12.1 of Fundamentals of Computer Graphics (FCG4_Ch12.pdf (0.9mb)) covers this, and then some. Sections 12, 12.1 and 12.2 cover the material for class. Section 12.1.3 covers strips and fans (which we will touch on in class, but won’t use much). Section 12.1.4 discusses the fancy data structures used for representing meshes when they need to be manipulated - this is beyond what we will do in class - read this section to get a taste of a more advanced topic. Chapter 4 of The Big Fun Graphics Book (Hart04-jan19.pdf (2.4mb)) covers much of the same material.

The THREE data structure we will use is the Geometry which is documented here. This also links to the Face3 class (documentation). These data structures are poorly documented, and there aren’t many good examples. (Most examples use the BufferGeometry class that we will learn about later). Use the examples in this workbook (read the documents and the code). The design isn’t what you might guess, but once you understand what they’ve done it makes sense.

Texturing

Texturing is a big topic. We’ll cover the basic concepts now, and return to see a lot more of the details later. Again, everything you need will be discussed in class, read a book chapter to get more details or see it explained another way. FCG4_Ch11.pdf (6.1mb) covers texturing, describing it in a very general way. Section 11.1 gives the main ideas, and 11.2 gives many different types of texture - we’ll focus on what’s described in 11.2.2. Sections 11.2.4 (perspective correct interpolation) is an interesting detail (but the hardware takes care of it for you). 11.3 (pixel lookups) is an important topic. Section 11.4 is stuff we’ll see next week (advanced texturing) and 11.5 is interesting but optional.

The implementation of texturing we’ll use is built into the various Materials in THREE. The description of how a texture is stored is discussed with the Texture class. We’ll discuss the main ideas in class, and the examples in this workbook will help you out. There are many examples of using textures with THREE around the web, however, many of them use old versions of THREE. The new versions are much more convenient (especially the TextureLoader). If you’re looking for things to read, this Discover ThreeJS tutorial shows some of the basics, but goes off into tangents about details we probably won’t care about (like color spaces and anisotropic filtering). This "ThreeJS Baby Steps" posting shows how you can do it all yourself - don’t worry, you don’t have to.

A Reminder on Handing Things In…

Part of this assignment is adding images for textures. Do not forget to add this to your repository (for example, using git add if you are using the command line), and committing and pushing the new files to the repository.

And don’t forget to do the handin quiz when you have completed the assignment!

Rubric for Grading

Workbook Rubric (100 points total)
Points (85):
2 pt
Correct handin with Quiz
Box 09-02-01
2 pt
Object 1 has (at least) 3 triangles
Box 09-02-01
2 pt
Object 1 has face colors
Box 09-02-01
2 pt
Object 2 has (at least) 3 triangles
Box 09-02-01
3 pt
Object 2 had vertex colors where we can see blending
Box 09-02-01
2 pt
Object 3 has (at least) 3 triangles
Box 09-02-01
3 pt
Object 3 has normals that make things look smooth
Box 09-02-01
1 pt
Code Check: objects build “manually”
Box 09-05-01
4 pt
There are 2 dice
Box 09-05-01
4 pt
Dice have numbers on their sides
Box 09-05-01
5 pt
Dice have correct numbers on their sides
Box 09-05-01
2 pt
The two dice show different numbers on top
Box 09-05-02
5 pt
At least one domino
Box 09-05-02
10 pt
The domino is a double 6 (correct texture)
Box 09-06-01
4 pt
Building Type 1
Box 09-06-01
3 pt
Building 1 has texture
Box 09-06-01
1 pt
Building 1 described in txt
Box 09-06-01
3 pt
Building Type 2
Box 09-06-01
1 pt
Building 2 described in txt
Box 09-06-01
4 pt
Building 2 has texture
Box 09-06-01
4 pt
Has different roof type than 1
Box 09-06-01
4 pt
Tree or plant
Box 09-07-01
8 pt
Car or Vehicle (looks like a car or other vehicle)
Box 09-07-01
5 pt
Has texture (or at least coloring)
Box 09-07-01
1 pt
Vehicle described in txt
Bonus points (19 possible, of which you can earn a maximum of 15):
Box 09-05-01
2 pt
Rounded edges (Dice)
Box 09-05-02
2 pt
Rounded edges (Domino)
Box 09-05-02
2 pt
More dominos (with different numbers)
Box 09-05-02
2 pt
Legal domino arrangement (at least 4 dominos)
Box 09-06-01
2 pt
fancy/complex texture and/or shape (building 1)
Box 09-06-01
2 pt
fancy/complex texture and/or shape (building 2)
Box 09-06-01
1 pt
Building Type 3
Box 09-06-01
2 pt
different roof type than others
Box 09-07-01
2 pt
fancy vehicle
Box 09-07-01
2 pt
more than 1 vehicle type

Get Started

Everything begins on Page  1  (Meshes: What you need to know).

Get started on Page  1  (Meshes: What you need to know)!