
You may have noticed that I’ve been playing with some technologies other than Flash recently, and you know what, I’ve been really enjoying it!
So, just for fun, I thought I’d see if I could make a very simple 3D engine using the HTML5 canvas drawing API. I took code from the 3D lunar lander and hacked it around until it worked in Javascript.
Sadly I didn’t have time to get a Perlin noise function working fast enough but I reckon I could add that later into a pre-calculated array.
Performance seems OK in Safari and Chrome, not so good in Firefox, and of course, non-existent in Explorer.
Although I used to use Javascript extensively (before Flash was any good
) it’s been quite a few years since I touched it, so if you have any performance related tips, I’d appreciate it. In particular, I’d like to know how to draw non anti-aliased lines to improve performance. Setting the line weight to 0 seems to work for Safari but not for Firefox. (Ah how I miss cross browser compatibility issues!)
I should thank F1LT3R, although I didn’t use any of his code in the end, it was a massive inspiration to see that you could render 3D into an HTML5 canvas object.
The 3D Landscape on HTML5 canvas.