nglviewer / ngl

WebGL protein viewer
http://nglviewer.org/ngl/
MIT License
657 stars 168 forks source link

Is it possible to color surface patches associated with individual amino acid residues? #1005

Closed mretier closed 5 months ago

mretier commented 6 months ago

I'd like to color surface patches of certain amino acid residues differently from the rest of the surface like in this rendering in ChimeraX.

image

Is this possible using ngl? Thanks for the info.

Michael

fredludlow commented 6 months ago

The selection colorScheme system should work for surfaces, there's an example on the demo page:

https://github.com/nglviewer/ngl/blob/master/examples/scripts/color/selection.js

var schemeId = NGL.ColormakerRegistry.addSelectionScheme([
  [
    'atomindex',
    '64-74 or 134-154 or 222-254 or 310-310 or 322-326',
    { scale: ['firebrick', 'red', 'orangered'] }
  ],
  [ 'green', '311-322' ],
  [
    'atomindex',
    '40-63 or 75-95 or 112-133 or 155-173 or 202-221 or 255-277 or 289-309',
    { scale: ['gold', 'yellow', 'lightyellow'] }
  ],
  [
    'atomindex',
    '1-39 or 96-112 or 174-201 or 278-288',
    { scale: ['blue', 'dodgerblue', 'cyan'] }
  ],
  [ 'white', '*' ]
], 'TMDET 3dqb')

stage.loadFile('data://3dqb.pdb').then(function (o) {
  o.addRepresentation('cartoon', { color: schemeId })
  o.autoView()
})

This registers a custom colorScheme (called 'TMDET 3dqb'), which can be applied to any atom-based representation (i.e. including molecular surfaces, but it obviously wouldn't work for a surface generated from a volume/map).

hainm commented 6 months ago

Thanks @fredludlow for confirming. I've tried with nglview and it seems to work too

image
import nglview as nv

view = nv.show_structure_file('./3dqb.pdb')
view

# 2nd cell
cm.add_selection_scheme('awesome', [['red', '1-10'], ['yellow', '222-300']])
view.add_representation('surface', color='awesome')

file: https://github.com/nglviewer/ngl/blob/d9b2914527f66ff4033778542843c321d8a88264/data/3dqb.pdb