What is this application?

This is a 3D engine built from the ground up, using nothing but the Canvas API to draw individual lines

It works by using a concept called 'Projection' Which involves putting a set of vectors through a series of transformations and keeping track of it's X and Y coordinates relative to the camera screen.

Motivation To Create It

I wanted to time travel back to the late 1980's (before 3D graphics was a thing) and start from scratch. Back when computers could only draw simple dots and lines. To figure out - How do I represent an entire three dimensional world starting from absolutely nothing?

There is a great joy in traversing down to the most basic building blocks of a framework (that we sometimes take for granted) and understanding how they work. Most of us don't even think anymore about all the magic that happens under the hood of even the most early 3D engines.

What The Lines Mean

The Red/Orange lines you see on the Camera screen are the edges of cubes after they have undergone regular projection Where we keep track of our camera's current rotation bearing (horizontal and vertical rotation) and transform the vectors in our scene inversely to that. This is what creates the illusion of rotating around an object in three dimensional space.

The blue lines take it a massive step further. It is representing the same objects however we are calculating the displacement that our current X and Y coordinates would go through if the rays behaved as they would in the real world (where they would converge at a point somewhere behind the camera). We then apply those displacements on our existing X and Y coordinates. This is what creates the perception of depth in our engine.

Current Features/Bugs

Keep in mind this is a hobby project, meant for experimenting/learning. Which means you will occassionally run into a feature that might not work as expected or a test feature that needs an upgrade.

Currently you might notice that at some points of rotation, the blue lines seem to go completely haywire. This is actually expected! It's occuring because the vectors are passing through and beyond the camera screen (which is where we ideally should cut off the rendering and not display those vectors). So it's not as much of a bug as it is an unfinished feature.

For the best experience, move the mouse very slowly inside the joystick box and notice how the vectors on our camera screen transform with the camera's rotations.