Methods and Techniques
Eric Deléglise, Diponkar Paul and Morten Fjeld
Department of Computer Science and Engineering, Chalmers University of Technology, Sweden
Keywords: Transition, 3D, 2D, Web, Transition, Buffer, User Interface.
Abstract: While numerous web applications exploit either 2D or 3D technology, the work presented here suggests that
it is feasible to integrate 2D and 3D environments. Besides presenting methods and techniques for realizing
2D and 3D web environments, novel ways of putting corresponding technologies to work are suggested.
The prospective user benefits and inherent limitations of realized models are presented in our work. Then
the issues that arise when switching between 2D and 3D environments are explored. The background and
justification for the three methods and corresponding techniques presented here illustrate how to enable and
facilitate a fluent and effective transition between 2D and 3D web environments. While some of the
methods and techniques presented are still at a conceptual stage, two techniques have been realized and the
findings are presented in detail. A video presentation of realized techniques is offered. Usability of the
methods and techniques realized is discussed.
Ergonomic and functional aspects of visual
interfaces greatly affect everyday human-computer
interaction. Applying two-dimensional (2D) and
three-dimensional (3D) technology to user interfaces
is becoming increasingly popular, and designers
employ alternative methods for interacting with such
environments. Here, we started out with a web
application for remote project management drawing
on a combination of 2D and 3D web User Interfaces
(UIs). This web application offers a wide range of
functionality enabling an authorized user to
distribute tasks to remotely situated programmers,
designers and testers, place access constraints on
employees depending on their hierarchical level,
upload completed tasks to the system, communicate
online, etc. However, this paper focuses on the
different methods for developing and realizing
technology that has 2D/3D elements and enables
users to alternate between 2D and 3D. The validity
of such methods relies on the assumption that the
smooth transition between 2D and 3D interaction is
beneficial in such a 2D/3D web environment. While
2D interaction is particularly helpful when
interacting with WIMP (window, icon, menu, and
pointing device) elements such as menus and
dialogue boxes, 3D interaction can offer a more
realistic and familiar user experience. The
application presented is modeled on a basic concept
blending 2D and 3D interaction. We expect related
interactive systems to benefit from this concept.
Based on a set of three methods and corresponding
techniques, the three main questions motivating our
research are as follows.
How can smooth transitions between 2D and
3D be implemented in web applications?
What different kinds of parameters must be
considered e.g. usability and interaction
capability when working with 2D and 3D
technologies for 2D/3D web environments?
Do the methods have sufficient generic
quality to be taken over and used by other UI
In the following section, related work is
described. Subsequently, an outline of the methods
that have been used to realize applications is
presented including those methods whose
applications are in development. Then Table 1
provides a thorough description of techniques for
switching between 2D and 3D interaction. The paper
rounds off with a discussion and outlook section. A
video presents the techniques that have been
Video presentation: http://www.3de.fr/ihm/index.html
Deleglise E., Paul D. and Fjeld M.
2D/3D WEB TRANSITIONS - Methods and Techniques.
DOI: 10.5220/0001833502940298
In Proceedings of the Fifth International Conference on Web Information Systems and Technologies (WEBIST 2009), page
ISBN: 978-989-8111-81-4
2009 by SCITEPRESS Science and Technology Publications, Lda. All rights reserved
Table 1: Methods and techniques supporting 2D/3D transitions: Planned in white; partly realized in light grey, realized in
Prior research has been done comparing the
effectiveness of 2D and 3D user interfaces. On the
one hand, as indicated by Massó et al., 2D can be
effective for WIMP-based user interface description
while on the other hand, a 3D virtual user interface
environment is optimal for realistic presentation and
behavior. In the STARLIGHT project, Risch et al.
used 3D visualization techniques offering a new
class of information visualization. Risden et al.
compared 2D and 3D visualizations of web content,
but did not find any significant differences in user
performance or satisfaction regarding the
visualizations. Given that web technologies have
evolved significantly lately, we found it of interest to
re-examine Risden’s results and to realize new
methods fusing 2D and 3D web environments. The
methods suggested here are intended to help
improve user-friendliness in 2D/3D web
Moreover, Cockburn and McKenzie compared
2D and 3D versions of Robertson et al.’s Data
Mountain and found no significant difference in
performance, but the 3D version received a notably
higher subjective rating. Ware and Franck conducted
a comprehensive comparison of environments and
various 3D modes by examining tasks involving the
inclusion of 3D graphs. The ability to move or rotate
the graph and 3D affordance proved to be valuable
features, contributing to the fact that 3D applications
consistently outperformed 2D ones. Our work,
however, opts to explore the optimal methods for
realizing 2D/3D transitions, where 3D is favorable
for flexible user interaction and 2D is utilized when
there is a significant amount of content present.
Table 1 offers an overview of different methods and
Methods and Techniques Projected User Benefits Technologies employed Limitations and Remarks
Method I
Display 2D content in 3D
environment with 3D
• User friendliness
• More playful interactions
• Better immersion
• Second life
• Google Lively
• Not stable for professional
• Not compatible with
technologies like Flash and
Method II
Smooth transition between 2D
content and 3D navigation
• 3D navigation richness
• 2D content richness
• Virtools used to build the 3D
• Web 2.0 application like
Joomla or drupal used for
building 2D pages
• Frame system used in
transition mechanism
• Only one 2D page can be
at a time
Method II, Technique a
Same template is used for 2D
and 3D content for system
• System consistency (user feels
that he remains in the same
• Smoothness of transition
• Template displayed in both
systems (position and size
remain the same in the
• User can become lost
• When user is viewing 2D
content, there is no visual
information to show position
in the 3D world
Method II, Technique b
Transition with icon that
represents position of user in
3D environment
• User orientation (user
knows where he is in 3D
• Icon displayed on 2D page • User feels that there are two
different environments
• Discrepancies between the
technologies are evident
Method II, Technique c
Transition with picture of 3D
• System consistency (users
never feel like they leave the
3D world; they remain in
same system)
• Transition smoothness
• Information consistency
• Information as to position in
3D world appears on the
• Picture taken in 3D world
used as background for 2D
• Not possible to view much 2D
content at one time
Method III
Wrapper utilized in 3D
environment in order to display
2D content
• Multiple 2D page display
• Used a wrapper in 3D world
in order to display a 2D
page created with Flash or
other web 2.0 technologies.
• Can be confusing for users
• Too much information
presented simultaneously
2D/3D WEB TRANSITIONS - Methods and Techniques
techniques combining 2D/3D content and supporting
2D/3D transitions. Methods and techniques realized
are in white, partly realized ones are in light grey,
and realized ones are in grey. The techniques that
have been realized are presented in a video
3.1 I: 2D and 3D with same Technology
As seen in the table, a method is presented which is
based on the utilization of the same 3D technology
to display 2D and 3D content. Displaying 2D
content using 3D technology is not technically
sound. It is better to use Flash or php and html than
3D technology when attempting to improve 2D
interfaces. 3D technology is not proficient at
displaying WIMP components compared to
alternative technologies.
3.2 IIa: Same Template Transitions
Method II is mainly presented through technique IIa
including a 2D/3D transition mechanism, a rich 3D
universe, an information display, a transition Fx, and
a 2D page.
3.2.1 2D/3D Transition Mechanism
The methodology of our concept will be explained
in the description of our product. This sample can be
reused when creating new applications based on the
same model. The system is composed of three
elements: the frame system used for the transition,
the 2D page, and the 3D page. Each element has its
own script used in the process of transition. The
frame system has two frames: one displaying 3D
content and the other, 2D. The two frames work like
buffers (Fig. 1); when one is displayed the other is
hidden. The 3D buffer accompanies a 3D page and
the 2D buffer corresponds to a 2D page. The system
can be used in order to transit between 3D and 2D
states. First, the 3D buffer is displayed in full screen,
and the 2D buffer is hidden. Subsequently, a
JavaScript is used in order to go from one buffer to
the other. When the script is called, it modifies the
size of each buffer. The system can also be used in
order to move from 2D to a 3D state. The 2D buffer
leaves 50 pixels at the top of the screen for the 3D
buffer to display the icon which is used to return to
the 3D state. When the icon is clicked, a script
operation is performed making the switch from the
2D to the 3D buffer which then assumes full screen
Figure 1: 2D/3D transition mechanism (Frame).
3.2.2 Create a Rich 3D Universe
In our sample, the 3D universe is a circular virtual
room composed of seven stands (Fig. 2). The user
can interact with this environment using an avatar. A
chime or other sound welcomes the user and
supplies him/her with complementary information.
Each interaction with the environments is linked to a
sound effect (push button, movement, transition, and
loading) in order to alert the user of activity.
Navigation is designed to be simple and natural
for most users. There are two kinds of users with
which we are concerned. We assume that users
accustomed to gaming generally navigate the room
easily when utilizing the directional keys on the
keyboard as well as the mouse. Beginners in this
kind of environment may find a classic 2D menu
preferable. All principal points are highlighted on
such a menu. Hence, users can move from one target
in the room to another simply by clicking a button
on the 2D menu. User friendliness should be
analogous to that of a classic 2D website. However,
sharp animation movement facilitates free
movement about the room.
Figure 2: Map of the 3D room (left) and 3D navigation
3.2.3 Display Information for the User
The scenario is designed to present users with
information in a certain order. First, the system
WEBIST 2009 - 5th International Conference on Web Information Systems and Technologies
displays navigation information, then each stand’s
title followed by its description. Lastly, the full
content is shown in a 2D state. The other stages are
presented in a 3D state. In the beginning, users start
in an elevator where they can select a performance
level, each with its own theme (Fig. 4). When users
arrive in the room, seven stands are depicted. In their
first position, users can only read the title of stands
(Fig. 3).
Figure 3: 3D elevator (left) and titles of 3D stands (right).
Figure 4: The 3D stand (left) and full 2D content (right).
Upon approaching a stand, the user is able to read
more information on posters providing descriptive
details about each stand (Fig. 4). If the description
interests the user, he/she can launch the transition
and transfer to the 2D web page, where the content
is very rich and dynamic (Fig 4, right).
3.2.4 Transition Fx
A transition mechanism is used in order to switch
over to the 2D page. To facilitate smooth transition
between the environments, an artifact is designed in
the 3D environment for each stand. In this sample,
we used a TV screen and paper (Fig. 5). In the 3D
environment, pictures of 2D web pages are printed
on each screen. When users activate the transition,
the camera focuses on the transition artifact, and
zooms in on its content. When the camera is in the
correct position, the 3D transition script operation is
launched. Navigation in the 3D environment system
is suspended and the 2D page is launched in the 2D
buffer. The 3D content is not in full screen and a 2D
template appears on the borders of the content.
Figure 5: Television artifact for transition and 2D template
around 3D environment.
3.2.5 Design of the 2D Page
The same template as the one around the 3D content
is used for 2D content, making the transition
smoother. To ensure functionality, we used the CMS
open source Joomla for all the 2D content. Each
page of the 2D content has its own script which is
activated when the page is fully loaded. The main
purpose of the script is to change the size of each
3.3 IIb: 2D/3D Transitions with Icon
The model is the same as IIa. We just add an icon
with the purpose of displaying the 3D world before
transition. This icon appears on each 2D page in
order to keep the user mindful of his/her position in
the 3D environment.
3.4 IIc: Maintain 3D Info in 2D
Again, the model is the same as IIa. However, on the
3D page the content is entirely in 3D. There is no
template around the 3D content as with the IIa
model. During transition, the 3D world is suspended,
and a snapshot is taken before departing the 3D
state. The snapshot appears as the background
before the 2D page takes over. Fig. 6 shows the
method for enabling some 3D visual information to
appear on the 2D page.
2D/3D WEB TRANSITIONS - Methods and Techniques
Figure 6: 3D visual information in 2D page.
3.5 III: Wrapper in 3D Content
Another method enlists the assistance of a wrapper
in the 3D environment to display the 2D content as a
texture directly in 3D. We did not choose this
approach because the technology is not suitable for
supporting graphic quality and efficient rendering.
The presented methods and techniques are designed
to improve 2D/3D web applications by offering
bridges between high quality content and rich 3D
navigation. As an example of a smooth transition
system, we suggest applying 3D to a professional
web site in order to improve product or company
marketing tasks by offering the intended user better
immersion in and interaction with the environment.
It is feasible to create a web site with high quality
content and rich interactive space by using the
aforementioned methods. Though each method has
sufficient potential to be used in real-life projects,
not all are taken into consideration due to limited
resources. The techniques which are adopted in the
systems have variables that can and should be
modified in accordance with the structure of new
systems. In the future, each method will be taken
into consideration when designing 2D/3D web
environments and the most efficient techniques
improving usability will be further explored.
Molina Massó, J. P., Vanderdonckt, J., Simarro, F. M.,
López, P. G., 2005. Towards virtualization of user
interfaces based on UsiXML. In Proc. Tenth International
Conference on 3D Web Technology. Web3D '05,
ACM, 169-178.
Risch, J.S., Rex, D.B.,Dowson, S.T., Walters, T.B., May,
R.A., Moon, B.D., 1995. The STARLIGHT
Information Visualization System. In Proc. Human
Factors and Ergonomics Society 38th Annual Meeting,
Risden, K., Czerwinski, M., Munzner, T. Cook, D., 2000.
An Initial Examination of Ease of Use for 2D and 3D
Information Visualizations of Web Content. Int. J.
Human-Computer Studies, 53, 695-714.
Cockburn, A., McKenzie, B., 2001. 3D or Not 3D?
Evaluating the Effect of the Third Dimension in a
Document Management System. In Proc. CHI'2001,
ACM, 434-441.
Robertson, G., Czerwinski, M., Larson, K., Robbins, D.,
Thiel, D., van Dantzich, M., 1998. Data Mountain:
Using Spatial Memory for Document Management. In
Proc. UIST'98, ACM, 153-162.
Ware, C., Franck, G., 1996. Evaluating Stereo and Motion
Cues for Visualizing Information Nets in Three
Dimensions. ACM Trans. Graph. 15, 2, 121-139.
WEBIST 2009 - 5th International Conference on Web Information Systems and Technologies