The Company: Deep is a London-based design agency whose team of art directors, designers, illustrators and programmers deliver unique and creative solutions to its clients, such as reinvigorating established brands as well as creating new ones, and originating a brand’s identity to managing and development off and online media.Deep’s work for The Ritz Magazine was chosen the winner for "Best use of Typography" and a finalist for "Best designed customer magazine of the year" at the prestigious annual 2005 Magazine Design Awards.
click here to view site
The Client: The Ritz Club London, located in the heart of London’s Piccadilly, is a privately owned, exclusive members gaming club situated in the former ballroom of the famous Ritz Hotel, a venue evocative of the great Edwardian casinos of Europe.
Background: Deep has worked for The Ritz Club, London for the past seven years, working on all its design requirements, from brand identity work through to web site design and build. They created the first web site for The Ritz Club back in 2000, which contained a VR tour of the club to show off the facilities to potential members. However, at that time, they were only able to use a 3.2MB Nikon CoolPix 995 with a 180 fisheye lens, shooting three shots per VR and stitching them together using Panoweaver. The quality was fine for the time but Deep felt an upgraded VR tour was in order.
The Project: In mid-2005 Deep was asked to redesign and rebuild The Ritz Club, London website. Deep used its own CMS system, along with Flash for headers and an image gallery. This time around, Deep wanted to take the virtual tour a step further using fullscreen panoramas linked with internal hotspots. “We also had a Canon 20D with 8.2MB RAW image files,” says Deep’s Dominic James, “so we offered to redo the tour of the club using fullscreen VRs, for which we showed VRWAY’s site as an example of what could be achieved.”
Using an 8mm Sigma lens, the Deep team shot 12 VRs inside the club, using six shots for each VR. (They shot in RAW, converted to TIF and imported to PTMac.) “We found PTMac to be the weapon of choice for stitching these together, along with EMBLEND, and then exporting them out to Photoshop CS2 for retouching,” James continues. “They were then brought into Cubic Converter and into Cubic Connector, where we output the finished files.” This is the point, however, where Deep ran into a problem: As they’d optimized the movies for 1024x768 screens, when they clicked on a hotspot using a monitor with a higher resolution (say 1600x1200), it would load the movie for the optimized screen, leaving an unseemly border.
Deep researched the problem but unfortunately only found websites that used an outside controller to view the next or previous movie, and so devised its own solution, after much trial and error. “In the end we found a way round this by embedding a php url within the VRs for each hotspot that would read and load the next movie correctly,” James explains.
James notes that, while he has been shooting QTVRs for seven years, he is by no means a pro, and he’s quick to point out a misalignment on one panorama, and perhaps a problem with over compression. "In hindsight it would have been better to have shot the images using a Canon 15mm fisheye lens and so the quality of the final VR's would have been better," he says. "However, the main reason we didn't is that The Ritz Club, London is only closed for business from 6am till 10am and it would have taken over three weeks photographing on site to get the images required for 12 nodes - which is both cost prohibitive and way beyond the time scales allowed."
The Fullscreen Hotspot Issue: “We must have tried about five ways,” says James. “Then we tried converting all the cubic VRs hotpots to URLs, then edited the code that was generated from the CubicConnector output option ‘movies+html+hotspot’.”
From:
"<param name="hotspot1" value="A<mainroom-middle-Pano.mov>T<myself>E<PAN=4.18 TILT=-0.23 FOV=62.25>">
To:
<param name="hotspot1" value="<i>mainroom-middle-Pano.php?pan=4.18&tilt=-0.23&fov=62.25"</i>>"
They then pasted part of this into the URL field on the hotspot tab of CubicConnector and saved the movies out as movies+html+hotspots. This almost worked. "Then, by trial and error," he continues, "we eliminated bits of the html code and, to our surprise when we took the hotspot information out, it worked... As you may notice, to do this we had to use php to parse the variables – but it works! "
>"<!-- start embedded QuickTime VR Movie -->
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="100%" height="100%" codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="pan" value="<?=$_GET['pan']?>">
<param name="tilt" value="<?=$_GET['tilt']?>">
<param name="fov" value="<?=$_GET['fov']?>">
<param name="src" value="mainroom-top-Pano.mov">
<param name="controller" value="true">
<param name="scale" value="tofit">
<embed src="mainroom-top-Pano.mov" scale="tofit" pan="<?=$_GET['pan']?>" tilt="<?=$_GET['tilt']?>" fov="<?=$_GET['fov']?>" width="100%" height="100%" controller="true" pluginspace="http://www.apple.com/quicktime/download/" ></embed>
</object>
<!-- end embedded QuickTime VR Movie -->"
Outcome: James is happy to report that The Ritz Club was “blown away at the scale, color and immersive effect the VR tour had”.
We’re pleased to see a non-VR agency nicely integrate a fullscreen VR tour into its client’s website.
Virtual Tour: View The Ritz Club Virtual Tour.
