Google, in partnership with Abbey Road Studios, has built Inside Abbey Road, a site that enables anyone in the world to follow in the footsteps of musical legends, and step inside the famous British recording studio.
Users can explore the rooms, discover stories, historic images and videos, and play with innovative Abbey Road equipment.
The tour consists of over 1,000 panoramas, each composed of six HDR photographs and weighing in at over 110 megapixels.
These let users explore almost every nook and cranny of the three recording studios, and discover stories, images, videos and music spanning the decades.
Audio is the most important part of any musical experience and this tour is no different.
Web Audio was used to make sure users get a high level of fidelity in Inside Abbey Road.
It was employed for positioning the sounds in the 3D space and for recreating classic effects like ADT in the gadgets.
In addition, every audio segment in the audio guided tours by Lauren Laverne, Giles Martin and Mirek Stiles, as well as the site intro audio by Dean Lennox Kelly, was re-amped at Abbey Road Studios.
The voice over was played back and re-recorded in the relevant studio space to accurately capture the reverberation times and unique acoustic characteristic of each room.
To make the experience as widely accessible as possible, the site provides five levels of image quality, and automatically chooses the best one based on factors like Internet bandwidth, screen size, and zoom level.
The site also makes use of the WebP image format - by using a compatible browser like Google Chrome, the same images can download up to 30 percent faster.
To know precisely where each photograph and audio recording was taken, a Lidar scanner was used to create a point cloud of up to 30 million points per studio.
This also powers the 3D transitions users see when moving around, but it wouldn’t be practical to download such a massive amount of data, so a much simpler 3D mesh of each studio was built based on the point cloud.
While much of the video content is provided using the YouTube player, the site includes some video loops projected inline with the panoramas to give the impression of a full 360 degree video.
These are pre-distorted, then displayed with CSS3 3D transforms to seamlessly fit into the panoramas.
A custom app was built using the point cloud data to determine the camera position for some key photo moments.
A panorama was created at the point of each photo moment by triangulating the position to match the photo position when displaying it in the 3D space.
WebGL allows the use the kind of 3D graphics more often found in video games than websites, while CSS3 bridges the gap from 2D to 3D and powers all the interface animations.
The web application is built and hosted on Google’s cloud computing platform.
App Engine provides the ability to easily build, maintain and dynamically scale the project; the more visitors the app receives, the more resources App Engine assigns, allowing it to dynamically scale depending on traffic.