Workbook 8: Meshes and Textures
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 get some practice with mesh data structures, and see how they are used in a practical API.
- To understand vertex-oriented representations, their motivations, and their use.
- To see the effects of vertex and face properties including colors and normals.
- To practice the basic concepts of textures, especially texture coordinates.
- To see how texturing is implemented in a practical API.
- 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.
Required and Recommended Readings
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 (v148) is not the default on the THREE website. However, the documentation at THREE.js Documentation (current) should be close enough.
We strongly recommend reading the textbook chapters. The basic concepts will be covered in the lectures/videos, but it is also helpful to see more details. (these chapters are short):
- FCG4 Chapter 10 (10-10.2, 10.3 is optional)
- FCG4 Chapter 11 (11-11.3, 11.4 will be in the next workbook)
From the previous workbook, but still relevant
- FCG4 Chapter 12 (12, 12.1 (not 12.1.4), 12.2)
Lighting
In the workbooks, we let THREE take care of lighting for us. In lectures, and the textbook, we discuss how basic lighting works. You will need to understand it for the quiz. You should read FCG4 Chapter 10 - 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.
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 Chapter 12) 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.
In the old days, THREE had a very convenient class for meshes called Geometry. Unfortunately, it was deprecated for the more modern BufferGeometry class. BufferGeometry has better performance because it matches how the graphics hardware works (we’ll learn about the hardware in Workbook 10), however it is less convenient. Unfortunately, with modern versions of THREE we have no choice.
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 Chapter 11 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).
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 Canvas Assignment when you have completed the assignment!