Interactive Universal site uses 3D to immerse viewers

LillianH · December 27, 2004 8:38 am

In a day during which "interactivity" is a pervasive catchword of pop culture, Northern California design studio Design Reactor restores the term's original integrity by generating immersive audio-visual content that honors the word's true significance. "Inter" means between or among, and "activity" is the state of being active, so "interactive" denotes being mutually or reciprocally active.

A classic example of Design Reactor's propensity for developing potent, almost addictive online "reciprocally active" material is Universal Studios' The Bourne Supremacy website. Design Reactor, a versatile and creative digital-solutions provider located about five miles southwest of San Jose, combined key visuals from the mid-summer film-the sequel to last year's espionage thriller The Bourne Identity-with original 3D content and sound to formulate a movie-marketing tool that might even lure persons uninterested in the motion picture, itself, to explore the entire website. A 3D interactive trailer, a tantalizing introductory composite, various film biographical notes, and selections of photos, trailers, clips, screensavers and more combine to enrapture the viewer in a veritable sea of movie stimuli.

The complex process of conceptualizing and realizing this deluge of interconnected visuals-with production beginning in March and wrapping up in July-far exceeded the fundamentals for an online presence promoting a feature film.
The Bourne Supremacy home page, beginning the trek of interactivity pervading the Web site.

"Deciding the content for the Bourne Supremacy website was a collaborative effort between Design Reactor and Universal," says DR senior art director Dave Brinda, who has been involved in developing compelling creative visuals for big-name corporate clients for 10 years.

"Obviously there are required elements for every movie-marketing website, but our goal was to take that to the next level.

"For the Bourne Supremacy website, we came up with the concept of an interactive trailer. The idea was basically: 'What if, as a user, you could be watching a traditional film trailer-a passive viewing experience-and suddenly be immersed in an interactive experience?' If you chose to interact, you could explore 'The World of Jason Bourne.' If not, the linear narrative of the trailer would continue. If you did choose to interact, another level of information and immersive experience would reveal itself."

The website's splash page-captained by a gripping sniper image of actor Matt Damon posing as rogue agent and assassin Jason Bourne-is quite unspectacular and rather expected. It includes the usual references to DVD release, plugin and media requirements, ratings and such. But beyond the opening window, information transfer becomes anything but ordinary.
The 3D interactive indoor beach house scene, showing the "target"click areas viewers use to navigate to animated sequences. Moving the mouse cursor left to right within the scene window shows Jason Bourne (Matt Damon) entering the picture.

The all-Macromedia Flash site then tantalizes the viewer with a colorful preview of things to come: Moving the mouse cursor from left to right across a large screen within a 640x480 browser window animates overlaid scenes from the film. Moving in the opposite direction sends them in reverse, so a back-and-forth motion play with the mouse provides the viewer with a fun interaction with actual film material. The tagline "They should have left him alone" appears above all the imagery. And the drop-down computer-like horizontal menu system below the window, with mouseovers realizing a flashing bar cursor, invokes the combination of "intelligence research" (from the proverbial computer files) and modern technology that many viewers almost have come to expect from such interactive online presences.
Ultimately, though, it's this site's potent synergy of "linear" and "non-linear" functionality that pique user interest and set this site apart from many of its kind.

"There is something very powerful about being able to combine the passive and active viewing experience," says Brinda, a 1992 graduate of the prestigious The Art Center College of Design (Pasadena) who joined Design Reactor in May 2001. "It allows the viewer to become a participant in the story. By interacting with elements in what is normally just a passive viewing experience, the viewer becomes more involved, and their interaction creates an even more immersive experience.

"This concept led to an information structure that separated the 'traditional movie info' from the interactive trailer experience. This allowed quick and easy access to information elements such as synopsis, cast and crew bios, etc., and at the same time didn't disrupt the immersive effect of the interactive trailer.

"Deciding the content for the interactive trailer came from linear narrative of the trailer itself. After analyzing the narrative and brainstorming the creative possibilities, we came up with 'keyframe' moments, upon which we could build an interactive experience."

