Browse: Home / 2011 / June / Displaying compounds with WebGL

Displaying compounds with WebGL

By Martin Scharm on June 4, 2011 at 5:16 pm

Vote +1
2
Vote -1

After publishing my last article about OPSIN I was interested in using HTML5 techniques to display chemical compounds and found a nice library: ChemDoodle.

With ChemDoodle it’s very easy to display a molecule. Just download the libs and import them to your HTML code:

1
2
<script type="text/javascript" src="path/to/ChemDoodleWeb-libs.js"></script>
<script type="text/javascript" src="path/to/ChemDoodleWeb.js"></script>

To display a compound you need its representation as MOL file, include it in less than 10 lines:

1
2
3
4
5
6
7
8
<script type="text/javascript">
  var app = new ChemDoodle.TransformCanvas3D('transformBallAndStick', 500, 500);
  app.specs.set3DRepresentation('Stick');
  app.specs.backgroundColor = 'white';
  var molFile = '\n  Marvin  02080816422D          \n\n 14 15  0  0  0  0            999 V2000\n   -0.7145   -0.4125    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -0.7145    0.4125    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0\n    0.7145   -0.4125    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n    0.7145    0.4125    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n    0.0000   -0.8250    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0\n    0.0000    0.8250    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n    1.4992    0.6674    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0\n    1.4992   -0.6675    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0\n    1.9841    0.0000    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -1.4289   -0.8250    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0\n    0.0001    1.6500    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0\n    0.0001   -1.6500    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n    1.7541    1.4520    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -1.4289    0.8250    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n 10  1  2  0  0  0  0\n  1  2  1  0  0  0  0\n 14  2  1  0  0  0  0\n  8  3  1  0  0  0  0\n  4  3  2  0  0  0  0\n  7  4  1  0  0  0  0\n  1  5  1  0  0  0  0\n  5  3  1  0  0  0  0\n 12  5  1  0  0  0  0\n  6  2  1  0  0  0  0\n  6  4  1  0  0  0  0\n 11  6  2  0  0  0  0\n  9  7  1  0  0  0  0\n 13  7  1  0  0  0  0\n  9  8  2  0  0  0  0\nM  END\n';
  var molecule = ChemDoodle.readMOL(molFile, 1);
  app.loadMolecule(molecule);
</script>

Here is a sample with caffeine:

If your browser is able to display WebGL you should see a stick-model. Use your mouse to interact.
Very easy to use! Of course you can load the MOL data from a file, but that is beyond the scope of this article.


Posted in , , , , ,
Tagged , , , , ,
3 Responses so far

3 responses to “Displaying compounds with WebGL”

  1. Jordi Villà-Freixa
    June 13, 2011 at 7:16 pm at 7:16 PM | | Reply

    I am having troubles displaying the molecule. javascript works fine for me, but I cannot see the mol either in wordpress or in a reglar html file I have build adhoc. Maybe I need to change the permissions for the ChemDoodleWeb files, maybe…

    Test page
    document.write(“” + Date() + “”); var app = new ChemDoodle.TransformCanvas3D(“transformBallAndStick”, 500, 500); app.specs.set3DRepresentation(“Stick”); app.specs.backgroundColor = “white”;
    var molFile = “\n Marvin 02080816422D \n\n 14 15 0 0 0 0 999 V2000\n -0.7145 -0.4125 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n -0.7145 0.4125 0.0000 N 0 0 0 0 0 0 0 0 0 0 0 0\n 0.7145 -0.4125 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 0.7145 0.4125 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 0.0000 -0.8250 0.0000 N 0 0 0 0 0 0 0 0 0 0 0 0\n 0.0000 0.8250 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 1.4992 0.6674 0.0000 N 0 0 0 0 0 0 0 0 0 0 0 0\n 1.4992 -0.6675 0.0000 N 0 0 0 0 0 0 0 0 0 0 0 0\n 1.9841 0.0000 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n -1.4289 -0.8250 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0\n 0.0001 1.6500 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0\n 0.0001 -1.6500 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 1.7541 1.4520 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n -1.4289 0.8250 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 10 1 2 0 0 0 0\n 1 2 1 0 0 0 0\n 14 2 1 0 0 0 0\n 8 3 1 0 0 0 0\n 4 3 2 0 0 0 0\n 7 4 1 0 0 0 0\n 1 5 1 0 0 0 0\n 5 3 1 0 0 0 0\n 12 5 1 0 0 0 0\n 6 2 1 0 0 0 0\n 6 4 1 0 0 0 0\n 11 6 2 0 0 0 0\n 9 7 1 0 0 0 0\n 13 7 1 0 0 0 0\n 9 8 2 0 0 0 0\nM END\n”; var molecule = ChemDoodle.readMOL(molFile, 1); app.loadMolecule(molecule);

    1. Martin Scharm
      June 14, 2011 at 11:03 am at 11:03 AM | | Reply

      I think it’s an OpenGL issue. Even if WebGL seems to just use JavaScript you also need to have OpenGL installed. The OpenGL wiki might help you with the installation.

  2. Jordi Villà-Freixa
    June 14, 2011 at 3:57 pm at 3:57 PM | | Reply

    Hi Martin,

    I found the problem. It was just an issue of the order in calling the ChemDoodleWeb libs. It is fixed now and it works perfect. I’ll be implementing some molecules in my web. Thanks for your nice post.

    Jordi

Leave a Reply