How we built

Out­post and Michael Vester­gaard tell how they cre­ated a flock of vir­tual drones for a cre­ator of spec­tac­u­lar live events

net magazine - - CONTENTS -

How Out­post and Michael Vester­gaard sim­u­lated vir­tual drones for an events site

(1) We wanted to bring to life the idea of the ‘magic mo­ment’ Ver­ity could bring to any event. To do this, we mir­rored Ver­ity’s own blend of art and tech­nol­ogy to im­merse the vis­i­tor in the ex­pe­ri­ence. Three.js par­ti­cle sim­u­la­tions were used to cre­ate the drone chore­ogra­phies on the home page. We also added light and smoke ef­fects to the im­age of the girl. (2) We in­te­grated sim­pler par­ti­cle sys­tems into the other page head­ers. We also im­ple­mented more sub­tle in­ter­ac­tions, page tran­si­tions and an­i­ma­tions along with par­al­lax scrolling func­tion­al­ity. (3) The site was de­signed to work across all plat­forms and repli­cate the same user ex­pe­ri­ence.

(4) The site had to work as Ver­ity’s main com­mer­cial and re­cruit­ment plat­form, so the in­ter­ac­tive fea­tures and rich me­dia had to of­fer seam­less UX per­for­mance. (5/6) To com­mu­ni­cate the true spec­ta­cle of the drone shows, users can nav­i­gate through live video feeds from the var­i­ous work carousels.

