Share:

How 2d Screens Render 3d Objects

Computers have evolved at a tremendous pace in the last century, but the reason computers are a worldwide phenomenon today is because of the combination of different aspects developed by different people at different times. The computation, rendering, hardware, software and other aspects of the modern day computer were developed as a result of the combined effort of many people at once, But even among all the features that have been developed, computer rendering is the sole thing that transcended computers from fancy calculators to personal computers used by billions of people worldwide.

Before we continue, we must understand what “rendering” and “rasterization” mean. Rendering is putting the 3d object in our 2d screen, rasterization is making perfect mathematical equations into pixelated images. Our computer screen is a 2d plane of pixels that draw images, texts and other recognizable glyphs and symbols that allow us to interact with, rendering is a special process that makes 3d objects appear to render in a 2d plane, for a better understanding, we can take our own Eyes as a reference too! Have you ever noticed that a great painting is practically indistinguishable from something you'd actually see? This is because our eyes see the 3d world in 2d, the well drawn art just mimics the same thing onto another 2d plane! So, trying to render 3d objects into a 2d screen is the same as discovering how our eyes work (mathematically!)

P(x, y, z)

●

/|

/ |

/ |

/ |

/ |

/ |

/ |

/ |

👁 O───────────────┼────────┼────────────→ z

<--- f --->

Screen Pz

● P'(x', y', f)

The most important formula that makes 3d rendering possible comes from a simple derivation, and is the fundamental to any graphics rendering is the projection formula. A detailed explanation is given below extracted from a recent rasterization project of mine

“ This very simple function is what makes 3D graphics possible.

the way it works is that it takes a 3D point and projects it onto a 2D plane.

When you look around you, you are looking at a 2D projection of a 3D world.

you might've noticed how putting objects further away from you makes them smaller,

they approximate to what we call a vanishing point, around (0,0)

from any plane, that includes our eyes.

let us consider the distance from our eyes to the screen as f or focal length.

our eyes are at )(0,0,0) and the screen is at S(0,0,f)

Let us assume a point P(x,y,z) and our eyes are looking at it.

The vector joining our eyes to the point to the point is simply P-O. but,

before reaching our eyes when the rays intersect the screen, they will intersect at a point

P'(x',y',f).

The vector P-O represents a distance of D units; D=P-O

Now let us assume a line that slowly goes from P to O.

the starting point would be Line=Point O, and the ending point would be initial point + the distance vector ..Making us reach the point P.

But assuming the line to a function we deduce that the line;

L(t)=O+t*D where t is a small incremented value that goes from 0 to 1, and D is the distance vector.

Now, finally:

When the point increments and reaches z=f;

L(t)=O+t*D

L(t)=(0,0,0)+t*(x,y,z) [hence; (x,y,z)-(0,0,0)=(x,y,z)]

L(t)=(t*x,t*y,t*z)

Since the line reaches (t*x,t*y,t*z) at z=f, we can say;

L(t)=P'

P'(x',y',f)=(t*x,t*y,t*z)

Equating Corresponding components, we get;

t*z=f

t=f/z

substituting t in the other components, we get;

x'=t*x=(f/z)*x

y'=t*y=(f/z)*y

which is the final formula, but since we can assume f=1 units which can be whatever distance

from user to screen, we can simplify it to;

x'=x/z

y'=y/z

for further clarification, we can think of it like this. If our head is constantly in place then,

the projection of the 3d object is accurate to scale of the this.canvas/screen/this and our eyes,

the shape retains but we perceive it differently. Human error is not inducive for perspective.

a good analogy is;

if we make an eye and want it to stare the user we make it look at (0,0)

if the player moves to the right, the eye will still look at (0,0)

but the player will perceive it as if the eye is looking at the left, that is the users fault

not ours and doesn't need fixing!

“

Other optimizations are required for a good renderer, but the barebones of all formulae run on this exact formula!

(To see a live demonstration check out: https://arkaive19.is-a.dev/roobiks)