The SpinARsaurus Challenge – AR tech wizardry for the BBC

It’s been a challenge alright! With only a 4 week build to develop an identity, tackle 3D, print and online design, overcome technical challenges and add our usual high production standards, it was never going to be easy. The fruits of our labour can be seen on the spinARsaurus page at BBC learning development.

Identity design


Motion graphics


AR marker controlled puzzle


The output!


A little technical rundown

Good performance was at the fore of all minds on the project. How many polygons were too many? Which 3D engine would be quickest? What minimum specs were (un)reasonable? And at what point does tomorrow’s noon deadline become more attainable by going home and sleeping? By hook and crook, we struck the right balance, but not before a few bouts of panic.

swcIn the pursuit of faster marker detection, we started with an Alchemy-compiled version of the FLARToolKit. Alchemy is an Adobe Labs technology that allows C and C++ source code to compile to ActionScript bytecode and be executed in the Flash Player. The advantage that those lower-level languages have over high-level AS3 is great scope for optimised CPU instructions and memory management. But! -using SWCs that other developers have created is akin to buying a car on eBay without seeing any pictures. This particular vehicle was as fast as promised, but leaked oil [memory] at an alarming rate, and would insta-crash on wet tarmac [Google Chrome]. memory consumption We tried what we could from outside the black box of that precompiled code to resolve the problems, but it became apparent that we’d need to switch over to the more dependable, slower AS3 version, and seek our performance gains elsewhere.

Beyond the FLAR  difficulties were the need to manage dinosaur textures with some sophistication. Trying out the construction game, you’ll see that individual bone segments are alpha-ed down and up independently of the rest of the model. Papervision3D supports this sort of control while the Collada model is rendered with vector fills for textures, but setting a DisplayObject3D’s alpha property with bitmap textures present will quietly do nothing.

texturesOur workaround involved the exposed BitmapData of each texture, and the application of ColorTransforms on a per frame basis. And since such transformations are lossy and non-reversible, a custom tweening function was needed to clone the original pixels at each time step, before reapplying the ColorTransform with an incremented alpha offset. (Intel Celerons, go home.) Where this approach made acute pain for Justin, our 3D modeller, was in the need to break apart the model’s textures into individual materials, for every segment that we wanted to fade in and out. Not knowing the final set of editable bones, we were left with over a hundred separate texture files to manage. And that’s why we’re all sleeping so well these days.

The people that made it possible

A big thanks to the team that worked so hard on this. We have:

Adam Vernon – Lead Flash Development

George Crabtree – Flash Development

Ben Webb – Lead Designer

Justin Dowling – 3D awesomeness

Antoine Kougblenou – Testing / javascripting

Dan Course – Calming words in the eye of the storm

Ben Templeton – Project lead and Creative Direction

Our client contact at the BBC, who has been fantastic, showing incredible support, patience and ambition.

One Reply to “The SpinARsaurus Challenge – AR tech wizardry for the BBC”

Leave a Reply

Your email address will not be published. Required fields are marked *