Seb Lee-Delisle


3D landscape in HTML5 canvas

3D landscape in HTML5 canvas

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.

This entry was posted in HTML5 Canvas and tagged , , , . Bookmark the permalink.

7 Responses to 3D landscape in HTML5 canvas