Workbook 8: Meshes and Textures
This workbook is due on Tuesday, November 4, 2025.
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 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).
This week we’ll do some more texturing, try out fancier versions of texturing and see how this works with lighting.
THREE makes fancy texture mapping very easy. A lot of things that are hard to program are built in and made convenient. Most of the important kinds of texture mapping we need to do are built in to THREE (usually in the materials). This is good news if you want to use advanced texturing - you don’t need to understand the details of how it works, the implementors of THREE figured it out for you. Even better they all work together: you can use a physically-based material with a texture map, environment map, property map, shadow map, and bump map (and maybe even more features) just by specifying the parameters!
This is a slight problem for class: we have no way to know if you are really understanding how these different things work. So, we’re going to trust you. Watch the lecture videos, read the readings, experiment with different parameters, shapes and maps. Be thankful that you don’t actually have to code up the math for each of these methods.
More Readings
The main source of the material in this workbook are the lectures.
You will undoubtedly need to look at the THREE documentation. You may also want to look at the framework code documentation. The documentation is generated from the comments in the code, so you can probably just get by with reading the code.
To get a little deeper into how things work, you will want to do some reading.
- FCG4 Chapter 10 (was in prior workbooks) has a concise and complete discussion of basic lighting. It is a great way to review what we discuss in class. Section 10.3 (Artistic Shading) is a more advanced topic. While lighting is not directly part of the exercises of the workbook, it is a topic that you will need to understand (both for programming and for the exams). We will also do more with it in coming weeks.
- FCG4 Chapter 11 was a reading for last week. Sections 11.1 and 11.2 cover the basics of texture mapping. Section 11.3 discusses the filtering issues (as we talked about in class), including mip mapping and anisotropy. Section 11.4 talks (briefly) about the advanced texturing concepts in the exercises of this workbook.
- RTR Chapter 6 (optional - for advanced students only!) has more details about texturing than you probably want to know. It will tell you about many different kinds of mapping, lots of different algorithms for each different problems, and lots of pictures of how these things can be used in practice. It’s fun to look at the pictures and be inspired about what kinds of cool stuff can be done.
- RTR Chapter 7 (optional - for advanced students only!) is a whole chapter on shadows. We’ll only talk about Shadow Maps (Section 7.4). Even with Shadow Maps, the RTR book will give you more details than you could imagine, and tell you some things that they’ve done in recent (well, recent of the time the book was written) games.
Exercises
The requirements for this workbook are relatively easy. On most pages, we simply ask you to use a particular kind of texture. In most cases, this requires you to pick some object, pick some texture, and write a very minimal amount of code to attach the two. We encourage you to experiment: see how the parameters change things, try different kinds of images for your textures, etc. But we can’t really check that you’ve done this. The requirements are pretty minimal.
It is your responsibility to make sure that your scene shows off the texturing feature that it is supposed to. For example, if you are showing off the use of environment maps to simulate reflections, make sure that you have a shiny object that reflects things (and an environment map that give something to be seen in the reflections). You may want to make your objects move in order to show off some of the lighting effects, or choose object views that make things clear (for example, in lecture I showed off when bump mapping becomes invisible). If you think that its not clear that you are using the required effect, you may want to describe (in the text box below the exercise) what we should be seeing and why it shows off the feature.
You will need to find/create your own texture maps. Over the course of the assignment, you will need a bunch of texture maps. Over the whole assignment you must use each of these creation methods at least once:
- A texture you made yourself by painting (digital painting, using a painting program/photo editor)
- A texture that you got from the web (document where you found it, and confirm that it is free to use)
- A texture that is a photograph (that you took) of a real object
- A texture that is generated by some AI tools, for example, ChatGPT (document what prompts you used)
You need to explain how you used each of these creation methods in the Workbook From to get credit.
Don’t forget to include the textures you use in your repo and push them to GitHub!
In order to the exercises in the workbook, you might need to put an extra object in your scenes.
If you want to load in objects from OBJ or FBX files, that is OK (but optional). Make sure to include the objects in your repo, and document where you got them from in the Workbook Form. You probably want to use the loader code built in the framework. Please choose objects that have appropriate licensing and be sure to give proper attribution.
A Note on Textures
Please be reasonable with your textures. Because 100+ students are uploading files for grading, it uses up a lot of space very quickly. You don’t need massive texture files. When you find textures on the web (especially environment textures) they tend to be huge. Please choose small sized textures, or shrink them to reasonable size if need be. (it is very unlikely that you need a texture that is more than 1MB).
And please use compressed file formats (e.g., .png or .jpg).
You do need to add/commit textures to your repo, so they get pushed to GitHub.
If you get a texture from someplace, you need to give proper attribution. Please give it in the Workbook Form.
Rubric for Grading
The requirements are pretty straightforward. You really only need to add a few lines on top of things you already know how to do.
Assessing effort beyond the minimum is difficult for the graders: it’s too subjective, and not necessarily a measure of your learning about graphics. For example, you might make a really cool scene just because you picked an nice environment map background from Poly Haven; in fact, that might look nicer than a simple one someone made themselves. Therefore, there are few advanced point opportunities in this assignment.
Document the assignments well and a Reminder on Handing Things In…
In this workbook, the assignments are more open ended. For this reason, it is important that you document well what you did. Please do this in the Workbook Form.
In particular, be sure to say where you get your textures from. It’s OK to get them from the web - as long as they are freely available, and you give proper attribution. If you painted them yourself, say so. We’d prefer to know how (what program did you use?). Please put attributions in the Workbook Form.
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 Workbook Form when you have completed the assignment!
Rubric for Grading
Workbook Rubric (17 basic + 4 advanced (4 max) = 21 total)
| Box | Basic | Advanced | Description |
|---|---|---|---|
| 1 | correct WB8 Workbook Form submission on time | ||
| 08-01-04 | triangles correctly oriented (no holes in grid) | ||
| 08-02-01 | Object 1 has (at least) 3 triangles | ||
| 08-02-01 | Object 1 has colored triangles (with different colors) | ||
| 08-02-01 | Object 2 has (at least) 3 triangles | ||
| 08-02-01 | Object 2 has vertex colors where we can see blending | ||
| 08-02-01 | Object 3 has (at least) 3 triangles | ||
| 08-02-01 | Object 3 has normals that make things look smooth | ||
| 08-02-01 | Code Check: objects build “manually” | ||
| 08-05-01 | There are 2 dice | ||
| 08-05-01 | Dice have numbers on their sides | ||
| 08-05-01 | Dice have correct numbers on their sides | ||
| 08-05-01 | The two dice show different numbers on top | ||
| 08-05-02 | At least one domino | ||
| 08-05-02 | The domino is a double 6 (correct texture) | ||
| 08-07-01 | 1 | Building Type 1 | |
| 08-07-01 | 1 | Building 1 has texture | |
| 08-07-01 | 1 | Building Type 2 | |
| 08-07-01 | 1 | Building 2 has texture | |
| 08-07-01 | 1 | Has different roof type than 1 | |
| 08-07-01 | 1 | Tree or plant | |
| 08-08-01 | 1 | Car or Vehicle (looks like a car or other vehicle) | |
| 08-08-01 | 1 | Has texture (or at least coloring) | |
| 08-05-01 | Rounded edges (Dice) | ||
| 08-05-02 | Rounded edges (Domino) | ||
| 08-05-02 | More dominos (with different numbers) | ||
| 08-05-02 | Legal domino arrangement (at least 4 dominos) | ||
| 08-07-01 | 1 | Building Type 3 - substantially different and described in text | |
| 08-07-01 | 1 | Building Type 3 - different roof type than others | |
| 08-08-01 | 1 | more than 1 vehicle type | |
| 1 | (at least one) texture you made by painting (described in the Workbook Form) | ||
| 1 | (at least one) texture you found on the web (described in Workbook Form with proper attribution) | ||
| 1 | (at least one) a texture you made by taking a picture (described in the Workbook Form) | ||
| 1 | (at least one) a texture you made using generative AI (described in the Workbook Form with prompts used) | ||
| 08-09-02 | identifyable as a real object | ||
| 08-09-02 | texture makes it look like a real object | ||
| 08-10-01 | an appropriate scene (objects, lighting, …) | ||
| 08-10-01 | clear use of mat prop map | ||
| 08-10-01 | material map use explained | ||
| 08-11-01 | appropriate scene (objects and lighting) | ||
| 08-11-01 | bump map object looks “bump mappy” | ||
| 08-11-01 | confirm bump map is a bump map (1 channel) | ||
| 08-11-01 | normal map object looks “normal mappy” | ||
| 08-11-01 | confirm normal map is a normal map (3 channels) | ||
| 08-11-01 | explaination of how we can see the effects | ||
| 08-12-01 | both boxes look like a skybox | ||
| 08-12-01 | one of them is a fake sky box (get close to edge) | ||
| 08-13-01 | there is a reflective object in the scene that shows the environment map | ||
| 08-13-01 | environment map matches environment | ||
| 08-13-01 | explanation of why env map is appropriate | ||
| 08-14-01 | there are shadows | ||
| 08-14-01 | there are shadows of one object onto another object | ||
| 08-15-01 | 1 | there is an object reflecting the environment (checks for code using current framework) | |
| 08-15-01 | 1 | the reflections show the scene (not just the background) | |
| 08-15-01 | 1 | you can see moving objects in the reflection | |
| 08-15-01 | 1 | not the same as the example (checks for code using current framework) | |
| 08-11-01 | combine bump/normal with color map, with explanation | ||
| 08-13-01 | combine env map with other map types and explain | ||
| 08-15-01 | 1 | video screen showing what a camera moving in the scene sees |
Get Started on Page 1 (Meshes: What you need to know)