While I focus on the video and animation component of this project here, the entire team at Genuine pulled out all the stops to build one of the richest online education experiences available anywhere.

Check out the full experience.

The future of education

It’s an exciting time for educators and creatives alike. The increasing availability of advanced technologies both in the classroom and at home is prompting a revolution in how we learn and how we teach. UL and Genuine saw an opportunity to leverage several web-based technologies to deliver STEM education in a new way: by bringing students directly into the lab to learn by doing.

Xplorlabs is broken into two modules: Portable Electric Power and Fire Forensics. Each module’s program, developed in partnership with a team of specialists at UL, had a common goal of making everything visual and interactive. As an animator primarily working in pre-rendered video, this project brought plenty of exciting challenges.

From learning to teaching

How do batteries work? What makes a damaged or defective battery hazardous? How do fires start in the home, and what’s the best way to prevent them from spreading? We were on the hook to build accurate and clear creative to help answer all those questions, so first the whole team had to go to school.

From an animation perspective, one of the most rewarding parts of this project was the back and forth between myself, our team, and the experts at UL, in order to learn the entire curriculum front to back. Through countless sketches and conference calls, we visualized everything from how electrons move between cathodes and anodes, to the difference between a "vented" and "unvented" fire.

To make the experience more immersive, I also had to master the little details: how do those infamous hoverboards actually move and work? (We ended up bringing one of the non-explodey ones into the office for testing.) Bolstered by our newfound expertise, it was time to bring the experience to life.

Adding interaction

Early on in the concepting phase, it was decided that everything from exploding hoverboards to a burning couch needed to be as realistic as possible. That direction limited our options in development, cutting out lightweight realtime solutions like Unity or Three.js. Instead, the front end team leaned heavily on Pixi.js, and I built the visuals for each interactive component with either looping video or sprite sheets.

A growing data footprint and creeping load times were always top of mind for those experiences, so the main challenge was in stuffing lots of rich detail into as few frames as possible. This was easiest in the Fire Forensics module, where we could get away with as few as 36 unique frames to loop small crackling fires.

For two interactive tests in the Portable Electric Power module, the Drop Test and Abusive Overcharge Test, we had to cheat to remove frames from sprite sheets. For example, rather than using rendered frames with the correct perspective to lift and drop the hoverboard in the Drop Test, we lifted and dropped the hoverboard sprite using CSS. This reduced the density of our sprite sheet by upwards of 96 frames, while keeping the experience immersive and interactive. I still got to blow it up in the end, though, so I tried not to sweat the small stuff.

All 3D execution (excluding select stock models, licensed as static meshes) and compositing by Jared Flynn.
2D animation and editing by Jared Flynn, Alex Morrow, Omar J. Cruz Rubio, and Giovanni Carbonell.
Agency: Genuine
Client: Underwriters Laboratories