Here at nclud, we’re not only known for being a first-class design, development, and creative agency, but also for our deep love of all things Star Wars – from posters on the walls to roaming LEGO R2D2s. So when the new Force Awakens trailer came out and we all huddled around the big screen to watch it (more than once, of course), our first thought was: what can we build to share this love with the world?
Star Wars API
The search was on. I had been toying around with the idea of using the Star Wars API ever since it launched, but could never quite put my finger on what to build with it. The API holds planets, spaceships, vehicles, characters – basically everything you could want in a comprehensive and easy to access resource. At one point, I had been playing with the idea of cross-referencing Star Wars characters and locations with Renaissance art (yes, I know it was a weird idea), when Kerry (our CEO and biggest Star Wars geek) suggested something much simpler: why not an interactive map? The world of Star Wars is so big and vast, it’s often hard to understand where everything is in relation to each other. Building something that let people connect the dots (and understand just how far away Luke really was when training in Dagobah) seemed like the kind of thing that was right up our alley.
Three.js
With that in mind, we didn’t want to just make another “interactive map” (look, they’re neat, but it’s been done). We wanted to make something cinematic and epic, something really befitting Star Wars itself, something that would knock your socks off. Taking a look at some of the technologies we’ve used and played around with recently, we realized there was only one to do this: a fully three-dimensional playground full of swooping camera motions and dramatic effects. Of course that meant we immediately turned to Three.js, the JavaScript library that we used to create the transition glitch effects on our recent nclud.com redesign and launch. The library utilizes WebGL to create full three-dimensional effects and worlds right inside the browser window – something that previously was only possible through complex 3D engines in giant downloads.
Design
So now that we had our idea, our data, and our engine, it was time to dive into design. The one remnant of the original Renaissance idea (yes, the weird one) that remained lodged in my head was to do something totally different and unexpected – we’re talking beautiful serif type, use of gold throughout, and bringing back the original 1977 slanted logo and Hildebrandt concept art whenever possible. The design goal was to create something interesting and compelling – something you’ve never seen before – while still feeling distinctly connected to the world of Star Wars that we all know and love.
Along with visual design, we also wanted to tackle something else that would really complete the experience: sound design. John William’s score for Star Wars is as iconic as Darth Vader’s helmet, so it seemed only right to incorporate that into the experience (as well as R2D2’s lovable blips, beeps, and bloops). This created a new design challenge for us: how do you incorporate sound and music in a compelling and non-intrusive way on a web that, for the most part, is silent? After lots of experiments, we decided that having a soft loop of the score to serve as the soundtrack worked best, along with key sound effects only on interactions (such as zooming and moving between planets).
That’s No Moon
As powerful and comprehensive as the Star Wars API proved to be (seriously, it has sixty-six planets from the films and Expanded Universe with lots of data about each), the one thing it was missing was the actual planet location. Obviously, when you’re building an “interactive map,” this is a pretty crucial piece of information to have. Luckily for us, Star Wars fans are nothing if not well known for their love of minute details, and it wasn’t long before I had several printed out maps of the Star Wars galaxy from various sources (including official Star Wars magazines and video games) scattered around my desk. I spent several days, highlighter and pen in hand, mapping the planets on our list against their locations in the galaxy, then creating a grid system within our Three.js world to plot them against.
At the same time, wouldn’t a galaxy be boring with just some planets floating around? We wanted this to be an immersive experience – so to start, that meant creating three giant spheres at various depths, each made up of over 5,000 twinkling particles, all rotating at different speeds to create the illusion of a massive universe surrounding the viewer. Along with this, we wanted a full spiral galaxy of stars to create the “Inner Core” – meaning lots of Google, lots of complex math and formulas, and even some translated blog posts from Russian on the best way to implement. Once that was all in place, we had another 15,000 particles in the perfect shape, rotating peacefully in space.
Use The Force
All of these planets and stars would be nothing if visitors weren’t able to explore them, though. The interactions were probably the most important part of the entire experience, so most of our time was spent ensuring they were easy to understand and use, no matter what type of device you were on. Luckily, Three.js has a whole lot of libraries already built that allow for complex interactions, and while we like being innovative, we’re not always interested in reinventing the wheel. Once implemented, visitors were able to use their mouse or touch screen to pan and zoom around through space, easily checking out all the planets in the galaxy. At the same time, we didn’t want to just restrict interaction to that – we also incorporated a zooming function once you clicked/tapped on a planet so you could get all the planet information as well as a detailed and up close view of the planet. Once there, you could either zoom back out to the big view or move to the next planet, including a dramatic swooping camera between their locations.
Another crucial piece of interaction was allowing users to filter the planets to just the movie or Expanded Universe that they wanted to visit or learn more about. Wanting to focus the experience on the map itself, we built these filters into a hidden but easy to use sidebar menu (with the requisite “hamburger” menu icon – of course, for this, we used the light panels from the Death Star as the icon).
Do Or Do Not – There Is No Try
As with any project such as this, we hit lots and lots of speed bumps and hurdles along the way. The major one was simple: Three.js is an experimental technology, and while most browsers support it (or at least have fallbacks), those browsers all can handle it differently. Along with that, since it uses the computer’s GPU when possible, there’s a marked difference in performance from computer to computer and, as always, between mobile device and mobile device. We wanted to have the best possible experience for visitors no matter what you chose to interact using. To achieve this, we tested multiple fallbacks – various scales of the grid, numbers of star particles, and planet sizes by number of polygons used to create them. The best method for cross-device performance ended up being to tweak the number of polygons and sides used to generate the planets, creating the best possible spherical shape with the minimal number of sides. Along with that, limiting 3D bump map textures (used to create the illusion of mountains and valleys on the planets) to desktop devices, as the increased light and shadow usage basically crashed the mobile devices we used to test. The end result was that everyone was able to explore and get a terrific experience that worked smoothly.
Another major challenge was the planet filtering system. At first, we built a very simple system that checked against the API to see if that planet appeared in that movie. If not? Hide the planet. The problem came into play when multiple movies were filtered – even if a planet appeared in one of them, it was disappearing because another movie in its data was filtered out. We ended up solving this by using arrays of filters, pushing the latest movie into that array and then checking against all of the data, not just one movie at a time. While it was complicated (and honestly, a bit confusing to wrap our heads around at times), the final filtering system worked successfully to show and hide the correct planets.
The final challenge was a bit more difficult. Essentially, the Star Wars API planet listing is broken into seven pages due to the number of results. There’s no way to pull all of that data at once, instead forcing you to make seven requests to another server – an obvious bad idea to improve user experience. We built a PHP solution, locally based on our server, that would condense all of those down to one request then cache them locally for up to 24 hours, cutting down the loading time and reliance on outside servers dramatically. In local testing, it worked great, getting load times for the data pull down to under a second. Once launched however, it turned into a whole different story – for some reason, with an increased demand on the files, the PHP didn’t treat the downloaded data as if it had been cached and instead made multiple requests for each visitor, resulting in load times sometimes as slow as 20-30 seconds just to pull the JSON. Obviously, this was not acceptable. As visitors piled onto the website, the quickest solution ended up being the one that worked the past – temporarily pull all of the API data into a local JSON file and call against that, working around the remote server necessity. A quick hack that ended up with load times under one second for each visitor, improving the experience immensely.
The Force Will Be With You, Always
We ended up launching Star Wars Galaxy the same week as Force Friday, a massive push from Star Wars with all of their new gear, toys, and gadgets. This led to huge interest from visitors, as there was already a large social media conversation around the films (and the excitement over the new film coming this winter). With coverage from io9, Gizmodo, The Mary Sue, a slew of international newspapers and blogs, and a front page listing on Product Hunt, we quickly saw almost 100,000 people visit to explore the galaxy far, far away.
