Trackball Lab

In this lab you give the user the power to manipulate their view of an object using their mouse or other pointing device. You will add a trackball interface to a renderer that loads a mesh from a file.

Read in File

Your first challenge is to render a mesh described in a JSON file with this general structure:

{
  "positions": [
    0, 0, 0,
    1, 0, 0,
    ...
  ],
  "normals": [
    0, 1, 0,
    0, 1, 0,
    ...
  ],
  "indices": [
    0, 1, 3,
    0, 3, 2,
    ...
  ]
}

Follow these steps to get your renderer up and running:

Clone the provided repository.
Read in the file using fetch.
Build your vertex attributes using the arrays from the mesh.
Add diffuse lighting. Compute the litness by dotting the eye-space normal with the given lightDirection. Ignore the ambient and specular terms.
Show your instructor your working renderer to receive credit.

Trackball

Your second challenge is to add a trackball interface to your renderer. Follow these steps:

Define the trackball class described in the reading in file trackball.js. Export the class and import it in your renderer.
Add pointer event listeners to your renderer.
Send the trackball's rotation matrix as the worldFromModel uniform.
Show your instructor your working renderer to receive credit.