How we built
Outpost and Michael Vestergaard tell how they created a flock of virtual drones for a creator of spectacular live events
How Outpost and Michael Vestergaard simulated virtual drones for an events site
(1) We wanted to bring to life the idea of the ‘magic moment’ Verity could bring to any event. To do this, we mirrored Verity’s own blend of art and technology to immerse the visitor in the experience. Three.js particle simulations were used to create the drone choreographies on the home page. We also added light and smoke effects to the image of the girl. (2) We integrated simpler particle systems into the other page headers. We also implemented more subtle interactions, page transitions and animations along with parallax scrolling functionality. (3) The site was designed to work across all platforms and replicate the same user experience.
(4) The site had to work as Verity’s main commercial and recruitment platform, so the interactive features and rich media had to offer seamless UX performance. (5/6) To communicate the true spectacle of the drone shows, users can navigate through live video feeds from the various work carousels.
Led by founder and entrepreneur Raffaello D’Andrea, Verity Studios (veritystudios.com) offers ground-breaking autonomous drone technology in live entertainment around the world. With more than 30,000 completed flights so far, its drones have toured with Metallica, been on Broadway with Cirque du Soleil and been part of the New York Knicks season opener at Madison Square Garden. Committed to the belief that drones can transform the live event experience, Verity needed a site to showcase its technology and services. Enter Outpost (discoveroutpost.com) and creative technologist Michael Vestergaard with some attentiongrabbing ideas.
What were Verity’s requirements for this project?
CW: What Verity creates is truly groundbreaking and – to do that justice – the new website needed to be a true digital expression of the company and the services they offer.
The main requirement they had was to capture the ‘wow factor’ that comes from their shows. In order to achieve this, we had to make sure the user experience was as immersive, rich and as dynamic as possible – while at the same time being robust enough to accommodate the short- and long-term commercial objectives of the company. The site also had to act as the main recruitment and sales tool for the business – bringing this all together in a seamless experience was quite a challenge.
How did Outpost get involved?
CW: They had seen the work we had done for the Bear Grylls website and invited us to pitch against two other agencies. After proposing a high-level solution over conference calls, we were selected as the chosen agency and invited to Switzerland to meet the team and learn more about the company. During the two-day visit we were completely immersed in their world, even being surrounded by a swarm of Lucie drones as they demonstrated how their system works – this was awesome! We also took the opportunity to conduct workshops to gain a deeper understanding into their audience and establish the exact site requirements.
What are the main design features of the site?
CW: We wanted to bring to life the idea of a ‘magic moment’ and show how Verity could bring that magic to any event. To do this, we mirrored Verity’s own blend of art and technology to immerse the visitor in the experience. After experiencing what it was like to be part of one drone demonstration, we wanted to try and recreate this in a digital space. We played around with several ideas for recreating the drone shows from motion graphics and a live video production but, in the end, we decided on utilising WebGL and Three.js particle simulations to recreate the choreography.
While we made a big feature of WebGL on the homepage, we integrated simpler particle systems into the site’s other page headers to give a complete visual language. Throughout the project, we
were always conscious of the drawbacks of a full WebGL experience so opted for a hybrid integrated model. Other key features on site included parallax scrolling to give a sense of movement and flight along with video carousels.
MV: The drones were the largest single element to develop for this project. We took inspiration from the choreography of the real drone shows. The drones are points in a 3D scene (we used Three.js). They are grouped in various ways and controlled by a lot of custom (trigonometry) code.
The whole site scrolls incredibly smoothly. What’s your secret?
MV: Thank you! We used a technique in which you fix the position of the content – and then move it with some easing when the site scrolls. This works well for pages that aren’t super-long because we can hardware accelerate the movement. On touch devices, there are too many drawbacks so we use standard scroll instead.
Talk us through the technologies that are running the site.
MV: We used Prismic as a headless CMS. The files containing all data for the site are built when publishing from Prismic. So there are no extra API calls at runtime (making the site a lot faster). The frontend is based around a custom framework handling routing, lazy loading, memory management and much more. In this way, we have perfect control and there is no boilerplate code or things running in the background. We used GSAP for the animation and Three.js for the drone scene.
What was the biggest challenge you faced on this build? Did you learn any useful lessons from it?
MV: The drone scene took a long time to get right. Both the graphics and the animations had to be tuned many times in order to give the ‘wow’ feeling we wanted. We actually removed some choreographies because they were confusing the overall experience – ‘less is more’ still applies. Also, the main challenge when trying to render light using Three.js is how taxing it is on performance – creating a single light is fine but trying to create twenty on a single page presented some real challenges. In the end, we used layered PNG images that all had their own
Now that the site is live, what has the reception been like?
CW: It’s been great: we had a blast doing it and the client loves it, which is the most important thing. We’ve also had a lot of press coverage and won a couple of awards, which is always good!
4 1 5 2 6 3
Above The Verity Studios home page with the immersive drone show that was created using a combination of Three.js particle systems, 2D photography and interaction effects
Above The modelling of the drone choreography went through multiple iterations to ensure the correct flight paths and environment were achieved