Rendered at 04:20:44 GMT+0000 (Coordinated Universal Time) with Cloudflare Workers.
tmoertel 3 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.
globalnode 2 hours ago [-]
nice intuition there, this comment prompted me to consider a simpler example, 2d embedded within 3d. does the 2d plane (embedded in 3d) go through the 3d origin (where 0 maps to 0) and is thus a linear transformation in 3d but a 2d affine transform in 2d? it feels like this is the case?
tmoertel 50 minutes ago [-]
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 move x and y values by some scaled version of z to make translation happen. If z is zero, that scheme does not work.
Consider a transformation f where we wish to move x-y coordinates s units to the right. In 2d, we could express it as:
f(x, y) = (x + s, y)
But that transformation is affine not linear. There is no way to generate the value s as a linear combination of the inputs x and y. So, our workaround is to embed the x-y plane into 3d space at z=1. Then we can move (x,y,1) points in that plane s units to the right using this transformation:
f(x, y, z) = (x + s*z, y, z)
This new transformation is linear: it maps (0,0,0) to itself. But it maps our embedded 2d plane's origin (0,0,1) to (s,0,1), shifting it right by s units, as we want.
The matrix form of that transformation is:
[[1 0 s]
[0 1 0]
[0 0 1]]
The same scheme would work if we had embedded the plane at any fixed z=r for nonzero r. We would only have to rescale the s in the matrix to s/r. Again, however, if r=0, this scheme will not work, as 1/r has gone to infinity.
34 minutes ago [-]
sheept 59 minutes ago [-]
Yes, affine transformation matrices are essentially shears.[0] In the 2D case, shearing the plane z=1 in 3D space essentially translates it around.
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.
Lerc 3 hours ago [-]
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.
psvv 7 hours ago [-]
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.
gabrieloc 2 days ago [-]
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!
anitil 57 minutes ago [-]
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
dyarosla 8 hours ago [-]
The visuals and sliders are great!
Maybe consider clipping the ball properly on the edges of the sides of the view frustum ?
Similarly the near and far could also be clipped; i know this is not true of the math necessarily but is the expected result in 3d graphics applications.
rhyperior 52 minutes 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 1 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.
JKCalhoun 3 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.
(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.)
doubletwoyou 1 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
Consider a transformation f where we wish to move x-y coordinates s units to the right. In 2d, we could express it as:
f(x, y) = (x + s, y)
But that transformation is affine not linear. There is no way to generate the value s as a linear combination of the inputs x and y. So, our workaround is to embed the x-y plane into 3d space at z=1. Then we can move (x,y,1) points in that plane s units to the right using this transformation:
f(x, y, z) = (x + s*z, y, z)
This new transformation is linear: it maps (0,0,0) to itself. But it maps our embedded 2d plane's origin (0,0,1) to (s,0,1), shifting it right by s units, as we want.
The matrix form of that transformation is:
The same scheme would work if we had embedded the plane at any fixed z=r for nonzero r. We would only have to rescale the s in the matrix to s/r. Again, however, if r=0, this scheme will not work, as 1/r has gone to infinity.[0]: Here’s a visual: https://gunn-gatm.github.io/textbook/gatm.pdf#page=28
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.
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.
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.
Maybe consider clipping the ball properly on the edges of the sides of the view frustum ?
Similarly the near and far could also be clipped; i know this is not true of the math necessarily but is the expected result in 3d graphics applications.
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.)
Really loved the examples of the math being put into action with those lovely little sliders