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

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

This app is written in the $mol framework and employs three.js for 3d-rendering and tween.js for phonon animation. Scientific formats conversion is done with matinfio.js.

The file player.html can be embedded into the iframe HTML element. In this case, the parent webpage is checked for the content to be rendered (as a string) in the global variable playerdata. If found, the content is loaded and rendered. The browser domain policies must apply.

Additionally, the content from anywhere on the web can be rendered, if the domain policies apply. A file URL must be given via the document.location.hash property (browser's address bar, after # symbol). To bypass CORS, the proxy for the remote requests could 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.

Finally, the postMessage interface is supported. The parent webpage should call iframe.postMessage(payload, '*') providing the content as the payload.

See a detailed comparison as well as the blog post.