In this assignment, you’ll be asked to render a more complex geometric shape to the screen, and you’ll be

asked to write shaders that will adjust the position, orientation, and scale of the model with respect to the camera. You’ll also be working with user input and interaction, and several buttons and key presses will trigger different events to be displayed. This will also be the first time that we discuss how to load assets from outside the html and JavaScript files that will be needed for rendering, so we’ll walk through how to set this up. The content of this assignment will be covered predominantly in the readings and notes of Week 04 and Week 05. As such, it will be due at the end of Week 06. This is an individual assignment and you should not work in a group or share code with your peers. Discussion with peers is fine, but it should be higher-level concepts rather than code snippets.

The zip archive should contain your Assignment2 folder. This naming system helps us make sure the right assignment is paired with the right individual.

Loading an OBJ File

In the Assignment2 directory, you’ll find a file called “bunny.obj” that contains the geometry we’ll use for this
assignment. We covered this file format in Week 03. You can open it in a text editor to explore the layout of this geometry file format. To simplify the assignment for you so that you don’t need to parse this OBJ file yourself,

you’ve been provided with an OBJ loader function in the file objLoader.js. Do not write your own OBJ loader; just use the code in this file. Important: The starter code that you have been provided already loads the OBJ file contents into memory in the JS application – you shouldn’t need to call the OBJ loader functions yourself.

Setting up a Local HTTP Server

In the Assignment2 directory, you’ll fine a text file called “How_To_Setup_Local_Host_ReadMe.txt.” In order to use assets in your application that come from outside the HTML and JavaScript files, for instance image files or our “bunny.obj” file, you’ll need to setup and run a local HTTP server and access your “bunny.html” file this way as you are programming. Follow the instructions in the ReadMe file to setup your local HTTP server (or use any other preferred method of setting up for a different operating system). When we grade the assignments, we’ll also be using a local server to facilitate loading of assets/files outside the core HTML and JavaScript files. Important: you will not be able to load the “bunny.obj” file unless you first set up the local HTTP Server and access the html file through your localhost address.

Your goal for this assignment is to adjust the JavaScript file and the vertex shader in the HTML file to generate a program with the following features:

full credit, so long as the color of each vertex is clearly a function of the position. You could compute this positional color-coding scheme in the application or in a shader; the implementation is up to you.