Lab: Bumplit
In this chapter, you've been learning about how to shade surfaces with point lights. Let's apply this knowledge by illuminating a bumpy surface with a mesmerizing light.
Renderer
Your challenge is to render a bumpy surface illuminated by a dancing diffuse and specular light. Follow these steps:
Clone one of your existing renderers that loads a glTF model into the folder
bumplit.
Download bumpy.zip and drop the two files in your models directory.
Load the glTF model into a VAO.
Transform the scene with three matrices:
clipFromEye, eyeFromWorld, and worldFromModel. For eyeFromWorld, push the model down the negative z-axis to get it away from the origin, as that's where the eye will be.
Render the surface with perspective. Color it by its normals to verify that it loaded properly.
Prepare for eye-space lighting by transforming each vertex normal from model space into eye space. Where in the pipeline should this be done?
Store the light's world space position in a global.
Add a
multiplyPosition method to your Matrix4 class. Have it accept a Vector3. It produces a new Vector3 by dotting all the rows with the vector, adding on the translation components.
In
render, transform the world space light position to eye space and send it to your shaders as a uniform.
Illuminate the surface with ambient and diffuse light. You pick the light color, albedo, and ambient factor.
Additionally illuminate the surface with 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 in the model. Recall 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 trace out a figure-8. Set the \(\mathrm{ratio}\) to 2. Scale the width with \(a\) and the height with \(b\). The \(\mathrm{shift}\) value is unimportant and can be omitted. For \(t\), use performance.now(), which gives the number of milliseconds since the renderer started.
Allow the light source's z-coordinate to be increased and decreased by the W and S keys.
Submission
To receive credit for your lab work, follow these steps:
Non-host, download the
bumplit folder before the host closes the session.
Share a video of your renderer in a post in the
#lab channel in Discord. No voiceover is necessary. Tag your group members with @.
Push your code to your individual GitHub repository that your instructor made for you.
Only labs submitted on time will be granted credit. Late labs or forgot-to-submits are not accepted because Monday at noon is when your instructor has time to grade.