3 ms·
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
by cr0sh 9y ago
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)...
- arnioxux 9y agoI 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/CanvasRenderingContext2D/transform 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/ https://acko.net/blog/projective-texturing-with-canvas/
- Matheus28 9y agoFor 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
- vivekseth 9y agoMaybe 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.