Minimalistic and fast HTML5 visualization of chemical structures in CIF and POSCAR formats
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

HTML5 Player for Materials Informatics


In-browser ultra-fast and lightweight renderer of the crystallographic information files (CIF) and VASP POSCAR structures, written in a pure JavaScript.

In a compiled form it is only one file player.html about 450 Kb (100 Kb gzipped). See it online. Only browser is required. After the code is loaded, no internet connection is needed.

Technical details

The modular JavaScript approach based on require.js is employed. Development layout is inside src folder. Dependencies are three.js and math.js, as manifested in deps folder. They are downloaded with the aid of Unix shell script, and the needed parts are saved in the development layout. Compilation is done using script, invoking Google's Closure Compiler (which is shipped with three.js, requires JVM).

Integration with the other software

The file player.html can be embedded into the iframe HTML element. In this case, the parent webpage is checked, if it contains CIF or POSCAR file in the global variable playerdata as a string. If found, it is loaded and rendered. Additionally, supported files from anywhere on the web can be displayed. A file URL must be then passed via document.location.hash property (browser's address bar, after # symbol). However, if the file is served from another domain, the proxy for remote requests should be used. There are examples of PHP and Python proxies (not for production use) in src folder. Obviously, it is safer to serve supported files from the same domain.

Comparison with the other open-source plugin-free engines

See the blog post.