## ← Create a Square - Interactive 3D Graphics

• 2 Followers
• 17 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=lD0Pya4GVbI" data-team="udacity"></div> ``` 2 Languages

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

1. It turns out there are many ways to specify a square. 1 solution with triangles
2. is a bit brute force. What you do is you create 2 triangles independent of each
3. other. So these four lines of code give you a triangle that goes from index 0,
4. 1, and 2. These are the first 3 points, right here. And then you have a second
5. triangle 3, 4, and 5. That are these 3 points. Now you'll notice there's
6. duplication of points 2 and 3 and 5 and 0 and we can save space and time by
7. merging these. A more compact and efficient way to draw the square is to define
8. the 4 vertices needed and then define 2 triangle faces reusing these points. So
9. for example, here we're reusing these points, 0 and 2 for this first triangle,
10. and for this second triangle. It turns out that the 3JS library happens to
11. support a 4 point face. So you could just use one face like this. That said, the
12. way that web GL, DirectX, and other low level APIs work is to define only
13. triangles. When the 3JS library defines a 4 sided polygon this way, the
14. quadrilateral is rendered by 2 triangles being sent to the GPU. If you happen to
15. solve this exercise by drawing a single quadrilateral, that's great that you
16. read the 3JS documentation, bonus points for you. But it's worth your while to
17. try this exercise again using just triangles.