I’m a huge fan of anything 3D (and what I really mean is computer generated graphics). The latest pixar movie, stunning visuals in a ps4 game, or the upcoming consumer oculus rift, we’re all about it here at Untold. So when we got the opportunity to dig into WebGL for last weeks Labs Make session, we we’re all drooling at the opportunity to build something badass.
A super quick primer on what WebGL is. It’s the ability to run what is essentially OpenGL (Open Graphics Language) natively inside the browser. This is HUGE, as high end graphics in the past have been limited to native desktop apps. Undoubtedly, you have used a program based on OpenGL at some point in your digital life. What’s great about it is that it utilizes the graphics card, not just the processor, so it’s super fast and very efficient.
We’ve wanted to integrate WebGL in a couple of our projects before. For example, the UI with the Matrix Fitness Touchscreen was partially prototyped in WebGL. After diagnosing some of the problems and issues with it, we decided that ccs3 transforms would be a better, more efficient solve for the experience. This did not discourage our hopes for WebGL, it may be the wild west of the web, but we always explore and integrate, it’s the Untold way. So we saddled up and decided to pioneer some workflows to see if we could utilize it in a future production project.
Before the Labs session, I took a few hours to set up a very basic boilerplate scene. We have been using the lovely Three.js library, an excellent project that takes much of the pain out of writing a pure graphics language, and abstracts things into easy to understand objects. Three.js is a joy to use and allows you to rapidly build out your ideas. I put together a base scene with a couple of lights, a camera orbit script and a random block generator. With this built, it was time to pass off the boilerplate to the rest of the team and let them tackle some of the bigger challenges we would have to face if we are ever to implement this technology into a website.
Our boilerplate scene for expierementing with Three.js. The Grid and Axis helpers allowed us to better communicate with our 3D Artist
The first challenge was getting custom 3D model into our scene. After some research, we found that a nifty Collada loader script already existed and pulled a free online .DAE model. Collada files are an open source format for 3D files, and is based on an xml style syntax. This made the output very readable for us puny humans, and we were able to dig through and filter out the chunks of code we needed. We also made use of the the Three.js Editor, available on their website, for testing ideas and digging through the hierarchy of the models.
Getting a model imported was easy once we found the excellent Collada Loader
With a model successfully loaded into our scene, it was time to test the animation capabilities. Animating in code is painful. A very tedious process of picking out numbers, often on a guess, and testing them, tweaking, repeating. Lather, rinse repeat, you know the drill. It’s a slow process, but while testing the workflow with our production artist Alex, we found that she could sprinkle null objects around the scene in key positions to make our job a hell of alot easier. We used these little invisible easter eggs to rotate around and translate between. This also put a lot of the animation decisions back in Alex’s hand, which we certainly prefered given she was the pro.
This Ferris Wheel is an example of utilizing a hidden null object to rotate around
The next goal we needed to accomplish was to animate along a given spline. This is a common feature in almost any 3d software package, however Three.js doesn’t have anything right out of the box for this. What Three does have, is the ability to create a spline from a bezier curve. We were able to export a bezier curve from maya, rip out the numbers we needed, and insert them into a three.js spline constructor. Once we had the spline within WebGL, we knew we needed to iterate over the spline over time and update the position of the animated object. This worked for the most part, but unfortunately it looked as if our object was just moving along the spline, not animating along it smoothly. To remedy this, we wrote a nice little helper function to calculate the tangent direction of the spline and align the animated objects rotation to that vector. The results looked great and the animation ran smoothly at 60fps.
Animating along a spline was a necessary step for us to feel confident in working with WebGL
- Bringing models into a Three.js scene is about as easy as including the Collada Loader Script
- When Modeling a custom scene or object that may need to be animated with code, consider using null objects as references, hinges and pivot points for other objects to move around and between
- Constructing and Animating along splines is fairly straight forward in Three.js, it’s how you pull out the spline from your Modeling application of choice that can pose challenges
- Have fun with WebGL. If 3D experiences are the destination, the journey to success is definitely more than half the fun.
One takeaway from this is that there is no super easy way to animate with code. It took immense communication between our animation team and our dev team. With some conversations and a few tests, we were able to devise ways that we could work together to make WebGL a production reality for the future of the agency. These workflows aren’t necessarily sitting on stack overflow, so we felt like old school trail blazers, foraging our way through the digital landscape. There’s something really refreshing about trying something new and having success. And at the end of the day, that’s what labs is all about, searching for a worthy challenge, and finding a way to MAKE it work.