A web-based system for interactive visualization of scientific concepts.

Full text

Page 1

A Web-based System for Interactive Visualization of Scientific Concepts

Ker Sin Neo*
School of Electrical & Electronic
Engineering
Information Communication
Institute of Singapore

Abstract
Qingping Lin†
School of Electrical & Electronic
Engineering
Information Communication
Institute of Singapore
Robert K.L. Gay‡
School of Electrical & Electronic
Engineering
Information Communication
Institute of Singapore
Information visualization is valuable in learning abstract ideas
and new concepts. The existing technology for publishing online
papers is lacking in terms of user interaction as well as dynamic
visualization of abstract concepts. Currently, the presentation of
electronic documents does not fully exploit what the current
technology is able to offer. Often, the visualization techniques
employed are static 2-D illustrations.
We propose a web-based system that allows authors of
electronic documents to create their own interactive 3-D
visualizations. Our target audience includes researchers from
various fields. The proposed system allows researchers to share
their ideas with other users in an interactive 3D virtual
environment over the Internet.
CR Categories: I.3.7 [Computer Graphics]: Three-dimensional
Graphics and Realism – Virtual Reality; I.6.8 [Simulation and
Modeling]: Types of Simulation – Animation.
Keywords: Web-based visualization, animation, VRML,
simulation.
1. Introduction
3D animation is an effective mechanism in visualizing scientific
concepts and ideas. This mechanism, however, has not been
fully exploited in the application of online documents.
Electronic documents typically contain 2D pictures and
diagrams; we believe that the visualization techniques can be
further improved.
Thus, our objective is to create a mechanism for authors of
electronic documents to create their own 3D visualization over
the World Wide Web, using a standard browser. The most
commonly used visualization technique is 2D graphics. While
convenient to create and use, this has the disadvantage of being
static and non-interactive. Representing a 3-dimensional object,
such as the structure of a chemical bond, in a 2-dimensional
picture also makes it more difficult for a user to fully understand
the structure. A 3D environment also allows a user to navigate a
scene, and observe or manipulate an object.
*email: ps7925101a@ntu.edu.sg
†email: iqplin@ntu.edu.sg
‡email: elkgay@ntu.edu.sg
Macromedia Flash is a popular tool for creating interactive,
lightweight multimedia web content that can be viewed within
browsers with the plugin installed [James 2002]. With
ActionScript [2003], programmers can create interactive
animations. However, all animations have to be pre-recorded,
and not generated “on the fly”. Thus, it is not practical for use in
truly dynamic visualizations. Furthermore, flash visualizations
are presented in a 2D environment. In a 3D environment, objects
can be manipulated, observed, and zoomed.
There are a number of 3D editors available for purchase (3D
Studio Max [2003], Ulead [2003]) or free (Blender [2003]).
Among these, 3D Studio Max is capable of producing movie-
quality animation and excellent object rendering but it is does
not conform to any standard web formats, thus it cannot be used
for publishing web content. Exporting to other formats for
distribution on the Internet defeats the purpose of generating 3D
content as the scenes will be saved as flat 2D pictures, and
animations saved as bulky video files.
VRML, Virtual Reality Modeling Language [VRML 1997], is
a platform-independent modeling language used for creating
three-dimensional virtual worlds and objects that can be
displayed on the Internet. Using VRML, visualizations can be
created in three-dimensional space. With the introduction of
VRML 2.0, and later VRML 97, it is now possible to build
dynamic, interactive worlds where objects can be animated. In
addition, users can also interact with the objects. Using external
authoring interface (EAI), users can also interact with VRML
objects in the scene externally via JavaScript or a java applet.
Today, VRML is being used in a variety of applications
including elearning [Irene et al. 2002], and modeling [Jonghee
2002].
For better integration with the next-generation web technologies,
which is expected to rely heavily on XML, the W3C is also
working on X3D [2003]. X3D is the new open standard for 3D
content on the web and it is designed to be compatible with
existing VRML browsers and tools. Xj3D [2003] was later
started to prove that the X3D standards could be implemented.
In this paper, we propose an approach that allows users to create
and define interactive 3D animations, and the rules that govern
the behavior of objects.
VRML is chosen for this project as it is a web standard and
Plugins are readily available for major web browsers. In
addition, it does not require expensive hardware or software,
thus it can reach out to a wider audience. X3D is a new
technology with great potential. However, it is still a relatively
new technology and a suitable Plugin could not be found for our
proposed project.
In the next section, we provide a summary of the related work.
In Section 4, we describe in detail the proposed system. In
Section 5, we describe the possible applications of the proposed

