Gotham • Witness Gotham
RECOGNITION
Emmy Award finalist for Interactive Media, User Experience and Visual Design
Clio Entertainment Awards • Gold Winner: Microsite Category
FWA "Site of the Day"
PromaxBDA Global Award Silver Award Winner for 'Technical Innovations'
Adobe - Cutting Edge Project of the Week
Press Coverage - Mashable.com
Emmy Award finalist for Interactive Media, User Experience and Visual Design
Clio Entertainment Awards • Gold Winner: Microsite Category
FWA "Site of the Day"
PromaxBDA Global Award Silver Award Winner for 'Technical Innovations'
Adobe - Cutting Edge Project of the Week
Press Coverage - Mashable.com
An ode to Batman fans, www.WitnessGotham.com sets up the Gotham universe by dropping users into a virtual simulation of Crime Alley, where Gotham‘s major characters have gathered in the aftermath of the Wayne murders.
This experience is built on a series of cutting-edge technologies. First, a 3D-model of the alley was custom-built in Cinema 3D. Then, to give the model a photo-realistic look, each individual element was re-textured and re-lit in Photoshop. The pieces were all imported into a WebGL environment, which enabled users to spin their viewport around in a 360 degree space. Then, HTML5 and Javascript UI elements were laid on top of the scene, allowing users to interact with various easter eggs, including the Penguin’s umbrella, the Riddler’s question mark scrawls, and Gotham’s official newspaper.
The site delivered a special treat on hand-held devices. By using their phone’s or tablet’s built-in gyroscope, users could physically move their devices to move through the scene.
This experience is built on a series of cutting-edge technologies. First, a 3D-model of the alley was custom-built in Cinema 3D. Then, to give the model a photo-realistic look, each individual element was re-textured and re-lit in Photoshop. The pieces were all imported into a WebGL environment, which enabled users to spin their viewport around in a 360 degree space. Then, HTML5 and Javascript UI elements were laid on top of the scene, allowing users to interact with various easter eggs, including the Penguin’s umbrella, the Riddler’s question mark scrawls, and Gotham’s official newspaper.
The site delivered a special treat on hand-held devices. By using their phone’s or tablet’s built-in gyroscope, users could physically move their devices to move through the scene.
'Easter Egg' Content Guide For The Site.
Process
Process
To realize the crime scene, I created the alley scene from scratch in Cinema 4D. Talent Photography and Production Design Assets were added to help flesh out the scene as feeling believable to the world of the series.
The 3D build was then handed over to developer Active Theory to dissect and map into a much simpler WebGL 3D geometry that could run realtime within a supported internet browser. The final step for the scene involved additional retouching in Adobe Photoshop to smooth out artifacts and add realism to the frontal projection maps used by the WebGL build.
The 3D build was then handed over to developer Active Theory to dissect and map into a much simpler WebGL 3D geometry that could run realtime within a supported internet browser. The final step for the scene involved additional retouching in Adobe Photoshop to smooth out artifacts and add realism to the frontal projection maps used by the WebGL build.
