Workbook 9: Fancier Textures and Lighting

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

  1. To learn about how local lighting is computed, and see how it is used in a practical system.
  2. To learn about types of texturing beyond color maps, and see how they are used.
  3. To see how lighting and texturing is used in a practical graphics system.
  4. To try using various lighting and texturing features to create appearances.
  5. To gain some experience using THREE.js and the class software framework.

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.

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.
  • FCG4 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.
  • FCG4 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:

  1. A texture you made yourself by painting (digital painting, using a painting program/photo editor)
  2. A texture that you got from the web (document where you found it, and confirm that it is free to use)
  3. A texture that is a photograph (that you took) of a real object

You need to explain how you used each of these creation methods in 09-workbook.txt 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 09-workbook.txt. 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 180+ 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 attribution box 09-workbook.txt.

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

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 text box 09-workbook.txt.

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 09-workbook.txt

Get Started

Everything begins on Page  1  (Fancy Texturing).

Rubric

Workbook Rubric (93 points total)
Points (87):
20 pt
correct WB9 Canvas Assignment submission
20 pt
correct WB9G Canvas Assignment submission on time
2 pt
(at least one) texture you made by painting (described in the readme)
2 pt
(at least one) texture you found on the web (described in readme with proper attribution)
2 pt
(at least one) a texture you made by taking a picture (described in the readme)
Box 09-01-01
3 pt
identifyable as a real object
Box 09-01-01
3 pt
texture makes it look like a real object
Box 09-02-01
2 pt
an appropriate scene (objects, lighting, …)
Box 09-02-01
2 pt
clear use of mat prop map
Box 09-02-01
2 pt
material map use explained
Box 09-03-01
1 pt
appropriate scene (objects and lighting)
Box 09-03-01
1 pt
bump map object looks “bump mappy”
Box 09-03-01
1 pt
confirm bump map is a bump map (1 channel)
Box 09-03-01
1 pt
normal map object looks “normal mappy”
Box 09-03-01
1 pt
confirm normal map is a normal map (3 channels)
Box 09-03-01
1 pt
explaination of how we can see the effects
Box 09-04-01
3 pt
both 4-1 and 4-2 look like a skybox
Box 09-04-01
2 pt
4-1 is a fake sky box (get close to edge)
Box 09-05-01
3 pt
there is a reflective object in the scene that shows the environment map
Box 09-05-01
1 pt
environment map matches environment
Box 09-05-01
2 pt
explanation of why env map is appropriate
Box 09-06-01
3 pt
there are shadows
Box 09-06-01
2 pt
there are shadows of one object onto another object
Box 09-07-01
2 pt
there is an object reflecting the environment (checks for code using current framework)
Box 09-07-01
2 pt
the reflections show the scene (not just the background)
Box 09-07-01
2 pt
you can see moving objects in the reflection
Box 09-07-01
1 pt
not the same as the example (checks for code using current framework)
Advanced points (6):
Box 09-03-01
1 pt
combine bump/normal with color map, with explanation
Box 09-05-01
2 pt
combine env map with other map types and explain
Box 09-07-01
3 pt
video screen showing what a camera moving in the scene sees

Get started on Page  1  (Fancy Texturing)!