Biome Productions

Virtual Reality

An interactive website for a VR and 360° video company to take users from their front room, into the wild.

Journeying all over the globe Biome shoot in nature’s greatest spots, from the Cairngorms to Djuma. The vision for the website was to present a taste of these experiences to the audience, reflecting Biome’s desire to take users from their front room into the wild.

The team approached us through a recommendation. They had seen work from our R&D department that includes VR experiences such as GiG Malta and 3D to VR game conversion and were excited by the prospect of integrating this approach on the web. For us, the opportunity to collaborate with a business that works with the medium in such incredible ways had us extremely excited. We were tasked with designing and developing a new website for Biome that would represent their capabilities, and give users an insight into the experiences they produce.

Concept

From day one – the kick off meeting with Biome – a number of ideas were being passed around as to how we could best give users an insight into their VR content. Presenting 360° content in the browser seemed like the perfect solution – an immersive way to tell their story while showcasing Biome’s services at the same time.

Making use of YouTube and Vimeo 360° embed is one of the more straightforward methods to present content in 360°, but we didn’t quite feel this format would really immerse the user. Swiftly, our discussions turned to the capabilities of FX Digital’s R&D team, and in particular to how we could use WebGL to bring that immersive twist to the experience.

Having worked with 3D in the browser for some time now, we know that it’s important to use WebGL on content-rich sites in a subtle yet effective way. With that in mind, we chose to design a site that would make use of a WebGL hero section with a simple interactive element. The hero plays a reel of Biome’s VR content in 180° with the camera focus moving as the user moves their mouse across the browser window.

Loading

As effective as this would be, what became clear to us was that the VR video content was relatively heavy and needed some serious crunching and compression to ensure it could be delivered quickly over an internet connection.

We considered a number of approaches to achieve a desired video weight of 4mb or less, and found that simply shortening the length of the video was helpful. But not enough. Beyond this, we couldn’t use our favoured approach of hosting the content on Vimeo (which has incredible video compression and optimisation capabilities) due to the technologies that we were making use of the deliver the experience to the website.

Following some discussion our Creative Director, Tom Smith, came up with a solution that would see us reduce the video size considerably. Tom understood that the weight of the video was high as a result of it being natively 360°, and that for the experience we had created we barely needed 180° due to the limit we placed on mouse movement. The simple yet ingenious solution Tom created was for us to simply scrub out the 180° portion of the video that the user would never see, which got us within our 4mb target.

Going mobile

Despite the team’s great work to crunch the video down to a size that can be delivered over the internet, we still had the challenge of the mobile experience. It was quickly agreed that presenting a compulsory 360° video experience to a mobile user was perhaps not the best idea. Such is our thirst for technology, however, that we were not keen on delivering a less impactful experience on mobile.

Making use of technology we first experimented with on our own website, we decided to create an experience for mobile that drops the user into a 360° still environment and allows them to use their phone’s accelerometer and gyroscope to explore their surroundings. The end result is a mobile experience arguably more immersive than that of the desktop, made up by a lightweight 360° image that can be delivered promptly over a mobile network. Outside of the VR and 360° hero we also used 3D web development techniques elsewhere on the site to allow Biome to upload a 360° image to a project page and add tooltips to share information about it.

Fully Responsive
Fully Responsive
Custom projects view for smart phones and tablets

Alongside the exceptional use of 3D web technologies on the Biome website, it was still important to maintain focus on the site’s purpose to encourage lead generation. The site itself therefore follows most pages with a clear call to action to encourage contact.

It was also important that we continued to deliver the rich level of content management that our clients now come to expect from the systems we develop. As well as Biome being able to build their own pages and manage their own blog, they can also content manage each of the 3D experiences on the site, adding VR imagery and tooltips as they choose.

The final product delivered for Biome is not only an effective lead generating website with the expected content management capabilities, it’s also an escape that really takes the audience, into the wild.