biochem-fan/glmol

A molecular viewer written in Javascript and WebGL

GLmol

GLmol is a molecular viewer written in Javascript and WebGL.

For the time being, please go to http://webglmol.sourceforge.jp/ for the details.

LICENSE

Dual license of MIT license or LGPL3.

GLmol uses jQuery and Three.js.

• Three.js https://github.com/mrdoob/three.js

  Copyright (c) 2010-2012 three.js Authors. All rights reserved.

  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

  The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

• jQuery http://jquery.org/

  Copyright (c) 2011 John Resig

  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

  The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

glmol's Issues

Add configuration object to the initializer

I've had to do some funny stuff trying to initialize the view the way I want it... My suggestion would be to use a configuration object in the init as well as in the defineRepresentation. If you like my proposal I could add that into the newThreeJS branch.

How about something like this for default:
config = {
colorMode: 'chainbow', // ss chain chainbow b polarity
mainchainMode: 'ribbon', // ribbon thickRibbon strand chain cylinderHelix tube bonds
doNotSmoothen: true,
sideChainsAsLines: false,
baseMode: 'nuclLine', // na base: nuclStick nuclLine nuclPolygon
symopHetatms: false,
nbMode: null, // nb_sphere nb_cross
hetatmMode: 'sphere', // stick sphere line icosahedron ballAndStick ballAndStick2
projectionMode: 'perspective', // perspective orthoscopic
unitCell: false,
biomt: false,
packing: false,
bgcolor: 0x434343,
}

During init provided could be merged with the default one. It is easy to modify the config object in the instance and run rebuildScene and show to update the view. This could become a default defineRepresentation and would not need any more changes:

