Molecular Visualization, Modelling and Animation

In this project, Nanographics collaborated with KAUST University to create an itegrated platform for molecular visualization, modelling and animation. The platform is implemented in WebGPU, which is the successor to WebGL and brings the advancements of modern graphics APIs to the web.

The web platform allows users to visualize and animate large molecular assemblies. The main objective of this work is to bring large-scale molecular visualization to the web and integrate it with other data modalities. In addition to that, the platform allows to author molecular animations with a novel procedural approach.


  • Mult-scale shading & coloring
  • Imposter-based rendering
  • Real-time visualization of millions of molecular instances
  • Very efficient post-processing effects
  • Authoring of procedural animations
  • Animation playback and export

Procedural Animations

There are various approaches to create animations in molecular visualization. From the animation point of view, the most simple one is simulation. Sometimes, it is possible to simulate a certain environment, and the outcome of the simulation is a time-series of positions and rotations of the involved objects. The animation is created by simply displaying the time-series. However, this is not always possible, as the intrinsic properties of the environment might be unknown, or too complex, to the level where the simulation becomes infeasible. Another problem with simulations is that they cannot be easily steered by the animator to reveal certain specific aspects of the environment. Therefore, simulation might not be the most optimal choice for storytelling. An alternative to simulation for creating molecular animations is keyframing. It refers to creating snapshots of the state of the environment in discrete time steps, and subsequently interpolating between them to reconstruct the state of the environment in all the missing points in time. In order to support keyframe animation in multi-scale, multi-instance environments, which are ubiquitous in molecular biology, we propose to use a procedural approach.

The animation in this video is implemented as a procedural animation. It showcases the capabilities of the approach of using procedures to create an animation. The story is about the dynamics of microtubules, which is an interplay of biochemistry and mechanics. Microtubules are dynamic polymers of αβ-tubulin and are essential for the organization of cells. They grow and shrink over time, as demonstrated in the video. The complete concept is described in our research paper “Multi-Scale Procedural Animations of Microtubule Dynamics Based on Measured Data“.

Investigation of a Procedural Animation

The image sketches four different animations to showcase the process of creating a procedural animation. Scenario (a) shows four steps of a keyframed animation where scattered molecules form into a sphere. In scenarios (b), (c) and (d) new procedures are introduced to make the animation dependent on the time, object instance and using dynamic states for each keyframe. The following animations showcase the concept in more detail.

Procedural Animation (a): The initial state (static randomly positioned molecules) is interpolated to the  target state (molecules forming a sphere). The interpolation function is independent of the molecule instance.

Procedural Animation (b): The same animation is enhanced by introducing instance-dependent timing. By modifying the timing of the interpolation separately for each instance, the animation is now

Procedural Animation (c): An instance-dependent transition function is introduced. The interpolated path of each individual instance is transformed by the transition function, which can be used to model specific sequences in which the final object is built. In this case, the sphere is formed by the molecules forming a pillar, which continuously fills the sphere.

Procedural Animation (d): In this animation, both the initial and the target state are dynamic. The molecules randomly move around, while the sphere rotates around its axis.

During our collaboration with biologists from the SCRIPPS institute, we were fascinated by the intricate beauty of Microtubules - the scaffolding of our cells. These long, hollow tubes, found in every cell of our bodies, fulfill a variety of tasks. They act not only as a structural support, but also as highways for transporting material and signals throughout the cell. One of their fascinating features is that they constantly break down and rebuild as needed. We have produced an animation showing this phenomenon in molecular detail and in realistic speed.

D [ [ [ E

In a research project together with KAUST, Scripps Research, and TU Wien, we have created the most accurate model of a SARS-CoV-2 virion with atomic resolution. Such a model can help researchers in their effort to understand how the virus works, so that they can find ways to fight it.

D [ [ [ E

We have developed the fastest molecular renderer in the world. It is able to display billions of atoms interactively with high visual quality. We use this renderer to show how various parts of human cells work on molecular level. In one of our latest projects, the software has been deployed to a dome theatre to creative immersive environment where the audience can dive deep into a human cell and observe the complex beauty of the molecular machinery that keeps us alive.

D [ [ [ E