@GoMustangs - if you’re curious, you can take a peek at the “triangle.ts” file (select it in the Explorer section on the left, below the emulator), though that doesn’t really explain much of what it’s doing. Maybe search for “Trapezoid” which has a short comment explaining how those are used - all the graphics in the app are based on that.
In short, it works something like this:
- design a shape using a 3D editor, or alternatively just by drawing front/side/top views on graph paper:
- get x/y/z coordinates for 3D points (vertices), for example point #0 is the front right corner of the landing strip at coordinates [-0.8, 1.5, -4]. See “CarrierModel” in the main.ts file.
- connect the points to make faces, for example the landing strip consists of points [0, 1, 2, 3].
- use a bunch of matrix math to place the object somewhere in the world and orient it to match the viewing angles. That sounds fancy, but it’s basically just a bunch of multiplications and additions.
- do a perspective transform, basically dividing coordinates by distance so that further objects appear smaller. (That’s not quite correct, but it’s the general idea.)
- now you have a bunch of polygons that you want to draw on the screen. These need to be clipped to the screen edges and sorted - it needs to draw far-away objects first and near objects last. See “clipPolygon” in triangle.ts.
- now there’s a bunch of trapezoids in screen space. Draw the screen a vertical column at a time, filling in the one-pixel-wide slices of each trapezoid in the right order. This needs to be as fast as possible, so there’s specialized functions such as drawTriLineAlternating which fill in larger blocks of pixels with as little per-pixel overhead as possible, and the Renderer3D methods take care of that.
I guess that may not be very helpful - it’s a quite complex topic, I just wanted to give a small peek behind the scenes. Personally, I think it’s good motivation to pay attention in math class since 3D graphics are a great way to use a lot of the skills and concepts you learn there, for example trigonometry is essential for drawing the heads-up display.
Does anyone happen to have a link to a beginner-friendly article or video about 3D graphics?