Welcome to lab, which is a place where you and your peers complete exercises designed to help you learn the ideas discussed in the preceding lectures. It is intended to be a time where you encounter holes in your understanding and talk out loud with your peers and instructor.
Your instructor will bounce around between breakout rooms to check in with you. However, you are encouraged to request assistance if you find your progress blocked.
Designate one of your group to be the host. This individual will be responsible for setting up a Live Share session in Visual Studio Code and submitting your work. No team member should dominate or be expected to carry the group. All members should be writing code and contributing ideas.
Host, follow these steps:
Non-hosts, join the session.
Your task in this lab is to implement transformations via matrices. Follow these steps to complete this lab:
Matrix4. Note the 4. Someday you may need a
elements, which is a
Float32Arraylarge enough to hold the elements of a 4×4 matrix. This variable presents a logical view of a raw buffer of bytes as an array of 16 floating-point values. The
double) to a 4-byte floating point value. See MDN’s documentation to learn how to work with
elementsis a flat 16-element array, but we want to think of it as a 4×4 two-dimensional array. By the conventions of WebGL, the first four elements are the first column of the matrix. The next four are the second column. This ordering is called column major. Add a comment to show a column major “map” of the matrix. Show the 4×4 grid with each index in the appropriate spot.
identitythat returns a new matrix whose diagonal elements are all 1 and whose other elements are 0. Set
elementsappropriately. Multiplying a vector by the identity matrix yields the original vector, just as multiplying a number by 1 yields the original number.
scalethat returns a new matrix representing a scale transformation. Accept an array of three scale factors as a parameter. Set
translatethat returns a new matrix representing a translation. Accept an array of three offsets as a parameter. Set
rotateZthat returns a new matrix representing a rotation around the z-axis. Accept a number of degrees as a parameter. Set
toBufferthat returns the matrix’s
Float32Array. This is what you’ll need to pass to WebGL.
index.js, test that each of your four matrix types does its job.
Matrix4.json Crowdsource. Enter the eIDs for your team members. If you need to make changes after you’ve already submitted, just reload the page and resubmit. If you haven’t finished by the end of the scheduled lab time, you are free to continue working. However, the submission must be made before the end of the day to receive credit.