[SOLVED] html Java javascript security CS112 PA3: Textures

CS112 PA3: Textures

Introduction Getting started with the code skeleton Task 1 Task 2 Submission Grading
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:

In this assignment, we will implement the latter. Specifically, cube mapping uses six images to create a virtual box/cube around the object:

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.

Code skeleton
We have provided a codebase that renders a cube and a teapot inside the cube for you to start with:

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:

If you have no idea how to implement texture, please check the attached example 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)GoogleChromeApplication):
C:Program Files (x86)GoogleChromeApplicationchrome.exe allow-file-access-from-files
Under Linux, similarly, one can start Chrome using the following command in the terminal:
/usr/bin/google-chrome allow-file-access-from-files
If you are a MacOS user, try the following in the terminal:
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:

For more details about cube mapping, check here.
For more details on implementing cube mapping in WebGL, please see this (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.
2.Please compress your code in a zip archive and submit it on EEE Canvas. DO NOT submit individual files.
3.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.

formatted by Markdeep1.07