NAVIGATION AND INTERACTION IN URBAN ENVIRONMENTS

USING WEBGL

Mar´ıa Dolores Robles-Ortega, Lidia Ortega, Francisco R. Feito and Manuel J. Gonz´alez

Department of Computer Science, University of Ja´en, Paraje Las Lagunillas, s/n 23071 Ja´en, Spain

Keywords:

WebGL, X3DOM, 3D Urban Scenes, X3D, Web System.

Abstract:

The process of rendering and interacting with large scenes in web systems is still an open problem in 3D urban

environments. In this paper we propose a prototype to visualize a city model in a client-server architecture

using open-source technologies like WebGL and X3DOM. Moreover, free navigation around the scene is

allowed and users are able to obtain additional information when interacting with buildings and street furniture.

To achieve this objective, a MySQL geodatabase has been designed to store both geometric and non-geometric

urban information. Therefore, the extra data about the urban elements is obtained through queries in the

database. The communication process between MySQL and the X3D model is performed by Ajax.

1 INTRODUCTION

3D City Modeling (3DCM) is a research area of great

interest with a wide range of applications such as ur-

ban planning, architecture, emergency management,

or engineering and construction. The accessibility

of these tools through the Internet would be a desir-

able option. However, there are some problems which

should be solved before achieving this objective.

One of the biggest challenges in this area is the

processing of large scenes. Thus, a city model is

usually a heavy data set to be transmitted in a client-

server architecture, especially when it has been gener-

ated using real data sources like Geographical Infor-

mation Systems (GISs). As a result, a simpliﬁcation

process is needed in order to reduce the scene size and

to improve the performance. A LOD (Level of Detail)

technique could be used for this purpose or even an

occlusion culling method.

Another signiﬁcant feature is providing free navi-

gation along the scene because unguided walkthrough

is the natural way that a pedestrian uses to move

around the scene. Nevertheless, due to the quantity

of information to manage, a free navigation system is

a complex process which should be carefully studied.

In addition, the real-time interaction with the

scene elements to obtain additional information is

an essential requirement in 3DCM. These extra data

could be stored in the scene itself or in a database.

The second option is more ﬂexible because the infor-

mation can be changed without modifying the urban

model.

Evidently, the language used to implement the

system should fulﬁll all the requirements described

above. Nowadays there are some approaches, like the

ISO standard language X3D (W3C, 2004) for render-

ing 3D scenes in the Web, but they need the installa-

tion of speciﬁc plugins. To avoid this drawback, some

technologies like WebGL and X3DOM can be used.

These tools allow the visualization of 3D models in a

browser without any additional plugin.

WebGL is a new standard for accelerated 3D

graphics rendering in the Web that complementsother

technologies in the future HTML5 standard (Marrin,

2011). X3DOM is a new technology (Behr et al.,

2009) which allows the direct integration of the X3D

scene tree into the HTML5 DOM (Document Ob-

ject Model), and the direct renderization in the web

browser of an interactive, real time representation of

the scene in the HTML.

In this paper we propose a Web system for ur-

ban navigation and interaction implemented using

X3DOM and Ajax. We also deﬁne and create a geo-

database which stores both geometric and thematic

information about the scene elements. Furthermore,

users can move freely around this virtual environment

and obtain additional information when interacting

with the buildings and the rest of the scene elements

simply by clicking on them.

493

Dolores Robles-Ortega M., Ortega L., R. Feito F. and J. González M..

NAVIGATION AND INTERACTION IN URBAN ENVIRONMENTS USING WEBGL.

DOI: 10.5220/0003822804930496

In Proceedings of the International Conference on Computer Graphics Theory and Applications (GRAPP-2012), pages 493-496

ISBN: 978-989-8565-02-0

 2012 SCITEPRESS (Science and Technology Publications, Lda.)

2 CREATING THE APPLICATION

Next we describe the features incorporated to our web

prototype system for managing and visualizing urban

information. We explain the entities of the database

and the process for generating their associated X3D

ﬁles.

2.1 Description

Our system is able to store and manage 3D data not

only for visualization, but also for navigation and in-

teraction. We focus our approach on realistic visu-

alization, geometry minimization in order to be sup-

ported by a web-based system, free navigation around

the scene, and interaction with the buildings to obtain

additional information about them.

All the information stores in the database is ob-

tained from a 2D GIS. A java module using DAO

(Data Access Object) pattern has been used like in-

termediate tool between the 2D GIS and the database.

Another java function creates the X3D building mod-

els from the footprint geometry and its height, which

are obtained through queries in the database using the

JDBC driver. All the resulting X3D building ﬁles are

stored in the database in order to be reused for gener-

ating the global urban model, which will be render-

ized in the web page. Users will be able to move

freely around the scene and obtain additional build-

