Bvlgari Roman Treasures

BVLGARI: Roman Treasures

Play video

UNIT9 created a luxury version of Google Street View: Roman Treasures for BVLGARI. The 360º cross-platform experience allows users to take nighttime strolls through Rome’s most iconic locations and discover their influence on BVLGARI collections like Serpenti, inspired by the Spanish Steps.

 

Rome

By exploring the Spanish Steps, the Villa Borghese Gardens, the Piazza Navona and the Colosseum, users can explore how Rome’s ancient culture inspired BVLGARI’s iconic products.

For example, users learn that the three tiers of arches that make up the Colosseum inspired BVLGARI’s “spiral of charisma” collection, which includes rings and pendants with three spirals.

Users follow an illuminated path enriched with hotspots to learn about the sites on their virtual visit, including the the Villa Borghese Gardens, the Piazza Navona and the Colosseum.

Social Integration

Users can share a wish by sending friends and family a digital Christmas card with a personal message superimposed on a background of Rome. These shareables can be posted on friend’s social media pages to celebrate the Christmas season. 

The multi-lingual site is embedded with BVLGARI store locators, covering Europe, America and Asia. It also connects to the brand’s social channels.

Design

The theme of constellations is an important part of BVLGARI’s aesthetic, so we wanted to create an artful introduction to the experience using these. We went through many design iterations during our discovery phase.

Taking The Photos

Taking the photos for the experience was a complex task. We stood in the middle of the site, whether it was the Spanish Steps or the Colosseum, and had to break the imaginary circle around us into 36 parts, measuring 10º each. For every part of the circle, we photographed the area from near the ground, from medium height and then with the camera pointing upwards. This multi-level capture is what allowed users to look up and down within the experience, just as shooting from 36 different angles is what allows them to rotate around and explore their surroundings in 360º.

Our task was even more complicated than that, though. For every one of the three levels that we shot from for each angle, we also had to shoot what we were seeing at three different exposures. Using a DSLR with a 24mm lens, we took one photo for 8 seconds, the second for 12 seconds and the third for 15 seconds. You can see an example of this different in our exposure below:

Later on, when it came to the post production process, we layered these three photos on top of one another to create a highly detailed HDR image with perfect lighting. But more on that in a sec!

Stitching

An important part of post-production was “stitching” all the photos together to create one beautiful image. We didn’t necessarily want to keep every part of each photo, so we erased parts of it and, using a masking effect, layered it onto the other images to create 360º dome. In the stitched image below you can see that we combined dozens of different photos to create one very detailed image. Each number represents a photo, meaning that we edited 35 images just to get one perfect photo!

3D

An intricate part of the photo editing process was getting rid of unwanted detail and correcting blurry or unsightly parts of the image. For example, two of the areas we photographed – including the Colosseum – were covered in scaffolding, so we had to eliminate the metal rods and make the image look clean but natural. We also replaced some of the cobbled streets with 3D versions of the ground using 3D software, Maya.

Colour Grading & Editing

We had many photos to edit for each location. For every angle that we photographed from, there were three sets of three images, adding up to over 200 photos for each location. We blended the three exposures that we took to get one high-definition image with perfect exposure. The process of photo-merging ensured that all parts of the image were well-lit; the buildings were illuminated, but the sky and the ground were equally bright.

For several of the locations, part of the editing process involved masking: We enhanced the colour for certain parts of the images. You can see that we did this to create a more beautiful image of the Colosseum for example:

We also edited the sky out of each photograph and placed the same panoramic image of the stars behind each of the location shots, so we had a standardised look for the whole experience. On the site, users notice that there is a parallax effect on the sky.

Coding

We linked our interactive photo files to the website through JavaScript. The hotspots that users can click on to explore the various locations in Rome were coded in and then the copy that we collaborated on with BVLGARI was pulled up.  We coded the site to be as light as possible so that it ran smoothly on both desktop and mobile. Below you can see what the experience looked like on ThreeJS, where we could preview users’ movement through the locations:

Visit Page

Credits

Awards