What in The Graphics are Primitives?!
Apr 1, 2025
What are primitives?
The other day, when I booted up my copy of Elden Ring for the umpteenth time, I caught myself guilty of just staring at the screen, admiring the world unfolding as my gamepad sat blinking beside me. Compared to the blocky characters of the first PlayStation, this felt like stepping into the most surreal dream imaginable.
A screenshot from Elden Ring (2022), Courtesy of PC Gamer
I think I speak for everyone when I say the leap in visuals over just two decades has taken us by the most welcome surprise. I mean, the tech behind these generations must be radically different, right?
Wrong.
Despite the jaw-dropping visuals of today’s games, the secret sauce hasn’t changed much. At the core of both Elden Ring and those old-school PlayStation classics lies the same foundation: graphics primitives. That’s right—triangles, lines, and points are still doing the heavy lifting, just with a lot more finesse and a whole lot more of them. The difference isn’t what’s used—it’s how it’s used. And boy, are those triangles working overtime these days.
Um… Primitives?
I apologize, I may have gone ahead and spoiled it a little for you.
But it’s not too late to roll out the red carpet for the start of this article, the lego blocks of the graphics world - primitives.
Primitives are just defined geometrical entities that any scene is composed of - any scene, 2D or 3D.
Now hold on, isn’t everything on a digital screen made of pixels? So pixels are the only primitives?
Not exactly. While pixels are the visible dots lighting up your screen, they’re the final output. The actual process starts with primitives in a 3D coordinate space. The GPU takes these primitives, positions them in the scene according to their geometry, applies transformations like rotation or scaling, and uses mathematical projections to map the 3D world onto a 2D viewport. This is known as the vertex processing stage.
But that’s just the start. Once the scene is built, these primitives undergo rasterization. This process determines which pixels on the screen correspond to which primitives, effectively converting the geometrical data into pixel data. Shaders then kick in to calculate colors, lighting, and textures, ensuring that each pixel reflects the intended visual complexity. It’s a meticulous pipeline, but it’s what transforms a collection of triangles into a lifelike dragon or a glowing, otherworldly landscape.
Primitives to pixels. Courtesy of Harold Serrano
Without primitives, this pipeline wouldn’t exist. They’re the essential building blocks, quietly powering the jaw-dropping visuals we enjoy today.
Can any shape be a primitive?
Almost.
Points are the most fundamental primitive, often used for tasks like defining vertices.
Lines connect two points and form the simplest representation of a shape. They’re defined by two endpoints and can be used to outline objects, visualize wireframes, or represent edges in a 3D mesh.
While points and lines are invaluable as building blocks, they’re not sufficient for rendering realistic objects on their own. The need for 2D shapes as primitives arises because most objects in a scene are represented by surfaces rather than edges or vertices.
Various 2D shapes could serve as primitives for these surfaces. For instance, circles or conic sections—such as ellipses and parabolas—can represent curved geometries with mathematical precision. These shapes are especially useful in certain applications, like CAD (Computer-Aided Design), where exact representations of curves are critical. However, such primitives are computationally expensive to work with.
Enter the triangle, the champion of 2D shapes in computer graphics. Triangles are not only simple but also incredibly versatile. They are always planar (a mathematical property of three points), which eliminates complications like curvature or higher-dimensional inconsistencies. Moreover, any complex shape—be it a curved surface or an irregular object—can be approximated by tessellating it into smaller triangles. This process, known as triangulation, ensures that even intricate geometries can be broken down into manageable pieces, all while maintaining computational efficiency.
The world in triangles, Courtesy of Reddit
Triangles also play nicely with the GPU’s architecture. The hardware is optimized for processing triangles in parallel, which makes them ideal for real-time rendering. So, while circles and conic sections have their niche uses, triangles dominate the field due to their simplicity, adaptability, and hardware-friendly nature.
So how does it all come together?
There are 3 important stages in this race to push your desired frames in front of you:
Application
Geometry
Rasterization
Stages of the pipeline, Courtesy of Medium
The Application Stage is the phase where programs, such as game engines, create the scene’s geometry. Primitives are defined here as a collection of vertices, with data like position, color, texture coordinates, and normals. The CPU handles this stage, sending the data to the GPU for further processing.
Preparing for rasterization - The geometry stage
A vertex is a point in the world. Many points are used to join the surfaces.
In the vertex processing, each vertex of a primitive is processed by the GPU. Transformations such as scaling, rotation, and translation are applied to position the primitives in the scene.
Vertex processing, Courtesy of Mozilla
Unfortunately, not all our beloved primitives make it to the view. These primitives are then clipped to the boundaries of the view frustum (the camera's field of view) to ensure that only the visible portions are sent further down the pipeline.
Additionally, projection transformations convert 3D coordinates into 2D coordinates to prepare the scene for rendering on a flat screen.
Now for rasterization
Determining the pixels to fill in rasterization, Courtesy of Action-io
This is where the magic happens. The primitives are converted into fragments, which correspond to individual pixels on the screen. For triangles, this involves determining which pixels lie inside the triangle’s boundaries.
Fragment Processing and Output to Screen
Each fragment is processed to calculate its final color. This involves applying shaders to handle effects like lighting, textures, shadows, and transparency. The calculations here take into account the primitive’s attributes, like its texture coordinates and normals.
Fragment processing, Courtesy of Mozilla
Finally, the processed fragments are written to the framebuffer, which holds the final image. Overlapping fragments are resolved based on depth information to ensure correct visibility, and the result is a fully rendered scene displayed on the screen.
Output to screen, Courtesy of Mozilla
Halt!
Our primitives might have turned into vibrant fragments now, but how did we even paint them on the screen? We definitely want our computer to know that, or our beautiful horses might end up looking like this skeleton!
Horse Mesh, Courtesy of TurboSquid
To ensure that our beautiful horses, houses, or any other objects are rendered with solid, vibrant colors rather than skeletons of their geometry, developers rely on boundary filling algorithms. These algorithms efficiently "paint" the interiors of primitives with the desired solid or gradient colors.
Scan-line algorithm
The scan line algorithm is very methodical in its approach. Which means it has an ordered approach, starting at the top of a shape and painting one horizontal line at a time, left to right, back and forth, like mowing the lawn.
This very organized algorithm sees the shape as a sequence of rows, and has a mental process that goes like, "Oh, here's an edge, time to start painting! Here's the other edge, stop painting!" Repeat for every row.
This kind of approach can be incredibly efficient for normal polygons, but if there are irregularities in the shape, checking row by row becomes a tedious process.
Scan-line algorithm
Flood-fill algorithm
The flood-fill algorithm works more like a toddler splashing a paint bucket. They plop the bucket in the middle of the shape, and paint EVERYTHING in sight until they hit a wall.
Essentially how this works is by starting from a center pixel and checking the surrounding pixels in a recursive way, as if it’s saying, "This pixel matches the color? Great, paint it and check all the neighbors!" Repeat until every possible spot is covered.
This algorithm is arguably more flexible and reliable albeit harder to implement.
Flood Fill algorithm
Any alternatives?
While technically you could go for any shape that please your fancy, not everything is viable enough to please your graphics pipeline.
However there are few intriguing alternatives that are worth exploring and considering if the usual triangles are too mainstream -
The voxel (volumetric pixel), essentially the 3D counterpart of a pixel. Voxels divide objects into tiny cubes, representing not just surfaces but entire volumes. This makes them ideal for modeling destructible terrains, volumetric effects like fog or lava, and even medical imaging. Voxels excel in capturing internal details that triangles cannot, but their high memory requirements and computational costs make them less practical for large-scale, real-time rendering. Just take the case of Minecraft - it’d be a very sad and flat world without our 3D blocks everywhere!
A model made of voxels, Courtesy of Spatial
Another contender as of late, Gaussian splats use point-based rendering where each point is represented as a soft, smooth blob, often looking like a colored elliptical stroke. Instead of creating surfaces with edges, splats approximate the appearance of objects by blending these blobs together. This technique works wonders for rendering natural, amorphous forms like clouds, smoke, or even fine details like fur and foliage. However, their lack of sharp edges and solid structures makes them less suitable for rigid, defined objects.
Recently, Gaussian splats have gained traction in photogrammetry, where they help reconstruct real-world scenes with impressive detail and realism.
To take a deeper dive into Gaussian splats and how they’re rendered, make sure you check out our previous article.
Gaussian Splats, Courtesy of Radiance Fields
Conclusion
Primitives may seem simple at first glance, and that is for good reason - being simple lends them the power of being easily morphed into the scene of our dreams. The power of the concept lies in the fact that even after generations of developments in the graphics world, we’re still nowhere close to abandoning these humble building blocks but mastering them with ever-greater sophistication.
We are hopeful that this article was successful in igniting and fueling some of the fascination that is in learning about sophisticated architecture by starting from the ground up. Whether you’re here out of genuine curiosity, sheer nerdy enthusiasm, or just looking for ammunition to impress your friends during a game night, we hope this read added a new layer of appreciation to your experience.
And don’t skip those cutscenes, the triangles are working real hard!