## ← Matrix Math - Interactive 3D Graphics

• 2 Followers
• 32 Lines

### Get Embed Code x Embed video Use the following code to embed this video. See our usage guide for more details on embedding. Paste this in your document somewhere (closest to the closing body tag is preferable): ```<script type="text/javascript" src='https://amara.org/embedder-iframe'></script> ``` Paste this inside your HTML body, where you want to include the widget: ```<div class="amara-embed" data-url="http://www.youtube.com/watch?v=eoqhNBfkjvA" data-team="udacity"></div> ``` 2 Languages

Showing Revision 2 created 05/24/2016 by Udacity Robot.

1. At this point, you should have a pretty good sense of what the various
2. transforms do. Three.js supports these basic transforms without you needing to
3. understand what's going on inside the code. However, three.js can't provide
4. every possible type of transform out there. Though it tries. More importantly,
5. you'll need to know more about how transforms are coded if you want to program
6. the vertex and pixel shaders in the pipeline. Here's a screenshot of the
7. contents of the forearm object 3D from the robot arm demo. Using the debugger.
8. You have been using the debugger in your browser, right? If not, please go look
10. inside any object 3D, you'll see a parameter called matrix. It is a Matrix4 with
11. a bunch of numbers in it. Ultimately this matrix parameter is what holds the
12. transform that changes the object's shape, orientation, and location. When you
13. set the position, rotation, and scale these all affect what gets stored in this
14. array. This matrix represents all these transforms put together in a tidy
15. package. We can multiply a coordinate, represented by a pointer vector, by this
16. matrix and get a new coordinate. That's honestly it in a nut shell. Any object
17. we make is ultimately represented by a bunch of points. These points are in the
18. object's own sort of space. For example if we make a cube using cube geometry
19. it's centered around the origin. We transform the cube's points by a transfer
20. matrix to move, rotate and scale it as desired. A transform matrix is a 4 by 4
21. set of numbers. Three.js also supports a Matrix3 type which almost no one uses.
22. In math in general a matrix can have any dimensions at all. Such as 12 by 38.
23. The 4 by 4 matrix is the size that the GPU prefers. We can multiply a coordinate
24. by a matrix. This is shown by putting the coordinate to the right of the matrix.
25. The new resulting coordinate is put to the left of the equals sign. The
26. mathematical notation is shown here. The coordinate times the matrix gives this
27. new coordinate. To multiply a coordinate by a matrix you take the coordinate and
28. perform a dot product with each row of the matrix. For example the dot product
29. of the first row and the coordinate is this, D1 equals N11 times C1 plus N21
30. times C2 and so on the sum of these four terms is the first coordinate of the
31. result. The dot product of the second row in a coordinate gives D2, the second
32. coordinate of the result. After four dot products, you have a new coordinate.