Page 1: Fancy Texturing

There are three categories of things we need to think about:

1. The “science” - how do the methods work?
2. The “engineering” - how do we use the methods in practice? (specifically, in a practical API)
3. The “art” - how do we use these to create interesting effects?

For 1 (the science), we’ll discuss how the methods work in theory in class, as well as the readings. Make sure you understand it.

For 2 (the engineering), you’ll need to see how THREE exposes the functionality - mainly by reading the THREE documentation, looking for samples on the web, and trying it out yourself. We’ll see more of what is going on “under the hood” later when we start to program our own shaders.

For 3 (the art), you’ll need to try it out to try to make cool looking stuff. Look for examples on the web to inspire you. In this workbook, try to focus on how to use textures to make cool appearances. You will have the opportunity to make cool shapes and motions in future workbooks. So you might want, to focus on simple objects (primitives are OK) and simple motions for this assignment.

The exercises in this workbook ask you to try out the features in THREE for fancy texture mapping. We would like you to try to make interesting things to explore what the different types of textures do, but the requirements are pretty minimal for each of the exercises.

Warmup - create something interesting with texture

Textures provide an easy way to make a simple object (like a box) into something more interesting.

Here is a simple example I made - note how simple geometry (it’s basically a box - although I did some extra things to get the cover to overhang the edges) becomes much more interesting with a texture. The example is in book/book.js . If you want to see how I made it, you can watch lecture 18E from 2020 video, slides where I create the textbook with textures. The video uses old-style THREE Geometry, but the main ideas are the same. (the code has been updated to use the non-deprecated data structures).

book

Now its your turn. Create some real-world object with a texture in 09-01-01.js below. Look around and see if there’s something you want to model: your laptop, a book, etc. This is a good opportunity to incorporate real photos in a texture.

A goal here is to use simple shapes, but more complex textures, to make an object that is interesting. And the important thing is that you make it (so, you need to at least take the photograph yourself). You need to make something other than the Foundamentals of Computer Graphics book.

The first advanced thing we’ll try is material property maps on Next: Exercise 1: Material Property Maps .