CS435/535 Computer Graphics Fall 2020
Project #4
Spotlight
Due: Oct. 19 by 11:59 pm
The project is to investigate how to use the fragment shader to implement the spotlight effect.
Modeling
• Build a room consisting of a floor and eight walls, but with no ceiling. The layout of the room is shown below.
ABC
DEF
Lighting
• Set up a spotlight that can be placed up in the room at five different positions as numbered in the figure above. The position of the spotlight can be selected using a HTML list consisting of five positions numbered from 1 to 5. The cutoff angle of the spotlight can be slightly changed using two HTML buttons: increase and decrease. The direction of the spotlight is changeable by four HTML buttons: left, right, up, down.
Viewing
• The viewer (or the camera) shall be overlooking the room at a high position. To be able to see the spotlight effect better, six positons (A through F as shown above) shall be set
up for the viewer, and the viewer can use another HTML list to select one of the six positions. The “at” position could be fixed for each viewer/camera position.
Hint: when you check whether a fragment is under a spotlight, make sure you have the fragment position, fragment normal, light position and light direction in the same coordinate system. The camera/eye coordinate system may not be the best one in this project.
Create a directory called project4 under your cs435 or cs435 home directory. Move into that directory, and create two files: spotlight.html and spotlight.js to complete this project.
Submission Requirements:
• Make sure the project4 directory contain the two files: spotlight.html and spotlight.js. (Here we assume the Common directory and the project4 directory are located under the same cs435 or cs535 directory, but you do not need to submit the Common directory.)
• The title of spotlight.html should contain your name, CS435 or CS435, Project #4.
• The spotlight.js file should contain the following information at the beginning: CS435 or CS535, Project #4, your name, a description of the program. Add other necessary comments whenever a part of the code is not obvious.
• Compress the project4 directory into project4.zip and submit the compressed file as an attachment on Blackboard.
This document including its associated files is for your own personal use only. You may not post this document or a portion of this document to a site such as chegg.com without prior written authorization.
A project shall be completed individually, with no sharing of code or solutions. All submissions will be subject to similarity check.
The University of Alabama’s Code of Academic Conduct will be rigorously enforced.