// extend glMol with additional configs
glmolDefineRepresentation = function() {
if (!this.config) {
var all = this.getAllAtoms();
var hetatm = this.removeSolvents(this.getHetatms(all));
this.colorByAtom(all, {});
this.colorByChain(all);

    this.drawAtomsAsSphere(this.modelGroup, hetatm, this.sphereRadius); 
    this.drawMainchainCurve(this.modelGroup, all, this.curveWidth, 'P');
    this.drawCartoon(this.modelGroup, all, this.curveWidth);
} else {
    var c = this.config,
        all = this.getAllAtoms();

    if (c.biomtChains) {
        all = this.getChain(all, c.biomtChains);
    }
    var allHet = this.getHetatms(all),
        hetatm = this.removeSolvents(allHet),
        asu = new THREE.Object3D(); 

    // color by
    this.colorByAtom(all, {});            
    if (c.colorMode === 'ss') {
        this.colorByStructure(all, 0xcc00cc, 0x00cccc);
    } else if (c.colorMode === 'chain') {
        this.colorByChain(all);
     } else if (c.colorMode === 'chainbow') {
        this.colorChainbow(all);
    } else if (c.colorMode === 'b') {
        this.colorByBFactor(all);
    } else if (c.colorMode === 'polarity') {
        this.colorByPolarity(all, 0xcc0000, 0xcccccc);
    } 

    // main chain
    // Don't smooth beta-sheets in ribbons: boolean
    if (c.mainchainMode) {
        if (c.mainchainMode === 'ribbon') {
            this.drawCartoon(asu, all, c.doNotSmoothen);
            this.drawCartoonNucleicAcid(asu, all);
        } else if (c.mainchainMode === 'thickRibbon') {
            this.drawCartoon(asu, all, c.doNotSmoothen, this.thickness);
            this.drawCartoonNucleicAcid(asu, all, null, this.thickness);
        } else if (c.mainchainMode === 'strand') {
            this.drawStrand(asu, all, null, null, null, null, null, c.doNotSmoothen);
            this.drawStrandNucleicAcid(asu, all);
        } else if (c.mainchainMode === 'chain') {
            this.drawMainchainCurve(asu, all, this.curveWidth, 'CA', 1);
            this.drawMainchainCurve(asu, all, this.curveWidth, 'O3\'', 1);
        } else if (c.mainchainMode === 'cylinderHelix') {
            this.drawHelixAsCylinder(asu, all, 1.6);
            this.drawCartoonNucleicAcid(asu, all);
        } else if (c.mainchainMode === 'tube') {
            this.drawMainchainTube(asu, all, 'CA');
            this.drawMainchainTube(asu, all, 'O3\''); // FIXME: 5' end problem!
        } else if (c.mainchainMode === 'bonds') {
            this.drawBondsAsLine(asu, all, this.lineWidth);
        }
    }

    // side chains as lines: boolean        
    if (c.sideChainsAsLines) {
        this.drawBondsAsLine(this.modelGroup, this.getSidechains(all), this.lineWidth);
    }        

    // nucleic acid bases as: sticks, lines, polygons
    if (c.baseMode) {
        if (c.baseMode === 'nuclStick') {
            this.drawNucleicAcidStick(this.modelGroup, all);
        } else if (c.baseMode === 'nuclLine') {
            this.drawNucleicAcidLine(this.modelGroup, all);
        } else if (c.baseMode === 'nuclPolygon') {
            this.drawNucleicAcidLadder(this.modelGroup, all);
        }
    }

    // Show HETATMs in symmetry mates (slower)
    var target = c.symopHetatms ? asu : this.modelGroup; 

    // Non-bonded atoms (solvent/ions) as
    if (c.nbMode) {
        var nonBonded = this.getNonbonded(allHet);
        if (c.nbMode === 'nb_sphere') {
            this.drawAtomsAsIcosahedron(target, nonBonded, 0.3, true);
        } else if (c.nbMode === 'nb_cross') {
            this.drawAsCross(target, nonBonded, 0.3, true);
        }
    }        

    // Small molecules(HETATMs) as: hidden, sticks, ball and stick, ball and stick (multi bond), spheres, icosahedrons, lines
    if (c.hetatmMode) {
        if (c.hetatmMode === 'stick') {
            this.drawBondsAsStick(target, hetatm, this.cylinderRadius, this.cylinderRadius, true);
        } else if (c.hetatmMode === 'sphere') {
            this.drawAtomsAsSphere(target, hetatm, this.sphereRadius);
        } else if (c.hetatmMode === 'line') {
            this.drawBondsAsLine(target, hetatm, this.curveWidth);
        } else if (c.hetatmMode === 'icosahedron') {
            this.drawAtomsAsIcosahedron(target, hetatm, this.sphereRadius);
        } else if (c.hetatmMode === 'ballAndStick') {
            this.drawBondsAsStick(target, hetatm, this.cylinderRadius / 2.0, this.cylinderRadius, true, false, 0.3);
        } else if (c.hetatmMode === 'ballAndStick2') {
            this.drawBondsAsStick(target, hetatm, this.cylinderRadius / 2.0, this.cylinderRadius, true, true, 0.3);
        } 
    }        

    // Projection: perspective, orthoscopic
    if (c.projectionMode === 'perspective') {
        this.camera = this.perspectiveCamera;
    } else if (c.projectionMode === 'orthoscopic') {
        this.camera = this.orthoscopicCamera;
    }

    // Background color 
    if (c.bgcolor !== null) {
        this.setBackground(c.bgcolor);
    }

    // Unit cell
    if (c.unitCell) {
        this.drawUnitcell(this.modelGroup);
    }

    // Biological assembly (the last one defined)
    if (c.biomt) {
        this.drawSymmetryMates2(this.modelGroup, asu, this.protein.biomtMatrices);
    }

    // Crystal packing
    if (c.packing) {
        this.drawSymmetryMatesWithTranslation2(this.modelGroup, asu, this.protein.symMat);
    }
    this.modelGroup.add(asu);        
}

};

Visualization not changing from spheres to ball and stick

I want to make ball and stick as default, but when i click apply nothing happens. i tried even change this part of the code to just this.drawBondsAsStick(target, hetatm, this.cylinderRadius / 2.0, this.cylinderRadius, true, true, 0.3); but nothing happend

   if ($(idHeader + 'showHetatms').attr('checked')) {
      var hetatmMode = $(idHeader + 'hetatm').val();
      if (hetatmMode == 'stick') {
         this.drawBondsAsStick(target, hetatm, this.cylinderRadius, this.cylinderRadius, true);
      } else if (hetatmMode == 'sphere') {
         this.drawAtomsAsSphere(target, hetatm, this.sphereRadius);
      } else if (hetatmMode == 'line') {
         this.drawBondsAsLine(target, hetatm, this.curveWidth);
      } else if (hetatmMode == 'icosahedron') {
         this.drawAtomsAsIcosahedron(target, hetatm, this.sphereRadius);
     } else if (hetatmMode == 'ballAndStick') {
         this.drawBondsAsStick(target, hetatm, this.cylinderRadius / 2.0, this.cylinderRadius, true, false, 0.3);
     } else if (hetatmMode == 'ballAndStick2') {
         this.drawBondsAsStick(target, hetatm, this.cylinderRadius / 2.0, this.cylinderRadius, true, true, 0.3);
     }

   }

