English subtitles

← Create a Square - Interactive 3D Graphics

Get Embed Code
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.