Seb Lee-Delisle

Yesterday I met Renaun Erickson from Adobe, who told me that he took my basic 3D engine, compiled it with the Flash CS5 beta into an iPhone app, and demoed it the very next day at the 360 Flex conference at Adobe!

It gave me a few ideas about how to optimise it so perhaps I’ll try that soon. But first, I wanted to see whether I could port it to javascript and HTML5 canvas. It turns out that I could, but this time it’s more like 11 lines.*

var scale = fov/(fov+z3d); 
var x2d = (x3d * scale) + HALF_WIDTH;	
var y2d = (y3d * scale)  + HALF_HEIGHT;

By now you’ll recognise this code to convert the 3D x y and z position into 2D x and y, the difference here is that I’m offsetting the coordinate system so that it’s in the middle, which puts the vanishing point in the centre of the screen. (In the Flash version, I just moved the whole container for the particles into the middle.)

particles.sort(compareZPos);
 
function compareZPos(a, b)
{
	return (b.pos.z-a.pos.z)
}

This is the bit that sorts the array relative to the z position of each particle, so that when we then go through and draw them all, it starts from the back to the front.

And here’s the bit that draws the image onto the canvas :

	c.drawImage(img,x2d-scale, y2d-scale, scale*2, scale*2);

I’m thinking about making all of this stuff into a slightly better explained tutorial, is this something you’d be interested in? In the meantime, check it out and let me know what you think. In particular I’d like to hear from any javascript experts with any optimisation tips.

HTML5 Canvas 3D Particles

* I know it’s not 11 lines, OK? And perhaps it’d be more apt to call it a 3D lawnmower engine

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.