Biological Data Visualization

Interactive visualization of molecular structures and physico-chemical data is an im-portant and interesting research field which span from the Computer Graphics world to the Biological and Molecular studies. The amount of complex structures that is available through public repositories and the level of detail of biochemical datasets which can be manipulated by physico-chemical tools has greatly increased in the last years, making it essential to employ dedicated visualization techniques to make an effective use of these data. While it may be easy to draw even large molecular datasets as a series of atoms (Van der Waals spheres) using simple rendering meth-ods based on impostors and other tricks, the precise rendering of a high resolution molecular surface involves the management of more complex geometry. Further-more, when it is necessary to represent interaction between different molecules or to introduce the rendering of further 3D elements and data layers, the required com-putational and rendering capabilities do increase significantly.

As the SpiderGL library is highly flexible in terms of raw configuration while providing high–level utilities, we implemented an efficient molecular data viewer [17]

whose architecture allows high programmability of the final presentation phase.

5.5.1 Visualizing Molecular Properties

Our target is to display two specific biochemical properties on the surface of molecules.

The two surface properties were theMolecular Lipophilic Potential (MLP) and the Electrostatic Potential (EP). The ability of a molecular surface to establish bonds with water is called Hydrophilicity; its opposite, which is the ability to establish bonds with fat, is called Lipophilicity. The Electrostatic Potential is easier to un-derstand: each atom in a molecule may have a charge, the various charges in the molecule produce an electric field in the surrounding of the molecule.

The main idea of this visual mapping has been to exploit perceptual associations between the values to be mapped and visual characterization of real-world objects.

Ideally, by using already established perceptual association, the viewer would be able to understand the provided information more naturally, without the use of ex-plicit legends.

Lipophilic Potential. The visual mapping of lipophilic potential relies on a com-bination of color, surface roughness and specularity: these three effects are mapped on the molecular surface according to the local lipophilic potential value. For The result is pleasant and, as visible in the left side of Figure 5.9, the characterization of the surface is quite effective.

(a) (b)

Figure 5.9: Molecule Lipophilic Potential The Lipophilic Potential is mapped on the surface of a Calcium-bound Calmodulin. (a) Visualization using standard color ramp. (b) Visualization using advanced shaders. The light color and the specularity clearly indicates a liphophilic patch on the right part of the molecule, while the dark, dull and rough surface indicates a more hydrophilic area.

Electrostatic Potential. While the MLP value is obviously only observable on the surface itself, electrical phenomena are associated to the idea of an effect pro-jected in the volume surrounding a charged object, and able to affect other objects (like the high school textbook-favorite amber rod attracting paper bits). Field lines are a common way to describe the effect of the electrical field. EP value is therefore represented by showing small particles, moving along the path defined by field lines, visualizing a higher concentration of particles in areas where the electrical fields is stronger.

Particle trajectories can be rendered as a series of solidline strips along field isolines, but to emphasize the underlying motion a particle system is often a better choice.

As our input test datasets contains explicit particle paths in form of polylines, it is not really necessary to create a particle system, but it is possible to visualize their motion using a GLSL fragment shader which renders only small fragments of the

solid lines according to a periodic function, animated using an offset (see Figure 5.10 and Listing 5.4).

(a) (b)

Figure 5.10: Molecule Electrostatic Potential. (a) Particles flow through fixed trajectories described as polylines. (b) The fragment shader in Listing 5.4 sets the output alpha value such that the blending stage will make visible only parts of the line geometry, simulating a particles swarm.

1 uniform float u _ t i m e O f f s e t ; 2 varying float v _ t e x c o o r d ; 3

4 void main (void) 5 {

6 const float p a r t _ d e n s i t y = 4.0;

7 const vec3 p a r t _ c o l o r = vec3(0.8 ,0.8 , 1.0) ; 8

9 float val = fract (( v _ t e x c o o r d + u _ t i m e O f f s e t ) / p a r t _ d e n s i t y ) ; 10 if ( val < 0.7)

11 discard; 12

13 val = s m o o t h s t e p (0.9 , 0.7 , val ) ;

14 g l _ F r a g C o l o r = vec4( p a r t _ c o l o r * val , val ) ; 15 }

Listing 5.4: Simulating Particles Motion. The fragments generated by the polyline rasterizer are blended according to a smooth–varying function of time (see Figure 5.10).

Atomic Structure. In addition to the surface, it is often needed to be able to look at the actual atomic structure of the molecule. For this purpose, we simply use a sphere mesh which represents a single atom and instantiate it once for each atom in the molecule, varying its radius and color accordingly. Figure 5.11 shows

the underlying atomic structure, combined with the lipophilic and electrostatic po-tential. The rendering is obtained by first drawing the atomic structure and then the surface structure with a modified fragment shader which modulates the output transparency in function of the viewing angle, obtaining afresnel-like effect.

Figure 5.11: Surface and Atomic Structure. The superimposition of the Molec-ular Surface and the underlying Atomic Structure is achieved using a transparency based on view angle.

Performances. Rendering independently a large amount of objects, as the atoms in a complex molecule, evidences the performance penalty that arises from the use of an interpreted language such as JavaScript versus a compiled one like C++. The first implementation of our molecule renderer was composed of a single resource for the atom sphere mesh. The rendering procedure consisted in a loop over the molecule atoms in which, at each iteration, the appropriate transformation matrices were calculated based on the position of the atom relatively to the molecule, the atom color was set in the shader program, and finally the rendering command was issued on a per–atom basis. In this case, using a tessellated sphere with 80 triangles for the atom mesh, a molecule consisting of 2200 atoms was rendered at roughly 25 frames per second, where the 80% of the frame time was taken by matrix computa-tions, evidencing JavaScript performance penalty. In the second implementation we

created the whole molecule mesh by replicating, for each atom, the sphere mesh with per–vertex color and translating it to its final position. This caused the memory needed to store the molecule mesh to rise from 1.4 KBytes to 3.36 MBytes. Paying the larger memory usage had, however, the benefit of increasing the performances to 120 frames per second.