**CS112 PA3: Textures** ***Due date: Wednesday, Nov 27 by 11:59 pm*** Introduction ======================================== This assignment focuses on implementing texture mapping and environment mapping. As discussed in class, **texture mapping** is a technique for introducing details to 3D models (without the need to use fine meshes). **Environment mapping** is an image-based lighting technique capable of producing more realistic renderings compared to simple point and directional lighting. When rendering a specular object under environmental lighting, one can simply fetch the environment map using the reflected version of the view vector to calculate the specular reflection on the object surface. In practice, environment mapping is generally implemented using (a) *sphere* or (b) *cube* mapping: ![](./pa3/img1.png width=512) In this assignment, we will implement the latter. Specifically, cube mapping uses six images to create a virtual box/cube around the object: ![](./pa3/img2.png width=512) Getting started with the code skeleton ======================================== Preparing a cube map -------------------------------------- You will need a cube map (which involves six images) to texture map the six faces of the cube. You may use the images in *skybox* folder or choose one from [Humus](http://www.humus.name/index.php?page=Textures). Code skeleton -------------------------------------- We have provided a [codebase](./pa3.zip) that renders a cube and a teapot inside the cube for you to start with: ![](./pa3/img3.png width=512) You may manipulate the scene using the arrow keys (as described in the HTML file). Task 1 ======================================== The first step is to implement texture mapping for the six faces of the cube. You should expect to get results similar to the image below: ![](./pa3/img4.png width=512) If you have no idea how to implement texture, please check the attached [example](./HelloTexture.zip) which contains code on loading image as well as binding and displaying textures. Browser configuration -------------------------------------- The Chrome browser has a security feature that blocks Javascript programs from loading local files. To bypass this restriction (as we will need to load the images locally), completely close Chrome and restart with an extra argument `--allow-file-access-from-files`. Under Windows, for instance, this can be done by typing the following command in the Command Prompt (assuming that your Chrome has been installed under `C:\Program Files (x86)\Google\Chrome\Application`): ~~~~~~~~~ none "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files ~~~~~~~~~ Under Linux, similarly, one can start Chrome using the following command in the terminal: ~~~~~~~~~ none /usr/bin/google-chrome --allow-file-access-from-files ~~~~~~~~~ If you are a MacOS user, try the following in the terminal: ~~~~~~~~~ none open /Applications/Google\ Chrome.app --args --allow-file-access-from-files ~~~~~~~~~ Task 2 ======================================== Next, you will implement cube properly you should be getting results similar to the image below: ![](./pa3/img5.png width=512) For more details about cube mapping, check [here](https://www.khronos.org/opengl/wiki/Cubemap_Texture). For more details on implementing cube mapping in WebGL, please see [this](http://nrv.jinr.ru/alekseev/webgl/1727_07/ch7_Cubemap_Finished.html) (be sure to look at both the *js* code and *shaders*). Submission ======================================== 1. Make sure that your name and ID are filled above the canvas in *pa3.html*. 1. Please compress your code in **a zip archive** and submit it on EEE Canvas. DO NOT submit individual files. 1. We will grade your work using Google Chrome by default. If your code requires a different browser to work properly, please clarify by including a *readme* file in your zip archive. Grading ======================================== 1. (50 pts) Texture mapping for the cube. 2. (50 pts) Cube mapping based reflection for the teapot.