# Particle Stock – Part 1 : Building a Renderer

I’ve almost finished a useful tool, but there’s quite a lot to it so I’ve decided to split this into two parts. In this first part I’ll go over the core mechanic of the tool and something that a lot of people seem to have difficulty with, building a renderer. Sadly, not a full renderer, just a way of converting 3D points to 2D screen space.

In order to understand the code, we’ll need to do a quick little crash course in how rendering works. I’ll try keep it simple and short, but if you already know or simply want to see the Particle Stock code, skip on Part 2 (as soon as it’s up!).

The process is done in the following steps:

1. Convert target position to camera local space (It’s relative position to a camera sitting at origin and pointing down the -z axis).
2. Convert from camera local space to NDC (Normalized Device Coordinates) space. This is a perspective transformation which uses the camera’s settings to map positions into a -1 to 1 range for each axis. These are the points which are visible to the camera.
3. Convert NDC space to the current format (eg, 1920 x 1080).

This is mostly done using matrix math. Matrices can be daunting at first but are actually quite simple. If you want a detailed breakdown on how all of this works, I highly recommend the scratchapixel explanation. The simple version is that matrices store the rotation, scale and translation of a point in one easy to use form. These are known as affine transformations, which means they are linear and preserve straight lines resulting in orthographic views. These are what we use to move objects around in 3D space, and is where we begin step 1.