The Flash-output trailer is set in motion by clicking on the opening inside browser window, and the composited sequences from the film give way to probably the site's single most intriguing element: the 3D portion of the interactive trailer. This section of the website consists of three main genres split into highly immersive and engaging mini-sequences: 1) a beach house scene; 2) a command post (war room) scene; 3) a roof-top assassin scene.

The 3D interactive scenes were materialized by staff artists-including Brinda-using MAXON Computer's CINEMA 4D XL R8.5 and Alias' Maya. Some objects were purchased to save production time. Brinda also used Paul Everett's SniperPro and 10comm tools plugins for additional productivity. (SniperPro is a utility for previewing renders which, among other features, increases scene-drawing dramatically. The 10comm add-on contains quick, "day-to-day" tools that are designed to enhance productivity, including the "Flush Materials" tool, which temporarily removes material tags to vastly reduce render time.)

A rapid four-frame animation depicting one "target" sequence from the rooftop sniper scene of the film-like the interactive beach house imagery, created in CINEMA 4D. Macromedia Flash was used to add ActionScript interactivity into selected frames so that clicking on specified image areas displays complementary visuals.

"The first step in the 3D content-development process was to take our initial creative brainstorming and narrative analysis and develop a series of storyboards," says Brinda, six of whose creative team members were involved in the entire website content and developmental process, including one of them designing the non-linear portion and another two developing the online game. "This process allowed me to map out the overall experience and define exactly what we would be building.

"Once the exact scenes were selected and mapped out, I started gathering reference materials. This involved going through all the production stills and video clips, collecting elements that would work for texture and geometry reference.

"Based on the reference [materials] I began modeling the overall environments and props. While some elements required more complex 'box-modeling' techniques, the majority of the modeling process involved modified primitives. Once the modeling was complete, I moved on to texturing."

As often is the case for precise and realistic applications, usable textures were extracted from production still material, also helping to maintain a visual continuity with the actual film, itself. Brinda says that Adobe Photoshop CS was used to create most of the 150-plus materials used in 3D interactive portion of the project.

Naturally, lighting was the next course of the 3D endeavor.
"Given my background in commercial photography, this is always one of my favorite aspects of any project," says Brinda, who has extensive experience in not only photography and 3D, but also in interactive media, motion design and print graphics. "My lighting approach on both the beach house and roof-top scenes utilized traditional, non-GI/HDRI-based methods. I lit the scene very much as I would if photographing the scene. I usually start with one main light source and 'track' the direction of the light and visualize how it would react in the scene. That determines the intensity, color and direction of any subsequent fill lights I might need to place in order to capture that lighting feel."

Brinda emphasizes that different treatments were required for the beach house and roof-top scenes because of contrasting moods he needed to establish and convey.
A screenshot from within CINEMA 4D
showing a blended viewport look at the beach house scene. Most objects were hand-modeled, but a few were purchased to reduce labor time.

"In the case of the beach house, I wanted a strong moon-lit evening feel. The opening scene in the film takes place at night in the beach house, so I felt it was important that the lighting capture this 'middle-of-the-night' feel. In this scene, there was one main moon light tinted slight blue and set to cast soft shadows. This created a nice 'dappled' light feel as it passed through the window and spilled over the desk, wall and floor. From there I added two more fill lights positioned based on how the natural light would bounce around the room. Finally I added a few accents lights to things like the gun under the desk, the water glass, and the desk elements. A subtle warm colored "candle light" was positioned off-screen left to provide a slight color contrast.

The "Cast Bios" page of the Web site, within the "Briefing" section, allows users to click on a thumbnail image of a featured actor (lower right), then scroll and read through the associated description. Again, all content is in Macromedia Flash (SWF).

"The rooftop scene was lit to provide a mid-day feel, in order to maintain a visual consistency with the film. To simulate the main sunlight feel, I used warm-colored parallel light set to cast hard shadows. There was one additional 'cool-colored' (bluish) fill light to simulate sky-light bounce."

