Divide by depth for instant 3D

(gabrieloc.com)

Comments

tmoertel 9 hours ago
The explanation of "What's that extra 1 for?" in the column representation of 3-d coordinates (x y z 1) could benefit from mentioning that translation—moving things—is not a linear transformation (the origin is not mapped to itself) but an affine transformation. Therefore, you cannot represent translation in 3-d space with a 3x3 matrix. What you can do, though, is embed that 3-d space within a 4-d space fixed at some coordinate on its 4th dimension, typically w=1. Then, a translation in the original 3-d space can be represented as a linear transformation in the 4-d space and thus can also be represented by a 4x4 matrix multiplication. So the extra 1 is actually what allows all common 3-d operations, including translation, to be done via linear algebra and thereby harness the brutal power of matrix multiplication on modern computing devices.
aappleby 14 hours ago
FWIW, if you start with "The view frustum is a 90 degree pyramid with the tip cut off at z = 1 and the 'end' at infinity", you can then work out how to map that to a NDC using a matrix and perspective divide.

I've used that when teaching short "Graphics 101" (not in the first session though) and the math comes out more intuitive than the usual "here's how to calculate a perspective matrix, don't ask where these numbers come from" version.

lolakutty 1 hour ago
Trust me, I am not very bright. But as boy with a 486 in the mid 90s, I was so inspired, a that I figured this out without the internet (was still unheard of) or the books.

I still remember the rush that I got when I got the rotating cube in my QBasic IDE in my 14inch monochrome monitor. The intuition I used was derived from how light casted shadows of 3d objects in a 2d wall..From there, this x' = x/z y' = y/z, follows naturally..

gabrieloc 19 September 2026
Hi! I wrote a few notes on how 3D cameras work with interactive examples to hopefully demystify a pretty complex topic that I once struggled with. Maybe this is useful for someone here, and if not, there are fun sliders to play with!
rhyperior 7 hours ago
At one point all of this seemed like common knowledge in software because Carmack, Abrash and Hecker (among many others) were working in the open on games and discovery. Kind of funny that someone had to reinvent from first principles!
throwaway219450 7 hours ago
A fun demo of this from earlier this year (Tsoding): https://www.youtube.com/watch?v=qjWkNZ0SXfo The good stuff starts around 7 mins, but it’s a great presentation and it’s almost magical how everything comes together.
IvanK_net 3 hours ago
It reminds me my "3D engine in 47 lines ov javascript", which can only draw line segments :) https://jsfiddle.net/06L845jx/86/

And 54 lines of javascript: https://jsfiddle.net/06L845jx/127/

Original discussion: https://www.reddit.com/r/javascript/comments/9nihtw/a_simple...

JKCalhoun 9 hours ago
Like the post, I wrote an old-school 3D engine that does the same math—renders flat-shaded polygons in an HTML5 Canvas.

Demo: https://engineersneedart.com/Phosphor3DTest/

(cursor keys drive the sand crawler, square-brackets change FOV)

Sources: https://github.com/EngineersNeedArt/Phosphor3D

(I was seeing a few anomalies and sent Claude to investigate—found a math error or two. There are still some anomalies in depth sorting the polygons but not due to the code, I believe—instead the model itself.)

jmiskovic 1 hour ago
3D on 2D screen is all about giving brain enough depth cues. Having size diminish with depth is a big one. The 2nd biggest thing is occlusion, which is altogether skipped in these wireframe renderings. Another big one is fog, or impact of medium the light is traveling through, very easy to do for the basic effect. It's basically just fading the colors to gray when more distant from camera.

You can have a convincing 3D with just the occlusion and fog (or even just the fog), without simulating the perspective. It's just another artistic direction.

vincentmathis 2 hours ago
I remember doing this in generative computer graphics class, i thought it was so neat, just dividing by the w component to get correcti projection.

Great writeup.

lelanthran 3 hours ago
This is very cool.

Now I want to write a game that does all 3d projections using x' and y' only.

skzv 11 hours ago
Awesome. To take this a step further, I used this math to turn 2D photos into 3D scenes with depth maps: https://blog.skz.dev/3d-reconstruction-from-public-photos
doubletwoyou 7 hours ago
This is a beautiful post, good work!

Really loved the examples of the math being put into action with those lovely little sliders

TN1ck 12 hours ago
The sliders are great UX on mobile, love the detail to attention.
nik282000 7 hours ago
wtf, I thought this was THE cheap way to 3D.