html5cube–The HTML5 Cube

Posted by on Apr 10, 2011 in HTML5, Rubixel, Video | 0 comments

I’ve been wanting to do a puzzle cube with video on each side for a long time as a tech showcase.  Finally I got bored enough to do it.

html5cube is a 3D puzzle cube with video on each side.  Make sure you’re running IE9, Opera, or at least Chrome, and go check it out at html5cube.com.

I haven’t extensively ripped it apart in many browsers, other than IE9 and Chrome.  FIrefox got a real workover, and after Firefox 3 or 4 simply not able to play nice, I’ve ignored them.  Their performance is crap, and I think that ends up causing all sorts of race conditions.  I might look into it in the future, but this experiment isn’t for Firefox.

image

Lessons learnt:

  • IE9 still outperforms the other browsers when juggling more than 1 thing (matrix maths + lots of drawImage calls)
  • webm is much fatter than H.264 and OGG.  I increased the encoded images by 4x, H.264 ended up SMALLER, OGG went up by about 20%, and webm went up about 3x.  As such the worst video quality is webm since it’s the low res version.
  • <video> playback varies between browser in terms of CPU priority.  This means that CPU intensive JavaScript calculations can chop the video around, and other browsers the video chops the JavaScript around.  Yet another metric to balance.
  • Three.js is excellent.
  • Canvas rendering (as per my previous post) leave visual artifacts and different approaches in each browser.  Anti aliasing, and texture resizing all differ and it causes changing visuals.  IE9 tends to look the best, but I think that’s half good management, half convenient accident.
  • It’s on canvas, and I think every browser that has WebGL support is ignoring canvas performance completely.  I still am surprised at Chrome’s poor scaling with pixel count.
  • Cubes are still very very awesome.
  • Cubes that have video in each side are much much harder to solve.

Leave a Reply