Animation was set using path methods to "zoom" users to destination points after they click on "target" widgets. Secondary sequences then were created for objects with which users would interact, such as file folders, journals, a scene through a sniper rifle sight-even a passport and sidearm taped to the bottom of a table, and more. In addition, blurred, psychedelic "flashback"-type effects and sequences were implemented to add a feeling of mystique and intrigue.

After composing the final animation shots and blocking in the camera moves, Brinda rendered out the sequences.

"This process was greatly enhanced by CINEMA 4D's multi-pass function," Brinda says. "Each animation sequence was rendered out as a multi-pass TIF sequence, with an accompanying After Effects project file. By rendering the scene in separate passes, I could affect individual aspects-such as reflections and shadows-in After Effects, without having to re-render things in CINEMA."

"The ability to render separate channels-color, reflection, specular, etc.-in a single render pass, and with a pre-composited After Effects project file is huge!" Brinda says emphatically. "This, combined with the rendering as sequential TIF files, allowed me to jump into After Effects and begin working immediately. As soon as only the first frame was rendered, I could import the CINEMA-generated After Effects project file (AEC) and begin working. The assets would dynamically update as they were rendered out of CINEMA 4D. This allowed me to finish my After Effects work even before the 3D renders were complete."

A sequence from the beach house scene. The camera begins with a wide view of the room, then uses path animation in CINEMA 4D to swoop underneath the table, showing a passport and semi-automatic weapon.

And relieving his dual 1.4-gigahertz PowerMac G4 of the rendering load also proved a major time advantage, as well. Brinda's production unit also was equipped with 1 GB of RAM and a 64-megabyte ATI Radeon graphics card.

"The NetRender multi-node distributed rendering feature in CINEMDA 4D was also extremely helpful in producing this project. As everything else with MAXON it was extremely easy to set up and use. The NetRender feature allowed me to offload the rendering tasks from my machine, and continue working on the next aspect of the project.

Brinda also stressed yet another benefit of C4D.

"Lighting in CINEMDA 4D is so intuitive, it is a joy to work with. CINEMDA 4D provides all the tools I need to create almost any lighting effect I could imagine."

Overall, though, Brinda selected C4D as his 3D tool of choice for studio work, in general, for other reasons.

"I chose to work with CINEMA 4D primarily for its ease of use and quality renders. The CINEMA 4D environment is so intuitive and easy to use, that as an artist I can focus more on expressing my creative vision, and less on the technical 'how-to.'"

As for the remainder of the site's content, which is made available through the "digital" drop-down menus, it includes still photos, two trailers in multiple formats and various sizes and same clips, plus AIM icons for AOL users. Also included in the site's content are e-cards, screensavers and desktop wallpaper. The titillating arsenal of visuals is complemented by an online game posturing the user as an agent in training who is responsible for locating agent Bourne.

Founded in 1997, Design Reactor initially provided Web architecture and database content-management services to the entertainment industry, servicing film and broadcast studios as ABC, Disney, Warner Brothers and Touchstone. An award-winning front-end design-production and animation team was added in 2001, bringing a decade of motion-graphics design experience for such market leaders as Apple Computer, Compaq and VISA.

Simultaneously, Design Reactor implemented a corporate strategy and branding component for customers seeking marketing services such as company and product positioning, script treatments and communication architecture. The company's clientele now includes technology, consumer and entertainment leaders such as HP, Ubisoft, Cisco Systems, Netflix, Sun Microsystems and Universal Pictures.

Design Reactor can be reached via their website at:

Ed Scott is a freelance writer and computer graphics specialist residing in Missouri. He can be reached at

Create your Cinema 4D masterpieces with products from the Renderosity MarketPlace

Check out What's on Sale and see the Hot New Products for more items!

Article Comments

Cocran ( posted at 12:00AM Thu, 30 December 2004

Incredible trailer, the best of i have see.

Privacy Notice

This site uses cookies to deliver the best experience. Our own cookies make user accounts and other features possible. Third-party cookies are used to display relevant ads and to analyze how Renderosity is used. By using our site, you acknowledge that you have read and understood our Terms of Service, including our Cookie Policy and our Privacy Policy.