CS112 Programming Assignment 3

CS112 Programming Assignment 3
Texture map and environment map
Please submit the zip file to EEE.
1. Introduction
In this assignment, we will implement texture mapping and environment mapping.
Texture mapping is a method for defining high frequency detail, surface texture, or color information on a
computer-generated graphic or 3D model. Environment map lets us render mirrors, allows rasterization
engines to render reflective surfaces. The idea is given a image of an environment, we want to map the image
onto the object we want to render. There are generally two approaches for doing this (1) using a sphere map
(2) using a cube map. In this assignment, we will implement this using a cube map.
Cube map uses 6 images to create a ‘virtual box/cube’ around the object.
2. Getting started with the code skeleton.
1. Prepare a cube map
You will need a cube map - 6 images - to texture map the six faces of the cube. You may use the images in
“skybox” folder. Or choose one of the cube maps from http://www.humus.name/index.php?page=Textures

.PLEASE CHECKOUT this website FOR MORE HOMEWORK SOLUTIONS
2. Code skeleton
We have provided a code base which you can start with. The code base renders a cube, and a teapot in the
center of the cube. If you cannot see it when you open it, check the FAQ below.
You may manipulate the scene use arrow keys, as described in the HTML file.
3. Texture mapping the cube
The first step is to implement texture map for the six faces of the cube. You should be getting results similar to
the below image.
If you have no idea how to implement texture, please check the attached HelloTexture.zip, which contains
example code on how to load image, bind texture, and display textures.
4. Environment mapping the teapot
Next, you will implement the environment map using CubeMap. Once implemented successfully you should be
getting results similar to the below image. (For details regarding CubeMap - refer to
https://www.khronos.org/opengl/wiki/Cubemap_Texture)
For details on how to implement cube map in WebGL, please refer to:
http://nrv.jinr.ru/alekseev/webgl/1727_07/ch7_Cubemap_Finished.html (be sure to look at both the js code and
shaders)
3. Submission
Please compress your code into a single .zip file, and submit to EEE dropbox.
4. Grading
The grading will be based 50% on texture map for the cube, and 50% on the environment for the teapot.

.PLEASE CHECKOUT this website FOR MORE HOMEWORK SOLUTIONS

6. FAQ:
1. When I open my webpage, I cannot see the teapot, and when I check the console output in Chrome, I found
errors like:
Failed to load file:///Users/jiachen/PA3/teapot_0.obj: Cross origin requests are only supported for protocol
schemes: http, data, chrome, chrome-extension, https.
For this issue, please start your Chrome allowing access from files, following the link below
https://stackoverflow.com/questions/8449716/cross-origin-requests-are-only-supported-for-http-but-its-not-cros
s-domain/14490982#14490982