by Infogram
Create infographics

The Blue Whale VR infographic experience

Designer Simon Ducroquet tells the story behind this interactive piece produced by Fusion

September 1, 2015

[This is a guest post by Simon Ducroquet*, about the interactive feature published online by Fusion. Check out Simon’s Visualoop profile here.]

 

The Blue Whale VR infographic experience
The Blue Whale VR infographic experience

I like to think in interactive infographics as an exploration through the story driven by the reader’s choices, because this make each user experience unique according to the personal choices of each reader. This is extremely powerful because people remember more experiences when they were in the lead of the decisions. That’s why, for example, you don’t remember a path you made many times using a GPS, but will remember a path that was made just one time if you were trying to discover the direction by yourself.

That was one of the reason that pushed me towards trying to use game engines in infographics. Back in 2012, the Unity game engine was already very popular and very user friendly for 3D artists with no coding experience. So, for the “Tudo sobre Belo Monte” project, an extensive coverage on a dam being build on Brazilian Amazônia that contemplated videos, pictures, graphics and motion graphics, I was pushed by my editors, specially Mario Kanno, to introduce an interactive experience using a videogame interface. That seems a bit extravagant to a newspaper invest in a game production, but the true is that a part from a few scripts, most of the 3D assets used in the game (available on iPhone and Android) are the same that were used on a motion graphic and a print infographic on the same story.

Last year, I was invited by Mariana Santos to join the Interactive Team at Fusion, and there I met Julian Reyes who is a big enthusiast of Virtual Reality. He had a Oculus Rift DK2 and one of the first applications he showed me was Titans of Space, a virtual exploration of the Solar System where you’re in space and see the planets and the sun in a real scale. This would be a boring experience in a video format, but in virtual reality the real scale is truly real and you can feel how big the planets actually are.

Later on the same year I got a Google Cardboard, which is a insightful piece of design. With no more than $20 it makes possible having a very impressive virtual reality experience on a good smartphone. At the same time, Google released a SDK for Unity that made possible convert a traditional project into a virtual reality one

I started to wonder that making an interactive infographic in VR could be an amusing and not so expensive experiment to do, and for that I looked for an story that could take an advantage of the biggest singularities of this new medium: immersion and sense of scale. That led me to a classic infographic story that I haven’t done yet, the whale. Specially the blue whale, which is the largest animal that ever existed.

As a personal project, I started to sketch how could it be to swim around a blue whale, and understand its anatomy and behavior.

Trying to figure out the best way to move around the whale (top left), understanding the whale swimming movement (top middle), an unused idea of cutting out the eye (top right), the main hotspots of information (bottom left) and a screening for showing
First steps on modeling the blue whale, based on photography references and skeletons exposed at museums
The whale’s skeleton

The next step was to research all kinds of references around the whale, from pictures of skeletons in natural museums to academic papers. All that based the 3D model made on Cinema 4D, which has full support integration with Unity, although any .FBX exporting capable modeling software could be used.

This line around the whale is an animation spline that leads the users through a guided tour around the animal

The navigation path was also made in Cinema 4D. A spline, that is basically a vector line in 3D space, surrounds the whale body as rollercoaster path. A placeholder object follows that path trough a keyframed animation, and this animation can be exported to Unity. Then, a “virtual reality head” replaces the placeholder object and inherits its ride animation through the path. This head will be the user’s head when it’s wearing the Cardboard headset, and the phone’s gyroscope will tell the application where the head is pointing at, so it can render the right point of view on the screen. All that can sound complicated, but the hard work of head tracking and rendering is all held by the game engine (Unity) and the Cardboard SDK integration, with no need for writing codes.

How the project looks like inside Unity. On the left side, it’s pretty much an 3D software like interface. On the middle, the two columns show the project’s assets, like scripts, textures, models and sounds. The right column contains components that a selected object has, like transformation parameters.

The need for coding comes when there are specific interactions happening. To trigger a voice over when the player is front of the whale’s eye, for example. Or to make the whale’s skin transparent to show the bones, in another point. Also, at the end of the, ride, the user can move freely around the whale. That’s a script telling to play the ride animation forward or backwards.

Luckily, at this point of the project, an environment section was being planned to be released at Fusion’s website on the Ocean’s World Day. So far, I understood that a whale story could not fit editorially on the site, but that changed with this new section. Kit Cross joined the project to help on writing the script that lately became the voice over. To fit a broader audience, along with an app for the Play Store to be experienced with the Cardboard, we also released a regular video and a 360º video, originally on a proprietary player developed by Kit, and later on Youtube. As it happened on the Belo Monte project, on this case we could use the same assets to build the virtual reality app and the video versions.

blue whale android
Screenshots from the Android app version

It’s a great challenge and at the same time an interesting adventure to explore a new media like VR. It’s still early to understand how popular and how viable it will be as a new media, and it still restricted to early adopters and media technology enthusiasts. So far, the Youtube 360º proved to be the most popular options, as it take advantage of the Youtube user base and shareability, and doesn’t require any download or store experience like the app version. Whatever it turns into a popular or a restrict media, there is no doubt on the potential of this tool for storytelling and data visualization. I can’t wait to see the new experiments that will appear on the next years.

 

*Simon Ducroquet is a graphic designer and journalist, currently working in a media startup in Brazil to be launched soon. He worked until July 2015 at Fusion, an ABC-Univision joint-venture, as infographic animator of the Interactive Media team. You can explore Simon’s Visualoop profile for more of his works.

Written by Tiago Veloso

Tiago Veloso is the founder and editor of Visualoop and Visualoop Brasil . He is Portuguese, currently based in Bonito, Brazil.

Follow: