Protein Ribbon Models in WebGL

Protein Ribbon Models in WebGL

About the Author

Kevin Theisen is the President of iChemLabs, which funds, develops and hosts the open source ChemDoodle Web Components.

WebGL, the HTML5 technology for native 3D graphics in browsers (without Java or other plugins), has arrived. This 3D ability allows scientists to create more interactive scientific and educational tools, cheaply and easily distributed through the web. A year ago, I discussed new 3D tools we developed for small molecule rendering in WebGL. Over the last year we have been working to improve our WebGL framework and now provide new tools to generate and render ribbon models for proteins and nucleic acid based macromolecules in various styles (scroll to the bottom to see images, or jump to a demo).

Previous Articles

ChemDoodle Web Components 4.2

ChemDoodle Web Components have seen three major updates since the last article. For complete details of the changes, visit the ChemDoodle Web Component changelog.

  1. 4.0.0, January 12, 2011: This massive update brings a new full-featured sketching component for desktop and mobile devices, full access to the ChemDoodle desktop API through AJAX, improved animations, further optimized and smaller Javascript, new and improved packaging to reduce polluting the global Javascript namespace, and a polished touch event and mobile gesture framework. Some aspects of the API have changed slightly, so be sure to refer to the new API page.
  2. 4.1.0, February 10, 2011: This update brings significant improvements to the Spectrum canvas. Interpretation of JCAMP files has been perfected. Additionally, interfacing with iChemLabs services is now much cleaner, with proper warning messages when XHR2 is not supported. XHR2 support for Firefox 3 is now provided, so iChemLabs services now work in all browsers except Opera.
  3. 4.2.0, February 24, 2011: This update provides significant new WebGL features. The PDBInterpreter class will now parse residue data and generate ribbon models for WebGL scenes. Support is provided for both proteins and nucleic acid based macromolecules. Many options are provided, such as cartoon based graphics and different residue color sets. Additional WebGL features include higher bond order rendering and efficiency improvements. The mobile touch event and gesture system has been upgraded to support more advanced gestures, such as multiple-taps and multiple-touch drags.

WebGL is here!

The WebGL specification is in final form and is finally being supported in the production browsers. Google Chrome provided support for WebGL a couple of weeks ago. Mozilla Firefox 4 also supports WebGL and will be released in a few weeks. Apple Safari will soon support WebGL as well. This means that all Mac OS X and Linux users, as well as a large percentage of Windows users, will be able to utilize WebGL applications very soon.

The other major browser is Microsoft Internet Explorer. Currently, there is no news about WebGL support in IE, as the Microsoft team struggles to keep up with HTML5 features, but it must certainly be a consideration.

Another significant web-based arena is on mobile devices. Apple iOS and Google Android are leading in providing the most popular and enjoyable mobile experiences. Both Mobile Safari and Android Browser are at the forefront of HTML5 technologies and support all of the 2D ChemDoodle Web Components. Since both browsers are based on WebKit and their desktop counterparts support WebGL, I believe we should see WebGL support on the leading mobile devices within the next 6 months.

To learn more about WebGL, please check out Giles Thomas's blog, Learning WebGL.


The ChemDoodle Web Components library is a cheminformatics scripting and chemical graphics toolkit. While the default components and screenshots of the graphics are important, the true power of this library comes from creating applications for scientific, educational and commercial pursuits. We have put together a number of demonstrations showing what is truly possible when this library is used to build innovative applications. We hope these provide you with inspiration for your own creations. All demos are open source, and the source can be seen by using your browser's View Page Source function. Feel free to contact us if you need our help.

  • 2D Sketcher - A sample sketcher and user guide to introduce new users to the interface.
  • MolGrabber 3D - A 3D interface where users may view common pharmaceutical drugs and search PubChem for 3D structures. The 3D structure is animated and the user can interact with it and change the 3D representation.
  • Simulate NMR and MS - Draw a structure in an HTML5 <canvas> and then see 1H and 13C NMR spectra, as well as the mass parent peak (isotopic distribution), simulated in other interactive HTML5 <canvas>s that display the spectra.
  • 2D to 3D Coordinates - Draw your structure in a 2D HTML5 <canvas> and have 3D coordinates generated and displayed in a WebGL <canvas>.
  • CDX Viewer - Convert ChemDraw files to PDF. This demo shows off the power of iChemLabs cloud services that access the ChemDoodle Java API.
  • Memory Game - Not everything created with the ChemDoodle Web Components library has to be highly technical. This demo simply puts a chemical twist on the classic memory game. Anything you can think of you can create with ChemDoodle Web Components.
  • PDB Ribbons - Search the Protein Data Bank and load ribbon models. View ribbon models for proteins and nucleic acid based macromolecules. The graphics of the ribbon models can be customized.

