Comment by seveibar
2 days ago
Author here: I don’t think the commenter here has set the same focal length, the focal length can make a surface appear curved, I set it explicitly to a low value to test the algorithm’s ability to handle the increased distortion. You can google “focal length distortion cube” to see examples of how a focal length distorts a grid or you can google “fish eye lens cube” etc.
Edit: I think there’s a lot of confusion because the edges of the cube (the black lines), do not incorporate the perspective transform all along their edge. The texture is likely correct given the focal length, and the cube’s edge is misleadingly straight. My bad, the technique is valid, but the black lines of the cube’s edge are misleadingly straight (they are not rendered the same way as the texture)
I think the original commenter is correct that there is a mistake in the perspective code. It seems the code calculates the linear interpolation for the grid points too late. It should be before projecting, not after.
I opened an issue ticket on the repository with a simple suggested fix and a comparison image.
https://github.com/tscircuit/simple-3d-svg/issues/14
That admittedly looks a lot more correct! Thanks for digging in, i will absolutely test and submit a correction to the article (i am still concerned the straight edges are misleading here)! And thanks to the original commentor as well! I think I will try to quickly output an animated version of each subdivision level, the animation would make it a lot more clear for me!
I might be missing something but you sound genuinely confused to me. The perspective in your post is linear perspective. It's the one used in CSS and it doesn't curve straight lines/planes. It's not the perspective of fish-eye images (curvilinear perspective).
I was at least a little confused because yea fish eye isn’t possible with a 4x4 perspective transform matrix. I’m investigating an issue with the projection thanks to some help from commenters and there will be a correction in the article, as well as an animation which should help confirm the projection code.