Seb Lee-Delisle

On Saturday at BarCampBrighton4 I explained the basics of 3D rendering using the simple HTML5 canvas drawing API.

As promised here are the files :

http://sebleedelisle.com/demos/canvas3d/canvas3d1.html
http://sebleedelisle.com/demos/canvas3d/canvas3d2.html
http://sebleedelisle.com/demos/canvas3d/canvas3d3.html
http://sebleedelisle.com/demos/canvas3d/canvas3d4.html

I’ve been meaning to do a screen cast of this for a while, so please let me know if it’s something you’d be interested in and I’ll push it up the to-do list.

[UPDATE : Wanna see more? Please vote for my SXSW session! Visual HTML5 effects]

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.