Rasterizer Project - Part 1: Getting started

#learning #graphics #cpp #gamedev

Were making a Rasterizer folks, exciting really. I would like to credit: I will be using these resources in my journey in making this rasterizer. https://lazyfoo.net/tutorials/SDL/
https://haqr.eu/tinyrenderer/bresenham/

What is a Rasterizer?
Its a part of the graphics pipeline that turns all that magical mathematical geometry, points lines and tirangles into colored pixels on a 2D image.

Everything you see in a rendered game or 3D scene comes down to rasteriztion. The program has to decide which pixels on the screen correspond to which parts of what triangles, what colour they should be (how bright etc etc).

So the basic idea is that you start with triangles defined by vertices in 3D space, you transform those into 2D coordinates on your screen, after you have applied your perspective and projection and once they are in 2D the rasterizer does three things.

Determines which pixels fall inside each triangle

Interpolates values (Color, depth, texture coordinates, normals) across the pixels

Writes the results into a framebuffer, which is the image in our memory that eventually gets display.

It is like a coloring book for children although were talking to a computer which is even stupider than a child. Essentially we have to tell the program "Draw inside of this triangle shape, and do it with this color".

So why am I building one by myself?
It's fun, and it will look great on a CV. Unironically though it is really something you should learn a lot from and that is (mostly) why I am doing it. It is really helpful to do before you delve deeper into 3D graphics as we will see behind the curtains of the graphics API and really get down there in the mud and shape things up. It is important to note that were doing this all on the CPU because... Why not. Anyways lets delve deeper.

I will be Using SDL 2.0 and STB_Image as I have worked with these before and I find them convenient.

So this is what we want to make to start with, an image printed out into a file that we can open and displays three vertices so we can draw lines between them, lets take a look at the code.

lets begin with this little struct here. Here we are essentially defining a pixel. A pixel has a RGBA value. What is RGBA? well it stands for Red, Green, Blue, Alpha silly. Each channel is stored in as an 8-bit unsigned integer. So each channel holds a value between 0 and 255, that is 256 total intensity levels per color channel. uint8_t stands for unsigned 8-bit integer (also known as a byte) and is imported via the include. So essentially this struct represents a pixel.

WOooo heres our Framebuffer struct. What is a framebuffer? well its a tiny CPU "canvas": holdsa width and heigh t plus a flat byte buffer holding the RGBA pixels.

Now our constructor for our Framebuffer struct takes the width and height, we fill the entire thing with our data vector with a black color.

That little for loop in our clear walks through pixel by pixel and paints all pixels one colour.

Alright now lets walk through the set function.
First we check the bounds, this is just a safety thing so we dont accidentally write out of the bounds of the screen.

the int i = (y * w + x) * 4; is translating our 2d space into a 1D byte index inside of our data vector. Each row has W pixels, each pixel takes up 4 bytes so y*w jumps down y rows, the +x moves x pixels across that row and the * 4 converts the pixel inedx into a byte offset (because we have RGBA values).

Then we have this little section
data[i + 0] = c.r;
data[i + 1] = c.g;
data[i + 2] = c.b;
data[i + 3] = c.a;
This copies the 4 color components of our Color struct into the right spot of our data vector.

Now heres the function for actually writing out or data into a file. First things first we flip the image since were writing from the top left (unlike tinyrenderer who counts from bottom left) and then we yknow write it out. We provide the path directly to where our code is at yknow, provide the width and height. The number of channels, a pointer to our raw pixel data and the number of bytes per row.