Lab: Bumplit
In this chapter, you've been learning about how to shade surfaces with various kinds of lights. Let's apply this knowledge by implementing a renderer with diffuse and specular light.
Renderer
Your challenge is to render a bumpy surface illuminated by a dancing point 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? Correct for interpolation that produces normals of non-unit length.
Store the light's world space position in a global.
In
render, transform the world space light position to eye space and send it to your shaders as a uniform named eyeLightPosition.
Transform each vertex position into eye space and send it along to the fragment shader as
mixEyeFragmentPosition.
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.