Developers Club geek daily blog

3 years, 2 months ago
Hi, Habr! In this article I will compare four open engines of visualization of crystal structures in the CIF format (Crystallographic Information File) popular in crystal chemistry and materials science. It will be a question of modern JavaScript (including transcompilation of Java and C in JavaScript), of crystal chemistry and solid state physics. We teleport from Shryodinger and Landau's world to Berners-Li and Jobs's world, and then back. So, have gone.

Water adsorption on perovskite surface

From school course of physics it is known that atoms in solid body are arranged in periodically repeating structural units about a nanometer in size forming crystal grid. The solid state physics in the spirit of reductionism studies communication between properties of these structural units (low-level cells) and object properties of macrocosm. For example, controlling adsorption of molecules of water on surface of oxides of transition metals, it is possible to reduce the price of synthesis of hydrogen and oxygen, to improve productivity of fuel cells and touch devices, to optimize delivery of drugs in pharmacology. To put it briefly, the solid state physics anyway describes any laboratory or technology process, and here value of molecular visualization to revaluate extremely difficult. De facto in materials science the most widespread computer format for data exchange about crystal structures is CIF. Important difference of CIF from many other chemical formats is support 3d - broadcastings, otherwise, for task infinite 3d - crystal we repeat its low-level cell in three directions.

CIF is created in the 90th in the international union of crystallography (IUCR). The basis of CIF is made by the text container under the name STAR (Self-Defining Text Archive and Retrieval) where the physical properties received as a result of diffractometry or theoretical calculations are marked by standard tags. Standard tags determine the parameters of low-level cell, its symmetry which are its part atoms, metadata of the corresponding scientific publication and other. These tags are set in the external CIF dictionaries similar to XSD schemes of XML documents so validation of the CIF document according to the CIF dictionary and even output of new physical properties on the basis of the available is possible. Differences that CIF resolves any tags which are ignored by the CIF parser (certainly, later they can become part of the standard and to be included in new dictionaries on solution of the IUCR union). Besides, CIF supports relational data model when, for example, it is possible to refer to certain atoms in crystal structure on their identifiers. The lack of lack of convenient support of multi-level hierarchies, here the STAR container loses XML. By the way, for this reason CIF have XML the competitor under the name CML (Chemical Markup Language).

Traditionally CIF files open in desktop applications (Vesta, Accelrys/BIOVIA, RasMol and many others), however and in this area about four years ago browsers have begun the crusade against desktop applications. open source known to me fruits of this campaign are collected below, and their code in the form of uniform web application can be found in repository. The code was tested in several popular browsers, including IE 11 and mobile Safari. Structure of repository the following: the data folder contains examples of CIF models (if you ever dealt with crystal chemistry or materials science, you for certain will have the), the engines folder contains JavaScript code of all engines, utils contains auxiliary code, for example, the browser loader of files for local processing of CIF models. Thus, for start of web application it is enough to open its folder for the Web server and to come in the browser to the corresponding address (or it is simple to pass into repository). All files static, any server processing it is not provided.

Shortly about four models from the data folder:

  • adsorption.cif — model of above-mentioned adsorption of water on perovskite (see the picture), low-level cell, is by default loaded into each of engines,
  • fullerene.ciffulleren C60,
  • lfp.cif — phosphate of LiFePO4 lithium-iron, material of the cathode of lities - the ion battery. Pay attention to lithium ion: it very easy and mobile (and all because lithium — the third in Mendeleyev's table). The third electron of lithium comes or goes to external chain as a result of discharging or battery charging while the ion of lithium travels through electrolyte.
  • mdma.cif — 3,4-metilendioksi-N-methamphetamine hydrochloride. Its functional groups can be replaced with saving of the corresponding effect, thus is formed new and therefore legal substance. In it the problem of synthetic analogs also consists.

Now, actually, results of comparison of engines.

The total amount of code (in GZip brackets)
Technology of drawing
2,1 MB (700 KB)
rich, programmatically and in UI
ChemDoodle Web Components
354 KB (121 KB)
rich, programmatically
GPL v3

1,1 MB (462 KB)
canvas, SDL, asm.js
rich, programmatically
265 KB (83 KB)
canvas, Three.js
limited, in UI

The solution on the basis of Java-applets, Flash-and other plug-ins was not considered as deadlock branch of evolution, only pure (as it is accepted to be expressed, "vanilla") by JavaScript. However, the first and third solution just is possible to synthesize pure JavaScript from set of other languages, and there are such cases.

JSmol is received from Java-code Jmol by means of the Java2Script tool. The total amount of the JSmol code makes 12,7 MB, parts from which are loaded as required. The volume demanded for start is specified in the table above. Functionally this engine completely repeats the better known Java-colleague, providing the richest set of opportunities. Comparison could be ended here, if not the huge size (and the slowest start) and costs of porting of foreign stack, in particular, ugly and unreadable JavaScript.

ChemDoodle Web Components is based on proprietary product. It has advantages (fine documentation, high quality as code, and product in general) and shortcomings (restrictions on use, not disconnected sending data on users). It is also possible to refer lack of support of canvas in favor of WebGL to shortcomings, so, nonserviceability on slightly obsolete equipment. If shortcomings do not represent problem, it is possible to call this engine the winner.

RasmolJS is received from the senior C-colleague RasMol by means of Emscripten. British hemoinformatik Noel O'Boil ported original graphic functionality on the SDL library supported by Emscripten, the code as a result transcompiled by JavaScript carries out 3d - drawing in the canvas element. Besides, the code is generated according to the asm.js standard that in the theory has to provide productivity gain. In practice quite heavyweight and sluggish engine, besides deprived of number of functions of the previous participants has turned out nevertheless.

Player.html is written by me with use of Three.js and Math.js. Emphasis is put on minimalism and speed, and also support of wider row of the equipment so the engine works even at ancient laptops. Development is begun relatively recently, and the functionality is still not really rich. Therefore I appreciate any criticism and I am eager.

This article is a translation of the original post at
If you have any questions regarding the material covered in the article above, please, contact the original author of the post.
If you have any complaints about this article or you want this article to be deleted, please, drop an email here:

We believe that the knowledge, which is available at the most popular Russian IT blog, should be accessed by everyone, even though it is poorly translated.
Shared knowledge makes the world better.
Best wishes.

comments powered by Disqus