Thread by @Dogstudio

🌲🌳🏝️

Starting this thread with more insights about our collaboration with @tomorrowland 's team on papilionem.tomorrowland.com, their first digital edition ever.

Starting with a few stills extracted from the built-in cinematic mode for long inactivity on the map level.

👇

Lots of energy has been poured into making sure the whole thing was not only as immersive as possible, but also as usable and optimized as it can be.

A GUI has been built pretty early in the process to allow the design and the dev team to seamlessly collaborate without making the other lose too much time with unnecessary back and forth. We could locally tweak parameters, positionings, textures, etc... #webgl #Tomorrowland2020

Positioning the bird flocks, lampions, fishes ( yes there are fishes, look for them ) has been made through a wysiwyg fully editable spline system. Once again, literally hours of back and forth were saved #Tomorrowland2020

We wanted the experience to have such a level of detail that it would feel closer to a gaming experience than a website. We added boats, lampions with the logo, fishes in the water, god rays, butterflies with the shape of @tomorrowland's logo, and so on.

Details are everything

The network of people around the different points of interests was also fully configured through a set of parameters available in the GUI, but also through the use of RGB images. Each color having a different impact in terms of positioning, scale, and size. #tomorrowland2020

Most probably the best trick to add production value in this project was the extensive use of bloom. Bloom made the sky dramatic, bled on lighter zones, enabled the whole thing to fit and blend together...
It really brought this dream-like feeling we wanted to get for lighting.

Most of the amazing models we got from the #tomorrowland team weren't optimized for a web-based experience, and a lot of work from our 3D artist was to make it possible by reworking those meshes to reach the polygon limit we set during the project.

The island in itself was based on a first concept from the #tomorrowland's team. It was then fully modeled in Gaea ( @quadspinner), and then hand reworked ( a few times during the project ) in Cinema4D.

Each texture was then made in @Substance3D and the optimized export, was then reworked in @photoshop for details once applied on the #webGL mesh.

The level of detail during the texturing phase was kept really high on the first pass, and this is why a good round of photoshopping was necessary to bring back lost details once the texture got compressed to 256x256 or 512x512 for most.

We initially built the island in day mode & night mode...It's only towards the end that the entire team decided to switch the day version for a sunset one.

We knew the lighting would be 1000x better and made quick lighting tests to decide the most dramatic position for the sun.

The intro ( aka "the dive" ) was directly on our radar as a really important moment. It needed to directly show visitors the island was shaped after the @tomorrowland logo, but also give that super immersive cinematic feeling.

Clouds were manually added through a great WYSIWYG tool. It enabled designers to add new clouds ( based on PNG sprite ), position them to the camera, color them, and then test the whole thing.

Once again, a lot of production value for a simple trick with always-facing planes.

Godrays are another "quick" win in terms of production value. As most lights and shadows were baked in the textures, having light rays coming from the sky or the moon would add a lot of value to the final result. This was also a mix of development + manual tweaking from the view

The default POI is another example of optimization and taking the most out of performance tricks. The original ones were glass with caustics and refraction. We retextured the diffuse map to integrate those details and let the occlusion map trigger the bloom instead.

On the very first week of the project, we made a really rough pass at the 3D island in #C4D and then photoshopped a paintover to prototype the UI and the global look and feel.

Those 2 screens were used as references for the 9 weeks of project and still hold to the final result.

Props to everyone involved including @tomorrowland, of our @Dogstudio team on this project: @Upskydown @xvi_jojo @Samsyyyy @SebastienGoffin @Anthodpnt @LorenaFoucher @CamilleThev @handsomeninja, @FreecasterTV for the streaming and many more.

Speaking about optimization, the experience is fully compliant on mobile ( including some fairly old devices ) and was imagined to get the most out of the format without getting in the way of the real star here: the streaming.