Assignment 3: Basic lighting and shading (Javascript)
- Due Apr 29, 2018 by 11:59pm
- Points 9
- Submitting a file upload
Objectives:
Take your wireframe of a generalized cylinder from the previous assignment and skin it. We will then apply simple shading (flat-shading) from a single directional light source.
Description:
Before, our shader simply set a fixed color for each vertex, making our generalized cylinder a single color. Now, we will pass the color of each vertex to the shaders, allowing us to vary the coloring of the generalized cylinder.
The specific type of shading we will be implementing for this assignment is Flat Shading. In flat shading, each polygon (surface) is given a single color based on its relationship with the light source. To do this, you must calculate the Surface Normal of each surface, which is simply a vector pointing perpendicular to the surface, pointing out (the outer side of the surface).
How to Proceed:
Now, we have to consider the material properties of our model, i.e. what color it is. In actuality, our model will have several "colors," which represent different kinds of lighting effects (glossiness/etc, which will be covered more in Assignment 4). For this assignment, to keep it simple, we can simply think of our cylinder as having one base color. We also need to specify the base color of our light source (which, again, will just be one color for now). The resulting apparent color will be a combination of these two colors.
If you haven't done so already in the extra points for previous assignments, you'll have to be able to pass the color of each vertex to the shaders. To do this, look at the 'ColoredCube' example from Ch07 of the Matsuda/Lea textbook (which can be found in the 'Files' tab).
You will also, instead of using either 'LINES' or 'LINE_STRIP' for your drawing mode, you will use 'TRIANGLES', which fill in the surfaces with color. This drawing mode interprets the index/vertex arrays differently, instead grouping the indeces in groups of three, and draw separate triangles for each triple. Again, the 'ColoredCube' example shows this very nicely.
The order in which you specify the corners of your triangles does matter. The reason why is because you need to be able to identify which side of the triangle is the "outside". By convention, we will use the right-hand rule:
- Take your right hand and curl your fingers in the direction of the order of the vertices.
- Your thumb points in the direction of the "surface normal", which is pointing "out".
At this point, you should have a solidly colored cylinder (it'll just look like a bendy rectangle, since there's no perspective or shading yet). While we won't see it, we will also have a directional light source coming from the direction (1,1,1) (this vector should be normalized when you use it in your calculations).
Now come the main calculations:
- Calculate the surface normals for each triangle AND draw them as short line segments.
- Calculate the color of each triangle surface (which will be gone over in class and lab) in Javascript, and pass colors to the shader.
Note: Normally, lighting calculations are actually done within the shader. You will do this in the next assignment, but for now, do all of your lighting calculations in your Javascript code.
To further see that your lighting is working correctly, you must implement two buttons:
- A button that, when pressed, shifts all of the vertices by some small amount to the right.
- A button that, when pressed, decrements the x-component of the light direction by some small amount.
What you should see is the shading not change when the cylinder is shifted, and the shading changing when the light direction is changed. Note that when the button is pressed, you need to redraw your cylinder to see the changes.
Sample code is provided ('WireframeToTriangles' in the 'Files' tab under 'Examples/MiscExamples') that showcases the basic setup. There is also a tutorial video (linked below) explaining the code.
Resources:
ColoredCube Example Links to an external site. <-- This example can be found in the 'Files' tab under MatsudaLea/Ch07
LightedCube Example Links to an external site. <-- This example can be found in the 'Files' tab under MatsudaLea/Ch08. Note that the lighting calculations are done in the shader, but for this assignment, you should do them in Javascript, and then pass them to the shader. In general this assignment does a lot more than you have to do (this'll be more useful for assignment 4).
Matsuda/Lea chapters 3, 7, and 8 will be useful. Primarily, the parts looking over the 'ColoredCube' example and the 'LightedCube' example.
https://www.youtube.com/watch?v=-0vSODbmwqc&feature=youtu.be
Links to an external site.
Rubric
Criteria | Ratings | Pts |
---|---|---|
1r. (REQUIRED) Generalized cylinder is drawn with a solid "skin". Make the default base color of the cylinder green (rgb = (0,1,0)).
i.e. you must use one of the TRIANGLES drawing methods (just 'gl.TRIANGLES' is recommended).
threshold:
pts
|
pts
--
|
|
2r. (REQUIRED) Surface normals are drawn as short lines on your surfaces when a button is pressed. Lines are hidden if the button is pressed again. Make the lines red and unshaded.
threshold:
pts
|
pts
--
|
|
3r. (REQUIRED) Surfaces are shaded with flat shading by a directional light source coming from (1,1,1) and whose default color is white (1,1,1).
threshold:
pts
|
pts
--
|
|
4r. (REQUIRED) Have a button that, when clicked, shifts the generalized cylinder by some small amount to the right and redraws the scene.
For full credit, the shading should not change.
threshold:
pts
|
pts
--
|
|
5r. (REQUIRED) Have a button that, when clicked, decrements the x-component of the light direction by some small amount and redraws the scene.
For full credit, the shading should change. Namely, side of the cylinder which is lit should move from right to left.
threshold:
pts
|
pts
--
|
|
1e. (EXTRA) Have a button that, when pressed, rotates the light direction about the y-axis.
This will cause the lighted side of the cylinder to rotate around the cylinder.
This can also replace the (REQUIRED) button that decrements the x-position of the light direction. i.e. you will get credit for that point if you do this point.
threshold:
pts
|
pts
--
|
|
2e. (EXTRA) Have multiple lights in the scene.
The colors of each light must be different (otherwise, it'd be hard to tell how the lighting works).
Try to keep the number of lights within 2~3.
threshold:
pts
|
pts
--
|
|
3e. (EXTRA) Be able to turn on/off a specific light.
You must have implemented multiple light sources to get this point.
threshold:
pts
|
pts
--
|
|
4e. (EXTRA) User can change the color of a light.
If there are multiple lights in the scene, then the user must be able to select which light to change.
threshold:
pts
|
pts
--
|
|
5e. (EXTRA) Have a button that, when pressed, plays a little animation involving the lights.
e.g. Have the lights rotate around the cylinder. Lights turn on and off. Rave lights.
threshold:
pts
|
pts
--
|
|
6e. (EXTRA) Be able to load models from outside sources, and apply your shaders to them.
See Matsuda/Lea pg.414-430 to get ideas on how to do this.
Note that this point is also worth double value for relative difficulty.
threshold:
pts
|
pts
--
|