The Math behind (most) 3D games - Perspective Projection

Perspective matrices have been used behind the scenes since the inception of 3D gaming, and the majority of vector libraries will have built-in helper functions to construct them for you. But what if you wanted to know the reasoning behind how these matrices are constructed.

I start off with a brief introduction of computer graphics and the key ideas behind 3D rendering. I differentiate between Image Order Rasterization typically used by Ray tracers, and object order rasterization as used in most video games. I then present an animated walkthrough showing the full derivation of both the orthographic and perspective projection matrices.

My derivation here is focused on the Vulkan API, but the reasoning applies just as well to other API's such as OpenGL or direct X, with the only notable differences being the size of the canonical viewing volumes, and the handedness and conventions of the xyz coordinate systems.

0:00 How does 3D graphics work?
2:05 Image versus object order rendering
2:51 The Orthographic Projection matrix
5:17 The perspective transformation
7:08 Homogeneous Coordinate division
8:27 Constructing the perspective matrix
10:29 Non-linear z depths and z fighting
11:30 The perspective projection transformation

** Resources **
Fundamentals of Computer Graphics by Peter Shirley & Steve Marschner

** Attributions**
Ray tracing graphics cards - Photo by Nana Dua from Pexels
Rubiks cube - Photo by Mathias P.R. Reding from Pexels

[BrendanGalea]

For those of you who have been following the vulkan tutorial series, this video is a slight departure from the normal format. The coding portion for the tutorial will be released separately as soon as I’m finished. Future tutorials will return to the more typical structure, with code and theory interleaved. Enjoy!

[func]

Cleanest description of the math behind view projection I've seen! Nice.

[ammonwolfert]

I’m writing a rendering engine from scratch in C and this was exactly the resource I was looking for. Wonderful visualization and explanation!

[alexanderheim]

After watching 3blue1browns "Essence of Linear Algebra" Playlist, taking the linear algebra module in my university AND watching this video I was finally able to implement these concepts all while deriving the used methods by myself too. Thanks for this awesome video

[tomatrix]

This is very very very good. I’ve seen too many people code in opengl etc without really understanding what is going on. Sure it works, but this intuition as to what these matrices are doing is good

[bellanthea]

Thank you for this video!! I don’t code much, but I love art and math and was so curious on the math behind game engines / 3d graphics and wanted to see how close or far off my guesses were. this makes me want to code!

[guitarvoicing]

Another master piece of 3d explanation. I really never understood well the black magic of the perspective matrix. It was in somehow just diving by z. Yet, your explanation is so clean and so perfect. It makes it really easy to understand. Please post more tutorials like these. You should definitely write a book about it too.

[zdspider]

12:33 The vertical FOV is actually the angle from the center to the top (or center to the bottom, same thing). It's a half angle. Hence the theta/2.

[burakcanik]

This, along with Cem Yuksel's 3D Transformation video really explains the subject well. I've reviewed this subject multiple times throughout the years but I gotta say, this 2-step approach (perspective projection = perspective transformation + orthographic projection) is IMHO the most intuitive and easy to remember way of teaching/studying this subject.
Most books/resources tend to focus on deriving the perspective projection matrix from the ground up, often times skipping the inherent connection to orthographic projection.
Thank you for a job well done. Cheers!

[Skeffles]

Brilliant video. I did a computer graphics course a few years ago and we never actually went into what makes the matrix. Thanks for explaining it!

[PBrrtrn]

Absolutely loved this explanation and would recommend it to anyone trying to understand the nuts and bolts of graphics programming.

[stef]

I’m working on a career change right now, going back to school in the near future for an MS in CS with hopes to be a graphics engineer. I’m reviewing all the prerequisite math right now so having an understanding of what kind of math I’ll need to learn in the future is very helpful. Even though I didn’t really understand 95% of this it was still a great video 😁

[aaaakko]

Even though I thought I had already understood this before I watched, I still learn something from it. Thanks for making this video, I think it's the clearest one about how to get the Perspective Projection

[fyiqifz]

Man you saved my life. I was cramming my 3D book and completely lost in projection stuff then found your vid. Thank you so much aa

[AlexGomes]

Beautiful, right to the point. Not a lot of extra theory. Easy to follow and understand. Keep them coming 🙏

[KamiSlayerz]

Thanks a lot! I've never heard these concepts explained so well!

[kipchickensout]

This simultaneously looks easily and neatly explained and not understandable at all without an already pretty advanced level

[pedro_soares_bhz]

Wow, these drawings are so cool, they have a 2000's vibe. Nice.

[ssopkc_venom]

Probably the best in depth tutorial i have ever seen on Youtube for graphics rendering. Even better than Cherno IMO

[isshintheguy]

I have exactly no background in computer graphics, only linear algebra. Your video is masterful in its explanation. I find the tempo of your speech helps alot!