html5cube–The HTML5 Cube
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.
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.
HTML5 Video Codec Selection in JavaScript
I was looking around for a nice video codec selection via JavaScript, and possibly writing my own if I couldn’t find one. Outside of the video players, there isn’t a library either.
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.
Read MoreNobody Likes A Space Chicken, Everyone Should Love HTML5
Over the last few weeks at work I have been head down involved with building a fun HTML5 game for EMI titled ‘Way Out Wars’.
Way Out Wars is a fun game for casual gamers, and provides the much sought after challenge for veterans of the ‘space chicken music discovery typing shoot ‘em up’ genre. The game was built in pure HTML5, with some heavily modified impactjs as the core engine. Lots of long hours spent tuning nanoseconds off particle render times.
My best is 75 tracks back to back for around 44 million. Go play it at http://www.wayoutwars.com … preferably before reading the rest of this post to give insight.
Some things achieved in HTML5 that were pretty cool:
- Real time usable particle effects engine we had to dumb down because it was just looking too busy (yet awesome). At one stage we had smoke, jets, trails, explosions, musical notes, and swarms. Unfortunately you couldn’t see the game.
- Infinite playlist – Depending on your browser, since Chrome mysteriously dies
- Music discovery that’s fun – Songs you hate, songs you like and songs you don’t know, that you can review and purchase.
Some pleasant discoveries:
- HTML5 rocks. It’s definitely a platform for the future, however it’s not necessarily the be all and end all. But the game has no browser dependent coding. It does however have code that checks for issues that may occur in some browsers, there isn’t any code that goes ‘if IE do this, if FF do that’.
NOTE: This does happen for audio however since Firefox hates MP3. - Impactjs rocks! In the end we probably didn’t need it as much as we thought, but it did so much heavy lifting in the beginning it allowed us to experiment and play around with ideas. We simply wouldn’t have had a product as far advanced without it.
- HTML5 benchmarks don’t coincide with real world scenarios. Simply ignore them until real world tests turn up. Every benchmark I do IE9 doesn’t come out on top, but all of our experience with the game has been IE9 is way out on front, with no IE9 specific tuning in sight. Someone who is familiar with graphics pipelines who understands the concepts behind draw calls, fill rate etc. needs to give HTML5 the same treatment.
- As such, IE9 rocked, and we were pleasantly surprised.
- Opera is amazing, although I’ll probably still never use it. It came in 2nd performance and stability wise.
- Firefox and Safari were stable, however their performance lacked.
- Chrome was fast, however it’s stability lacked.
- Hardware acceleration rocks. Browsers without it will die slowly as user experience becomes encumbered by poor performance.
- The iPad did load it once, but it got too big for it. This however is promising for HTML5 moving forward when the processing power of these devices steps up.
Some discoveries that were as fun as being jettisoned into the sun by space chickens:
- Having lots of <audio> elements on a page can cause issues. Clean them up, delete them, and do everything you can to remove any trace of them. This was common for all browsers, with the impact having different results in each. But cleaning up the audio elements makes all the browsers behave. And whilst Chrome will still go silent after about 100 songs, without doing this it will crash after 57.
- Oh, and be careful deleting i.e. ‘delete obj;’ audio objects in Chrome, you can crash the browser and all open Chrome windows will stop working. I think Chrome tries to do garbage collection on audio elements no longer in use. A quick check ‘if(obj != null) delete obj;’ tends to be stable.
- Any browser that doesn’t support MP3 needs to fix that. It is a bug, not a feature. If every music site in the world has to re-encode their audio to OGG, they will ignore browsers that require it, or simply be ignorant to it. Firefox needs to wake up. Media companies are going to be staring at mobile devices, and Firefox is the last thing their IE and Safari based offices will test in.
- Firefox 3 is antique, Firefox 4 feels like a classic, that still goes well, but won’t keep up for long. A shame. This feels like a Firefox bash, but it has just been the reality we’ve been dealing with.
- Chromes instability. Chrome is fast, yet buggy. We discovered a critical error that would happen on the 57th track crashing Chrome. After writing a universal piece of code that wouldn’t crash Chrome, we found that at some point, chrome refuses to play audio, and kills audio across all chrome tabs and windows, with no error message. This came as a surprise to me, and over the coarse of 3 weeks Chrome has been superseded by IE9 now as my default.
- Safari underperformed. Of the big names it was the worst performer.
Five Second Test
Following a tweet from shanemo, I decided to check out fivesecondtest.com, and took the 5 second test. I had no idea what it was prior to turning up, but within 10 seconds the minimalistic site had me sold. From the site…
The five second test is a simple usability test that helps you measure the effectiveness of your user interfaces.
I’m a big fan of the “don’t make me think” usability principle, possibly because it’s the only one I truly understand. But after doing a few tests, you notice that some designs remain vividly in your head, and you can visualise an entire design. Other designs you can hardly remember, and possibly never knew what they were for.
Having a community of people review your designs is an obvious benefit for submitting designs, but what do you get out of doing the tests? For one, you get to see designs that work, and in turn that should be a learning experience. The stark contrast between good and bad designs during 5 seconds really hits home. Secondly, you get a warm and fuzzy feeling from helping the community of designers out there.
Read MoreGame Review – Street Fighter IV
Street Fighter IV arrived on my coffee table last month. I can’t stop playing it. There are too many reasons why. Being addicted to Street Fighter II when it came out, I had been waiting a long time for the game to evolve significantly. Everything post Street Fighter II until now has felt like an experiment in what to do next, and with Street Fighter IV being released, it has finally stepped up.
3D is a big aspect graphically in the game, but fighting is still 2D. Ultra moves/combos when in action allow for some camera play, as it zips around giving a truly dramatic feel. In game music is excellent, and the sound FX are top notch. I would however pay for someone to mute the announcer, and the boy band that plays during the title screen.
Where SF4 really shines is in online multiplayer. Create a lobby, wait a minute, bam, you’re online kicking but with your leet skillz. The best online feature is being able to play arcade mode, and still having a lobby available online for people to join, meaning that during quiet times online you can dive straight into the game practise pulling off your 94 move combo.
The new characters are excellent, with 25 characters available (16 available initially, and 9 unlockable characters), and each character feeling just right. The stories in arcade mode are fun to watch, and the challenge modes provide some extreme combo challenges. Titles and Icons are a great way to earn some street cred, whilst giving the game more legs.
And then when you think you’re starting to get the new game, you discover focus moves. Focus moves are the first step in the master part of ‘easy to pick up, hard to master’. But when you start learning how to use them, watch your online ranking halve overnight. Moves that were hard to deal with will become trivial, and block turtles now have more to worry about than fireballs and throws.
A game that may not appeal to those who aren’t Street Fighter fans, it’s a must buy for those that were or still are, and it will have you playing online for many months, if not years.
And yes, playing it on a big HD plasma between the two Street Fighter Rubixels is awesome.
Big thumbs up. 5/5.
Movie Review – Man on Wire
But the one movie I did see on the flight, was Man on Wire. The story of Philippe Petit, and his amazing stunt back in 1974, doing a wire walk between the towers of the World Trade Centre. Delivered in a similar fashion to Touching the Void, you can’t help but be captured by the story.
Without spoiling the movie, it also covers his other exploits (including Sydney Harbour Bridge pictured above), and is an exciting insight into the eccentric man himself. You don’t need to see it tomorrow, but it’s definitely a must see.
Flickr
|
Recent Comments