ing data like, for example, a brief description of the

establishment or the opening hours. The process for

obtaining this information is explained in Section 3.

Next we detail the geodatabase features.

2.2 Georeferenced Database

The database for our application should store both ge-

ometric and non-geometric information about the ur-

ban entities. Among the different options, MySQL

has been chosen because it is open-source and allows

full connectivity with PHP and other web technolo-

gies. Next we describe the most important tables in

the repository.

In the 2D GIS system used as input data, the

geometry of the buildings is stored as ﬂat polygons

representing the footprint. This geometry is saved

afterwards in the database using the Polygon ﬁeld.

The height is also stored and used to establish the

building height. With regards to the non-geometric

data, the available information is relative to the type

of services offered in the building, opening hours,

etc. Thanks to this table structure, both geometrical

and non-geometricalqueries are combined together to

http://www.mysql.com. Accessed October 2011.

Street_Furniture

Code

Description

URL_File

Position

Address

Street_Lamp

No. light bulbs

Type light bulbs

Age

Date last revision

Bus_Stop

Timetable

Bus routes

Another_Street_Furniture

Any additional attribute no

included in the

Street_Furniture table

Figure 1: Database schema of street furniture entities.

provide queries such as the nearest buildings from a

point or the eldest buildings of the city.

Street furniture is another important element in ur-

ban environments. However, there are many different

types of street furniture which are dealt such as Fig-

ure 1 shows. As can be observed, Street

Furniture ta-

ble includes the common features for all sort of street

furniture: an unique identiﬁcation code, a brief de-

scription, the URL for the X3D ﬁle, a point which

represents the GPS position in the city, and the street

address. This design manages all those different char-

acteristics associated to each type of furniture and al-

lows that the database functionality can be easily ex-

tended. At the moment, three tables have been in-

cluded: Bus Stop, Street Lamp and Letter Box, but

any other could be added in the database.

2.3 Generating the X3D Scene

A manual modeling process of all the buildings in a

real urban environment is an impracticable task due to

the dimension of large cities. For this reason, we pro-

pose a method for automatic creation of X3D urban

models, which uses as input data the footprint poly-

gon and its associated height. Thus, the footprints be-

come 2.5D objects whose height is determined by the

value stored in the database. In particular, we have

implemented a Java module to create all the build-

ing faces in the X3D model using the IndexedFaceSet

node.

Nevertheless, the size of the resulting scene is still

very heavy and cause memory problems for being

renderized in a WebGL browser. Hence, an approach

to reduce the model complexity is needed. Tech-

niques like impostors (And´ujar et al., 2010), view-

dependent simpliﬁcation(Chen et al., 2008) or level-

of-detail (LODs) (De Floriani et al., 2005) can be used

to achieve this objective.

In our application we manage level-of-detail since

GRAPP 2012 - International Conference on Computer Graphics Theory and Applications

494

X3D language directly supports this approach and we

want to evaluate their performance in X3DOM. The

LOD node allows that a single model could have mul-

tiple representations including high-resolution detail

(when users are close) and adequate lower-resolution

detail (when seen from a distance): LOD provides an

important capability for making overall performance

scalable when many scenes are composed together.

Speciﬁcally, the ﬁnal scene has three levels of de-

tail: buildings, block of buildings and non-visible.

The ﬁrst one is the most elaborated model, being ac-

cessible when users are located ﬁve hundred meters

away. If the distance is more than 500 hundred me-

ters and less than 1000, then the block of buildings

are visible. All buildings and blocks situated further

away are not renderized. Therefore, as only the geom-

etry of the nearest elements are loaded in the scene,

the memory usage is considerably reduced.

Once the procedurefor automatic modeling the ur-

ban geometry has been explained, next we describe

the interaction process with the buildings and the

street furniture.

3 INTERACTION WITH URBAN

ELEMENTS USING X3DOM

Integrating web 3D applications and geodatabases for

real time interaction is an important challenge in 3D

urban information systems. In this paper we propose

a prototype based on a client-server architecture in

which the client device visualizes and interacts in an

urban virtual world, while the server provides the ge-

ometric and thematic information. The application

has been implemented using open-source technolo-

gies like WebGL, X3DOM, MySQL and Ajax. Next

we describe the process for retrieving and visualizing

the scene information (urban geometry and street fur-

niture).

In our system, certain urban elements like build-

ings and street furniture are sensible to users’ inter-

action by generating a database query. For instance,

if a building is clicked, a window in the client side

is shown with a brief description in a straightforward

way. In the case of street furniture, some related infor-

mation is obtained, for instance the timetable of letter

boxes.

To implement this functionality, a function for

controlling events is needed. Unlike geometry, events

management in X3DOM is usually different from

X3D. For example, clicking event control in X3D re-

