Home | | Syllabus | |
Assignments | | Lecture Notes | |
Documentation
Assignment 6
Due: Thursday, November 2, in class
Problem 1: Shaded cubes
In this problem, you will use the shading code we developed in class to view a shaded
cube. You will create a second cube with different material properties, and a different
light source position, and view the two cubes side by side.
Copy the
shadedCube.zip file given here. This contains code
(both the html and JavaScript files) to render a shaded cube as discussed in class.
You will modify this program so that you will be able to view a two shaded
cubes with different material properties.
Step 1. Render two cubes
Modify the render function to draw the cube twice. The first time you draw it,
you should scale it by a factor of 0.5 in all dimensions, and then, after the rotations
have been carried out, translate to the left by 0.5 units. (The mvMatrix will be multiplied
by the translate function first, before it is multiplied by the rotation functions).
The second time you draw it, scale it by 0.5 units and
translate to the right by 0.5 units.
Step 2. Create a function to change the material properties
Create a function:
function setLightProducts(ambientProduct, diffuseProduct, specularProduct)
that calls gl.uniform4fv( ) three times to set the ambient, diffuse and specular products
for the vertex shader to use. Replace the calls to gl.uniform4fv for these three variables
in the init( ) function with a call to the new setLightProducts( ) function.
Step 3. Set up new material properties for the second cube
Create three new variables:
var materialAmbient2 = vec4( 1.0, 0.0, 1.0, 1.0 );
var materialDiffuse2 = vec4( 1.0, 0.0, 0.8, 1.0);
var materialSpecular2 = vec4( 1.0, 0.0, 0.8, 1.0 );
to use for your second cube. (You can choose your own colors if you like, but try it with
the above colors first, to see how it looks).
You will also need to create three new variables for the various products:
var ambientProduct2, diffuseProduct2, specularProduct2;
Use these variables to hold the result of computing the appropriate products for your
second cube in the init( ) function.
Step 3. Apply the new colors to the second cube
In the render function, call your new function, setLightProducts( ) using the
original ambientProduct, diffuseProduct and specularProduct before drawing the first cube.
Call it again using the new products: ambientProduct2, diffuseProduct2 and specularProduct2,
before drawing the second cube. You should now have two cubes, with the one on the left
being a yellowish color and the one on the right a magenta color.
Step 4. Change the lightsource position for the second cube
The light source is set to be above the cube, with the second (y) component at 1.0.
Create a new light position
(e.g. lightPosition2) and give it the same x, and z position as the first, but set the y (2nd)
element to -1.0.
In the render function, call the gl.uniform4fv( ) function to set the light position to
the vector position (lightPosition) before drawing the first cube. (You can copy and paste
the call that does this in the init( ) function). Call the gl.uniform4fv( ) function again
before drawing the second cube, and set the light position to the second value (lightPosition2).
When you run the program, you should see the second cube being lit from below.
Save your files as shadedCube.html and shadedCube.js.
Problem 2: Computing Intensity with the Phong reflection model.
In this problem you will get some practice computing the intensity of light
reflected from a surface using the Phong reflection model.
Consider the following three points:
P0 = (1.0, 2.0, 3.0, 1.0)
P1 = (-5.0, 4.0, 6.0, 1.0)
P2 = (-3.0, 3.0, 6.0, 1.0)
Part a.
Compute the normal to the triangular surface defined by these points. The normal should
be defined so that it points in the direction determined by the right-hand rule when one
traverses the points in the order: P0, P1, P2. (In other words, if you move the fingers
of your right hand from P0 to P1 to P2, the thumb will point in the direction of the normal).
Make sure to normalize the length to 1.0. Show your work.
Part b.
Given the following light source vector: (0.0, 1.0, 0.0, 0.0), compute the reflection
vector for this surface. Use the formula given in class:
r = 2(l . n)n - l
(where l . n is the dot product between
l and n). Check your answer by verifying that the length of r is 1.0.
Part c.
Suppose the direction of the viewer is given by: v = (0.0, 0.0, 1.0, 0.0).
If the diffuse, specular and ambient constants for both the light source and the
material are all set to 1.0, and there is no attenuation, and the shininess coefficient,
alpha is set to 1.0, what is the Intensity reflected from that surface according
to the Phong Reflection model? Calculate the Intensity for the following values
of alpha: 1.0, 5.0, 10.0. Show your work.
Problem 3: Write up a project description
Read the Project Description. Decide what you
want to do for your project and write a 1 paragraph description of it. Make sure to
be explicit about which parts of the project contain the required elements. Turn in
a print-out of this description on the due date for this assignment.
Turning in this assignment
- Turn in a hardcopy of the javaScript code for problem 1, for shadedCube.js.
- Turn in the written calculations and answers to problem 2.
- Turn in the paragraph description of your project.
- Turn in a discussion log.
- Bring these to class on the due date.
- Upload to Canvas your files for shadedCube.html and shadedCube.js.
Home | | Syllabus | |
Assignments | | Lecture Notes | |
Documentation
Constance Royden--croyden@holycross.edu
Computer Science 343
Last Modified: October 25, 2023
Page Expires: August 17, 2024
|