Lab: Matrix Transformations

How to 3D

Chapter 4: Transformation Machinery

Lab: Matrix Transformations

In this chapter, you've been learning how to represent triangle meshes and generate algorithmic shapes like cones, cylinders, and spheres. Let's apply this knowledge by writing a renderer that generates a torus—a donut.

Form a group of no more than three people. Host, open your top-level repository directory in Visual Studio Code and run npm run dev to start up a web server. Then open the command palette via View / Command Palette and enter Live Share: Start Collaboration Session. Share the link with your group.

Transfit Again

Your first challenge is to rework your transfit renderer to use matrices. Follow these steps:

Clone your transfit renderer to make a transfit-matrix renderer.
Remove the radians, offsets, and factors uniforms from the vertex shader and main script.
For each of the six horseys, replace the manual transformations with a worldFromModel matrix that achieves the same effect.

Saguaro

Your second challenge is to model, load, and render a saguaro model transformed by matrices. Follow these steps:

Model a quick saguaro cactus in Blender. There are many ways to do this. Consider using box modeling with only loop cuts and extrusion.
Round off the boxy cactus by adding a subdivision surface modifier.
In Vertex Paint mode, apply color to the vertices.
Get the color to export correctly by incorporating the color attribute in Blender's shader. Click Shading in the top menu bar. In the node-based Shader Editor window, hit Shift-A and select Input / Color Attribute. Drag the Color output of the Color Attribute node to the Base Color input of the Principled BSDF node. In the Color Attribute node's attribute picker, select your color attribute, which is probably named Attribute. Click Layout in the top menu bar to return to the normal interface.
Export the saguaro as a glTF file. Use the plain text .gltf format, not the binary .glb.
Clone your transfit-matrix renderer to make a saguaro renderer.
Store the file in its own subfolder in saguaro.
Load in the saguaro model using the glTF loader from the Meshes chapter.
Render the colored saguaro model.
Render small versions of the saguaro at the tips of the base saguaro, making a recursive saguaro.
Rotate the saguaro assembly around the y-axis with the arrow keys.

Submission

To receive credit for your lab work, follow these steps:

Non-host, download the transfit-matrix and saguaro folders before the host closes the session.
Share a screenshot of your six horseys and a video of your spinning cactus 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.

← Lecture: Matrix Transformations