<< | Next Archive>>

Drawing 3D scenes in HTML 5's 2D Canvas - Part 2: Textured Triangles

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

The code for this would look something like the following (based on nomone's and Brendan Kenny's blog posts):
// clip triangle
ctx.moveTo(x0, y0);
ctx.lineTo(x1, y1);
ctx.lineTo(x2, y2);
// 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

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.

Wikipedia article halflife

Well, there is now a Wikipedia article about CopperCube. It's not long, but it is a beginning. I wonder if it will be erased again as well. Not sure if this is the same in the english Wikipedia, but the german one has a very bad reputation of deleting articles all the time. Let's see, I'm curious.

Drawing 3D scenes in HTML 5's 2D Canvas

I just programmed a small test application using HTML 5 canvas, extending the CopperLicht Javascript library: I'm misusing the 2D canvas for drawing 3D triangles on it. Right now, I only implemented a 3d transformation and clipping pipeline, and not material renderers, so you only get empty wireframe triangles, but it looks nice anyway. Try it out yourself, it should work using InternetExplorer (9 and newer), Firefox, Chrome and Opera. Didn't try with Safari yet. Use the Cursorkeys or WASD to move the character. Jumping works with space, running by holding down shift. The 3D scene itself was created with CopperCube (it's the example third person camera scene which comes with the editor).

Rendering is not as fast as with WebgL, but works in every modern browser, so if extended a bit, it could work as a nice backend for CopperCube if the user doesn't have WebGL. Maybe. For now, it was just a fun experiment.

Still waiting for HTML 5 audio to happen

Take a look at this table, it shows which audio format can be played back by which browser, using the HTML 5 audio tag:

Browser Operating system Formats supported by different web browsers
Ogg Vorbis WAV PCM MP3 AAC WebM Vorbis Ogg Opus
Google Chrome All supported 9.0 Yes Yes Yes Yes Currently in Dev and canary channels
Internet Explorer Windows Depends No 9.0 9.0 No No
Mozilla Firefox ( Gecko ) All supported 3.5 (1.9.1) 3.5 (1.9.1) No No 4.0 (2.0) 15.0 (15.0)
Opera All supported 10.50 No Depends Depends 10.60 In development
Safari OS X must be installed separately 3.1 3.1 3.1 must be installed separately No

Source: wikipedia.

You notice, there is not one single vertical row where everything is green. And this is 2012. As long it stays like this, HTML 5 audio will not be used by many people seriously. Meaning that you cannot easily write games and multimedia apps using HTML 5 audio.
Come on, browser developers! Give us just one single, one tiny audio codec which works everywhere. How difficult can that be? I'd even be happy even if it would be Ogg! Just put that library in there. It's free. No patents. Integrating that library takes about half an hour for a decent C++ programmer. Really. It would be such a big step forward.


Usually, I don't like posting cat pictures and animal videos, but sometimes I cannot resist. Yesterday, I captured this mouse:

It was actually quite cute, although you can't see it very well in that movie, taken with my phone. But still it's no match for the office hamster, of course.

The Cabin in the Woods

I just watched the movie The Cabin in the Woods, which just lauchned in the cinemas here in Austria. It's a teen horror film by Joss Whedon (known from Buffy, Dr. Horrible's Sing-Along blog, and of course Firefly). The film is actually very good IMO, it is funny and has an unusual twist, I can really recommend to watch it.
What I didn't understand was that although this was the second day the film was watchable in our cinemas, the hall where we watched it was completely empty. We were the only ones in that cinema yesterday. Felt very weired, and in the beginning we thought we might be in the wrong room. Is it because the film is not that known? Is it because they already launched in the USA in March and all people already watched the downloaded version? Strange.

Back again

Sorry for the lack of updates recently, but a quite big change happened in my personal life recently, and additionally, I was on vacation during the last two weeks. Updates to this blog will continue from now on. Starting with the first small one:
Before I left for holidays, I forgot to upload the latest version of irrEdit, the irrlicht editor, in version 3.5. It's it's available now. I usually generate the installer package at the same time I do the CopperCube one, but this time, I forgot uploading it before I left. Sorry for that.