How are 3D images drawn?

Question

When A computer is to draw a 3d model, does it use maths similar to vector projection? Like when a 3d model is drawn and rotated, does it use vectors/and maybe some other math to know where to draw each of the edges?

If so, is this calculation made everytime the screen is refreshed?

Just want to see if I can create a basic square that looks like its spinning in 3D space. Just for the challenge, not anything practical.

Sorry if I wasn't clear, it is one of those questions where it's difficult to explain.

Answer 1

Yes, the computer needs to do a lot of calculations in order to able to render a 3D scene into a naturally 2D screen.

This can be done on the CPU but nowadays it's almost always done on the GPU. This entire process is usually referred to as the Graphics Pipeline which I've written about before. Read that post since I believe it summarizes most of the process.

To answer your specific questions:

does it use maths similar to vector projection?

It uses a lot of different "types of math". It uses a lot of linear algebra which involves vectors and matrices. It deals with transformations such as converting coordinates between different spaces. It uses lighting model calculations to determine the shading of your scene. And it uses many other algorithms too.

If so, is this calculation made everytime the screen is refreshed?

Typically, yes. Most games run on top of a game loop, so the entire pipeline is processed every frame. But under some other environments you could also update it on demand whenever the scene changes (e.g. on WindowsForms by calling Invalidate() to force a redraw of your control).

Just want to see if I can create a basic square that looks like its spinning in 3D space. Just for the challenge, not anything practical.

You could fake this by simply "skewing" the square as it rotates around, giving the impression that it's 3D. But if you'd like to model it closer to how a 3D graphics pipeline works, the bare minimum you'll need is:

• A vertex structure in 3D space
• A list of vertices to define your square in model space
• A world matrix to rotate your square
• A perspective projection matrix to convert it into 2D (clip space)
• A viewport transformation to adapt from clip space into your window/viewport
• A rasterizer to "paint" the rotated square

Depending on which platform you decide to implement this, many or all of these steps may already exist for you to use.

PS: And by the way, I think it's a really good idea from an educational point of view that you're trying to implement this sort of thing. I struggled for a long time with understanding how all of this 3D stuff worked, and the moment all of it really clicked was when I finally sat down and implemented my own graphics pipeline from scratch. One year later I did the same thing with raytracing, and maybe one of these days I'll try my hands at radiosity too. Or take one step backwards and create some Wolfenstein 3D-ish raycasting scene just for fun.

Answer 2

David has given a good answer, but for a beginner I think it makes 3D rendering sound too hard. The list given is not the bare minimum even though 3D engines usually have all of that. In the old days it wasn't uncommon at all to do realtime 3D graphics without any matrices or thinking about different spaces.

Matrices is a good way to represent rotation, but there are others as well. If for example you have xy-coordinates and you want to rotate around y-axis, you can just use trigonometry like:

rotatedX = cos(angle) * x;
rotatedY = y;
rotatedZ = sin(angle) * x;

Projection matrix is useful for representing different kinds of projections, but a simple division by z is often enough to do perspective projection:

// CONSTANT depends on the field of view and screen size.
// zOffset can be used to move the objects away from the screen.
screenX = screenWidth / 2 + CONSTANT * rotatedX / (rotatedZ + zOffset);
screenY = screenHeight / 2 + CONSTANT * rotatedY / (rotatedZ + zOffset);

If you don't want to work with 3D hardware and rasterization sounds unfamiliar, you can start by rendering the object as a wireframe. Simply draw lines to connect different projected points.

This should be enough to get a square spinning in 3D space to the screen.