Last week, I created a small test application using HTML 5 canvas, extending the
CopperLicht webGL Javascript library to be able to draw 3D graphics without WebGL: misusing the 2D canvas for drawing 3D triangles on it. Back then, the demo only drew wireframe 3d triangles (
try the demo here). Now, I extended it to draw fully textured triangles, giving 3d models a bit better look. It works on IE (9 and newer), Firefox, Chrome and Opera, and probably also Safari (didn't try).
The 3D scene itself was created with
CopperCube. I just imported a simple 3D model into the editor and added a model viewer camera to it. I wanted to demo this with a more complex 3D scene, but unfortunately, this became very slow.
The reason for this is the following: For drawing a textured 3D triangle using 2D canvas, you need to use some tricks. For each triangle I have to draw, I have to
- Set the screen area of the triangle as clip region
- Calculate and set a transformation matrix for skewing the image transformed according to the current UV coordinates
- Draw the image
The code for this would look something like the following (based on
nomone's and
Brendan Kenny's blog posts):
// clip triangle
ctx.save();
ctx.beginPath();
ctx.moveTo(x0, y0);
ctx.lineTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.closePath();
ctx.clip();
// calculate transformation matrix
x1 -= x0; y1 -= y0; x2 -= x0; y2 -= y0;
u1 -= u0; v1 -= v0; u2 -= u0; v2 -= v0;
var id = 1.0 / (u1*v2 - u2*v1);
var a = id * (v2*x1 - v1*x2);
var b = id * (v2*y1 - v1*y2);
var c = id * (u1*x2 - u2*x1);
var d = id * (u1*y2 - u2*y1);
var e = x0 - a*u0 - c*v0;
var f = y0 - b*u0 - d*v0;
// draw image
ctx.transform( a, b, c, d, e, f );
ctx.drawImage(tex, 0, 0);
// restore previous state
ctx.restore();
This is done for each and every triangle. Not very fast. Of course, you still also need to transform, clip, cull and probably even light the geometry every frame. Javascript is still surprisingly fast for this (I'm surprised it even works with that speed), but if constrained by this 2D drawing API, doing this is much too slow for doing anything much more complex then drawing a few hundred polygons.
I guess this could be improved a bit by using smaller mip map levels of the images when possible, but still, the 2D canvas API wasn't designed to do stuff like this, and gets very slow because of this. I tried drawing the scene of my previous
2D canvas 3D experiment, textured, but there are a couple of thousands of triangles in that scene, and all browsers stop drawing them (I guess this is some kind of security system, so that no website stalls the CPU).
But anyway, for doing some small magic tricks on Websites without using WebGL, this might be fun to use.