CSC 240: Computer Graphics

Homework 8: Texture Mapping

Due: Tuesday, Nov. 22, 11:59pm on Moodle

The goal of this homework is to practice texture mapping in 3D.

For this assignment there is no pair programming. You are welcome to work together, but everyone should turn in their own code that they have written and understood.

Part 1: Octahedron

Building on Lab 10, first create an octahedron (from scratch! no built-in octahedron methods) and then texture map it using the texture below:

checkerboard

Requirements:

  • It should be texture mapped exactly as shown in the video below.

  • Choose a camera viewpoint so that the texture mapping is visible.

  • You can rotate or move it in a more complex way if you like, as long as the texture effects are visible.

Part 2: Textured Scene

In the next part we will create a fixed "room" or "scene" around our octahedron. First make a "floor" similar to the one shown below (octahedron not shown). You may need some transformations to move the floor to the correct spot. Then make the "walls" or "background". Finally, you could create a "ceiling" or "sky" (not shown).

Requirements:

  • You must use at least 3 textures and create at least 3 planes (one floor and two walls OR one floor, one wall, one ceiling, etc).

  • You may use the textures from Lab 10, but at least one texture must be your own that you have found (I am not too worried about citations for this part, but if you want to cite where you found your texture, you can do so as a comment at the top of your code). Include your texture in your submitted files.

  • One texture must be repeated (example shown below). For this texture, it should "line up" on the top/bottom and left/right so that it looks uninterrupted. The wallpaper texture is a good example of something that can be modified to match up.

  • Make sure your camera viewpoint demonstrates the parts of your scene (an example image is shown below).

Repeating Textures

For a large region, usually we want to "tile" the texture instead of using one scaled image. To do this, we can set the repeat number of the texture in each direction (u and v). An example is shown below: 


var texture = THREE.ImageUtils.loadTexture( 'mytexture.jpg' );
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 2, 3 ); // twice in u and three times in v

There is one major caveat to this: the dimensions of the texture image must be powers of 2 (16x16, 32x32, ... 256x256, etc). Make sure to crop your image so that the pixel dimensions will work in WebGL.

room

Submit

Submit your html file, a representative screenshot of your scene, and your texture(s).

  • hw8.html
  • screenshot.png
  • mytexture.jpg