don't even the background changes to white when i click on apply button.

TypeError when loading a pdb

I'm trying to load pdb files from:
https://github.com/mrdoob/three.js/tree/master/examples/models/molecules

Some models like the aspirin.pdb gives an error
https://github.com/mrdoob/three.js/blob/master/examples/models/molecules/aspirin.pdb

TypeError: a is undefined
Three49custom.js (line 14, col 127)

Changing the color of a surface in the modelGroup?

Hi, I've been working on extending the functionality of this library and I've been designing a modern minimalist UI for it and what I'm working right now is adding the functionality of changing the color of an existing surface in the model group. I tried doing this:

GLmol.prototype.changePdbColor = function(id, color){

  var currentPDB = _.where(this.modelGroup.children, {name: id})[0];
  var newColor;

  if ( color.search('#') >= 0 ) {
      color = color.substring(1); // remove the pound # sign
      color = parseInt(color, 16);
      newColor = new THREE.Color(color);
    }
  else if ( color.search('rgb') >= 0 ) {
    var colorValues =color.substring(color.lastIndexOf("(")+1,color.lastIndexOf(")")).split(",");
    var r = parseInt(colorValues[0]) / 255;
    var g = parseInt(colorValues[1]) / 255;
    var b = parseInt(colorValues[2]) / 255;
    newColor = new THREE.Color(r,g,b);
  }
  else if ( color.search('hsl') >= 0 ) {
    // TODO: finish this
    var colorValues = color.substring(color.lastIndexOf("(")+1,color.lastIndexOf(")")).split(",");
  }


  currentPDB.children.forEach(function(child){
    child.material.color = newColor;
  });
  this.show();
}

But all this does is just mess up the color and it doesn't really change it. How are you supposed to change the color?

viewer.html need an update for new three.js

The jquery and three.js file names have changed in the newThreeJS branch
https://github.com/biochem-fan/GLmol/blob/newThreeJS/src/viewer.html#L166

ColorConverter.js need to be added.

The color converter UI in the viewer covers everything else with a scrollbar and doesn't let me use the UI. Tested in Firefox 33.

Labels

Is there a chance you could add labels?

Demo:
http://threejs.org/examples/webgl_loader_pdb.html

Commit:
mrdoob/three.js@a1f50ed

problem with parseObjMol in pymol2glmol.py

Hi; in pymol2glmol.py (https://raw.githubusercontent.com/Pymol-Scripts/Pymol-script-repo/master/pymol2glmol.py), there is this code:

def parseObjMol(obj):
    name = obj[0]
    ids = []
    sphere = []
    trace = []
    ribbon = []
    stick = []
    surface = []
    line = []
    cross = []
    smallSphere = []
    helix = []
    sheet = []
    colors = {}
    for atom in obj[5][7]:
        rep = atom[20] + [0] * 12
        serial = atom[22]
        ss = atom[10]
        bonded = (atom[25] == 1)
        if (rep[5] == 1):
            ribbon.append(serial)
        if (rep[1] == 1):
            sphere.append(serial)
        if (rep[2] == 1):
            surface.append(serial)
        if (rep[7] == 1):
            line.append(serial)
        if (rep[6] == 1):
            trace.append(serial)
        if (rep[4] == 1 and not bonded):
            smallSphere.append(serial)
        if (rep[11] == 1 and not bonded):
            cross.append(serial)
        if (rep[0] == 1 and bonded):
            stick.append(serial)
        if (ss == 'S'):
            sheet.append(serial)
        if (ss == 'H'):
            helix.append(serial)
        ...

There seem to be two problems with this code. The first is that at least with python3 and recent pymol, the line rep = atom[20] + [0] * 12 causes an exception, because atom[20] is an int ("visRep"), and python can't do int + list. I worked around that by doing rep = [atom[20]] + [0] * 12. But now I'm confused because the last part of the code checks for various elements of rep, but rep is never set to anything but all zeros (except the first element). So again it seems to be something wrong with the initialization of rep.
Any hints?

And idea of ussage

I am working with gene<->gene and gene<->proteins interactions in denigma.de I am thinking about using graph visualizations (to show interactions, currently vivagraph looks like the best choise here) together with gene viewier (have not decided which one to use), protein viewer (I see ony to possible alternatives glmol and jsmol) and lifespan interventions data (we already have some in denigma repositories and soon will add much more info). All together it should ease aging research and suggest possible ways of curing aging.

Problems towards the Three.js version updating.

I find that the visualization result turns out to be different when I import the latest version of Three.js rather than 49 version as you author do, shown as the picture below.