quires using a special type of node named touch sen-

sor. This node generates the clicking event, which

will be sent to other nodes via ROUTE statements.

Thus, the output ﬁeld of a touch sensor can be con-

nected with the input ﬁeld of another node (a script,

generally). In X3DOM touch sensors can be replaced

by the onclick HTML events.

The “click” action on sensible objects in the scene

generates a query in the geodatabase. However for se-

curity reasons, JavaScript functions are not allowed to

directly access to the database. To solve this problem,

we use Ajax technology and PHP code as an inter-

mediate mechanism to execute the queries. Ajax is a

group of technologies used on the client-side to create

interactive web applications. It can retrieve data from

the server asynchronously in the background, making

possible an increase in interactive or dynamic inter-

faces on web pages. In our application, Ajax retrieves

the additional information about the buildings or the

street furniture using PHP code.

Finally, when all the processes described above

are ﬁnished and the information is retrieved, the ap-

plication shows the results. For this purpose, we use

the JQuery library

, compatible with any browser.

4 RESULTS

Our prototype has been tested using Firefox and

Google Chrome browsers. In both cases users can

move freely around the 3D model of the city and ob-

tain additional information about certain urban urban

elements, as depicted in Figure 2. In this example, an

info window is shown on the client device screen af-

ter clicking on the window. This dialog includes the

opening hours of the shops located in the block.

As can be seen in Figures 3 and 4, we have ob-

tained a realistic city model in which both pedestrian

and ﬂight navigation are allowed. All textures in the

scene are real photographs of the city of Ja´en. Thanks

to the use of LODs, the loading memory is reduced

because the geometry is in fact very simple and more

complex models are downloaded only when user is

close to them. Therefore, the time response and the

interaction with the scene is improved.

5 CONCLUSIONS AND FUTURE

WORK

In this paper we have described a prototype of a web-

based application to renderize an urban model using

open-source technologies like WebGL and X3DOM.

This achievement is obtained by creating a geo-

database which stores the main geometric and non-

http://jquery.com. Accessed October 2011.

NAVIGATION AND INTERACTION IN URBAN ENVIRONMENTS USING WEBGL

495

Some extra

information is

obtained

User clicks on a

building

Figure 2: Obtaining additional information about opening

hours.

Figure 3: Screenshot of the application.

geometric features about different city elements. Our

application is interactive because users can obtain ad-

ditional information about the entities in the scene

simply by clicking on them during the free navigation

process.

Our system can be used in many ﬁelds of appli-

cations such as tourist portals, engineering and con-

struction applications, etc. Furthermore, interaction

can be easily extended to any other entities simply by

modifying the database or adding touch sensors con-

trol in the 3D models.

We have used LODs nodes to reduce the loading

Figure 4: Screenshot of the application.

data in the client side and the response time. Thanks

to them, only the nearest nodes are renderized. In fu-

ture work an occlusion culling method could be used

to determine the exact visible set from a speciﬁc po-

sition.

ACKNOWLEDGEMENTS

This work has been partially supported by the Conse-

jer´ıa de Innovaci´on, Ciencia y Empresa of the Junta

de Andaluc´ıa and the European Union (via ERDF

funds) through the research project P07-TIC-02773,

by the Ministerio de Ciencia e Innovacin and the Eu-

ropean Union (via ERDF funds) through the research

project TIN2011-25259 and by the University of Ja´en

through the research project UJA2010/13/08 spon-

sored by Caja Rural de Ja´en.

REFERENCES

And´ujar, C., Brunet, P., Chica, A., and Navazo, I. (2010).

Visualization of large-scale urban models through

multi-level relief impostors. Computer Graphics Fo-

rum, 29(8):2456–2468.

Behr, J., Eschler, P., Jung, Y., and Z¨ollner, M. (2009).

X3dom: a dom-based html5/x3d integration model.

In Proceedings of the 14th International Conference

on 3D Web Technology, Web3D ’09, pages 127–135,

New York, NY, USA. ACM.

Chen, H., Zhan, S., Gao, Y., and Zhang, W. (2008). View-

dependent out-of-core rendering of large-scale virtual

environments with continuous hierarchical levels of

detail. In Computer Science and Information Tech-

nology, 2008. ICCSIT ’08. International Conference

on, pages 313 –321.

De Floriani, L., Kobbelt, L., and Puppo, E. (2005). A sur-

vey on data structures for level-of-detail models. In

Advances in multiresolution for geometric modelling,

Mathematics and visualization, pages 49–74.

Marrin, C. (2011). WebGL Speciﬁcation. Khronos WebGL

Working Group.

W3C (2004). Iso/iec 19775:2004 - extensible 3d (x3d).

GRAPP 2012 - International Conference on Computer Graphics Theory and Applications

496