CS452 -- Computer Graphics

Jian Huang

Lab1

In this lab, the goal is to familiarize yourself with WebGL2 and processing data from models in the OBJ format.

The started code should have been distributed to you through GitHub. You can clone or fork the repository. These files should be available under the starter code root directory:

  /CS452-Starter> pwd
  /CS452-Starter

  /CS452-Starter> find . -inode "*"
  .
  ./favicon.ico
  ./index.html
  ./js/drawable.js
  ./js/gl-matrix-min.js
  ./js/vertex-data.js
  ./js/shader.js
  ./js/main.js
  ./js/helpers.js
  ./js/obj-loader.js
  ./resources/models/bunny.obj
  ./resources/models/sphere.obj
  ./resources/shaders/verts/simple300.vert
  ./resources/shaders/verts/simple.vert
  ./resources/shaders/frags/simple.frag
  ./resources/shaders/frags/simple300.frag
  ./README.md

After getting the starter code, place finalized steps under your web directory. If you have never put up a web page before, please consult labstaff's help resources:

  Webhome for Linux Users

You will receive a individualized hash from the TA. This lab and all future labs must be reachable using the following URL structure.

  http://web.eecs.utk.edu/~[yourNetID]/[yourHash]/lab[NUMBER]/Step[StepNumber]

Lab1 has the following steps. As with all other programming tasks, please proceed incrementally. There are 3 steps.

  
 
STEP0: A great scene has a camera that is able to be moved about by the user.
      In the current scene of the starter code, the camera zooms (onto a sphere) based on a global var that tracks the time.
      Add functionality for the user to control the camera, there are sliders present in the code but currently do nothing.
      Feel free to use these sliders or make a system of your own to control the camera.
      At the end of this step the user should be able to control: camera position and xyz coord of camera focus.
    
STEP1: The current scene consists of only a single sphere. Make the scene more interesting by adding additional spheres.
      Specicifally, create a solar system of 10 spheres, the Sun + 8 planets + Pluto (Dwarf Planets need recognized too, IAU).
      The sphere representing the sun can rotate in place if desired, but the other 9 spheres need to orbit the sun as time passes.
      At the end of this step your should have: A scene with a solar system of rotating spheres with a controllable camera.  
    
STEP2: In the resources folder create a new file called cube.obj, we shall modify the solar system to use a hand made 
      cube model in place of the sphere. This file does not need to specify vertex normals or texture coordinates it only needs 
      vertex positions and face information. The maximum vertex position should be 1,1,1 and the minimum vertex position should 
      be -1,-1,-1. In the OBJ-Loader class, the function `getIndexableDataFromModelAtIndex` and `getFlattenedDataFromModelAtIndex` 
      are responsible for returning the vertex data from a loaded model. 

      The OBJ-Loader and these functions should have no issues loading your hand crafted model without modification. At the end of 
      this step you should have: A scene with a solar system of orbiting cubes with a controllable camera, the scale of these cubes 
      may be too large/small but we will tackle that in the next step.  
    
STEP3: You may have noticed that your box model is considerably smaller or larger than the sphere model used previously.
      This is due to the fact that the coordinates used for the local space of the sphere are different than that of the cube.
      We can fix this by scaling your box model to fill a cube with a span of 1 while keeping proportions in scale, this process 
      would work for the sphere obj as well.

      This functionality will require adding more bookkeeping to the function `getFlattenedDataFromModelAtIndex`.
      In this function, record the smallest and largest x,y,z components found in a vertex position.
      Use these values to create a bounding box, and scale your box according to the span of the bounds - this scale should be 
      incorporated in the model matrix. Provided below is some pseudo code to calculate the scaling vector3.

      bbox := model.boundingBox
      maxXYZ := vector3(bbox.maxX, bbox.maxY, bbox.maxZ)
      minXYZ := vector3(bbox.minX, bbox.minY, bbox.minZ)
      span := maxXYZ - minXYZ
      unitspan := normalize(span)
      xScale := unitspan.x / span.x
      yScale := unitspan.y / span.y
      zScale := unitspan.z / span.z
      scalingVector := vector3(xScale, yScale, zScale)

      At the end of this step you should have: A scene with a solar system of rotating, scaled boxes with a controllable camera.
      Do not scale by a hard coded value, or you will lose points for this step. The value must come from the model's bounding box.
      Your scene should be able to work with any obj model and keep the same scale, feel free to test this by loading the bunny obj.