Ribbon Models

The Ribbon model has become the most popular technique for protein depiction since it was introduced by Jane S. Richardson in the 1980s. The PDBInterpreter in the ChemDoodle Web Components library now reads residue data from PDB files and generates ribbons for the input. A demo is provided to search the Protein Data Bank and interact with ribbon models. You will notice several options to change the rendering of ribbons. These can be programmatically changed by accessing the Canvas's VisualSpecifications object. The following options are currently provided, as described in the API; note that both the front and back colors of ribbons can be different, to better show off twists and folds:

  • VisualSpecifications.ribbons_display - render ribbons, if any.
  • VisualSpecifications.ribbons_cartoonize - display a cartoon version of the ribbons; by default ribbons and their edges are continuous, by using the cartoon model, ribbon edges will be constant widths for different parts of the structure and will jump at intersections, end of helices and sheets will render an arrowhead.
  • VisualSpecifications.ribbons_useShapelyColors - use “Shapely” colors for residues.
  • VisualSpecifications.ribbons_useAminoColors - use “Amino” colors for residues.
  • VisualSpecifications.ribbons_frontColor - the color of the front of the ribbon.
  • VisualSpecifications.ribbons_backColor - the color of the back of the ribbon.
  • VisualSpecifications.ribbons_cartoonHelixFrontColor - the color of the front of helices in cartoon models.
  • VisualSpecifications.ribbons_cartoonHelixBackColor - the color of the back of helices in cartoon models.
  • VisualSpecifications.ribbons_cartoonSheetColor - the color of sheets in cartoon models.

The following image displays ribbon models for the PDB ID 1C8Z, a mouse brain tubby protein with an alpha helix in the center of the beta-barrel fold. The structure on the left is rendered as a single continuous ribbon, while the structure on the right is rendered as a cartoon model.

Ribbons can also be colored by residue. Both the "Amino" and "Shapely" color sets are provided, but others can be added. The following shows two ribbon models, colored by residue, for the PDB ID 2XKU. The "Amino" color set is used on the left, and the "Shapely" color set is used on the right.

Ribbons are also generated for nucleic acid based macromolecules as shown in the following rendering of the PDB ID 1BNA, looking down the y-axis.

Since the ChemDoodle Web Components library is licensed under the GPL v3.0 license, you can even modify it to display graphics that are optimized for specific uses. All graphics can be customized and both small molecule and ribbon rendering can be combined. The following image renders PDB ID 3Q0D: "A dual flip-out mechanism for 5mC recognition by the Arabidopsis SUVH5 SRA domain and its impact on DNA methylation and H3K9 dimethylation in vivo".

To wrap up this section, I want to note that PDB files can be very large and computationally expensive to parse. Printing a PDB file to a Javascript variable in an HTML page for parsing can result in long load times and the browser popping up messages about unresponsive scripts. As computers get faster and browser vendors continue to optimize Javascript engines, this problem will resolve itself. For now, we provide another alternative solution. iChemLabs cloud services will parse and preoptimize a PDB file for you, and then send down the optimized data through AJAX to be loaded into a ChemDoodle Web Component. This method is orders of magnitude faster for loading PDB files; sometimes from several minutes down to several seconds. The function, ChemDoodle.iChemLabs.getOptimizedPDBStructure() will provide this functionality.


For those that cannot wait for WebGL support to display PDB files, Jolecule by Bosco Ho provides an excellent pseudo-3D alternative based on <canvas>. Jolecule is not open source, but it is free and can be used to embed pseudo-3D renderings of proteins into webpages and blogs. You may even combine the power of ChemDoodle Web Components and Jolecule. For instance, the ChemDoodle.featureDetection.supports_webgl() function can be used to determine if the user's browser supports WebGL and display a Jolecule widget or a ChemDoodle Web Component accordingly. PDB ID 1CRN is shown in the following image; Jolecule on the left and ChemDoodle Web Components on the right.

Future Pursuits

ChemDoodle Web Components now provide leading solutions for structures, reactions and spectra in 2D and 3D graphics. As always, we continue to develop the library to provide additional features and options. WebGL is a major priority for iChemLabs. Over the next couple of years, we will be working to match all of JMol's features. The advantages of HTML5 are many. It is completely native, easy to use, requires no plugins, and will be universally supported. This is where we intend to focus our efforts.