WebGL molecule viewer made with Babylon.js
JavaScript Other
Switch branches/tags
Nothing to show
Latest commit 8da33fe Nov 4, 2015 @gleborgne manage resize
Permalink
Failed to load latest commit information.
demo website manage resize Nov 4, 2015
dist manage resize Nov 4, 2015
lib reorganize project structure Oct 16, 2015
src
.gitattributes
.gitignore
License.txt adding license file and few adjustments to demo pages Oct 17, 2015
gulpfile.js
package.json init Oct 7, 2015
readme.md

readme.md

Molvwr

This project is a WebGL molecule viewer made with Babylon.js.

While the main purpose is to have fun with WebGL and Babylon.js, the end goal is to provide a simple component to embed 3D molecules in your website.

Have a look at our demo website. We have examples for a rich molecule catalog, or an example of how to embed Molvwr in your website.

Supported molecule file formats

Molvwr supports "xyz", "mol", "sdf", and "pdb" files. If you want an additional file format, please fill an issue

How to embed Molvwr in your website

You could look at the sample page and use F12 developper tools to look at the source. Here is a brief summary.

Embedding Molvwr into your site is very easy. The most simple way is to add the script "molvwr-bundle.js" to your page, just like this:

<script src="lib/molvwr-bundle.js"></script>

This script contains a bundle of Molvwr, Babylon.js (a WebGL 3D Engine) and hand.js (a polyfill for pointer events that enables touch interaction).
You could also add the different files separately if you would like to use Babylon somewhere else in your site.

When your script is ready, add a bloc in your page with a "data-molvwr" attribute containing the path of your molecule file :

<div class="mol mol-left" data-molvwr="mol.sdf"></div>

Now you just need to call "Molvwr.process()" to have your bloc turning into a 3D molecule

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function() {
    Molvwr.process();
  });
</script>

The "process" function can be called without parameters, or you could explicitely provide an HTML element (or an array of elements).

Advanced integration

If you want to go deep into the rabbit hole, you could work with Molvwr in advanced ways. It has been designed to be extensible and to tweek rendering if you would like. We will expand documentation in the near future but for now, you could have a look at the source code, and the molecule catalog sample to get an idea.