Page 2

system. Our conclusions and future work are presented in
Section 6.
2. Related Work
Introducing behaviors to VRML objects increases the
effectiveness of VRML as an information visualization tool. In
order to give behaviors to objects, we need to animate them.
There are several approaches to defining animations in a system.
Various researchers have worked on animations in VRML. One
particular interesting project involves developing an animation
toolkit based on motion mapping [Myeong 2000]. This toolkit is
outstanding as it is able to map motions of one object onto
another different object.
Other animation management methods include the event-
condition-action [Dan 2000] rule that works in such a way that
when an event occurs, and a certain (set of) condition(s) is met,
a pre-defined action will be performed. The definition of
animations is highly structured and thus easily managed.
Researchers have also worked on extending the VRML
specifications to improve the animation and behavior system.
VRML++ is an extension of VRML97 [Stephan 1998].
VRML++ introduces classes and inheritance, an improved type
system, and dynamic routing. However, a pre-processor is
required to translate the VRML++ file into a standard VRML97
file so that it can be viewed on a standard VRML browser.
Creating scenes also require knowledge of the VRML syntax.
On the other hand, researchers have also been working on
developing middleware for users who are inexperienced in 3D
modeling. Such applications make it easier for non-programmers
to create virtual scenes and behaviors. The CONTIGRA
[Dachselt 2002] architecture enables the construction of
interactive 3D applications (standalone or web-based) using
declarative XML documents describing the component
implementation, its interface,
configuration and composition of 3D user interfaces and Virtual
Environments. Theoretically, any 3D format is supported as long
as the necessary transforming modules are available to transform
the XML descriptions into the desired format. However, in
practice, this is difficult to achieve as developing transform
modules for this purpose is time-consuming and tough.
as well as component
The researchers at the University of Virginia have been working
on and developed Alice [2003] [Matthew 2000] [Randy 1995], a
desktop 3D authoring system. Emphasis of Alice is on authoring
the time-based and interactive behavior of 3D objects and the
system was designed for undergraduates with no 3D graphics or
programming experience. Thus, mathematical notations are
avoided in the syntax as the target audience is typically from
non-science/engineering faculties. Alice is a standalone
application that only runs on Windows Operating Systems, and
currently does not support VRML; this makes it unsuitable for
developing 3D visualizations that can be distributed over the
World Wide Web.
In the W3C, SMIL (Synchronized Multimedia Integration
Language) [2003] is being developed as a framework for
animation support. SMIL incorporates animation onto a timeline
and provides a mechanism for composing multiple animations.
Animation functions define how an attribute of a particular
target element can be changed over time. SMIL also allows
animations to be applied collectively to attribute(s) of a
particular element over the same period of time. Currently,
SMIL presentations can be run on Internet Explorer 5.5 or later
as standard HTML files for multimedia presentations such as
images, videos, and audio clips.
3. Research Motivation
Our literature survey shows that 3D visualization is useful in
displaying complex information, structures, and concepts.
Various projects have been developed to further extend the
usefulness and robustness of current 3D standards. However,
they require a working knowledge of the technical details.
Although Alice is a useful tool for novice programmers, it
cannot be used to author and/or publish content directly on the
World Wide Web. A platform-independent solution is needed.
In addition, animation frameworks generally support basic
keyframe animations. We believe that object behaviors that are
governed by mathematical rules will produce more accurate
modeling. Thus our proposed system supports definition of
animations in terms of mathematical functions.
From the study of similar work that supports publishing 3D
content over the Internet, we conclude that a web-based
authoring tool would be very useful to content authors, without
special skills in modeling languages, in creating visualization of
scientific concepts over the World Wide Web. This is because
such facility is not available to them currently.
4. The Proposed System
The proposed system allows authors who wish to publish an
online paper to create and define interactive scenes in VRML.
This system enables authors to define their own animations and
behaviors; readers who view the resulting VRML scene can also
interact with the scene/object(s), and the objects/scene will react
according to what is defined by the author. The proposed system
does not require users to have any knowledge of the VRML
syntax; this improves the usability of the system. The focus will
be on time-based functions that define how an object changes
over time. This allows modeling to be more accurate than
traditional keyframe definition.
The system architecture of the proposed system is shown in
Figure 1.
User GUI
3D virtual scene
Animation Manager
Web-based client

