Thread

Divide by depth for instant 3D

217 points · 39 comments · gabrieloc

Loading the complete thread in the background. This saved snapshot is available now. Refresh

gabrieloc · 1789846993 · focus · HN ↗
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!
1. dyarosla · 1790023630 · focus · HN ↗
  The visuals and sliders are great!
  Maybe consider clipping the ball properly on the edges of the sides of the view frustum ?
2. anitil · 1790047430 · focus · HN ↗
  Really nice explanation. When I saw the title I immediately remembered the tsoding video as well so it was nice to see you mentioning it
aappleby · 1790023672 · focus · HN ↗
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.
1. psvv · 1790027305 · focus · HN ↗
  For me learning on my own, it was even illustrative to not use a near plane and see how things behind the camera would still appear in front of it.
  A lot of 3D graphics can be derived pretty easily just from knowing a few basics like divide by depth. I think knowing how to construct a transformation matrix from a coordinate system basis is another one -- that would remove the need to look up how to construct a perspective matrix, for example.
  A few things like that will get you pretty far and you can kind of take the same journey of discovery as early 3D pioneers. That's one of the best ways to learn because you're much more likely to remember something you figured out compared to something you just read about.
  It gets tricky with perspective-correct textures, but running into issues like that on your own (even if not solved on your own) is part of the fun of learning, I think.
2. Lerc · 1790038292 · focus · HN ↗
  I tend to do it with a window.
  Students can easily imagine the pyramid from an eye to the window frame, and that it keeps going.
  Then I point to an object outside the window and say imagine strings going from the corners of the object to your eye. To do this they would have to go through the window, where do they do that. 3d graphics is finding out where on the window the strings go through so you can stick a picture of thing outside onto the window and it looks exactly the same.
xcafebabe · 1790026168 · focus · HN ↗
[dead]
TN1ck · 1790030120 · focus · HN ↗
The sliders are great UX on mobile, love the detail to attention.
skzv · 1790035009 · focus · HN ↗
Awesome. To take this a step further, I used this math to turn 2D photos into 3D scenes with depth maps: <a href="https://blog.skz.dev/3d-reconstruction-from-public-photos" rel="nofollow">https://blog.skz.dev/3d-reconstruction-from-public-photos
tmoertel · 1790039369 · focus · HN ↗
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.
1. globalnode · 1790044610 · focus · HN ↗
  nice intuition there, this comment prompted me to consider a simpler example, 2d embedded within 3d. does the 2d plane go through the 3d origin and is thus a linear transformation in 3d but a 2d affine transform in 2d? it feels like this is the case?
  1. sheept · 1790047325 · focus · HN ↗
    Yes, affine transformation matrices are essentially shears.[0] In the 2D case, shearing the plane z=1 in 3D space essentially translates it around.
    [0]: Here’s a visual: <a href="https://gunn-gatm.github.io/textbook/gatm.pdf#page=28" rel="nofollow">https://gunn-gatm.github.io/textbook/gatm.pdf#page=28
  2. tmoertel · 1790047818 · focus · HN ↗
    No, the 2d x-y plane in your example cannot pass through the 3d space’s origin because that would imply that you fixed the z coordinate at zero. The plane must be fixed at some nonzero z because you need to be able multiply x and y values by some scaled version of z to make translation happen. If z is zero, that scheme does not work.
    globalnode · 1790048813 · focus · HN ↗
    that makes sense, and setting z=1 means the x-y values are simply themselves
  3. globalnode · 1790053945 · focus · HN ↗
    ive been thinking -- if i have a 3x3 matrix [1 0 q; 0 1 r; 0 0 1], when dotted with x, that first row is a plane in 3d with normals n1=(1 0 q), n2=(0 1 r) and n3=(0 0 1). plane 3 is parallel to the x-y plane and 1 unit up. plane 1 is tilted by q and parallel to the y-axis, plane 2 is tilted by r and parallel to the x-axis. the intersection of those planes (i.e. the solution x) when calculating Ax=b gives an output vector b sitting in 3d space at b=(x+az, y+bz, 1*z). since we always specify z=1 we have b=(x+a, y+b, 1). in 3d this is a linear shear because we are translating proportionally by z but because z always equals 1 in this case we effectively get a translation in 2d.
    so as the other 2 helpful commenters also just said: 3d shears using linear algebra degenerate to 2d affine transformations when z=1 (or w in 4d)
    globalnode · 1790184297 · focus · HN ↗
    re-read this a day later and ofc it still makes sense to me but really most of it is barking up the wrong tree, focusing on solutions (which we already know) rather than outputs. if i could delete it i would but oh well.
2. ggambetta · 1790071356 · focus · HN ↗
  You can do rotations and translations "via linear algebra" without homogeneous coordinates (the 4-element tuple representing a 3d point or vector), since adding two vectors is linear algebra.
  What this lets you do is composing multiple transforms into one matrix multiplication instead of a sequence of multiplications and additions; that's what dramatically increases performance, on modern computing devices but most especially on ancient ones, where we were fighting for every MUL.
  More details: <a href="https://gabrielgambetta.com/computer-graphics-from-scratch/10-describing-and-rendering-a-scene.html#the-transform-matrix" rel="nofollow">https://gabrielgambetta.com/computer-graphics-from-scratch/1...
  1. gcr · 1790084111 · focus · HN ↗
    Rick Szeliaki’s “Computer vision algorithms and applications” has a lot of great motivation for homogeneous coordinates in the first chapter and appendix. For example, the cross product between two points in homogeneous coordinates is the line joining them, and the cross product between two lines in homogeneous coordinates is their point of intersection.
  2. tmoertel · 1790084382 · focus · HN ↗
    You don't need to use homogeneous coordinates to represent a series of linear transformations as a single matrix. That's just basic linear algebra: any series of linear transformations is itself a linear transformation, and any linear transformation can be represented as an equivalent transformation matrix.
    But you do need homogenous coordinates if you want to include translations (fixed distance shifts) in the set of operations you can represent as linear transformations and thereby gain all the benefits of linear algebra, including the benefit of being able to include them in a series of operations that you can represent with a single transformation matrix.
  3. yeoyeo42 · 1790088820 · focus · HN ↗
    its linear algebra but not a linear transformation. repeat: translations are not linear transformations in 3d.
