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.

7 replies on “3D landscape in HTML5 canvas”

Really nice stuff! What’s stopping me about those technologies, comparing to flash, is cross-browsing issues. I guess it will always be a problem with an app running without a largely distributed run-time.

Maybe a HTML 6 run-time included in future browsers? 🙂

You’re right. It is very slow on Firefox, but definitely great on Safari.

@Og2t hehe I’ll need to convert it to Javascript first of course!

@Romuald it’s a very young technology and really no replacement for Flash just yet

@dVyper thank you! It definitely needs more optimisation – it’s on my list of things to do 🙂

[…] 3D landscape in HTML5 canvas | Seb Lee-Delisle […]

Comments are closed.