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.

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.

It is possible to interrogate the <video> element to find out what codec support it has.  The problem is that it is only reliable in Opera.  All other browsers are completely unreliable.

But there is an easier solution if all you are trying to do is load the right video via JavaScript.  With video selection being an option within the video tag itself, you just need to create the <video><source/><source/></video> via JavaScript.  Assuming your video files are encoded correctly (and the server is sending back the right mime types) you’re set!

// Takes a file with no extension, and

// creates a video element for webm/h264/ogg

// and plays it

function createVideo(fileNoExt)

{

    var newVid = document.createElement(‘video’);

    // IE, Safari, IOS

    var h264 = document.createElement(‘source’);
    h264.setAttribute(‘src’, fileNoExt+’.mp4′);
    h264.setAttribute(‘type’, ‘video/mp4′);

    // Firefox

    var ogv = document.createElement(‘source’);
    ogv.setAttribute(‘src’, fileNoExt+’.ogv’);
    ogv.setAttribute(‘type’, ‘video/ogg’);

    // Chrome

    var webm = document.createElement(‘source’);
    webm.setAttribute(‘src’, fileNoExt+’.webm’);
    webm.setAttribute(‘type’, ‘video/webm’);

    newVid.appendChild(webm);
    newVid.appendChild(h264);
    newVid.appendChild(ogv);

    document.body.appendChild(newVid);

    newVid.play();

}

I’ve been using this approach for a few things, and it seems to work every time. 

NOTE: The order of source elements is important.  iOS 3.x has a bug where it only looks for the first element, so H.264 should always go first.

This enormity has changed my behaviour.  What I have found in Fallout 3 is that I play it for just a few minutes, and walk away at any point.  The game is just so big, that persisting is pointless, and whilst the game has milestones, progression feels analog.  Living with your consequences makes the game very interesting.  For example, my uber hacking-lockpicking-sneaking-melee strategy isn’t going so good.  Why?  Let me point out there are few buildings, let alone doors, and even less computers, and in the vast expanse of the wasteland visibility is 100 miles, and nearly everyone has at least one gun.

Fig 1. Guns > Sneaky

But I’m sick of such large budget games not getting the characterisation solid.  Every second character in the game still feel like cardboard cutouts.  Some major characters are excellent, others feel like someone has wheeled them in.

The other aspect is radiation poisoning.  Radioactive poisoning in Fallout 3 is cool.   From rivers of toxic waste, to inactive bombs, and old war sites.  You start to feel like the entire world is a post apocolyptic Chernobyl.  Every time you eat a piece food, you get radiation poisoning.  Get too much and you start to get sick.  This in turn can be reduced by taking radiation reduction formula.  That is pretty simple.  Regardless, I dub this the ‘did we forget to balance this’ game mechanic.  It constantly feels like a ball and chain slowing you down through the game progression.  I like the fact swimming in radioactive water can make me sick, it is immersive, but I am at a loss as to how eating a kebab somehow makes me more radioactive than swimming across an ocean of radioactive sludge.

But enough of Fallout 3.  It’s good, either buy it if you can’t wait, or borrow it when your mate has completed the billion hours of gameplay or died of radiation sickness.

Second up on the agenda today is Cooking in the Dangerzone .  You can watch it on TV (in Australia) Wednesday November 5th on SBS .  Stefan Gates sets out on his way to Chenobyl, and against his producer’s advice, he eats the local food, with some interesting results.   A short clip from the show below…

A really interesting show, and well worth the watch. And with an 80 year old women eating radioactive food every day of her life, you start to realise how unbalanced that game mechanic really was.

Thank you Mr. Ewer for showing me.