Using 3D elements to make sites interactive – Ultranoir

I’ve been a fan of ultranoir’s work for a long time, they always seem to thing up new and innovative ways to make websites more cool and interactive. Their latest work Over the Hills is something slightly different from what they usually do since it integrates 3D elements into the site in a very unique way. I’ve managed to get an interview with Nathan Gordon a creative web developer at ultranoir to find out more about the project.

1) First of all could you tell me a little bit about Ultranoir, what you do and how long you have been around for?

ultranoir is a French, interactive digital studio born in 2006 that creates tailored, efficient and aesthetic online user experiences. We are based in Paris and Marseille and our team is composed of 30 enthusiastic people comprising art directors, creative developers, motion designers, etc. We are really proud to have won more than one hundred awards since starting this adventure!

2) What was the brief for this project and what steps did you take to tackle it?

For a long time we have wanted to work with McBess, and as we saw that he was releasing an EP with his band “The Dead Pirates”, we saw an opportunity to collaborate with him. So we contacted him and he happily gave us free rein to work on a digital experience based around the Dead Pirates’ EP. First we wanted to make an interactive video clip using WebGL (3D in the browser), with a more linear approach, but finally we decided upon the form of a 3D interactive object, based on a real gramophone that he had customised a few years ago. We made a lot of storyboards, thinking of how the gramophone could evolve and transform into a real music instrument. Interaction was imperative, but also was finding a good balance between McBess’ universe and that of ultranoir. So this was entirely a self-motivated project; to test out some new technologies and methodologies, while pushing our creativity without client-based constraints.

3) What was it like working with McBess? Had you heard of him before working on the project?

We’re all fans of McBess at ultranoir! He’s a really humble and creative person; he placed his total trust in us and let us design the experience ourselves, while giving us access to a plethora of his amazing work. We only fully presented the experience to him when it was nearly finished, and he loved it. We then had the idea to organise an art exposition in Paris so that we could present the experience on a big screen, along with McBess’ latest creations and also a 3D-printed version of the gramophone. It turned out even better than expected!

4) Why did you choose to incorporate 3D assets into the website?

Creating 3D experiences is something that interests us very much. When done well, it can create an immersion that is unrivalled by other forms of interaction. As technology improves, we are only going to see more and more of this integration. McBess’ artworks have an extremely 3D feel to them. It felt natural to use 3D to express this environment – and to play with the idea of really existing inside this universe. It was something that we wanted to see ourselves!

mcbess-002 mcbess-005

5) What technologies, libraries did you use to create the site?

The site is heavily based upon WebAudio and WebGL. We used Threejs to facilitate using 3D – it’s an amazing library that makes WebGL about as simple as possible. For some animation sequences, we also used GSAP (Greensock), which has a powerful API and is highly focused on optimisations, which is of highest importance when making more processor-demanding websites. For the general code structure, we used RequireJs, which permits an AMD (Asychonrous Module Definition) framework, allowing us to work very modularly.

6) What problem did you encounter whilst working on this project and how did you solve them?

The first challenge was to translate the McBess universe into a digital world. As the developers started prototyping 3D interactions before we even had any textures or drawings, we had to work in an agile fashion, constantly changing mockups and ideas to try and visualise what the project will look like at the end, and find an engaging experience within the technical limitations. We also wanted to keep an ‘ultranoir touch’, without interfering with the artist’s universe. Technically speaking, a lot of the initial ideas that we had, we weren’t even sure whether they were possible. That’s why projects like this are so rewarding. Doing things that you’ve never seen achieved before is a great motivator. The biggest, and a constant.

7) Do you think more sites in the future will add 3D elements to them for interactive reasons?

Definitely. 100%. What better way to preview your product than to have a realistic, interactive 3D representation of it. And as the game industry has shown us, people love immersive experiences – they want to be transported to another location, another atmosphere and then have the possibility to make decisions, to think and to ‘live’ in this world, using all of their senses. 3D renders are already amazing, but then having the possibility to interact with this image – to turn it and explore in 3 dimensions – becomes an extremely exciting and innovative experience. The technology has been around for so long already, and yet we are still only touching the surface of the possibilities when interaction is thrown into the mix.

8) What technological improvements do you think need to be made before 3D assets in websites will be more accepted?

Already you can access sites like ‘Over The Hills’ from your devices (at the time of writing, Google Nexus already supports it beautifully, and iOS are supporting WebGL with their next release). I believe we’re going to see a blurring of the lines between motion graphics, film, games and web. As the technology becomes more globalised, we’re going to see more and more talent switch branches, and that’s going to redefine everything we’ve been doing. I actually don’t think we’re waiting on any improvements – there’s already so much we can do. It’s only going to become easier to integrate as the technology catches up.


9) And Finally do you have any projects planned for the future that will be like ‘Over the Hills’?

Yes! We are always looking to push the boundaries and create innovative experiences. I daresay you’ll be seeing much more of this type of work from us in the future.

Nathan Gordon