Figure 1: System Architecture
The author interacts with the system via the User GUI (Java
applet). The Animation Manager module maintains the list of
animations defined by the author. An author who creates a new
animation can define how objects using these animations will
behave. Animations may be reused on multiple objects. In
addition, authors may also write simple scripts to check for
conditions that affect the behavior of objects.
XML file storing data
Internet
Server

Page 3

4.1. How Author Defines Animations
An author can define the animation parameters such as rotation
angle and translation using constants or mathematical
expressions such as cosine and tangent. These expressions must
be expressed, as a function of time and the syntax must follow
the standard expressions used in JavaScript. The author can also
script the actions that follow as a result of clicking on a
particular object. Using the simple script, an author can check
for conditions, and assign behaviors to objects.
Translation properties of an object define its displacement from
the origin in 3-dimensional space (x, y, and, z axes). When
defined as a function of time, the object’s position will move
with respect to time. For example, if the x-position of an object
is defined as 3*t, then it’s position will be change according to
the amount of time elapsed since the animation started.
Rotation definition is the same as that used in VRML. The
author has to specify the values of x, y, z first. For example if
the author defines [1 2 1], the axis of rotation will be the straight
line drawn from the origin [0 0 0] to the point [1 2 1]. The angle
of rotation is specified in radians. The coordinates and angle can
be a constant or a function of time. When declared as a function,
the author should use our list of defined syntax.
For defining an object’s color, the range of values that can be
defined for the R, G, and B values is [0,1]. Similarly, an author
can also specify it as a function of time. For example, if the R
field is defined as 0.1t, it means that the redness of the affected
object will increase as time increases. Error-checking code will
ensure that when the value exceeds 1, the value 1 is mapped
onto the VRML scene instead.
Objects that are created can be one of the following basic shapes
– sphere, box, cylinder, and cone. Depending on the type of
object to be created, the author will define the dimensions of the
object using an associated graphical user interface. Authors may
also upload their own objects. The uploaded files need to be in
.wrl format and will be presented as it is.
Animation definitions specify how the position, orientation, and
color properties of an object change over time. The author may
specify more complex behaviours by using a simple script. The
scripting syntax is designed to be generic and easy-to-learn. The
scripting syntax and script example is given in Figure 2 and 3
respectively.
IF (expressions)
{statement; statement;…}
ELSEIF (expressions)
{ statement; statement;…}
ELSE
{ statement; statement;…}
ENDIF
Figure 2: Sample scripting syntax
IF (Object1.color=’1,1,0.6’) //expression
{Object1.color=’1,0,0’;} //statement
ELSEIF (Object1.color=’0.3,0.5,0.5’)
{Object1.Color=’0,1,1’;}
ELSE
{Object3.position=’1.0,0.2,0.3’;}
ENDIF
Figure 3: Sample Scripts
In Figure 3, if an object is clicked. The color of Object1 is
checked. If it applies to the IF or ELSEIF condition, the
specified action takes place. If both conditions do not apply,
then Object3’s position will be changed to the value specified.
The definition of animation is separated from the definition of
objects in our design; this allows the animation definitions to be
reused in different objects.
4.2. Processing the Author’s Definitions
A java component processes the definitions entered by the
author and generates the associated VRML scene. There is also a
script parser for parsing the user-defined script. Thus, authors
can define the behavior and dependencies of objects in the scene
using the script, and it will be mapped onto the scene.
The web-based GUI for creating the virtual environment also
contains a tree structure that displays the objects and animations
currently created. This gives the content author a better view of
the objects and animations in that virtual world.
4.3. Constructing VRML from the definitions
When constructing the VRML scene, the java component parses
through each object definition before generating the VRML
nodes. The object’s position, orientation, and color are
initialized to the values specified by the author (position) or
system (orientation and color). When applying an animation to
an object, parser will generate the keyValues required for
playing the animation, and each keyValue will be added to the
object’s current state. For example, if the object’s current
position along the x-axis is 5, and an animation with parameter x
= cos(t) is applied to it. The keyValue at t = 0 will be cos(0) + 5
= 1 + 5 = 6.
The java component needs to generate the associated eventIns,
Interpolator, and TimeSensor nodes in order to generate the
animation. To do so, the java component needs to consult the
definitions entered by the author. The keyvalue fields of the
PositionInterpolator, OrientationInterpolator,
ColorInterpolator nodes are then updated with the calculated
keyValues. The calculation of keyValue parameters depends on
the state of the object to be animated.
and
The generated scene will be available to readers who view the
online document published by the author. When the reader
interacts with any object, for example, by clicking on the object,
the object(s) in the virtual environment will respond according
to what is defined by scripts written by the author.
5. Discussion
The proposed system was designed as a tool for visualizing
scientific concepts over the Internet. As it is interactive in
nature, users who author the animations can specify the behavior
of each object. Thus, users who view these pre-defined 3D
scenes may interact with the scene/objects and observe the effect
of the interaction. This results in a simple “simulation” scene,
where the author predefines the simulation rules.
The “simulation” enhances the effectiveness of visualization, as
readers are able to interact with the scene and observe how it
changes. This is superior to an approach that simple displays a
continuous animation of objects.
Current web-based VRML authoring systems are designed for
users with a working knowledge of the VRML syntax; many
users thus shy away from using them. While Alice is an
excellent behavior authoring system for 3D objects, it lacks

