rpartridge / ngl

WebGL protein viewer

NGL Viewer is a web application for molecular visualization. WebGL is employed to display molecules like proteins and DNA/RNA with a variety of representations.

See it in action:

• Web application
• API documentation

Features

• Molecular structures (mmCIF, PDB, PQR, GRO, SDF, MOL2, MMTF)
• Density volumes (MRC/MAP/CCP4, DX/DXBIN, CUBE)
• User interaction (mouse picking, selection language, image export)
• Coordinate trajectories (animation, remote access via MDSrv)
• Embeddable (single file, API)

Table of contents

• Usage
• Browser support
• Acknowledgments

Usage

Since the NGL Viewer is a set of static files to be viewed in a web-browser there is not much of an installation needed. For development purposes it will be helpful to clone this repository and serve it locally (see below). When embedding the NGL Viewer as a library it is sufficient to include the self contained build. For versions up to 0.7.1a the file is js/build/ngl.embedded.min.js and for later versions it is dist/ngl.js. A full web application including a GUI can be found in the examples directory.

Browser support

The NGL Viewer requires your browser to support WebGL. To see if your browser supports WebGL and what you might need to do to activate it, visit the Get WebGL page.

Generally, WebGL is available in recent browser versions of Mozilla Firefox (>29) or Google Chrome (>27). The Internet Explorer supports WebGL only since version 11. The Safari Browser since version 8 (though WebGL can be activated in earlier version: first enable the Develop menu in Safari’s Advanced preferences, then secondly in the now visible Develop menu enable WebGL).

See also this page for details on which graphics card drivers are supported by the browsers.

WebGL draft extensions: For a smoother appearance of cylinders and spheres your browser needs to have the EXT_frag_depth extension available. The WebGL Report should list the extension if active. If not, you can enable WebGL draft extensions in your browser following these instructions:

• Chrome: browse to about:flags, enable the Enable WebGL Draft Extensions option, then relaunch.
• Firefox: browse to about:config and set webgl.enable-draft-extensions to true.
• Safari: Currently, the EXT_frag_depth extension is not supported.
• Internet Explorer: Currently, the EXT_frag_depth extension is not supported.

Acknowledgments

This project would not be possible without recourse to many fine open-source projects. Especially the three.js project provides a great foundation.

• three.js
  • NGL relies on the three.js library to interface WebGL
  • NGL's documentation uses the three.js documentation as a template
  • NGL's GUI is based on the three.js editor UI
• sprintf.js - for formatting text
• jsfeat - the SVD code for the superposition method is from jsfeat
• Mocha and Chai - for unit testing
• Chroma.js - for color handling
• FlexiColorPicker - for color picking
• Virtual DOM List
• Font Awesome - for icons
• JS Signals
• tether.js
• Lightweight promise polyfill
• pako - zlib port
• Open Source PyMOL - screen aligned cylinder shader
• VTK Quadric shader code from the PointSprite Plugin - quadric surface center calculation
• HyperBalls - hyperball stick shader - Chavent, M., Vanel, A., Tek, A., Levy, B., Robert, S., Raffin, B., & Baaden, M. (2011). GPU-accelerated atom and dynamic bond visualization using hyperballs: a unified algorithm for balls, sticks, and hyperboloids. Journal of Computational Chemistry, 32(13), 2924–35. doi:10.1002/jcc.21861