Download WEB3D2011-129-zollo

See discussions, stats, and author profiles for this publication at: https://www.researchgate.net/publication/221010943
X3DMMS: an X3DOM tool for molecular and material sciences
Conference Paper · June 2011
DOI: 10.1145/2010425.2010448 · Source: DBLP
CITATIONS
READS
9
859
4 authors:
Fabiana Zollo
Luca Caprini
Ca' Foscari University of Venice
University of Perugia
108 PUBLICATIONS 9,587 CITATIONS
3 PUBLICATIONS 21 CITATIONS
SEE PROFILE
SEE PROFILE
Osvaldo Gervasi
Alessandro Costantini
University of Perugia
INFN - Istituto Nazionale di Fisica Nucleare
265 PUBLICATIONS 1,805 CITATIONS
78 PUBLICATIONS 639 CITATIONS
SEE PROFILE
All content following this page was uploaded by Osvaldo Gervasi on 03 June 2014.
The user has requested enhancement of the downloaded file.
SEE PROFILE
X3DMMS: an X3DOM Tool for Molecular and Material Sciences
Fabiana Zollo∗
Luca Caprini†
Osvaldo Gervasi‡
Alessandro Costantini§
Department of Mathematics and Computer Science, University of Perugia
Via Vanvitelli, 1 - 06123 Perugia (Italy)
Abstract
2004a][Gervasi et al. 2004b][Gervasi et al. 2006] by our research
group, and we exploited several technologies. There are various
approaches for enabling the virtual reality through the web, and a
plugin software is usually required to enable the web browser to
render the source file describing the virtual world. There are severe
issues related to the portability of such applications on different
plugins, web browsers and operating systems. The X3DOM technology[Eschler et al. 2009], based on HTML5 specification, allows
the direct integration of the X3D scene tree into the HTML5 DOM,
enabling to directly render in the web browser an interactive, real
time representation of the scene in the HTML DOM. However, at
the time of writing, Chrome web browser is directly implementing such feature, as well as Mozilla Firefox; Safari still requires a
nightly build version (WebKit), while Opera is working on its implementation and only supplies a preview to Windows operating
systems, and Internet Explorer will support such feature. In fact, in
order to support the X3DOM architecture, the web browser needs
to enable the <canvas> HTML5 element and the rendering via
the WebGL library. The advantage of unifying the access to the implemented platform, clearing the need of additional software, and
the incompatibility between operating systems is indeed invaluable.
We are presenting a virtual reality environment based on X3DOM
technologies and aimed for enabling a researcher in the Molecular
and Matter Sciences to set up the initial conditions of a simulation to be performed using the Dl-Poly software, through a virtual
environment implemented in X3D. After having completed the definition of the molecular system to be studied in a very intuitive and
user friendly way, the user can write out the Dl-Poly input files. In
this way the crucial phase of the initial set up of the simulation is
simplified and can be performed in a short time.
Even if some technological drawbacks have been experienced in
the current X3DOM implementation, we are confident that this approach, which definitely solves the ”traditional” issues related to
the compatibility among different web browser (plugins) and operating systems, represents an highway for the diffusion of X3D
technologies in several application fields.
CR Categories:
I.3.7 [Computer Graphics]: Three-Dimensional Graphics and
Realism—Virtual Reality H.5.3 [Information Interfaces and Presentation]: Group and Organization Interfaces— Web-based Interaction J.2 [Computer Applications]: Physical Sciences and
Engineering—Chemistry
In the present paper we discuss the results of the work done adopting X3DOM and Ajax technologies [Holdener 2008] to implement
a web interface in which the researcher is able to define the operating conditions of the simulation, manipulating atoms and molecules
in a highly intuitive and easy way. The web application, named
X3DMMS, is devoted to the 3D visualization and manipulation of
molecular systems. The user, after having loaded the representation of the initial molecule in a specific format file, the Protein Data
Bank (PDB), is enabled to modify the system adding or removing
atoms and bonds, or replacing atoms with functional groups.
Keywords: X3D, X3DOM, Molecular Simulation, Dl-Poly
1
Introduction
The molecular and matter sciences are using computer simulations
to study the molecular systems’ properties and to model new materials. Several industrial branches of the modern society strongly
rely on such studies, in order to be more competitive and innovative. Our work is aimed at providing a virtual reality environment
implemented using the ISO standard language X3D[Brutzman and
Daly 2007], in which the researcher is able to define the initial configuration parameters of the interaction of complex (i.e.: biological) molecular systems, producing in output the initial configuration files to be read in input by the molecular simulation program.
We have implemented this interface for the Dl-Poly molecular simulation package; however, the work can be easily extended to other
molecular simulation tools.
The aim of the present paper is also devoted to highlight some
present X3DOM technology limitations, in order to stimulate the
improvement of a very promising platform, that represents a clear
progress towards the application’s portability across browsers and
operating systems. We are confident that X3DOM will increase its
popularity with the full adoption of HTML5 by the most popular
Internet browsers.
The paper is structured as following: in Section 2 an overview of
the work done before adopting an X3DOM approach is presented;
in Section 3 X3DMMS is presented in terms of architecture and
features, while in Section 4 some conclusions and the future work
are sketched.
The activity related to the implementation of such a virtual reality application was started several years ago[Gervasi et al.
2
∗ e-mail: [email protected]
† e-mail:[email protected]
Related Work
The availability of a virtual world related to the molecular environment is important to allow the manipulation of the molecular
structures in term of number and types of atoms and molecules
available in the considered system for analyzing its properties and
studying new materials. Several studies and solutions were made in
the Web3D community to help the Computational Chemistry community to use a suitable software solution, mainly devoted to implement a visualization environment allowing the representation of
complex molecular structures starting from files describing the system in terms of chemical and physical properties.
‡ [email protected]
§ e-mail:[email protected]
Copyright © 2011 by the Association for Computing Machinery, Inc.
Permission to make digital or hard copies of part or all of this work for personal or
classroom use is granted without fee provided that copies are not made or distributed
for commercial advantage and that copies bear this notice and the full citation on the
first page. Copyrights for components of this work owned by others than ACM must be
honored. Abstracting with credit is permitted. To copy otherwise, to republish, to post on
servers, or to redistribute to lists, requires prior specific permission and/or a fee.
Request permissions from Permissions Dept, ACM Inc., fax +1 (212) 869-0481 or e-mail
[email protected].
I3D 2011, Paris, France, June 20 – 22, 2011.
© 2011 ACM 978-1-4503-0774-1/11/0006 $10.00
129
Nicholas Polys[Polys 2003] implemented in 2003 an important
Stylesheet transformation from a Chemistry Markup Language
(CML) [CML ] description of a molecule to an X3D/VRML97 Web
3D representation of it.
minimum size and maximum transparency are inserted in the scene.
If the user will add an atom or a bond to the scene, the properties (color, size, position and transparency) of an existing sphere
or cylinder will be modified accordingly. On the contrary, when
the user wants to remove an atom or a bond, information about
size and transparency will be modified, in order to make it invisible and available for a future reutilization. Anyway, this kind of
solution presents many drawbacks, because the number of atoms
and bonds is limited to the number of objects defined during the
initial phase; moreover, file size is large even if we work with a
small-sized molecule.
Feng Liu and co-workers[Liu et al. 2005] implemented a powerful environment for visualizing chemical and biological structures
from PDB representations, converted into a CML representation
and then represented as shaded X3D/VRML virtual environment.
R. Andrew Davis and co-workers developed a system[Davies et al.
2005] [Davies et al. 2009] devoted to the visualization of molecular quantum dynamics properties using haptic devices. Their work
contributed to an efficient representation of the molecular properties through haptic perception.
2.2
We overcame the technical problems described in the previous
section adopting a Web based approach. Before introducing the
X3DOM solution presented in this paper, we structure our web
application using an X3D plugin for the web browser and PHP,
Ajax[Ullman 2007] and Ajax3D to allow the dynamic modification
of the represented molecular virtual world.
M. Callieri and co-workers[Callieri et al. 2010] recently implemented a system to visualize the physical and chemical properties
of complex biological systems on the Web taking advantage of the
powerful features of WebGL API and SpiderGL library.
Our work introduces the innovative approach of using the visualization of complex molecular systems in an X3D virtual world
starting from a PDB description or an internal representation of the
considered molecular dynamics package, as the initial phase of the
set-up of the initial conditions of the molecular simulation to be
performed. Even if the researchers are able to define such initial
conditions configuring by hand the input files, it is much easier and
effective to use our interactive Web3D based approach.
However Ajax3D, proposed by Tony Parisi in 2006 in a BOF Session at SIGGRAPH 2006 entitled ”AJAX3D: The Open Platform
for Rich 3D Web Applications” [Siggraph2006 ], and presented in
tutorials at the Web3D 2007 Conference in Perugia[Web3D2007 ],
seems to be a dead proposal at the time of writing.
2.2.1
The present implementation is based on Dl-Poly [Dl-Poly ] and
we’re planning to also adapt the system to other molecular simulation packages, such as Gromacs [Gromacs ].
Ajax3D implementation
The Ajax3D implementation took advantage of the Ajax functionalities complemented with X3D principles. Ajax3D combined the
power of X3D with Ajax simplicity, employing X3D SAI to control
3D world through JavaScript.
After having tuned the composition of the molecular system, it is
really useful for the researcher to obtain in a file the relevant numerical information and characteristics of the system, ready to be
used as input of the considered molecular simulation software. We
made the first attempt using the Xj3D player [Xj3D ] and Java as
scripting language to prepare the input files CONFIG and FIELD
of the popular Dl-Poly molecular simulation package [Gervasi et al.
2006]. Since we faced with some technical drawbacks, we moved
to a dynamic web application, based on Ajax3D [Ajax3D ]. The
named approaches are described in detail in the following sections.
2.1
Web approach
Ajax3D was based on the integration of two programming models:
W3C DOM and ISO SAI. DOM defines a model for the interaction
of a program with a web document; SAI allows the program to
control the X3D scene. The JavaScript code running on the web
page can simultaneously interact with DOM and SAI, in order to
integrate traditional elements of a 2D web page with 3D world.
DOM and SAI are independent from any programming language;
however, our implementation used JavaScript.
Java implementation
The Java standalone implementation consists of two main parts: the
first one allows user to create a X3D scene starting from a file in
PDB or MOL21 formats, or from Dl-Poly input files CONFIG and
FIELD; the second one allows to view and manipulate the represented molecule. The application is entirely Java based and exploits
SAI to interact with X3D scene. The developers faced with some
limitations noticed during the development: the difficulties of writing files from the X3D script and the impossibility of dynamically
adding new atoms or molecules to the X3D scene.
In the case of the first problem, developers bypassed for the problem
visualizing CONFIG and FIELD files in two Java windows, forcing
user to copy the content on two text files; therefore, if we want to
save the new scene, we should create the .x3d file starting from the
two text files above mentioned.
Figure 1: Interface of the application based on Ajax3D
A very important DOM object for Ajax3D programmers was
XMLHttpRequest, that allowed a web application to make requests
to the server without updating the page content. This functionality was fundamental for the creation of a dynamic application, and
fulfilled user’s expectations.
The second problem were overcome adopting the following brutal solution: at the initial creation of the scene, a large number of
spheres (representing atoms) and cylinders (representing bonds) of
1 MOL2 is a free format molecular representation, used by the program
SYBIL to represent a molecule. The popular FLOSS package OpenBabel
allows the conversion among a large set of molecular representations.
SAI has a similar feature,createX3DFromURL, a method of the X3D
”browser” object that loads X3D content on demand.
130
This implementation allowed user to dynamically create a molecular structure, starting from a list of atoms or adding a molecule
from a file; furthermore, the user could add, remove, substitute and
translate an atom in the scene. To add an atom to the scene, user
could select the chosen type from the pull-down menu.
3.2.1
In this section it is possible to view the information about the loaded
system, stored in the PDB file, and if applicable, update it.
3.2.2
Figure 1 shows the application interface.
This type of implementation represented a good solution, but it still
presented some disadvantages. Firstly, the selection of an element
in the scene was only achievable through the pull down menu, because a selection by means of mouse click would have involved a
too complex management of the events. In fact, since the creation
of the scene was dynamic, it would have been necessary to add to
every object some sensors directly connected to an external list of
the eventListener. Unfortunately, this kind of solution was only
compatible with Windows Operating Systems, because of the lack
of necessary plugins.
X3DMMS
3.1
X3DMMS architecture
View tab
In this tab the user can have access to the information about the
molecule in the scene. When an atom is selected, its information
becomes visible in the related fields in the upper part of the tab; here
we can find: the ID of the last selected atom, its symbol and name,
the present coordinates in the scene, the charge (in case of an ion)
and the attribute frozen. Similarly, information about last selected
bond is available in the lower part, identifying which atoms are
involved in the bond. It is possible to deselect all active selections
related to atoms and bonds by means of the corresponding buttons.
First of all, the Ajax3D application needed the creation of an HTML
page that incorporates X3D contents. Afterwards, it was possible to
manage the objects of the scene, recovering or changing properties,
sending or receiving events.
3
System tab
3.2.3
Edit tab
This section allows the user to manipulate the molecule, modifying
the atoms and bonds of the scene. In the upper part, the user can
modify the coordinates of last selected atom, using the sliders on
the right side; however, one can reset the coordinates to the original
values by clicking on the available button. In the lower part of the
page, the user has the possibility to add an atom to the scene, specifying its information; moreover, when two atoms in the scene are
selected, it is possible to add a bond. Finally, the user can remove
one or more atom(s) or bond(s) from the scene, once they have been
selected.
Plugins based models internally include in their own plugins all the
operations of visualization, interaction, communication and distribution. On the contrary, X3DOM is based on a new integration
model that avoids the utilization of additional plugins or system interfaces and results accessible through DOM.
X3DOM proposes a more abstract scene-graph level, that is directly
connected to DOM elements. The scene-graph is a visualization
data structure, well built and able to efficiently manage wide data
sets; moreover, the most important thing is that the scene-graph allows developer to define the scene in a declarative way. X3DOM
constitutes a simpler and integrate solution, based on X3D and
HTML5.
X3DMMS is a web application that allows the import of molecular
files in PDB format and their visualization, enabling changes and
potential save, and supplying user for all the necessary tools for the
creation of the three Dl-Poly input files.
3.2.4
Save/Export tab
This is the last section of the panel and allows to perform the save
and download operations: the first writes out the present system
configuration in a PDB layout on the web server storage, while the
second allows the local download on the client side. Moreover, in
this tab the user can perform the creation of the related Dl-Poly
input files.
3.3
X3D scene manipulation
The X3D scene appears to be empty at the beginning. Actually, it
contains a <transform> node, whose id is root, representing the
root of our scene-graph.
Listing 1: X3DOM Scene
3.2
X3DMMS features
1
<head>
[..]
<script type="text/javascript" src="
content/sources/x3dom-v1.0.js"></
script>
2
In this section we’ll linger over the application features, focusing
on the access and the manipulation of the X3D scene. At the beginning, interface is formed by two main parts: the right section and
the left one. The left part constitutes the X3DOM scene that appears empty by now; the right one allows user to interact with web
page, selecting the molecule to import and view. The black window
contains an X3D scene that has two internal nodes: a background
node, which defines the scene background, and a transform node;
the root of the scene is associated to the latter.
In this phase, it is possibile to import a molecule in PDB format
file, or choose among the ones available, that’s those with which
we worked previously. Once selected the file to load, we can view
the molecule in the black window. Figure 2 shows the molecule
Apt.pdb interpreted and drawn on the scene.
3
4
</head>
5
6
7
8
9
10
11
12
The right section shows the information about the molecule. It is
formed by four tabs; each one allows user to make different operations.
<x3d showStat="false" showLog="false" width="700px
" height="640px">
<scene>
<background DEF=’bgnd’
transparency=’0’ skyColor=’0 0
0’ ></background>
<transform id=’root’>
</transform>
</scene>
</x3d>
Upon loading the HTML page, the function shown in listing 1 initializes many variables; particularly, the variable root is initialized
131
Figure 2: Visualization of Apt.pdb
with the <transform> node of the X3D scene. This is one of the
main advantages of X3DOM, that is the possibility to access X3D
elements of the scene as DOM elements of the HTML page.
var newAppearance = document.createElement
("Appearance");
newAppearance.appendChild(newMaterial);
8
9
10
After loading and interpreting the PDB file, the application starts
rendering atoms and bonds on the scene.
var newSphere = document.createElement("
Sphere");
newSphere.setAttribute("id", "atom"+num);
newSphere.setAttribute("onclick", "
clickedAtom(\""+num+"\")");
11
12
For each atom contained in the PDB file, the application creates a
reference to a JavaScript data structure, containing the information
about atoms and their representation in X3D system. One by one,
atoms are added to the scene through the function shown in listing
2.
13
14
var newShape = document.createElement("
Shape");
newShape.setAttribute("id", "aShp"+num);
newShape.appendChild(newAppearance);
newShape.appendChild(newSphere);
15
16
Listing 2: addParsedAtom function
17
18
1
2
3
4
19
function addParsedAtom(id){
root.appendChild(createAtom(id))
};
var newTransform = document.createElement
("Transform");
newTransform.setAttribute("id", "aTsf"+num
);
newTransform.setAttribute("translation",
system.atomRef[num].coord.x+" "+system
.atomRef[num].coord.y+" "+system.
atomRef[num].coord.z);
newTransform.setAttribute("scale", system.
atomRef[num].radius+" "+system.atomRef
[num].radius+" "+system.atomRef[num].
radius);
newTransform.appendChild(newShape);
20
21
22
Listing 3: createAtom function
1
2
3
4
5
6
function createAtom(num){
var newMaterial = document.createElement("
Material");
newMaterial.setAttribute("id", "aMat"+num)
;
newMaterial.setAttribute("emissiveColor",
"0 0 0");
newMaterial.setAttribute("diffuseColor",
system.atomRef[num].color.R+" "+system
.atomRef[num].color.G+" "+system.
atomRef[num].color.B);
23
24
25
return newTransform;
26
27
};
Notice that the DOM function appendChild used in row 2 of listing
2 gets as parameter the new child node to add to the object to which
7
132
it refers (in this case root). The argument of appendChild is created
from function createAtom, shown in listing 3.
Function createAtom creates a little tree structure of the atom to add
to the scene (figure 3).
Figure 4: Bond tree structure
Listing 5: createBond function
1
Figure 3: Atom tree structure
2
3
In the function shown in listing 3 many DOM functions are used to
create, manipulate and add elements to the scene. In the first place
createElement function creates the <Material> node (row 2). After that, setAttribute function creates three attributes (rows 3-5): id,
that defines the <Material> node univocally; emissiveColor, initially set to ’0 0 0’, that describes the amount of light issued by
the object; finally, diffuseColor, that represents RGB color of the
atom. The color of the atom is assigned using a particular function
(listing 4), that associates each element of periodic table to its standard color (rows 5-7). Moreover, getProperties function associates
to each atom its size (row 8), in addition to its color.
4
5
6
function createBond(num){
var newMaterial = document.createElement("
Material");
newMaterial.setAttribute("id", "bMat"+num)
;
newMaterial.setAttribute("emissiveColor",
"0 0 0");
newMaterial.setAttribute("diffuseColor",
"1 1 1");
7
var newAppearance = document.createElement
("Appearance");
newAppearance.appendChild(newMaterial);
8
9
10
var newCylinder = document.createElement("
Cylinder");
newCylinder.setAttribute("id", "bond"+num)
;
newCylinder.setAttribute("height", "1");
newCylinder.setAttribute("radius", "0.05")
;
newCylinder.setAttribute("onclick", "
clickedBond(\""+num+"\")");
11
Listing 4: getProperties function
12
1
2
3
4
5
6
7
8
9
10
11
12
function getProperties(element){
var properties = new Array();
switch(element){
case "H": {
properties[0] = 1.000;
properties[1] = 1.000;
properties[2] = 1.000;
properties[3] = 0.265;
}; break;
case [..]
};
13
14
15
16
var newShape = document.createElement("
Shape");
newShape.setAttribute("id", "bShp"+num);
newShape.appendChild(newAppearance);
newShape.appendChild(newCylinder);
17
18
19
20
21
Notice that the <Material> node is <Appearance>’s child (figure
3), so the latter is created becoming <Material>’s father (row 8),
through DOM function appendChild.
Now, we have to define atom’s shape and size. So, we go ahead
with the creation of <Sphere> node (rows 10-12), that allows to
define atom’s spherical shape. Row 12 is very important, because
allows to select the atom from the scene with a simple mouse click.
<Sphere> node’s father is <Shape>, as <Appearance> node; so,
we can go ahead with the creation of <Shape> node and the addition of its two children (rows 14-17). At this point, we have to
define atom’s size and position in the scene; then, we create a new
<Transform> node (row 19), adding two other attributes, in addition to unambiguous id: translation, that defines the coordinates of
the atom (row 21), and scale, that set atom’s size. After creating the
<Transform> node, it becomes <Shape>’s father, in order to return
to the caller function and to be conclusively added to X3D scene,
making atom visible to user.
var newTransform = document.createElement
("Transform");
newTransform.setAttribute("id", "bTsf"+num
);
newTransform.setAttribute("translation",
system.bondRef[num].coord.x+" "+system
.bondRef[num].coord.y+" "+system.
bondRef[num].coord.z);
newTransform.setAttribute("rotation",
system.bondRef[num].rotation.x+" "+
system.bondRef[num].rotation.y+" "+
system.bondRef[num].rotation.z+" "+
system.bondRef[num].angle);
newTransform.setAttribute("scale", "1 "+
system.bondRef[num].length+" 1");
newTransform.appendChild(newShape);
22
23
24
25
26
27
28
return newTransform;
29
30
The application adds all the bonds to the scene acceding to
JavaScript data structure that contains information about them.
};
Function createBond (listing 5) receives the id of the bond to draw
and adds it to the scene; all bonds are linked to the root in this case
too.
Figure 4 shows the tree of the bond to add; the structure is similar
to the atom’s one.
133
Initially, createElement function creates the <Material> node (row
2); after that, setAttribute function creates three attributes (rows
3-5): id, that defines the <Material> node of the bond univocally; emissiveColor, initially set to to ’0 0 0’, that describes
the amount of light issued by the object; diffuseColor, that is set to
’1 1 1’, assigning white color to the bond.
JQuery library, that lets movement be simple and effective. Each
time a slider is moved, the coordinates of the selected atom are
modified, both in Coordinates fields of the application and into X3D
scene, updating the translation attribute of the selected atom. Moreover, if the selected atom is involved in one or more bonds, these
last undergo changes, depending on the new atom position in the
scene.
Notice that the <Material> node is <Appearance>’s child(figure
4), so the latter is created becoming <Material>’s father (row 8),
through DOM function appendChild.
The application allows to easily remove one or more atoms selected
on the scene. To remove an atom, it should be necessary to remove
its <Transform> node from the scene; so, it should be necessary
to know which root’s child it is, in order to succeed in removing
the right element. However, the problem would be that, after the
first elimination, the scene-graph would not correspond to references stored in the application. Consequently, after each remotion,
it would be necessary to update all references with the new values of
the scene-graph. This method would involve a heavy slowdown of
the application. Therefore, we decided to remove, rather than the
<Transform> node, the <Shape> node in it. In this way, atom’s
elimination does not impact the scene-graph coherence.
Now, we have to define bond’s shape and size. So, we go ahead with
the creation of <Cylinder> node (rows 10-12), that allows to define
bond’s cylindrical shape. <Cylinder> node’s father is <Shape>,
as <Appearance> node; so, we can go ahead with the creation of
<Shape> node and the addition of its two children (rows 16-19). At
this point, we have to define bond’s size and position in the scene;
then, we create a new <Transform> node (row 21), adding three
other attributes, in addition to unambiguous id: translation, that
defines the coordinates of the bond (row 23); rotation, that specifies bond’s rotation and inclination (row 24); scale, that sets bond’s
length (row 25). All the attributes’ values of translation, rotation
and scale are calculated through getRotation function (listing 6).
After creating the <Transform> node, it becomes <Shape>’s father, in order to return to the caller function and to be conclusively
added to X3D scene, making bond visible to user.
With regard to the addition of a new atom to the scene, two different way are available: adding an atom ex novo, or replacing one
already present in the scene. In the first case, atom’s information
is manually added by the user and allows to create a reference to
the new atom to be drawn. In the second case, on the other hand,
it is possible to replace an atom of the scene after having selected
it. This operation is quite different from the first one, because the
selected atom is transformed in the desired one and any new atom
is created.
Listing 6: getRotation function
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function getRotation(atm1, atm2){
var rotation = new Array();
var coord1 = new Array();
coord1[0] = system.atomRef[atm1].coord.x;
coord1[1] = system.atomRef[atm1].coord.y;
coord1[2] = system.atomRef[atm1].coord.z;
var coord2 = new Array();
coord2[0] = system.atomRef[atm2].coord.x;
coord2[1] = system.atomRef[atm2].coord.y;
coord2[2] = system.atomRef[atm2].coord.z;
rotation[0] = (coord1[0]+coord2[0])/2;
rotation[1] = (coord1[1]+coord2[1])
/2+0.0001;
rotation[2] = (coord1[2]+coord2[2])/2;
rotation[3] = (coord2[1]-coord1[1])*(
rotation[2]-coord1[2])-(rotation[1]coord1[1]*(coord2[2]-coord1[2]);
rotation[4] = (coord2[2]-coord1[2])*(
rotation[0]-coord1[0])-(rotation[2]coord1[2]*(coord2[0]-coord1[0]);
rotation[5] = (coord2[0]-coord1[0])*(
rotation[1]-coord1[1])-(rotation[0]coord1[0]*(coord2[1]-coord1[1]);
rotation[6] = Math.sqrt(Math.pow(coord1
[0]-coord2[0],2)+Math.pow(coord1[1]coord2[1],2)+Math.pow(coord1[2]-coord2
[2],2));
rotation[7] = (Math.PI/2)-(Math.asin((
coord1[1]-coord2[1])/rotation[6]));
return rotation;
};
3.3.1
3.3.2
Bond’s manipulation
In this section we consider all possible operations available to manipulate the bonds in the scene. The application allows to easily
remove one or more bonds selected in the scene. In practice, the
operation is analogous to those described for the atom.
It is possibile to add a bond too. Once two atoms are selected in the
scene, the user can add a bond, using the specific button in the Edit
tab.
3.4
X3DMMS issues
Even if X3DOM represents an optimal choice to easily interact with
the scene, it actually presents a remarkable limit. In fact, the current
X3DOM architecture does not allow to select more than 255 objects
in the scene. X3DOM developers explained their motivations in
[Behr et al. 2010]:
Mouse events require implementing a picking algorithm, which usually is done via ray intersect by traversing the scene-graph and
coarsely checking bounding boxes, and testing all triangles if this
test passes. But this heavily CPU-based process is not fast enough
with JavaScript as lots of matrix operations etc. are involved.[..]
Thus, we use a render-buffer-based approach instead of standard
intersection tests. Here, the picking buffer is implemented by first
rendering the scene into a texture attached to a framebuffer object: the normalized world coordinates are encoded into the RGB
channels, and the alpha channel contains the object ID that references the rendered <Shape>. Occlusions are automatically handled by the depth buffer. By retrieving the values located under
the mouse pointer via gl.readPixels() the picked 3D object is obtained. Similar to 2D elements the mouse event handlers attached to
a picked object, or one of its parents, is called then.[..] As floatingpoint-precision textures are not yet supported in WebGL and due to
the 8-bit buffer only a maximum of 255 objects are supported per
Atom’s manipulation
In this section we focus on all possibile operations that application
offers to manipulate atoms in the scene.
The user can move an atom after selecting it on the scene and using sliders present in the Edit tab. Each slider exploits a JavaScript
134
DAVIES , R. A., M ASKERY, J. S., AND J OHN , N. W. 2009. Chemical education using feelable molecules. In Proceedings of the
14th International Conference on 3D Web Technology, ACM,
New York, NY, USA, Web3D ’09, 7–14.
rendering-pass. Hence, especially for big scenes only a rather bad
precision for the coordinates is achieved.
Therefore, at the moment the maximum number of clickable atoms
in the scene is 255. This represents a serious limit for us, because
of the impossibility of working with bigger-sized molecules.
4
D L -P OLY.
http://www.cse.scitech.ac.uk/ccg/
software/DL_POLY/.
Conclusion and Future Work
E SCHLER , P., J UNG , Y., AND Z OELLNER , M. 2009. X3dom: A
dom-based html5/x3d integration model.
In this paper we have presented a web application that allows users
to directly interact with X3D scene, manipulating 3D molecules in
real time. Thanks to X3DOM approach, we have achieved a slim,
innovative and efficient product. The application can be easily executed on different web browsers and operating systems and results
of straightforward installation for users; this is of great importance,
if we wonder about all difficulties met by users in plugin systems
based.
G ERVASI , O., R IGANELLI , A., AND L AGAN À , A. 2004. Virtual
reality applied to molecular sciences. Lecture Notes on Computer Science 3044, 827–836.
G ERVASI , O., R IGANELLI , A., PACIFICI , L., AND L AGAN Á , A.
2004. Vmslab-g: a virtual laboratory prototype for molecular
science on the grid. Future Generation Computer Systems 20, 5,
717–726. Computational Chemistry and Molecular Dynamics.
Although some technological drawbacks have been noticed in the
current X3DOM implementation, we are confident that this approach represents an excellent opportunity to diffuse X3D technologies in several application fields, definitely solving the ”traditional”
issues related to the compatibility among different web browser and
operating systems
G ERVASI , O., TASSO , S., AND L AGAN Á , A. 2006. Immersive
molecular virtual reality based on x3d and web services. In Computational Science and Its Applications - ICCSA 2006, Springer
Berlin / Heidelberg, M. Gavrilova, O. Gervasi, V. Kumar, C. Tan,
D. Taniar, A. Laganá, Y. Mun, and H. Choo, Eds., vol. 3980 of
Lecture Notes in Computer Science, 212–221.
The future work will be devoted to interface X3DMMS to molecular simulation packages, other than Dl-Poly, widely used in Molecular and Matter Sciences simulations.
G ROMACS. http://www.gromacs.org.
References
L IU , F., OWEN , S., Z HU , Y., H ARRISON , R., AND W EBER ,
I. 2005. Web based molecular visualization using procedural
shaders in x3d. In ACM SIGGRAPH 2005 Web program, ACM,
New York, NY, USA, SIGGRAPH ’05.
H OLDENER , A. T. 2008. Ajax: The Definitive Guide. O’Reilly
Media.
A JAX 3D.
http://http://edutechwiki.unige.ch/
en/AJAX3D/.
B EHR , J., J UNG , Y., K EIL , J., D REVENSEK , T., Z OELLNER , M.,
E SCHLER , P., AND F ELLNER , D. 2010. A scalable architecture
for the html5/x3d integration model x3dom.
P OLYS , N. F. 2003. Stylesheet transformations for interactive visualization: towards a web3d chemistry curricula. In Proceedings
of the eighth international conference on 3D Web technology,
ACM, New York, NY, USA, Web3D ’03, 85–ff.
B RUTZMAN , D., AND DALY, L. 2007. Extensible 3D Graphics for
web authors. Morgan Kaufmann.
S IGGRAPH 2006.
http://www.siggraph.org/s2006/
main.php?f=conference&p=birds.
C ALLIERI , M., A NDREI , R. M., D I B ENEDETTO , M., Z OPP È ,
M., AND S COPIGNO , R. 2010. Visualization methods for
molecular studies on the web platform. In Proceedings of the
15th International Conference on Web 3D Technology, ACM,
New York, NY, USA, Web3D ’10, 117–126.
U LLMAN , L. 2007. Building a Web Site with Ajax: Visual QuickProject Guide. Peachpit Press.
W EB 3D2007. http://www.web3d.org/conferences/
web3d2007/.
CML. http://www.ch.ic.ac.uk/rzepa/cml/.
X J 3D. http://www.xj3d.org/.
DAVIES , R. A., J OHN , N. W., M AC D ONALD , J. N., AND
H UGHES , K. H. 2005. Visualization of molecular quantum
dynamics: a molecular visualization tool with integrated web3d
and haptics. In Proceedings of the tenth international conference
on 3D Web technology, ACM, New York, NY, USA, Web3D ’05,
143–150.
135
136
View publication stats