Lab: Triangles
In this chapter, you've been learning how to model objects as a collection of triangles. Let's apply this knowledge by writing a renderer that contorts a polygon into several different poses using transformations.
Transformation Matching
Your second challenge is to transform a shape into a set of target shapes by transforming it through uniforms. Complete these steps:
In the
transfit-vectors project, run npm install.
Start up a web server and verify that you see a filled horsey shape and three horsey outlines. Your job is to render the filled shape three more times such that it fits into the outlines.
Edit the filled vertex shader to include uniforms
radians, offset, and factors. Modify only the shader. Do not modify the outline shader, outline shapes, or filled shape.
Rotate, scale, and translate the
position property in the shader using the uniforms. Apply the rotation first, the scale second, and the translation third. The order matters. You'll generally find it easier to rotate and scale the object while it's still around the origin. Why is that? What does rotation do to a model that is not centered on the origin? Also, the origin is at the center of the horsey's bounding box, where the neck meets the back.
Draw the shape three more times so that it fills the target outlines. Use the same filled VAO and shader; change only the uniforms.
Submission
To receive credit for your lab work, follow these steps:
Share a screenshot 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.