3D from Scratch - Introduction
New Project!
I’m going to figure out enough about how 3D graphics and game programming work to write a simple retro Elite-style game from scratch. But I’m not going look at any graphics or game programming references or tutorials. The rule is I’ve got to figure it all out myself.
To be clear: I have no idea how 3D graphics work. I have virtually no idea how 2D graphics work. I am pretty good with maths.
I’ll do it in JavaScript because I want to finish this century and because my JavaScript knowledge is still a little jQuery-era and I want to brush up.
I can look at any JavaScript documentation I want, including the Canvas API. But for the graphics programming I’ll treat HTML5 canvas entirely as a dumb screen of pixels (step one is to figure out how to do this). This means no OpenGL/WebGL either: all the 3D and rendering will be implemented in pure JavaScript.
Also I’ll allow myself to look up generic Maths definitions and theorems, otherwise it will take all year.
What will be in these posts will be all my reasoning as I work this stuff out, including diagrams and full code (in a kind of a literate style). And I’ll check in each day’s code in the repo.
It might not be pretty, but it’s going to be a lot of fun.
Thoughts on JavaScript as the implementation language
Again, I’m choosing this language because I don’t have much free time and I want to make rapid progress.
Also, if it works I can eventually figure out how to deploy it anywhere. There are many HTML/JS wrapper frameworks that I forget the names of that can deploy to all platforms.
However I’m not entirely sure that JavaScript is fast enough to do this. (Again, this is 3D graphics without OpenGL.) I wouldn’t even consider it except that this is going to be very retro graphics style with something like a 320x200 resolution and wireframe or flat-shaded models.
When you compare to the hardware that Bell and Braben had in the early 80’s when making Elite, it certainly seems as though the modern browser should be able to compete.
And I’ve heard of people getting amazing performance out of the modern runtimes (like emulating x86 CPUs with a fair speed!) so surely it’s possible. And learning how to optimize JavaScript is an interesting project in its own right.
A bigger worry is GC pause times for a realtime application. I know the V8 team have done a bunch of work making the runtime prioritize live stuff. But what about Safari? I don’t want to have jerky graphics. If necessary, learning how to maintain object pools to keep GC minimal will also be a very interesting project, and something I’ve wanted to try forever.
And finally I reserve the right to bail out into any other language at any time if it turns out not to be possible or just too much work to be reasonable.
Where to start
First things first, how do we even do retro pixel graphics in HTML Canvas? And then something very simple to test the waters…