an interactive tale – about a mysterious tribe living on islands, moving from one to another every year, doing their duty. In this imaginary world, those folks were living in harmony with nature and they could actually communicate with it. Every island they were living on, they were dedicated to helping the ecosystem heal and become as strong as it once was. Every New Year’s Eve, they had to bid farewell to it and fly toward new lands.
In a dreamy, poetic world, this interactive tale is composed of 4 chapters. Being huge fans of Jean Girault, aka Moebius a great artist, we did a tribute to his amazing work. With an original story and soundtrack, we worked meticulously on the texturing to create an immersive experience that people would remember. Entirely made in 3D, the graphic design is unique because it borrows the visual codes and rules of the comic book world.
The first phase was focused on story development, user experience and interactive mechanics. We started by writing the story detailing the tribe, the island and their relationship, but we quickly wanted to draw and start sketching some shots and some concepts. I cannot say how many iterations we did but I remember doing some scenes over and over, slowly but surely setting the style of the project. Following this, we spent some time sketching styleframes to work on the mood and the colors at the same time as we began prototyping the 3D in development. As previously said, we went for a Moebius inspired style, which is, believe it or not, very tricky to pull for browser based real-time 3D rendered experiences. We also started prototyping the main interactions before diving in the big shunk which is the art direction.
We spent some time sketching styleframes to work on the mood and the colors at the same time as we began prototyping the 3D in development.
The next phase was the most exciting part on our side as we were happy with our sketches and the overall visual direction so we started to actually design the scenes. At the same time, we quickly set up our cameras and very low poly elements for the developers to start building up the structure of the experience. The 3D process had been a back and forth workflow which gave us headaches more than we would admit. The intended workflow was to start building the scene with very low poly scenes, then model assets in a separate file and, one by one, replacing the low poly ones with the final ones. After replacing those, we would export the assets and directly paint on them using a powerful software called Substance Painter which allows designers to directly paint on 3D models. The last part would be to animate the elements with the texture on it and hand it over to the developer team. So, as I said, it was our original plan, but we ended up modeling things, texturing them, animating them, changing the model and tweaking the elements many times… It was without a doubt the main challenge we encountered between the design and the technical team, but luckily we ended up smoothing things over and finding our specific workflow. The texturing was a huge part of the project, and in my opinion it really adds something to the project.
The birds scene
One scene that got a lot a positive feedback from the community was the birds scene. We were very inspired by Japanese animated movies and the way the artists think and motion design in their movies. One scene from the movie Spirited Away of Hayao Miyazaki from Ghibli studio related so much to what we had in mind; It’s a scene where two characters are running hand in hand very close to the ground. The way the speed is shown and felt is incredible and we tried our best to use those tricks to illustrate speed in an epic way in the birds scene.
Once we had enough materials and a definitive script for the narrative voice over we worked with Loïc from Press Play On Tape, a talented sound designer we always work with on our productions. It is always a pleasure to partner with him and lucky us, he is a huge fan of Moebius’ work! He immediately came on board with us and gave us a lot of valuable input to find the right fit for the actor who would be the voice of one of the tribe members. He also created an original soundtrack for our real time experiences. Let me explain the difference from a regular soundtrack: He had to design a soundtrack with several layers that all loop perfectly and stack together so we can activate them when the user triggers the next scene. We ended having a wonderful sound creation with the original soundtrack, sound design for every element and a actor’s voice. We were blown away by how it created an immersive experience and how it gave so much personality to our scenes.
The two main challenges of the development were to respect the look and feel of the original design and then bring life to complex scenes involving lots of different animation techniques. Our in-house engine, NanoGL, has been heavily customized to give us the ability to quickly prototype effects and animations. The main goal being able to combine and reuse those effects in order to speed up integration process of assets. Almost all the elements in the scenes are rendered using the same modular material. This material acts as an empty shell in which various modifiers can be added to obtain the render we want.
Effects and Deformers
Two categories of modifiers are involved, Effects and Deformers:
The deformer let us control the actual rendering of elements. The base color came from a texture, a solid color, vertex colors, or more complex procedural effect. For each case, the appropriate effects can be added and combined, without having to rewrite specific glsl from scratch. The same way we can add cell-shading, paper grain, outlines, color correction on per-object basis. The latter uses the same modular system, but lets us combine deformation effects on meshes. It can be skin, morph targets, or point-cache animations. Or procedural animations, like a wind on vegetation effect, or spline deformation for the flowers.
It sounds really technical and deep, but this is exactly the kind of stuff we do at Makemepulse. We have to make things in the most optimized way possible as we want our experiences to be visible on all devices! The goal of our team is to create magic, make creative ideas possible, and that’s what we have tried to achieve once again with this project.
Hosting: We use AWS for this project and more widely for all our productions
Server Architecture: As it’s mainly a front website, we don’t have a complex architecture. Basically it’s a S3 bucket behind a Cloudfront CDN which use HTTP2 protocol. We take care of building the assets properly and compress / gzip everything we can to lower to the minimum the weight of the website which is only 23 MB with all the sounds, models and textures.
Technologies & Tools: The experience mainly relies on WebGL and WebAudio. We used vuejs for the front end integration. The core of the experience is displayed in a webgl canvas for which we used our in-house webgl framework, Nanogl.