Lab: Bumplit
In this chapter, you've been learning about the pipeline how to shade surfaces with point lights. Let's apply this knowledge by illuminating a bumpy surface with a mesmerizing light.
Renderer
Follow these steps to get a renderer with an illuminated surface:
Form a group of no more than three, clone the
bumplit repository, run npm install, drop in your helper utilities, and run npm run start.
Implement
initializeGltf so it reads in the specified file and creates the surfaceVao vertex array. Your routine for loading in glTF files should mostly work. However, there are many more indices in the file, and a Uint16Array won't cut it. You'll need the indices as a Uint32Array. You are encouraged to adapt your routine to handle both index types. Inspect the componentType property of the index accessor to see what type you have.
Verify that
Matrix4.perspective matrix is called according to your API. You should see the surface colored by its normals.
Illuminate the surface with diffuse light. You pick the light color and albedo.
Send in the light's eye-space position to the shaders as a uniform.
Illuminate the surface with both diffuse and specular light. You pick the light color and shininess.
Animate the light source using
requestAnimationFrame so that it traces a vertical figure-8 pattern around the two nodules. Remember these Lissajous functions?
$$\begin{aligned}
x(t) &= a \times \sin(\text{ratio} \times t + \text{shift}) \\
y(t) &= b \times \sin(t) \\
\end{aligned}$$
With the right parameters, these functions can trace out a figure-8. The \(\mathrm{ratio}\) should be 2, \(a\) scales the the width, and \(b\) scales the height. The \(\mathrm{shift}\) is unimportant and can be omitted. The value \(t\) should cycle repeatedly through \([0, 2\pi]\). Allow the light source's z-coordinate to continue to be set by the W and S keys.Submission
To receive credit for your lab work, follow these steps:
Share a video of your renderer in a post on the
#lab-gallery channel in Discord. Tag your group members.
Push your code to GitHub.
Only labs submitted on time will be granted credit. Late labs or forgot-to-submits are not accepted because Wednesday at noon is when your instructor has time to grade.