IX.5 September 2002
Page: 25
Digital Citation

Visualization strategies for the design of interactive navigable 3-D worlds



Designs of interactive, navigable 3-D worlds abound.
  Computer games offer more and more elaborate imaginary
  worlds, and architectural 3-D renderings of individual
  building projects and whole cities are provided. While there
  is a growing body of computer graphics research on tools and
  techniques for the construction of such 3-D worlds, we can
  hardly find any literature on appropriate visualization
  strategies for their design.


A classical reference is Benedikt (1992) who argued
  against realistic representations that turn the world into a
  facsimile, a literal interpretation of the real. Benedikt
  talks about "a sliding relationship between the symbolic
  and the literal" as one of the basic principles for
  designing intuitively knowable worlds. Based on this early
  discussion, Norman, O’Brien and Rodden (1998) refer to the
  visual arts—namely cubism, futurism and
  suprematism—as a source of inspiration for designing
  3-D environments. They point to the aptitude of abstract art
  to communicate spatial depth and dynamics. While it is of
  great relevance to examine a diversity of painting styles,
  imitating abstract art is not necessarily a good approach to
  3-D design. Mitchell (1994) has argued eloquently that
  abstract art raises the same issues of representation,
  iconography, and storytelling than more realistic (in the
  sense of "dense and rather saturated with significant
  features") figurative art.


The challenge is to develop visual languages which create
  meaningful—legible and reflexive—image worlds,
  taking into account the affordances but also the limitations
  of a medium, which is primarily visual (and only peripherally
  auditory), non-immersive, and blurs familiar points of
  reference such as inside/outside, chronology, and spatial
  connectivity (Sobchack 1988).


The case around which we construct our arguments is the
  design of an interactive 3-D world in support of
  architectural work. The 3-D Wunderkammer is a visual
  environment in which multimedia materials can be placed,
  stored, encountered, found, displayed, and integrated with
  the flow of the work. It is created interactively, with users
  placing their own collections of inspirational
  objects—scanned images, sound, video, rendered 3-D
  objects. While the concept of Wunderkammer and the
  architects’ experiences of use have been described elsewhere
  (Wagner Ed 2001, Büscher et al. 1999, Kompast et al.
  1999), we focus here on the graphic design of the visual
  interface. It involved a multidisciplinary team of
  professionals representing different visual
  cultures—architects, graphic designers, computer
  graphic specialists, 3-D designers, and a social scientist.
  It resulted in a variety of designed 3-D worlds, which can be
  explored via the Internet, and in a set of design principles
  for such worlds.


In this article we will present the concept of 3-D
  Wunderkammer, analyzing the challenges involved in
  developing visualization strategies for its design. We will
  describe the different stages in the design of the
  Wunderkammer worlds, and finally, discuss the set of
  design principles which resulted from this multidisciplinary
  design experience.


The concept of 3-D Wunderkammer


The 3-D Wunderkammer took shape as a result of
  fieldwork in an architectural office, in close cooperation
  with the architects, and inspired by the cabinets of
  curiosities of the 17th and 18th century, such as the
  Wunderkammer of Rudolf II in Prague. These cabinets of
  curiosity housed collections of heterogeneous objects,
  featuring "hundreds of icons, alluring apparatus, a
  multitude of mirrors, maps, charts, drawings,
  instruments" (Stafford 1996, p. 28). Visitors used them
  as an inspirational resource for their work in the arts, the
  sciences, philosophy, and politics. One of the most
  interesting features of a Wunderkammer was that it
  presented these objects in a way that did not impose on the
  user an ordered set of relationships and ways of


The need for a modern cabinet of curiosity was confirmed
  by observations of the ways in which architects collect,
  archive, and search for inspirational material, and how they
  use it for developing, expressing, communicating, and
  presenting their work. From these observations we



  • One of the main features of architects’ work practice is
      the intensely visual way working material (most of which is
      visual and graphical itself) is handled and arranged—on
      tables, in the meeting room, on the studio walls. This
      visuality is an integral aspect of architects’ work
      environment and of their ways of capturing and communicating

  • Memories of "place" influence the architects’
      strategies of searching for and retrieving material. In
      particular, association material is strongly connected with
      places, such as a book, file or catalogue, a movie, museum,
      building, or particular landscape.

  • Inspirations often arise from the transient and ephemeral
      way in which these association objects are encountered, their
      peripheral presence in the back of one’s mind, and with
      activities that are connected to movement (such as browsing,
      flipping through, etc.).

  • Architects’ aesthetic categorizations and the
      inspirational character of material are strongly dependent on
      the context in which they arise. Professional designers
      reflexively construct the imagined qualities of a space, and
      the objects that help them capture and express these
      qualities are deeply intertwined with descriptions in speech,
      embodied action, and people.


The designer team translated these observations into an
  approach, which builds on the metaphors of travel and of the
  world as exhibition, as stimulating ways of encountering
  materials. The idea was to design worlds of intuitively
  knowable places, which provide visual associations for
  inspirational materials.


The current working prototype of the 3-D
  Wunderkammer offers a set of well-developed
  functionalities for navigating, searching for, and viewing
  (collections) of multimedia materials. It runs in a Web
  browser in an ordinary, affordable technical environment. The
  program is a set of Java Applets, and uses a standard plug-in
  to display VRML. We have installed the Wunderkammer in
  a real working environment for an extended period of
  experimentation and made a Web-based version available as a
  virtual world in a hands-on way
  ( html).


The 3-D world with its diversity of places, atmospheres,
  and landmark objects provides a rich and significant context
  for placing visual material, with the third dimension
  dramatically increasing the space for storing, viewing,
  presenting, and interacting with objects (Figure
). Clicking, browsing, and scrolling between places
  with material is substituted by continuously moving—
  walking, flying—through a particular geography. The
  continuous movement has a zooming effect—images grow
  "into the screen" and disappear again. The
  "magical" features of digital worlds, such as
  floating, flying, teleportation, and moving through solid
  objects can be used for reinforcing the experiential
  character of the worlds.


People, who primarily use the Wunderkammer as a
  visual archive, tend to prefer the simpler
  "thematic" places for their collections of
  inspirational objects. Here memory is tightly connected to a
  place and images are retrieved by revisiting a particular
  place. Using the Wunderkammer as a source of
  inspiration puts emphasis on the unfamiliar, on surprise and
  discovery. A third focus that emerged is the
  Wunderkammer as an exhibition and presentation space
  (Figure 2). The Wunderkammer invites
  and enables users to experiment with context, scenography,
  and arrangements (Wagner Ed 2001).

The first Wunderkammer worlds


The leading idea was to design image worlds that are
  legible, navigable, and aesthetically attractive.
  Inspirational resources were the metaphors and images that
  grew from the architects speaking about actual practice and
  needs, in particular the metaphors of travel and of the world
  as exhibition. Wunderkammer places should not resemble
  any real place but be "mise-en-scène" for
  inviting the placing of inspirational objects and for
  stimulating contradictory associations.


Developing the visual interface of 3-D Wunderkammer
  was done in several steps, with different versions reflecting
  changing priorities and insights. The first version was a
  simple symbolic "village" with a few significant
  and easily recognizable places. The graphic design was a
  system developer’s literal translation of the architect’s
  first sketch into a 3-D environment, using a series of simple
  and compact objects with clear contours (Figure


A more elaborate assemblage of a type of city and
  landscape replaced this version. This 3-D world was directly
  inspired by the architects’ approach to urban planning. They
  started out from a modular structure based on a neutral grid
  on a slightly curved surface, and defined the qualities of
  different fields or places in this grid (Figure
). The idea was to provide structure and construct an
  open system, rather than a pre-defined world, which can be
  filled in with places of different qualities.


The selection and definition of places for this Collage
  City/Landscape was done as part of our fieldwork within the
  architectural office, with a view to the inspirational
  material used within current architectural projects:



  • Skyscraper City - buildings around a plaza, which
      are packed with glitter, rich decoration, and icons of
      fashionable life, a cultural center, and a park leading into
      a derelict area

  • Urban Void - a mixture of derelict industrial
      sites and slabs in Neoversimo style)

  • High-tech industry - with a touch of futurism

  • Medieval City Center - with a variety of
      historical elements and objects

  • One-Family Housing - as a symbol of idyllic

  • Landscape formations- mountain area, forest,
      agricultural area, ocean, and cost, leading into the desert.


The designs for this more elaborate world were provided by
  the architects themselves. The approach was architectural 3-D
  modeling with an emphasis on structural elements
  (Figure 5). The first version was still
  predominantly symbolic. It contained a series of significant
  objects, some of them paths—amphitheater, museum,
  highway, bridge, etc., which were placed in-between these
  modules. The next step was to focus on navigability and
  performance. The architects switched to 3-D Studio, a
  modeling tool with better 3-D compatibility. The
  symbolic-iconographic language was replaced by a structural
  approach. Each place was architecturally constructed. The
  screenshot of Industry captures some of the qualities of this
  world. Its language is abstract, focusing on building
  structure, but still naturalistic. Performance problems with
  these complex constructs induced the architects to reduce the
  details of their designs by removing significant objects.
  They started experimenting with textures


This world, while offering interesting views, in
  particular a bird’s-eye view, showed some of the strengths
  but also the limitations of an architecturally constructed
  3-D world. Architects’ main field of experience has to do
  with structure, topography, the qualities of space, with
  light as a space-generating element, and with the effects of
  combinations of materials in the real world. Their
  visualizations in 2-D and 3-D allow the "immutable
  transfer" of information. They are detailed, optically
  consist scale-constructions of worlds to be built. In this
  sense they are "real" and at the same time highly
  abstract, lacking the kind of rich detail necessary for
  conveying highly differentiated content.

Searching for visualization strategies


Given the limitations of an architecturally constructed
  3-D world, the team decided to engage the help of an
  experienced 3-D designer and a graphic designer. The idea was
  to combine the architectural approach with the language of
  film, comics, painting, stage design, etc., and to explore
  the suitability of these visual languages for a digital


We approached this task by mobilizing— searching for
  and collecting—a great variety of visual examples from
  art books and journals, which were scanned and printed out.
  These examples were combined with (metaphorical) descriptions
  of the qualities of places in this world (their atmosphere
  and significant details) and prototypal 3-D designs to form
  mixed media representations of worlds "in
  formation." In a series of joint design sessions, an
  architect, a 3-D designer, a graphic designer, and computer
  graphics specialists talked through the design of three
  particular areas—Skyscraper City, Ocean/Desert,
  and Industrial Landscape—developing ideas about
  the content of each of these worlds, describing atmosphere
  and details, and looking through the visual examples that had
  been collected. The architect produced sketches of each area,
  which were gradually filled with detail. The 3-D designer
  took the documentation of this conversation, together with
  the associated visual materials, as a script for his design


The first module exemplifying this approach was
  Ocean/Desert, an assembly of different formations of desert,
  mountains, and ocean into a highly compressed space
  (Figure 6).


While describing his notion of Ocean/Desert, the architect
  produced a sketch, which was arranged, together with visual
  examples copied from art books, into a rich visual
  representation of the area.


The designer team’s main concern was to develop a visual
  language for expressing the identity of a place, its
  atmosphere, and its legibility at a glance. This required
  finding the right balance between the use of telling detail
  and expressing subtle, unexpected and surprising visual


The graphic designer in our team not only explored a large
  variety of textures (such as images of façades) for
  conveying detail and for creating particular atmospheric
  qualities, and also supported our explorations of a diversity
  of artwork.


Intertwined with the legibility of a 3-D world are issues
  of orientation and navigability. Kevin Lynch’s work (1994),
  with its focus on understanding the "practical grammars
  of perception" underlying people’s orientation in urban
  spaces, has been widely referred to in user-interface design.
  Here the architect and graphic designer pooled their
  knowledge of space into designing the Wunderkammer
  geography. It contains some of those structures and objects
  that in our physical environment support orientation:
  significant points, signs, paths, crossings, regions, and


Another problem and challenge in building interactive,
  navigable worlds has to do with performance. It is a
  well-known fact that rendering 3-D worlds in real-time so
  that users can explore and navigate through them with ease is
  a task that challenges the hardware and software
  configuration of a machine. Computer graphic specialists have
  the ability to navigate through a 3-D world, knowing how it
  is mathematically constructed. This helps them identify
  critical spots in a 3-D world, such as complex objects,
  disadvantageous object groupings, etc. Graphic specialists
  have developed the art of smoothening out, simplifying, and
  manipulating with optical illusion, without diminishing the
  visual qualities of the design. In doing so they have to
  combine their technical knowledge with aesthetic judgments,
  while absorbing, reflecting and translating what they learn
  from the architect and the graphic designer.


The 3-D designer’s role in the project was to literally
  compose the worlds in great detail, and to decide when and
  what the user sees, from whole objects to detailed textures.
  As part of this he needed to find a balance between the
  different visual languages—architectural constructions,
  the language of film, comics, and stage design. If the 3-D
  designer wanted his scenes to be rendered in real-time, he
  had to take a few simple rules into account. Viewing and
  discussing the design with the computer graphic specialists
  helped him understand and apply these rules.


Design principles


The result of this joint design work is three quite
  different Wunderkammer places, each of them designed
  in a different way and together with a series of design
  principles. The current visual interface is still a
  construction site, with placeholders for sub-worlds to be
  designed at a later stage, eventually by users themselves. We
  look at these principles, together with the rules for scene
  composition, which were developed by the computer graphics
  specialists in our team (Wagner ed 1999) as guidelines for
  people designing interactive, navigable 3-D worlds.


VSPACE="2"> Field concept


The basic layout of the visual interface is a neutral grid
  into which different places can be filled. Each field has
  been designed in a particular way; by evoking and underlining
  contrasts of style, detail, color, etc., differences &
  specifics have been emphasized (Figure


VSPACE="2"> Mixing visual strategies and


The design combines a diversity of expressive styles, such
  as the pictorial style of David Hockney, the photographic
  character of 19th century industrial buildings, the
  naturalism of old etchings, the expressionism of a painting
  by Marcel Grommaire, and the streaky lines of drawings. A 3-D
  collage of different images and styles visualizing a
  diversity of places and objects was created (Figure


VSPACE="2"> Changing scales


By leaving things unscaled or out of scale and placing
  them in close proximity to each other, open, unspecified, and
  sometimes confusing relationships between objects were
  created. This often counterintuitive scaling enables
  "uncombinable" things to be combined
  (Figure 9).


VSPACE="2"> Mixing 2-D and 3-D


As in stage design, 2-D has been mixed with 3-D. In an
  architecturally constructed world stage sets acquire
  qualities in between unreal and "legible." Here,
  the painting "Hotel Sian" by David Hockney
  (Figure 10) has been made transparent.
  Travelers may walk through the gate to a place filled with
  objects of different qualities, some of which appear massive
  while others assume a floating, fragile, stage-like
  character. Figure 10b shows a collage of 3-D
  building (`Silo’) with stage-set elements of bridge and


Another Hockney painting ("Sinked") has been
  converted into 3-D, providing it with a relief and
  contours1 (Figure 11).


VSPACE="2"> Compressing space


A 3-D world allows variations of scale and density. The
  idea of Skyscraper City (Figure 12)
  can be condensed in a set of significant buildings around a
  plaza, which are packed with glitter, rich decoration, and
  icons of fashionable life. Variations of landscape or
  architectural styles can be assembled in close vicinity, just
  as a forest be packed with layers of woodland—dark,
  high-rising fir trees, boscage, tropical forest,


Another strategy is to place contrasting environments next
  to each other without providing smooth transitions,
  emphasizing contradictions. In Industrial landscape
  (Figure 12) contrasting environments have
  been placed next to each other, emphasizing contradictions
  between artificial and natural, transparent and solid,
  derelict and proper.


VSPACE="2"> Mixing complex and simple designs


Some of the fields in the current version of 3-D
  Wunderkammer are empty—placeholders for worlds
  to be designed; others are symbolized by a single object such
  as an airplane, a church, a stadium (Figure
). The idea again is to work with contrasts in a
  world, which may rapidly become too dense, loaded with
  detail, and in the end disorienting


VSPACE="2"> From flying over to digging deep


Speed strengthens the discovery effect. It allows
  combining the "flowing, quick glance" with the
  possibility to dig deeper into some detail. The flaneur roams
  through the Wunderkammer, picking up what s/he likes,
  disregarding the uninteresting. While the sightseer follows
  some predefined path, the hasty traveler flies over the
  world, taking in transient and distant impressions
  (Figure 14).




Designing navigable, interactive 3-D worlds is partly an
  aesthetic and partly a technical question. While having to
  solve the technical problems of optimizing performance in
  practice, we focused on the challenge of creating designs
  that generate a different view on things, helping perceive
  the novel in the familiar, discover relationships between
  seemingly incongruous objects, and relate the


Obviously realism is not an answer to this challenge. The
  designer team approached it through bringing different design
  disciplines together, pooling their knowledges and expertise.
  The design principles we presented in this article are a
  result of this work. At the core of their development was an
  intense discussion of a great diversity of visual examples of
  artwork: paintings, film, stage design, comics. The designer
  team experimented with different strategies of combining the
  visual languages of these artworks into 3-D


Although not directly translatable into the design of 3-D
  worlds, architectural debates about spatial qualities
  inspired several of the design principles we developed, such
  as the field concept, compression of space, changing scales,
  mixing visual strategies and styles. Contemporary
  architectural debates involved hybridity, flexibility, and
  the openness of space; enlarging the choices of materials and
  techniques and intensifying the effects of structures and
  materials (Wagner and Lainer 2001). There are traces of these
  debates in the design principles.


Also, architects’ experiences with intensifying the
  effects and qualities of an object, with mobilizing built
  structures and multiplying modes of perception and use, have
  proven useful in 3-D design. They helped the 3-D designer
  move away from an architecturally constructed world, to
  experiment with stage sets, with contrasts of style, details,
  and color, sharp boundaries, and edges alternating with more
  fluent transitions between fields. Moreover, as
  representatives of a highly visual culture, architects know
  how to translate between different kinds of representations
  and between scales (between 2-D and 3-D, sketch and detail
  drawing, etc.).


The design principles, although described textually, have
  been made visible through particularly telling views of the
  3-D worlds. We look at these screenshots as visual examples
  of directions to take in 3-D design rather than as
  accomplished prototypes.




The 3-D Wunderkammer was developed as part of
  Esprit LTR Project 31870 DESARTE. We wish to express our
  gratitude to our co-designers Johannes Siglär, Richart
  Schneider, Kresimir Matkovic, Maria Sciencik, Michael Strobl,
  Michael Gervautz, and Erich Monitzer.



1. Benedikt M. (1992) Cyberspace,
  Cambridge, MA: MIT Press.


2. Büscher M., Kompast M., Lainer
  R., Wagner I. (1999) The Architect’s Wunderkammer:
  Aesthetic Pleasure & Engagement in Electronic Spaces,
  Digital Creativity 10, pp.1-17.


3. Hockney D. and Luckhardt U. (1995)
  David Hockney, Zeichnungen 1954 – 1994,
  Stuttgart: Hatje Verlag


4. Kompast M., Lainer R., and Wagner I.
  (1999) Die Wunderkammer als Inspirations- und
  Erinnerungsraum. In M. Fa


ler (Ed) Ohne Spiegel
, München: Wilhelm Fink Verlag, pp.


5. Lynch M. (1985) Art and Artifact in
  Laboratory Science.
A Study of Shop Work and Shop Talk
  in a Research Laboratory
, London: Routledge & Kegan


6. Mitchell W.J.T. (1994) Picture
  Theory. Essays on Verbal and Visual representation
  Chicago, The University of Chicago Press.


7. Norman S., O’Brien J. and Rodden T.
  (1998) Visual Arts Strategies: Perspectives on Avant-Garde
In eSCAPE Deliverable 3.1, Lancaster University,


8. Sobchack V. (1988) The Scene of the
  Screen. Beitrag zu einer Phänomenologie der
  `Gegenwärtigkeit’ im Film und in den elektronischen
  Medien, In Gumbrecht H. U. and Pfeiffer K. L. (Eds)
  Materialität der Kommunikation, Frankfurt:
  Suhrkamp, pp. 416-429.


9. Spender S. and Hockey D. (1982)
  China Diary, New York: Thames and Hudson


10. Stafford B. (1996) Good
. Cambridge MA: MIT Press.


11. Wagner I. and Lainer R. (2001) Open
  planning—inspirational objects, themes, placeholders,
  and persuasive artefacts. In: Proceedings Colloque
  Architecture des systèmes urbains,

  Université de Technologie de Compiègne, July 5,


12. Wagner I. Ed (1999) Desarte. The
  Computer-Supported Design of Artefacts and Sapces in
  Architecture and Landscape Architecture. First Year
, Institute of Technology Asessement & Design,
  Vienna University of Technology.


13. Wagner I. Ed (2001) Desarte. The
  Computer-Supported Design of Artefacts and Sapces in
  Architecture and Landscape Architecture. Final Report,
  Institute of Technology Asessement & Design, Vienna
  University of Technology.




Ina Wagner & Martin Kompast

  Vienna University of Technology


Rüdiger Lainer

  Academy of Fine Arts in Vienna


Design Column Editors


Kate Ehrlich


  89 South St, 2nd Floor

  Boston MA 02111

  (617) 531-3700


Austin Henderson

  Rivendel Consulting & Design, Inc.

  P.O. Box 334

  8115 La Honda Rd. (for courier services)

  La Honda, CA 94020 USA


  fax: +1-650-747-0467




1The paintings by David
  Hockney are "Hotel Sian" in Spender and Hockney
  1982; "Sinked" in Hockney and Luckhardt 1995.

SRC="thumbs/f1.jpg" BORDER="0" VSPACE="5" HSPACE="5"

Figure 1. Placing and collecting
  images, looking for inspiration


SRC="thumbs/f2.jpg" BORDER="0" VSPACE="5" HSPACE="5"

Figure 2. Creating exhibitions



SRC="thumbs/f3.jpg" BORDER="0" VSPACE="5" HSPACE="5"

Figure 3. Translating the architect’s
  sketch into the first visual interface



SRC="thumbs/f4.jpg" BORDER="0" VSPACE="5" HSPACE="5"

Figure 4. The grid structure



SRC="thumbs/f5.jpg" BORDER="0" VSPACE="5" HSPACE="5"

Figure 5. Architectural constructions
  of the 3-D world


SRC="thumbs/f6.jpg" BORDER="0" VSPACE="5" HSPACE="5"

Figure 6. Designing Ocean/Desert



SRC="thumbs/f7.jpg" BORDER="0" VSPACE="5" HSPACE="5"

Figure 7. Using colour for emphasizing


SRC="thumbs/f8.jpg" BORDER="0" VSPACE="5" HSPACE="5"

Figure 8. Mixing futurist paintings
  (Giacomo Balla) with photographic realism



SRC="thumbs/f9.jpg" BORDER="0" VSPACE="5" HSPACE="5"

Figure 9. Shifting scale - combining
  differently scaled objects


SRC="thumbs/f10.jpg" BORDER="0" VSPACE="5" HSPACE="5"

Figure 10. Mixing 2D and 3-D



SRC="thumbs/f11.jpg" BORDER="0" VSPACE="5" HSPACE="5"

Figure 11. Converting 2-D into


SRC="thumbs/f12.jpg" BORDER="0" VSPACE="5" HSPACE="5"

Figure 12. Compressing and


SRC="thumbs/f13.jpg" BORDER="0" VSPACE="5" HSPACE="5"

Figure 13. "Simple"


SRC="thumbs/f14.jpg" BORDER="0" VSPACE="5" HSPACE="5"

Figure 14. Flying over and digging


©2002 ACM  1072-5220/02/0900  $5.00


Permission to make digital or hard copies of all or part
  of this work for personal or classroom use is granted without
  fee provided that copies are not made or distributed for
  profit or commercial advantage and that copies bear this
  notice and the full citation on the first page. To copy
  otherwise, to republish, to post on servers or to
  redistribute to lists, requires prior specific permission
  and/or a fee.

Post Comment

No Comments Found