Page 4

support for web-standards (VRML) and is platform-dependent.
Thus, our proposed system creates an opportunity for authors to
create and manipulate 3D objects directly on a standard web
browser, eliminating the need to learn a new modeling language
and install additional software.
In our proposed system, the separation of Object definitions
from Animation definitions enables authors to reuse the same
Animation definition on more than one object. In addition, the
use of simple scripts can also greatly enhance the versatility of
the animation system by allowing dependencies between objects
to be defined.
Possible applications of this system include eJournal publishing
and elearning. The content publisher defines his own 3D
animations and the accompanying rules that govern how the
animations change when users interact with them. Such
visualization of complex scientific concepts help readers
understand the topics presented, and will be particularly useful
in online documents and elearning web services.
6. Conclusion & Future Work
In this paper, we proposed a system that allows authors of
electronic documents to define and create interactive animated
3D scenes. The 3D scenes can be used to visualize the ideas
authors want to present. This approach can also be implemented
in e-learning applications, where visualization is a particularly
useful in improving understanding.
In our future work, we will look into the possibility of importing
complex objects into the system. We will also study how
animations can be applied to various portions of objects with
unknown structures. The syntax will also be further expanded to
allow the definition of more complex simulation rules.
7. References
3D Studio Max. http://www.discreet.com/products/3dsmax/
Actionscript.org Macromedia Flash Resources and Tutorials.
http://www.actionscripts.org/
Alice – Learn to Program Interactive 3D Graphics. http://www.alice.org/
Blender 3D. http://www.blender3d.com/
DACHSELT, R.; HINZ, M.; MEINER, K.. “CONTIGRA: An XML-
Based Architecture for Component-Oriented 3D Applications”.
Proceedings of the ACM Web3D 2002 Symposium, Tempe (USA), 24.-
28.
DAN VODISLAV, MICHALIS VAZIRGIANNIS. “Structured
Interactive Animation for Multimedia Documents”. IEEE International
Symposium on Visual Languages (VL’00). pp95-96.

