Page 1: Warmup: Fancy Texturing

CS559 Spring 2021 Sample Solution - Workbook 12

Written by CS559 course staff

You can try out the example solutions here. The interesting code is on Graphics Town and The Train.

This page is a “warmup” for graphics town. These are things you would have done in Workbook 10, had we not skipped it. There are a few points on this page.

For Graphics Town, you will want to apply “fancy textures”. On this page, will will give you an opportunity to try out the most important ones before you need to use them. Also, this way if you can’t find a good way to fit them into your town’s theme, you have still done them.

Note: Workbook 10 would have given you the opportunity to apply a bunch of other kinds of “advanced texturing”. Material Property Maps, Shadow Maps, Displacement Maps, Dynamic Environment Maps. You can still tries these out in Graphics Town. But the short version: THREE makes them all relatively easy to use with their standard materials.

Fancy Texturing

In class, we will talk about the advanced texturing methods. Using them in THREE is fairly straight-forward, the standard materials support them, and skyboxes are built in.

To practice, in the box on this page, you need to (A) make a skybox with an image, (B) make a reflective object that uses that same image (so it properly reflects the sky/world - it will not properly reflect the green ground plane, although you can remove the green groundplane if you prefer), and (C) add a bump or normal map to an object (it can either be the same object as B, or another one). For (C) you need to make the map yourself. Note: it is totally OK (even recommended) that you have simple objects in this exercise. A sphere is fine. Painting blurry dots into a bump map is fine.

Note that to do this you must:

  1. Obtain a cubic environment map. THREE Skyboxes don’t support spherical images. There are some hints on this below.
  2. Edit the scene in the box to have the skybox, and one or two simple objects. You can make them spin if you like.
  3. Load the environment map and create a material that uses it. Your material must be shiny enough that you can see the reflections!
  4. Bump and normal maps work very similar to “regular” texture maps (technically, these are color maps) - again you need to make sure it all works.

You should do this in 12-01-01.html and 12-01-01.js - be sure to add your image files to the repository! We recommend you put them into the “images” subdirectory of the “for_students” directory.

Be sure to fill in 12-01-01.txt:

If you want a sense of what this can look like, here is a demo I made for class last year: https://cs559.github.io/S20-FrameworkDemos/normals/n5-bumpEnv.html - you can look at the source (using view source), but it was written as a demo to show in class, not to be easy to read.

If you get stuck, in the demo I used has a MeshStandardMaterial has its color as white, metalness as 1.0, and roughness as 0 to start with (you can control them in sliders in the demo). You can look up materials in the THREE documentation. And, if you’re stuck on reading in a set of images to a cube map, readCubeTexture.js will give you a code snippet. If you are curious, the number of bumps is controlled by using the same dots file, but using THREE’s texture repeat functionality.

Note: for this page, make a static (loaded from an image file) environment map. You can try to make a dynamic environment map in Graphics Town (there is an example that shows you how).

Understanding Advanced Texturing

There are three parts to understanding how to do this part of the assignment. First, you need to understand what the techniques are (at least in a rough sense). Second, you need to know how THREE makes them available. And third, you need to get the images.

For understanding techniques, the discussion in lecture should be sufficient. If it isn’t you can also watch last year's lectures 19/20 .

Optional Readings

Advanced texturing is an interesting topic that, sadly, we won’t get to discuss in class.

Chapters 10 and 11 of Fundamentals of Computer Graphics have been readings in prior workbooks.

FCG4_Ch10.pdf (0.8mb) 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_Ch11.pdf (6.1mb) was required for Workbook 9. 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.

Optional: RTR4_Ch06.pdf (64.0mb) 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.

For understanding how THREE provides texturing, the best resource is the THREE.js Documentation. Look for the different types of materials that explain how they support different types of maps.

Environment Maps and Where to Get Them

If you’re putting “a box” around the world, you can choose the shape of the box. Since it’s infinitely far away (in principle) and covered with texture and not lit, the shape doesn’t matter that much. Both spheres and cubes work well. Cylinders are a less common alternative (but were common 20 years ago). There are pros and cons to each shape. But the differences generally do not outweigh the convenience: if your texture is for a cube or sphere, then use that appropriate geometry. It is possible to change textures from one form to another.

(Note: when we use THREE’s built in Sky Box feature via scene.background it seems that we must use a cube)

