https://github.com/gleborgne/molvwr

WebGL molecule viewer made with Babylon.js
https://github.com/gleborgne/molvwr

Last synced: about 2 months ago
JSON representation

WebGL molecule viewer made with Babylon.js

• Host: GitHub
• URL: https://github.com/gleborgne/molvwr
• Owner: gleborgne
• License: other
• Created: 2015-10-07T21:53:00.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2015-11-04T19:55:40.000Z (about 9 years ago)
• Last Synced: 2024-08-02T15:08:27.440Z (5 months ago)
• Language: JavaScript
• Homepage: http://gleborgne.github.io/molvwr/
• Size: 2.88 MB
• Stars: 33
• Watchers: 4
• Forks: 8
• Open Issues: 4
• Metadata Files:
  • Readme: readme.md
  • License: License.txt

Awesome Lists containing this project

• awesome-babylonjs - Molvwr - WebGL molecule viewer. ([demo](https://gleborgne.github.io/molvwr/)) (Projects)

README

        
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](http://gleborgne.github.io/molvwr/). We have examples for a [rich molecule catalog](http://gleborgne.github.io/molvwr), or an example of how to [embed Molvwr in your website](http://gleborgne.github.io/molvwr/embedexample.html).

## 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](http://gleborgne.github.io/molvwr/embedexample.html) 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:


```html

```

This script contains a bundle of Molvwr, [Babylon.js](http://www.babylonjs.com) (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 :

```html



```


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

```html

  document.addEventListener("DOMContentLoaded", function() {

    Molvwr.process();

  });

````

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](http://gleborgne.github.io/molvwr) to get an idea.