IRENE LUQUE RUIZ, ENRIQUE LÓPEZ ESPINOSA, GONZALO
CERRUELA GARCÍA, MIGUEL ÁNGEL GÓMEZ-NIETO.
“Computer-Assisted Learning of Chemical Experiments through a 3D
Virtual Lab”. International Conference on Computational Science (1)
2002, pp704-712.
JAMES CODLING. “Using Macromedia Flash to Produce Rich
Multimedia Content on the World Wide Web (v.1.1)”. Department of
Electronics and Computer Science, University of Southampton.
December 13th, 2002. Unpublished.
JONGHEE HAN, JAEWOO KIM, JONG HYO KIM, KWANG SUK
PARK. “Three-Dimensional Visualization of Human Vocal Organ on
the Web”. Journal of Digital Imaging, March 20th, 2002, pp264-266.
MATTHEW CONWAY, STEVE AUDIA, TOMMY BURNETTE,
DENNIS COSGROVE, KEVIN CHRISTIANSEN, ROB DELINE, JIM
DURBIN, RICH GOSSWEILER, SHUICHI KOGA, CHRIS LONG,
BETH MALLORY, STEVE MIALE, KRISTEN MONKAITIS, JAMES
PATTEN, JEFF PIERCE, JOE SHOCHET, DAVID STAACK, BRIAN
STEARNS, RICHARD STOAKLEY, CHRIS STURGILL, JOHN
VIEGA, JEFF WHITE, GEORGE WILLIAMS, & RANDY PAUSCH.
“Alice: Lessons Learned from Building a 3D System for Novices”.
Proceedings of CHI, 2000, pp. 486-493.
MYEONG WON LEE, MIN-GEUN LEE. “An Animation Toolkit Based
on Motion Mapping”. Computer Graphics International (CGI’00), June
19-24, 2000, pp11-18.
RANDY PAUSCH (HEAD), TOMMY BURNETTE, A. C.
CAPEHART, MATTHEW CONWAY, DENNIS COSGROVE, ROB
DELINE, JIM DURBIN, RICH GOSSWEILER, SHUICHI KOGA,
JEFF WHITE. “Alice: Rapid Prototyping for Virtual Reality”. IEEE
Computer Graphics and Applications, May 1995, pp. 8-11.
W3C. “Synchronized Multimedia Integration Language (SMIL 2.0)”.
http://www.w3.org/TR/smil20/
STEPHAN DIEHL. “Object-Oriented Animations with VRML++”.
Proceedings of Virtual Environment 98 Conference and 4th
Eurographics Workshop, Stuttgart, Germany, 1998.
Ulead COOL 3D. http://www.ulead.com/cool3d/runme.htm
The VRML Consortium. “The Virtual Reality Modeling Language”.
ISO/IEC DIS 14772-1. 1997.
http://www.vrml.org/Specifications/VRML97
The Web3D Consortium. “Extensible 3D (X3D™) Graphics”.
http://www.web3d.org/x3d.html
Xj3D Open Source VRML/X3D Toolkit.
http://www.web3d.org/TaskGroups/source/xj3d.html