3. LPisGood · 1790072392 · focus · HN ↗
  Is that why quaternions are interesting for computer graphics? I studied mathematics and computer science but never understood (or even looked so hard into) the connection.
  1. yunruse · 1790097943 · focus · HN ↗
    Kind of! The scalar allows vectors and scalars to be expressed together as one object, which has a lot of computational and mathematical niceties.
    The killer feature is that you can put the two together for a rotation axis (~ vector) and angle (~ scalar).
    With just three gimbals (rotating circles), if gimbals A and B are aligned, you only have two degrees of freedom (rotating A is the same as rotating B). Because of this, interpolating angles is unwieldy in vector space. 'Gimbal lock' confounds animation (in hilarious but unrealistic ways) but also aerospace (four hours before 'one small step for man', just after landing, Collins joked he would like a fourth gimbal for Christmas).
JKCalhoun · 1790041667 · focus · HN ↗
Like the post, I wrote an old-school 3D engine that does the same math—renders flat-shaded polygons in an HTML5 Canvas.
Demo: <a href="https://engineersneedart.com/Phosphor3DTest/" rel="nofollow">https://engineersneedart.com/Phosphor3DTest/
(cursor keys drive the sand crawler, square-brackets change FOV)
Sources: <a href="https://github.com/EngineersNeedArt/Phosphor3D" rel="nofollow">https://github.com/EngineersNeedArt/Phosphor3D
throwaway219450 · 1790046542 · focus · HN ↗
A fun demo of this from earlier this year (Tsoding): <a href="https://www.youtube.com/watch?v=qjWkNZ0SXfo" rel="nofollow">https://www.youtube.com/watch?v=qjWkNZ0SXfo The good stuff starts around 7 mins
1. throwaway219450 · 1790055455 · focus · HN ↗
  (I somehow missed that OP cited this at the start, but it’s a great companion piece)
doubletwoyou · 1790046944 · focus · HN ↗
This is a beautiful post, good work!
Really loved the examples of the math being put into action with those lovely little sliders
rhyperior · 1790047734 · focus · HN ↗
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!
1. socalgal2 · 1790051897 · focus · HN ↗
  The issue is it’s hard to find a good simple explanation. If you search you’ll more often then not get either a bad explanation, one that doesn’t work for you personally but might for others, one that’s too mathy and assumed too much prior knowledge, etc…
  Now-a-days maybe you can ask an LLM for something exactly at your level and anything you don’t get you can ask it that too. That wasn’t the case until recently and many still don’t use them
  1. fsloth · 1790053033 · focus · HN ↗
    [delayed]
2. fsloth · 1790052736 · focus · HN ↗
  [delayed]
nik282000 · 1790047906 · focus · HN ↗
wtf, I thought this was THE cheap way to 3D.
1. lucicditee · 1790100820 · focus · HN ↗
  [dead]
IvanK_net · 1790061009 · focus · HN ↗
It reminds me my "3D engine in 47 lines ov javascript", which can only draw line segments :) <a href="https://jsfiddle.net/06L845jx/86/" rel="nofollow">https://jsfiddle.net/06L845jx/86/
And 54 lines of javascript: <a href="https://jsfiddle.net/06L845jx/127/" rel="nofollow">https://jsfiddle.net/06L845jx/127/
Original discussion: <a href="https://www.reddit.com/r/javascript/comments/9nihtw/a_simple_3d_engine_in_47_lines_of_js/" rel="nofollow">https://www.reddit.com/r/javascript/comments/9nihtw/a_simple...
lelanthran · 1790062979 · focus · HN ↗
This is very cool.
Now I want to write a game that does all 3d projections using x' and y' only.
vincentmathis · 1790067243 · focus · HN ↗
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.
lolakutty · 1790069038 · focus · HN ↗
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..
1. rjrodger · 1790079071 · focus · HN ↗
  fabulous!
  1. lolakutty · 1790160609 · focus · HN ↗
    I read your other comment below where you describe similar experience..Fun times, right? I am sad that kids today will never know that..They are born into a world where computers are not seen as programmable devices..and just as a glorified TV.
jmiskovic · 1790069959 · focus · HN ↗
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.
1. account42 · 1790073032 · focus · HN ↗
  Shadows can also be pretty important for something feeling like a real 3D scene.
  Without them even pictures of the real world can look flat: <a href="https://en.wikipedia.org/wiki/File:Lahaina_Noon.jpg" rel="nofollow">https://en.wikipedia.org/wiki/File:Lahaina_Noon.jpg
  1. jmiskovic · 1790177101 · focus · HN ↗
    Good point. And ambient occlusion, as sort of many micro-shadows. A bit more advanced to implement.
rjrodger · 1790079016 · focus · HN ↗
OMG This how I got 3D wireframes working on my zx spectrum in 1989! Linear Algebra - what's that? I got it working by pure experimentation - no coding high has ever quite reached the same level since...
massimodeluisa · 1790143150 · focus · HN ↗
[dead]

Open on Hacker News to reply ↗

Unofficial Hacker News client; not affiliated with Y Combinator.