When Opportunities Arise
Pushing the boundaries of WebGL in the browser
After moving to Sydney to work for Reactive Media, I found myself one day sitting across the room from John Allsopp of "A Dao of Web Design" fame. He had come in to plan an inter-agency crawl to support Web Directions, the premier Australian event for digital creatives, strategists and technologists. Mid-discussion, John casually asked if we'd be interested in creating the opening title sequence for the event, the only caveat being it had to run real-time in the browser. With an intense passion for all things film and digital, we really didn't have a choice.
Research, Strategy, & Concept
Saying yes to circumstances unknown is an understatement for "People Behind the Pixels". Being cautiously optimistic, the creatives had to balance pushing the boundaries of design while acknowledging the developers were charting unexplored territories within the browser. After several weeks of ideation, the duo of Dave Brown and Melissa Baillache presented this beautiful animatic described by the premise below.
In our film, all these individuals are represented by a "pixel". Their stories evolve into playful geometric structures, yet always keep their original core - the element that binds everything together into a single experience.
Off the back of this, Dan Creamer, Pete Rawlings (who coincidentally made the music) and I had full creative license to implement the title sequence. The development timeline roughly mapped to the following stages: prototyping, scaffolding, scene creation and sequencing.
We agreed that with WebGL, the potential was there to achieve the same fidelity as the sample stills. Deciding on ThreeJS as our framework, we began to prototype various "hello worlds" and soon realized that we were out of our depths. Completely overwhelmed, we took a step back and decided to refocus our efforts on the "lower hanging fruits" of the project.
Still overwhelmed and a little frustrated, we realized a point of contention was how we would move geometry: animation vs emulation. Dan coming from a gaming background recommended we create real world systems that would mimic physics (gravity, collision, etc.), while I argued we could achieve better craft by "keyframing" object parameters. Through much trial and error and the creation of several "happy accidents", we were forced to realize that it would have to be a combination of both.
When all was said and done, the team had 21 scenes that needed to be stitched together. Unfortunately, this process was more art than code. To respect the creative Research of creating a single experience, we still strived for seamlessness between scenes and events matching the tempo of the audio. This meant going back and creating transitions between scenes and also led to a process I can only describe as "pixel pushing" code, manually incrementing timecode to register on a particular beat.
People Behind the Pixels has surpassed our wildest expectations, having been nominated for a Webby and an AGDA design award. Initially wowing an audience of 800 attendees, the title sequence has since been viewed by over 20,000 people online. From the initial applause of the live audience to the awesome congratulatory tweets, one reaction stood out amongs the rest. Mr. Doob, the creator of Three.js, the very technology we were using gave us a little nod of approval and featured our work on the official ThreeJS.org website.
Amazing use of Web GL, isn't it ? No really is it ? http://t.co/1xeKLMyinv— THE GOOD FACTORY (@TheGoodFactory) November 3, 2014
Press F11 and watch this render in real time. Stunning: http://t.co/SmPaKAq0Uu— Drew Wells (@drewwells) November 24, 2014
How? What? Geeeeeeeze…. what a way to start the Monday. http://t.co/pIid3rFz6E— The Pixel Geek (@thepixelgeek) November 3, 2014
I can't express enough, the gratitude that I have for the team that put this together. From the naive optimism that we shared early on, to the attention to detail we wouldn't sacrifice and the late nights that became early mornings, you guys made it all possible. I still can't believe we did it.
A showcase of design,
development and experiments
The Illusion of LifeA Smashing Magazine article detailing how to create seemingly
complex SVG animations from simple illustrations. Read article