7 days of WordPress themes, graphics & videos - for free!* Unlimited asset downloads! Start 7-Day Free Trial
  1. Game Development
  2. Programming

Let's Build a 3D Graphics Engine: Rasterizing Triangles and Quads

Scroll to top
Read Time: 8 mins
This post is part of a series called Let’s Build a 3D Graphics Software Engine.
Let's Build a 3D Graphics Engine: Rasterizing Line Segments and Circles
Let's Build a 3D Graphics Engine: Colors

Welcome to the fifth part of our Let's Build a 3D Graphics Engine series!  This time, we will be building two new classes for rasterizing: one for triangles and one for basic quadrilaterals.  Then, we are going to take pieces from those two classes and put together a final, almighty polygon class.

Tip: This is a part of a series, so if you want to get the most out of it make sure that you read the other tutorials leading up to this one.


We've built quite a bit into our engine so far!  Here's what we have:

  • Point and Vector classes (the building blocks of our engine).
  • Transformation functions for our points.
  • A Camera class (sets our viewport, and culls points outside of the screen).
  • Two classes for rasterizing (line segments and circles).

Here is a quick reference for all of the classes we've built:

We are going to rely heavily on the LineSegment class to create our Triangle and Quad classes, so make sure to refamiliarize yourself with it before moving on.

Rasterizing Triangles


Putting together a Triangle class for the engine is fairly simple, especially since the LineSegment class is where all of our rasterization is actually going to take place. This class will allow three points to be set, and will draw a line segment between them to make the completed triangle.  

A basic outline of the class could look like this:

For the sake of standards, we are going to assume that the three points declared within our triangle are in a clockwise pattern.  

Using our LineSegment class, then, we can set up our returnPointsInTriangle() function like this:

Not too bad, right? Since we already have a lot of the work being done within our LineSegment class, we only have to continue stringing them together to create more complex shapes. This makes it easy to create ever more complicated polygons on the screen, simply by adding on more LineSegments (and storing more points within the class itself).

Next, let's take a look at how we can add more points to this system by creating a square class.

Getting Squared Away


Putting together a class to handle quadrilaterals only involves adding a few extra things to our Triangle class.  With another set of points, our quadrilateral class would look like this:

Then, we just add in the additional line segment to the returnPointsInQuad function, like so:

While building new classes like this is pretty straight-forward, there is a much easier way to encapsulate all of our polygons into one class. By using the magic of loops and arrays, we can put together a polygon class that could make almost any size shape that you could want!

Where Have All the Polys-Gon?

To create an ever expanding polygon class, we need to do two things. The first is to move all of our points into an array, which would give us a class outline similar to something like this:

The second is to use a loop to allow an unnamed number of line segments to be traversed in our returnPointsInPolygon() function, which could look something like this:

With this class added to our engine, we can now create anything from a triangle to some 39-sided abomination with the same line of code.

Polygon Creator

To play with our new polygon class, let's make a program that shows the extent of its reach.  Our program is going to allow the user to add to or remove sides from the displayed polygon using key presses. Of course, we will have to set limits for the number of sides that our polygon can have, since having less than three sides will no longer make it a polygon.  We don't really have to keep an eye on the upper limits of our polygon because they should scale nicely.  However, we are going to limit polygons to having ten sides at maximum since we will be setting its new points from within the code.

Our program specifications can be broken down into these smaller parts:

  • Draw a polygon to the screen initially.
  • When the 'a' key is pressed, lower the number of sides on the polygon by 1.
  • When the 's' key is pressed, increase the number of sides on the polygon by 1.
  • Prevent the polygon's number of sides from falling below 3.
  • Prevent the polygon's number of sides from increasing above 10.

Let's look at what our code could look like:

Our little program should let you adjust a polygon on-screen now! Check out the demo. If you would like to beef up this program a bit, you might want to try putting the polygon alteration section into some form of an algorithm to make the scaling easier on yourself.  I'm unsure if one already exists, but if it does, you could easily have an infinitely scaling polygon on your hands!


We've quite an extensive amount of rasterizing built into our engine now, letting us create almost any shape that we might need (though some only through combination).  Next time we will be moving away from drawing shapes and talking more about their properties.  If you're interested in bringing some color to your screen, then be sure to check out the next part!

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Game Development tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.