Electron density visualization (isomesh and volume rendering) by WebGL


The primary outcome of structural studies is an electron density map. Its inspection is essential to validate the derived atomic models. Although many Web-based viewers are available to visualize atomic models, for example GLmol and J(S)mol, few are suitable for large electron density maps. This is due to the size of the maps (10-500MB) and the complexity of rendering.

Here, two rendering extensions for GLmol are presented; one renders electron density isomesh by traditional Marching Squares algorithm and the other directly displays the density by volume rendering. Both viewers are implemented in WebGL/Javascript and do not require any plug-ins or Java.


Input format

Electron density maps in MRC format (.ccp4 format) are supported. GLmol can handle Gzipped files thanks to gunzip.min.js. Currently, files loaded from the network is assumed to be gzipped, while local files are not. Future version will detect compression automatically.


Isomesh is generated by Marching Squares algorithm. This algorithm works in XY, YZ and XZ planes to extract isomesh. It is simpler and faster than Marching Cubes algorithm, which works in 3D.

Volume Rendering

Volume rendering of electron densities, especially of macromolecules, is a relatively new attempt. PyMOL supported this feature in 2011 and most viewers still lack this feature.

Volume rendering was previously implemented on WebGL for medical images. Especially, the implementation released in Apache 2 license by Vicomtech is simple but powerful. GLmol adapted their shader code to realize pseudo-3D texture on WebGL's 2D texture. However, their method (ray-casting) is not compatible with molecular viewers, where the volume is superimposed on opaque objects such as sticks and spheres. Therefore, the viewpoint-oriented 3D slicing method was used in GLmol.


Rendering performance of isomesh depends on the number of vertices, which is roughly proportional to the displayed volume. In contrast, volume rendering is pixel-based algorithm and its cost depends on the rendered (screen) pixels, not on the extent of the volume.

Even in relatively old computers (GTX 2xx series GPU), volume rendering in 500 x 500 pixels with 500 steps was smooth. Surprisingly, both renderes worked fine on Nexus 7 (Android 4.4.2 tablet) without modification and the rendering (scene rotation) was fluid. Actually, the volume rendering was more responsive than the isomesh renderer when "Next Residue" button was tapped. Thus, on this mobile device, the CPU is rate-limitting. Probably, the Javascript engine on Chrome for Android is not so efficient. Work is underway to make native version of both renderers. They will be integrated in future versions of NDKmol.

System requirements

Basically, if GLmol runs on your PC, this demo should also work.


While GLmol supports symmetry operation on atomic coordinates, it does not work on electron densities. Therefore, the map must be expanded to the volume of interest beforehand.


You can try the alpha version from the following link. PDB 1AD0 will be loaded automatically. You can load your own data from the "Load" tab below. Please note that this is still in development.

You can go to next or previous residue by pressing Space or Shift+Space key, respectively. In the isomesh renderer, you can change the contour level by Up/Down keys. You cannot change it in the volume renderer. Work is in progress to implement transfer function editor. The area of electron density shown is automatically centered on the screen. In the isomesh renderer, the area is updated every time the center of the screen moves more than 2 angstrom.



Comments and suggestions are welcome. Please mail to biochem_fan at users.sourceforge.jp or write in the forum.