Since we first met Oat the Goat in June, we've kind of fallen in love with him and what he stands for, so we're delighted to reveal that Site of the Month June has been awarded to Assembly from New Zealand for their interactive, WebGL, animated storybook. Thanks for all the votes and tweets, the winner of the Pro Plan in the Directory can be found at the bottom of the article.
'Oat the Goat' is an interactive, animated storybook launched as a bullying prevention initiative by New Zealand's Ministry of Education. The web-based story was created with 4-7 year old children in mind, to introduce them to the effect their actions can have in group situations, and to encourage parents to engage with their children and open a conversation about what 'Oat' is experiencing during his big adventure.
With a wonderful story written by the team at FCB New Zealand - we were really excited to bring it to life in a way that would capture the imagination of the kids experiencing it. We decided early on that developing characters that were fully animated would be an important way to really foster an empathetic response. It's a large-scale use of WebGL, with around 12 minutes of narrative animation, 11 unique scenes, voice-over narration in two different languages, sound effects, and an original orchestral score performed by the New Zealand Symphony Orchestra.
A large-scale use of WebGL, with around 12 minutes of narrative animation, 11 unique scenes, voice-over narration in two different languages, sound effects, and an original orchestral score
Technical Points
The whole thing is hosted on Amazon S3, served via the Cloudfront CDN for speedy loading. Regarding the server architecture, it's a purely static single-page application, so everything is managed by the browser – there's no server logic. It's structured more like a game engine than a website, with everything broken into 'scenes' which we load and unload as necessary.
The only back-end technology we really needed to pay attention to was gzip compression, which was important for keeping file/download sizes down. We wrote all our front-end code in Typescript, and our 3D asset pipeline involved laying out scenes and animating characters in Maya, then exporting through Blender (with a bit of manual massaging) to glTF binary packages.
Web stack, frameworks and tools
We used WebGL via the Three.js library, with all 13,000 lines of our code written in Typescript. Gulp and Browserify kept the final Javascript output down to a reasonable size and let us do reproducible standalone builds. We gzip assets and package everything together at build-time, which lets us easily publish new versions without breaking or altering old ones, and gives us an easy rollback path should it be needed.
Outside of those, we built our own engine/framework essentially from scratch – we had some pretty specialised requirements, like background scene loading, animation slicing, and audio layer management.
Behind the scenes
WebGL running on mobile is pretty limited, so we had to lean on some pretty old-school game development tricks to keep the visuals rich and immersive without killing performance. In the forest scene, the reflections in the water are just an upside copy of the above-water scene, with some transparent water surface laid on top. And the chasm in the falling scene is nowhere near as deep as it looks! On the other hand, the character animation is really pushing the limits of modern real-time engines, with up to 120 animated joints per character. Oat's scarf alone is animated with 20 separate joints!
To everyone who voted and tweeted - thanks for showing the love, the winner of the Year's Pro Plan in our Directory is @naumstudio please DM us your username to activate your prize!