Led by founder and en­tre­pre­neur Raf­faello D’An­drea, Ver­ity Stu­dios (ver­i­tys­tu­ of­fers ground-break­ing au­ton­o­mous drone tech­nol­ogy in live en­ter­tain­ment around the world. With more than 30,000 com­pleted flights so far, its drones have toured with Me­tal­lica, been on Broad­way with Cirque du Soleil and been part of the New York Knicks sea­son opener at Madi­son Square Gar­den. Com­mit­ted to the be­lief that drones can trans­form the live event ex­pe­ri­ence, Ver­ity needed a site to show­case its tech­nol­ogy and ser­vices. En­ter Out­post (dis­cover­out­ and cre­ative tech­nol­o­gist Michael Vester­gaard with some at­ten­tion­grab­bing ideas.

What were Ver­ity’s re­quire­ments for this project?

CW: What Ver­ity cre­ates is truly ground­break­ing and – to do that jus­tice – the new web­site needed to be a true dig­i­tal ex­pres­sion of the com­pany and the ser­vices they of­fer.

The main re­quire­ment they had was to cap­ture the ‘wow fac­tor’ that comes from their shows. In order to achieve this, we had to make sure the user ex­pe­ri­ence was as im­mer­sive, rich and as dy­namic as pos­si­ble – while at the same time be­ing ro­bust enough to ac­com­mo­date the short- and long-term com­mer­cial ob­jec­tives of the com­pany. The site also had to act as the main re­cruit­ment and sales tool for the busi­ness – bring­ing this all to­gether in a seam­less ex­pe­ri­ence was quite a chal­lenge.

How did Out­post get in­volved?

CW: They had seen the work we had done for the Bear Grylls web­site and in­vited us to pitch against two other agen­cies. Af­ter propos­ing a high-level so­lu­tion over con­fer­ence calls, we were se­lected as the cho­sen agency and in­vited to Switzer­land to meet the team and learn more about the com­pany. Dur­ing the two-day visit we were com­pletely im­mersed in their world, even be­ing sur­rounded by a swarm of Lu­cie drones as they demon­strated how their sys­tem works – this was awe­some! We also took the op­por­tu­nity to con­duct work­shops to gain a deeper un­der­stand­ing into their au­di­ence and es­tab­lish the ex­act site re­quire­ments.

What are the main de­sign fea­tures of the site?

CW: We wanted to bring to life the idea of a ‘magic mo­ment’ and show how Ver­ity could bring that magic to any event. To do this, we mir­rored Ver­ity’s own blend of art and tech­nol­ogy to im­merse the vis­i­tor in the ex­pe­ri­ence. Af­ter ex­pe­ri­enc­ing what it was like to be part of one drone demon­stra­tion, we wanted to try and recre­ate this in a dig­i­tal space. We played around with sev­eral ideas for recre­at­ing the drone shows from mo­tion graph­ics and a live video pro­duc­tion but, in the end, we de­cided on util­is­ing We­bGL and Three.js par­ti­cle sim­u­la­tions to recre­ate the chore­og­ra­phy.

While we made a big fea­ture of We­bGL on the home­page, we in­te­grated sim­pler par­ti­cle sys­tems into the site’s other page head­ers to give a com­plete vis­ual lan­guage. Through­out the project, we

were al­ways con­scious of the draw­backs of a full We­bGL ex­pe­ri­ence so opted for a hy­brid in­te­grated model. Other key fea­tures on site in­cluded par­al­lax scrolling to give a sense of move­ment and flight along with video carousels.

There’s a flock of JavaScript drones on the home page. How did you set about cre­at­ing those?

MV: The drones were the largest sin­gle el­e­ment to de­velop for this project. We took in­spi­ra­tion from the chore­og­ra­phy of the real drone shows. The drones are points in a 3D scene (we used Three.js). They are grouped in var­i­ous ways and con­trolled by a lot of cus­tom (trigonom­e­try) code.

The whole site scrolls in­cred­i­bly smoothly. What’s your se­cret?

MV: Thank you! We used a tech­nique in which you fix the po­si­tion of the con­tent – and then move it with some eas­ing when the site scrolls. This works well for pages that aren’t su­per-long be­cause we can hard­ware ac­cel­er­ate the move­ment. On touch de­vices, there are too many draw­backs so we use stan­dard scroll in­stead.

Talk us through the tech­nolo­gies that are run­ning the site.

MV: We used Pris­mic as a head­less CMS. The files con­tain­ing all data for the site are built when pub­lish­ing from Pris­mic. So there are no ex­tra API calls at run­time (mak­ing the site a lot faster). The fron­tend is based around a cus­tom frame­work han­dling rout­ing, lazy load­ing, me­mory man­age­ment and much more. In this way, we have per­fect con­trol and there is no boil­er­plate code or things run­ning in the back­ground. We used GSAP for the an­i­ma­tion and Three.js for the drone scene.

What was the big­gest chal­lenge you faced on this build? Did you learn any use­ful lessons from it?

MV: The drone scene took a long time to get right. Both the graph­ics and the an­i­ma­tions had to be tuned many times in order to give the ‘wow’ feel­ing we wanted. We ac­tu­ally re­moved some chore­ogra­phies be­cause they were con­fus­ing the over­all ex­pe­ri­ence – ‘less is more’ still ap­plies. Also, the main chal­lenge when try­ing to ren­der light us­ing Three.js is how tax­ing it is on per­for­mance – cre­at­ing a sin­gle light is fine but try­ing to cre­ate twenty on a sin­gle page pre­sented some real chal­lenges. In the end, we used lay­ered PNG im­ages that all had their own

Now that the site is live, what has the re­cep­tion been like?

CW: It’s been great: we had a blast do­ing it and the client loves it, which is the most im­por­tant thing. We’ve also had a lot of press cov­er­age and won a cou­ple of awards, which is al­ways good!

4 1 5 2 6 3

Above The Ver­ity Stu­dios home page with the im­mer­sive drone show that was cre­ated us­ing a com­bi­na­tion of Three.js par­ti­cle sys­tems, 2D pho­tog­ra­phy and in­ter­ac­tion ef­fects

Above The mod­el­ling of the drone chore­og­ra­phy went through mul­ti­ple it­er­a­tions to en­sure the cor­rect flight paths and en­vi­ron­ment were achieved

Newspapers in English

Newspapers from Australia

© PressReader. All rights reserved.