CSE 160 -- Lab 2

Early if time stamp is before midnight Oct 19, 2019.
On time if time stamp is before midnight Oct 20, 2019.
Late submissions will not be accepted/graded.

Objectives:

Description:

Upon starting your program, it should create and render a red tapered cylinder. For uniformity, this cylinder should have a circular base with radius = 1 on the x-y plane (ie. z=0 plane). Its length set to 10. And the top circle should have a radius = 0.5 on the z=10 plane. The base and top circles are actually dodecagon (12 sided polygon). The tapered cylinder is not capped.

Surface color is specified by the material property information. Use the following material property for a red surface exhibiting diffuse Lambertian reflectivity.

Ka  0 0 0
Kd  1 0 0
Ks  0 0 0

Details:

Here are the major new things you need to do for this assignment:
• Calculate the color of each polygon. The appearance (color that we observe) of a polygon depends on its material property (intrinsic to the polygon) and its relationship with the light source (and later with the viewer as well). For the latter, we will be using Lambertian reflectance. Meaning we will need to know the surface normal and the light color and direction (both are given). So, the first step is given the vertex coordinates, you will need to calculate a surface normal for each polygon

  For this task, we shall assume that all our polygons are planar. And that the vertices are specified in a counter-clockwise order as viewed from the outside. You will need to form 2 vectors and calculate their cross product. Make sure you are using the right sequence of points for the vectors, and the right sequence of vectors for the cross product.

• Render Mode. Add a toggle button to switch the rendering mode between flat shading and wireframe.
• Normals. Add another toggle button to turn the display of surface normals on/off. Display surface normals in green. This is useful to help you visually debug your code especially when working with more complex geometries. (You should have 3 toggle buttons altogether by now).
• Apply Lambert's reflectance function. Calculate the perceived color for each polygon using diffuse lighting.
• Add alternate view (carried over from Prog1): Allow viewer to look at this object from 2 views: a top view and a front view. Allow the user to switch between these 2 views using a toggle button. You can use orthographic projection.
• Pass information to shaders. There are multiple ways to do this. The easy way (for this assignment) is to calculate the colors on the CPU/javascript side, and pass the colors to the shader. However, be aware that this will require some code refactoring later on when we talk about smooth shading. What we would like you to do is the following:
  • Calculate the surface normals on the CPU side (javascript code).
  • Calculate the color of each polygon on the CPU side. Replicate the color for each vertex of the polygon.
  • Pass the vertices and colors of the polygons to the GPU to render.
  • Apply view transformation on the vertices of the polygons on the GPU prior to rendering.

  For the last step, you'll need to call setOrtho and setLookAt (see lib/cuon-matrix.js) which will generate a view-projection matrix for you. Pass this matrix as uniform to the vertex shader so that each vertex will be transformed properly.

  Since the color of a polygon is determined on the CPU side, the vertex shader does not need to do anything with regards to colors. On the other hand, the fragment shader takes the color that was calculated in the CPU and uses that to fill (or paint) each pixel of the projected polygon.

Resources:

Directional lighting tutorial

The followind examples from the Matsuda Lea book are relevant to this assignment:

• ColoredCube for how to fill in a polygon with a single color,
• OrthoView for how to set up an orthographic view, and
• LightedCube for how to do lighting calculations.

Grading:

• Rubric:

  You start off with 100 points.  You earn additional credit by turning in your assignment
  early and/or implementing additional features.  You lose credit for missing functionality,
  incorrect results, poorly documented or formatted code, or not following instructions.
  
  Below is a partial list:
  
  - up to 10 points off for poor features.html file
  - up to 10 points off for inadequate comments or hard-to-read code
  - up to 10 points off for not following instructions
  - up to 10 points off for special handling to grade your homework (usually
    because you did not check that it runs on the computers in the lab first).
  - functionality points depending on importance
  
  Make sure you:
  a.  submit the right files you want us to grade,
  b.  have tested your code on the browsers in the lab.
  c.  follow the general instructions described in overview.html
  
  

• Who graded your assignment based on your login name:

  Issei Mori:	A - G
  Adam Filiz:	H - M
  Alfred Lam:	N - Z
  

Submission:

Put materials in a folder named lab2 and zip it up. Submission must be done using Canvas.

Last modified Friday, 18-Oct-2019 19:41:14 PDT.