2D/3D WEB TRANSITIONS

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.

1 INTRODUCTION

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

designers?

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

realized

Video presentation: http://www.3de.fr/ihm/index.html

294

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

Table 1: Methods and techniques supporting 2D/3D transitions: Planned in white; partly realized in light grey, realized in

grey.

2 RELATED WORK

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

environments.

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.

3 METHOD AND TECHNIQUES

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

technology

• User friendliness

• More playful interactions

• Better immersion

• Second life

• Google Lively

• Not stable for professional

tasks

• Not compatible with

technologies like Flash and

Joomla

Method II

Smooth transition between 2D

content and 3D navigation

• 3D navigation richness

• 2D content richness

• Virtools used to build the 3D

environment

• 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

shown

at a time

Method II, Technique a

Same template is used for 2D

and 3D content for system

consistency

• System consistency (user feels

that he remains in the same

system)

• Smoothness of transition

• Template displayed in both

systems (position and size

remain the same in the

CSS)

• 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

environment)

• 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

environment

• 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

screen

• Picture taken in 3D world

used as background for 2D

content

• 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

capacity

• 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

295

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

size.

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

(right).

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

296

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

buffer.

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

Content

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

297

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.

4 DISCUSSION AND OUTLOOK

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.

REFERENCES

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,

16-20.

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

298