Hacker News Reader

I have to say, as simplistic as it is, I like this renderer. I am curious, though why an orthographic projection (?) is being used, instead of a perspective one? From the code, it looks like it could support a perspective projection; I'm not sure if there is code in there to do it, or if you'd have to add it in (it's been ages since I messed around with my own 3D software engine stuff - and that was mostly in QB and VB)...

View on HN

I didn't look at the code, but canvas only supports 3x3 transforms and you need 4x4 to do perspective: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRende...

So if those cubes are textured, you'd need to subdivide the texture and approximate each with affine transforms. Here's an example of this hack (which was only necessary years ago before webgl existed): https://acko.net/blog/projective-texturing-with-canvas/

For wireframe objects like the one in the OP (which actually does use a perspective projection it seems), that's not really a problem. Just have your own code that does all the matrix multiplication, and you get a point you can plug right into moveTo/lineTo

Maybe it looks like it’s orthographic, but it’s actually a perspective projection. You should be able to tell if you use the arrow keys to move around.

Check out drawLine3D() in until.js to see where I apply the perspective projection.

Reply on news.ycombinator.com