Oat the Goat #1: Introduction
23 May 2018
Cross-posted from Assembly Dev Notes
Assembly’s latest project, Oat the Goat, has just gone live. It’s an animated kids’ story about dealing with bullying, built for New Zealand’s Ministry of Education, and it’s a pretty large-scale use of WebGL.
It’s one of the largest web projects I’ve ever worked on, clocking in at around 12 minutes of narrative animation, spread through 11 scenes, with a voice-over narration track (in two different languages, synced to captions), a sound effects layer, and an orchestral score performed by the New Zealand Symphony Orchestra. Scenes feature up to eight animated characters at once, and every scene is a unique set of scenery, textures and animation.
We wrote just shy of 13,000 lines of Typescript, plus enough HTML and responsive CSS to glue it all together. The largest scene has more than twelve minutes of character animation by itself. It runs on a pretty decent variety of tablets, phones, and desktops.
I’ve split the rest of this into a number of posts describing some of the specific challenges we hit, solutions we found, and things we learned in solving them.
The big-picture top-level bullet list:
- Fully translated to both English and Te Reo Māori.
- Written in Typescript. The idea of doing this in plain Javascript is terrifying.
- Rendered in WebGL through three.js.
- 3D skeletal/skinned character animation, mostly on twos (stepped 12.5fps), out of Maya, through Blender and the Blender glTF exporter to
.glbfiles. - Audio through WebAudio with HTML5 fallback, using Howler.
- Served as a purely static site from S3/Cloudfront.
You can get in touch with me at mattw at assemblyltd.com if you have further questions or thoughts.