\( \newcommand{\vecIII}[3]{\left[\begin{array}{c} #1\\#2\\#3 \end{array}\right]} \newcommand{\vecIV}[4]{\left[\begin{array}{c} #1\\#2\\#3\\#4 \end{array}\right]} \newcommand{\Choose}[2]{ { { #1 }\choose{ #2 } } } \newcommand{\vecII}[2]{\left[\begin{array}{c} #1\\#2 \end{array}\right]} \newcommand{\vecIII}[3]{\left[\begin{array}{c} #1\\#2\\#3 \end{array}\right]} \newcommand{\vecIV}[4]{\left[\begin{array}{c} #1\\#2\\#3\\#4 \end{array}\right]} \newcommand{\matIIxII}[4]{\left[ \begin{array}{cc} #1 & #2 \\ #3 & #4 \end{array}\right]} \newcommand{\matIIIxIII}[9]{\left[ \begin{array}{ccc} #1 & #2 & #3 \\ #4 & #5 & #6 \\ #7 & #8 & #9 \end{array}\right]} \)

CS 307 Hwk 5: Textured Barn

The emphasis in this assignment is working with textures. It's not primarily about geometry, though you will be modifying texture coordinates, which live in the geometry object. Also, it uses material and lighting, but keep this part simple. It's also not about cameras, so feel free to use TW.cameraSetup().

Here's the goal, a barn with siding and roofing, which I'm calling a textured barn.

textured barn

Note the four modes that the GUI makes available:

  • showFaces helps to explain the geometry
  • showTextures helps to explain how the default texture coordinates are assigned
  • showLighting puts white Phong material on the barn, so you can see the lighting effects
  • showResult is, of course, the desired product

These modes will help you understand where the faces are and how the textures are arranged (at least initially), though you have control of the texture coordinates. You only need to implement the last two modes.

Stuff to Know

  • Texture repetition works best if the dimensions of the texture image are powers of two. You don't get an error if the dimensions are not powers of two (although you'll see a warning in the JS console), but the effect is as if you used "clamp." It's easy enough to use Pixlr or Photoshop (or even just Preview on a Mac) to resize an image to have power-of-two dimensions.
  • The HTML file for the model solution loads a textured-barn-given.js code file that you are encouraged to study, and use or adapt.
  • The plain TW barn geometry does not have texture coordinates (unlike most Three.js geometries). You need to add them. A function has been written for you to do this, called addTextureCoords(), in the file given above. You can use this function and then modify the assigned texture coordinates, or you can modify this function, or you can replicate its functionality in your own way; whatever you want. But if you use texture mapping and your geometry doesn't have texture coordinates, you'll get an "index out of bounds" error in the rendering.

What You Need to Do

Write your own program that mimicks this object:

  • Use material and lighting throughout; no THREE.MeshBasicColor, though of course you can use them when debugging.
  • You'll need an ambient light and a directional light.
  • Make your best guess at the material colors.
  • Texture-map some textures on the walls and roof of the barn. Use wood or brick or some kind of reasonable "wall-like" material for the sides, and similarly for the roof. You don't need to use textures exactly like the ones used in the model solution; make it look nice.
  • Note that the top of the front and back aren't triangles that are part of quads. You'll need to figure out the best way to deal with this.
  • There's a GUI with a four-item menu. You need not implement the first two, but implement some way to turn off the material so that we can see the lighting. This will help you in your debugging, too, so it's not a waste of time.
  • You will need to add texture coordinates to your barn (see earlier comments).
  • You must use repetition in your texture-mapping: find an image that looks nice as part of the barn's sides or roof, and then tile it across the surface. That's much of what texture-mapping is about.
  • Feel free to ask questions!

Implement this as hwk5-textured-barn.html in your cs307-assignments folder.

Please read the standard instructions for all assignments

Grade sheet for students