By the way, the texture for a shape (like the cube or sphere) that is designed to look right if your head is at the center of the shape (looking outward) in any direction is called an environment map because that is the most common usage of such textures. We’ll do environment mapping on the next page. However, for now, don’t be confused when we call the texture on the inside of a skybox an “Environment Map.” And, hopefully you aren’t confused that we still call it a box even if it is a sphere or cylinder.

As you might guess, an environment map for a cube is called a cubic environment map, an environment map for a sphere is called a spherical environment map, etc.

Since you should be curious…

  • Cubic Environment Maps are a popular choice because they are easy to author. You just take 6 regular pictures that fit together. You can do this in the real world by getting a camera with a 90 degree field of view lens, and rotating it on a tripod (getting the up and down views can be hard). It is really easy in computer graphics to point the camera in 6 directions. Another advantage of cubic environment maps is that it just uses 12, usual triangles (albeit big ones). The down side is that the corners are father away than the centers of the sides which creates sampling issues, so if you’re not careful you can see the seams. Sometimes, all 6 faces are put into one image (see Figure 11.25 of the required reading), while other times, the 6 faces are made into 6 separate square images.
  • Spherical Environment Maps are a popular choice because all points are the same distance, so the sampling is more uniform. However, there are issues in putting texture coordinates on spheres (things tend to bunch up at the poles if you’re not careful). Spherical textures are actually easier than cubic ones to take with a regular camera: you just take a picture of a mirrored ball. Drawing a cubic environment map by approximating the sphere as lot of triangles has some issues - special algorithms exist for spheres. With THREE, you can use a sphere with the correct texture coordinates.
  • Cylindrical Environment Maps (sometimes called Panoramic Maps) are an old choice, that was used in Apple’s Quicktime VR product in the mid-1990s. The intuition is that the top of the cylinder (ceiling) and bottom (floor) are usually boring, so we treat them as separate pieces. Then the interesting part of the world you get just by turning on one axis. Cylindrical panoramas are easy to capture (just place the camera on a tripod and turn) and don’t have the sampling issues of spheres (there are no poles). However, they don’t deal with the top and bottom in a uniform way.

In practice, you probably want to use cubic maps if you are making it yourself (since they look like pictures and are easy to understand). But in THREE, it’s easy enough to use spheres or cubes (the sphere primitive sets up texture coordinates so that equirectangular maps generally work OK). Understanding the differences between the map types can help you build your intuitions about texturing in general.

If you find an “equirectangular” image, which is basically packing a sphere map into a rectangle, on the web, there is a handy web converter. It can even write out 6 separate image files (multi-file download seems to work best in Chrome). Six separate images are useful for THREE.JS’s CubeTextureLoader, but be careful because sometimes the images are named incorrectly (front can be the bottom, etc.).

The online converter is really handy. If you need help using the images it creates, see readCubeTexture.js. There are other sources of information about understanding the surround images (this site has tons of information - it used to have a simple tutorial, but that is burried).

More on obtaining environment maps

To make an environment map, you need to make a full 360 picture - one that covers all directions. Taking these with a camera can be tricky (even if you have a special lens, you have to worry about having your feet in the picture). You can try painting one. Or you can find them on the web.

Often, if you find an environment map on the web, you will find them in an “HDR” format (high-dynamic range). We won’t discuss HDR this semester, but basically, the colors go from 0 to big numbers, rather than from 0-255. If you find one of these, you’ll need to convert it. I use PhotoShop, but there are other “HDR conversion tools” that are free.

The handy web converter is really helpful for getting things into the right format.

We can also make environment maps using THREE. If you have a scene in THREE, you can make a special CubeCamera that takes the pictures in all directions you need. The tricky part is saving the images - however, generally you don’t have to. You can use them right away. We’ll do that later when we do dynamic texture maps.

For this exercise, we recommend getting an image from the web - and be sure to give attribution! A great source of free environment maps is https://hdrihaven.com/

Check Your Understanding

To make sure you understand what is going on, answer the following questions in 12-01-02.txt. Yes, these are worth points.

OK, On to Graphics Town!.

Next: Graphics Town

Page 1 Rubric (15 points total)
Points (15):
Box 12-01-01
3 pt
Skybox in exercise
Box 12-01-01
3 pt
environment map
Box 12-01-01
3 pt
bump or normal map
Box 12-01-01
2 pt
fill in text box
Box 12-01-02
4 pt
answer 4 questions in text box