Lab: Boxels
In this chapter, you've been learning about the pipeline that a model passes through from the modeling program to screen. Let's apply this knowledge by assembling a “boxels” sculpture—which is made of many instances of a single unit cube model.
Renderer
Follow these steps to present your boxels sculpture in a rotating display:
Form a group of no more than three, clone the
boxels repository, run npm install, and run npm run start. You should see a single triangle colored by its normal.
Replace the triangle with the box loaded from
public/box.gltf.
Add an
eyeFromWorld matrix that pushes the box away from the origin, off the eye.
Implement
Matrix4.perspective to build a perspective matrix. Have it accept the four parameters of a perspective viewing volume.
Add a
clipFromEye matrix that renders the scene in perspective.
Arrange many instances (at least five) of the box to form a sculpture of an animal, object, or some other recognizable entity. Position, stretch, and orient each instance of the box using a custom
worldFromModel matrix.
Animate the renderer so that the sculpture continually spins around itself as if it were on a turntable. Fire off the animation from
initialize by calling a function of this form:
function animate() {
// update graphics state
render();
requestAnimationFrame(animate);
}function animate() {
// update graphics state
render();
requestAnimationFrame(animate);
}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.