Difference between revisions of "Jmol JavaScript Object/WebGL"

From Jmol
Jump to navigation Jump to search
(→‎Browser support)
(→‎WebGL-based alternatives to JSmol)
 
(16 intermediate revisions by the same user not shown)
Line 9: Line 9:
 
The major advantage of using WebGL is a better quality and faster rendering of the model, rotation, movement, etc., over that obtained with JSmol/HTML5. In exchange, the latter offers a wider compatibility with devices.
 
The major advantage of using WebGL is a better quality and faster rendering of the model, rotation, movement, etc., over that obtained with JSmol/HTML5. In exchange, the latter offers a wider compatibility with devices.
  
−
Demonstration page: {{StOlaf}}/jsmol/jsmolgl.htm
+
== Test or demo pages ==
 +
* Demonstration page: {{StOlaf}}/jsmol/jsmolgl.htm
 +
* [http://biomodel.uah.es/en/DIY/JSME/draw.en.htm Do-It-Yourself Molecules: From 2D to 3D] at Biomodel.UAH (input from structures drawn in JSME, but also including model retrieval from databases)
  
 
== Hardware support ==
 
== Hardware support ==
Line 17: Line 19:
 
Browser support is irregular, although growing. Current versions of Chrome, Safari, Edge are compatible, Firefox may depend on the update of graphics card drivers. Please check e.g. [http://caniuse.com/#feat=webgl Can I use] for current status.
 
Browser support is irregular, although growing. Current versions of Chrome, Safari, Edge are compatible, Firefox may depend on the update of graphics card drivers. Please check e.g. [http://caniuse.com/#feat=webgl Can I use] for current status.
  
−
== Implementing the WebGL modality ==
+
== Support for JmolScript features ==
−
You need to be aware that your users/visitors might not have a WebGL-compatible system, so be cautious with your design and offer alternatives.
+
:''If you have experience with JSmol/WebGL, please feel free to add items here.''
−
 
+
{| class="wikitable"
−
In order to have JSmol in your pages use the WebGL modality:
+
! Supported
−
# your page should call {{file|JSmol.GLmol.min.js}} in addition to {{file|JSmol.min.js}}
+
! Not supported
−
# the <code>use</code> parameter of the <code>Info</code> variable must be set to <code>WebGL</code> (case-insensitive). You can set it to <code>WebGL HTML5</code> (that's two values) and it will fall back to regular html5-only JSmol should WebGL be unavailable to the browser.
+
|- style="vertical-align: top;"
−
 
+
|
−
 
 
−
== JmolScript features ==
 
−
:''Please, if you have experienced with JSmol/WebGL feel free to add items here.''
 
−
=== Supported ===
 
 
* rendering styles for atoms and bonds, cartoons, backbone, trace, ribbons
 
* rendering styles for atoms and bonds, cartoons, backbone, trace, ribbons
 
* isosurfaces
 
* isosurfaces
 
* molecular orbitals
 
* molecular orbitals
 +
* set scaleAngstromsPerInch
 +
* minimize (the calculation works, but no animation is shown during minimization; it jumps to the new conformation at the end)
 
* ...
 
* ...
−
=== Not supported ===
+
|
 
* background color is ignored (always transparent)
 
* background color is ignored (always transparent)
−
* echo, labels (not displayed, may pop errors)
+
* echo (not displayed)
 +
* labels (not displayed, may pop errors)
 +
* halos (not displayed)
 +
* hover (tooltips not displayed)
 
* translucency (always opaque)
 
* translucency (always opaque)
 
* animation (stops at every frame)
 
* animation (stops at every frame)
Line 40: Line 43:
 
* rockets (helices lack the pointed end), strands (clumsy rotation)
 
* rockets (helices lack the pointed end), strands (clumsy rotation)
 
* mesh (e.g. in MO, clumsy rotation)
 
* mesh (e.g. in MO, clumsy rotation)
 +
* set picking
 +
* set minimizationRefresh (ignored, always false)
 +
* draw sphere (nothing is displayed)
 +
* draw circle (only the thin circumference is drawn, not filled)
 +
* draw cylinder (caps are not filled)
 
* ...
 
* ...
 +
|}
 +
 +
== Implementing the WebGL modality ==
 +
You need to be aware that your users/visitors might not have a WebGL-compatible system, so be cautious with your design and offer alternatives.
 +
 +
In order to have JSmol in your pages use the WebGL modality:
 +
# your page should call {{file|JSmol.GLmol.min.js}} in addition to {{file|JSmol.min.js}}
 +
# the <code>use</code> parameter of the <code>Info</code> variable must be set to <code>WebGL</code> (case-insensitive). You can set it to <code>WebGL HTML5</code> (that's two values) and it will fall back to regular html5-only JSmol should WebGL be unavailable to the browser.
 +
 +
The JSmol libraries will automatically detect WebGL support in the user's system and fall back to HTML5 modality if WebGL is not available.
 +
If you need to detect WebGL support yourself, you may use the same algorithm by checking the value returned from this function: <code>Jmol.featureDetection.supportsWebGL()</code>
  
 
= WebGL-based alternatives to JSmol =
 
= WebGL-based alternatives to JSmol =
Line 46: Line 65:
  
 
=== GLmol ===
 
=== GLmol ===
 +
By biochem_fan.
 
* Main page: <nowiki>http://webglmol.osdn.jp/index-en.html</nowiki>  
 
* Main page: <nowiki>http://webglmol.osdn.jp/index-en.html</nowiki>  
 
Might have been the first WebGL viewer available. Some of its code has been  
 
Might have been the first WebGL viewer available. Some of its code has been  
Line 61: Line 81:
 
that don’t hang the web browser during the computation). Displays most common  
 
that don’t hang the web browser during the computation). Displays most common  
 
bio-molecular representations, labels, select and color abilities.
 
bio-molecular representations, labels, select and color abilities.
−
 
−
=== PV Protein Viewer ===
 
−
By Marco Biasini. Open source.
 
−
* Main page: <nowiki>http://biasmv.github.io/pv/</nowiki>
 
−
* Documentation: <nowiki>http://pv.readthedocs.org/en/latest/intro.html</nowiki>
 
−
* Repository: <nowiki>https://github.com/biasmv/pv</nowiki>
 
−
Used by SwissModel and RCSB Protein Data Bank. Very clear documentation. Graphics are
 
−
stylized but also really clear in their depiction. Common bio-molecular
 
−
representations are available. Selections are based on javascript and a JSON
 
−
syntax.
 
−
 
−
=== NGL ===
 
−
by Alexander Rose
 
−
* Main page: <nowiki>http://arose.github.io/ngl/doc/#User_manual/Introduction/Welcome</nowiki>
 
−
* Demonstration: <nowiki>http://proteinformatics.charite.de/ngl/html/ngl.html</nowiki>
 
−
* Article in ''Nucleic Acid Research'', doi:10.1093/nar/gkv402
 
−
* Repository: <nowiki>https://github.com/arose/ngl</nowiki>
 
−
Beautiful graphic capabilities. Many bio-molecular representations (some unique
 
−
such as «hyperballs» and «ropes» ). Abilities to act on
 
−
selections with a Jmol-like syntax.
 
  
 
=== ChemDoodle Web Components ===
 
=== ChemDoodle Web Components ===
Line 92: Line 92:
  
 
=== iview ===
 
=== iview ===
−
By Li, Leung, Nakane and Wong, Chinese University of Hong Kong
+
By Li, Leung, Nakane and Wong, Chinese University of Hong Kong. Code licensed under Apache License 2.0 / MIT License.
 
* Main page: <nowiki>http://istar.cse.cuhk.edu.hk/iview/</nowiki>
 
* Main page: <nowiki>http://istar.cse.cuhk.edu.hk/iview/</nowiki>
 +
* Article in BMC Bioinformatics, doi:10.1186/1471-2105-15-56
 +
* Repository: <nowiki>https://github.com/HongjianLi/iview</nowiki>
 +
Based on GLmol. Specially aimed at protein-ligand complexes.
 +
 +
=== LiteMol ===
 +
By David Sehnal and collaborators.
 +
* Main page: <nowiki>https://github.com/dsehnal/LiteMol/blob/master/README.md</nowiki>
 +
* Repository: <nowiki>https://github.com/dsehnal/LiteMol</nowiki>
 +
Backed and used by PDB Europe.
  
 
=== molmil ===
 
=== molmil ===
−
Backed by Protein Data Bank Japan
+
Backed by Protein Data Bank Japan.
 
* Main page: <nowiki>http://pdbj.org/help/molmil</nowiki>
 
* Main page: <nowiki>http://pdbj.org/help/molmil</nowiki>
 +
 +
=== NGL ===
 +
by Alexander Rose
 +
* Main page: <nowiki>http://nglviewer.org/ngl/api/</nowiki>
 +
* Demonstration: <nowiki>http://proteinformatics.charite.de/ngl/html/ngl.html</nowiki>
 +
* Article in ''Nucleic Acid Research'', doi:10.1093/nar/gkv402
 +
* Repository: <nowiki>https://github.com/arose/ngl</nowiki>
 +
Used by RCSB Protein Data Bank. Beautiful graphic capabilities. Many bio-molecular representations (some unique such as «hyperballs» and «ropes» ). Abilities to act on
 +
selections with a Jmol-like syntax.
 +
 +
=== PV Protein Viewer ===
 +
By Marco Biasini. Open source.
 +
* Main page: <nowiki>http://biasmv.github.io/pv/</nowiki>
 +
* Documentation: <nowiki>http://pv.readthedocs.org/en/latest/intro.html</nowiki>
 +
* Repository: <nowiki>https://github.com/biasmv/pv</nowiki>
 +
Used by SwissModel and RCSB Protein Data Bank. Very clear documentation. Graphics are
 +
stylized but also really clear in their depiction. Common bio-molecular
 +
representations are available. Selections are based on javascript and a JSON
 +
syntax.
  
 
=== Speck ===
 
=== Speck ===
Line 103: Line 131:
 
* Main page: <nowiki>http://wwwtyro.github.io/speck/</nowiki>
 
* Main page: <nowiki>http://wwwtyro.github.io/speck/</nowiki>
 
* Repository: <nowiki>https://github.com/wwwtyro/speck</nowiki>
 
* Repository: <nowiki>https://github.com/wwwtyro/speck</nowiki>
−
Offers ambient occlusion rendering
+
Reads only <code>xyz</code> files. Implements spacefill, sticks, ball & stick styles, but no cartoons etc. Offers '''ambient occlusion rendering'''. Beautiful images, but not useful for a smooth real time manipulation of the model.
 +
 
 +
=== UglyMol ===
 +
By Marcin Wojdyr.
 +
* Main page: <nowiki>http://uglymol.github.io/</nowiki>
 +
A web-based macromolecular viewer with '''a focus on reading and display of electron density maps'''. Model handling is made similar to that of Coot.
 +
A viewer suitable for a quick look without downloading the data and starting Coot.
 +
 
 +
Compared to other WebGL viewers:
 +
* No cartoons, no electrostatic potential surfaces, etc.
 +
* Orthographic projection only.
 +
* Specifically suited for electron density maps.
 +
* Keyboard shortcuts for almost everything.
 +
 
 +
= Literature =
 +
* Implementing WebGL and HTML5 in macromolecular visualization and modern computer-aided drug design. S. Yuan, H.C.S. Chan, Z. Hu (2017) doi:10.1016/j.tibtech.2017.03.009

Latest revision as of 10:46, 28 April 2019

WebGL modality in JSmol

JSmol has tentatively implemented a modality (additional to the Java and the HTML5 modalities) that makes use of the WebGL technology.

Please, note that this modality does not implement the full set of functionalities of Jmol/JSmol and there are no current plans to develop it further. Help from interested developers/programmers would be welcome.

WebGL is a hardware-accelerated technology for displaying 2D and 3D graphics inside web pages without using any plugins in the browser. It relies on capabilities of the user's graphics card (calculation in the GPU), and so compatibility may be limited, although it is a growing standard feature.

The major advantage of using WebGL is a better quality and faster rendering of the model, rotation, movement, etc., over that obtained with JSmol/HTML5. In exchange, the latter offers a wider compatibility with devices.

Test or demo pages

Hardware support

Old graphics cards may not support WebGL.

Browser support

Browser support is irregular, although growing. Current versions of Chrome, Safari, Edge are compatible, Firefox may depend on the update of graphics card drivers. Please check e.g. Can I use for current status.

Support for JmolScript features

If you have experience with JSmol/WebGL, please feel free to add items here.
Supported Not supported
  • rendering styles for atoms and bonds, cartoons, backbone, trace, ribbons
  • isosurfaces
  • molecular orbitals
  • set scaleAngstromsPerInch
  • minimize (the calculation works, but no animation is shown during minimization; it jumps to the new conformation at the end)
  • ...
  • background color is ignored (always transparent)
  • echo (not displayed)
  • labels (not displayed, may pop errors)
  • halos (not displayed)
  • hover (tooltips not displayed)
  • translucency (always opaque)
  • animation (stops at every frame)
  • vibration (the animations)
  • rockets (helices lack the pointed end), strands (clumsy rotation)
  • mesh (e.g. in MO, clumsy rotation)
  • set picking
  • set minimizationRefresh (ignored, always false)
  • draw sphere (nothing is displayed)
  • draw circle (only the thin circumference is drawn, not filled)
  • draw cylinder (caps are not filled)
  • ...

Implementing the WebGL modality

You need to be aware that your users/visitors might not have a WebGL-compatible system, so be cautious with your design and offer alternatives.

In order to have JSmol in your pages use the WebGL modality:

  1. your page should call File icon.gifJSmol.GLmol.min.js in addition to File icon.gifJSmol.min.js
  2. the use parameter of the Info variable must be set to WebGL (case-insensitive). You can set it to WebGL HTML5 (that's two values) and it will fall back to regular html5-only JSmol should WebGL be unavailable to the browser.

The JSmol libraries will automatically detect WebGL support in the user's system and fall back to HTML5 modality if WebGL is not available. If you need to detect WebGL support yourself, you may use the same algorithm by checking the value returned from this function: Jmol.featureDetection.supportsWebGL()

WebGL-based alternatives to JSmol

There are several programs able to display molecular structures using the WebGL technology. This is a list of some of them, and an attempt for comparison.

GLmol

By biochem_fan.

  • Main page: http://webglmol.osdn.jp/index-en.html

Might have been the first WebGL viewer available. Some of its code has been used in the JSmol WebGL modality. Active development has apparently ceased.

3Dmol.js

  • Main page: http://3dmol.csb.pitt.edu/doc/
  • Demo: http://3dmol.csb.pitt.edu/
  • Article in Bioinformatics, doi:10.1093/bioinformatics/btu829
  • Repository: https://github.com/3dmol/3Dmol.js
  • Library available as a single JavaScript file (including or not jQuery)

Has a very simple embedding mechanism, based on HTML markup or url formatting. Abilities to compute isosurfaces in parallel (using web workers that don’t hang the web browser during the computation). Displays most common bio-molecular representations, labels, select and color abilities.

ChemDoodle Web Components

Free product offered by iChemLabs, LLC, under open-source GPL license.

  • Main page: https://web.chemdoodle.com/
  • Examples: https://web.chemdoodle.com/demos/iza-zeolite-explorer/ http://www.glmol.com/

Handles biomolecular representations and has some capabilities to handle cif files and generate multiple cells. Viewer canvases can be linked to a range of different widgets (spectrum display, 2D formula, etc.). Selection and display is based on the manipulation of JavaScript objects.

iview

By Li, Leung, Nakane and Wong, Chinese University of Hong Kong. Code licensed under Apache License 2.0 / MIT License.

  • Main page: http://istar.cse.cuhk.edu.hk/iview/
  • Article in BMC Bioinformatics, doi:10.1186/1471-2105-15-56
  • Repository: https://github.com/HongjianLi/iview

Based on GLmol. Specially aimed at protein-ligand complexes.

LiteMol

By David Sehnal and collaborators.

  • Main page: https://github.com/dsehnal/LiteMol/blob/master/README.md
  • Repository: https://github.com/dsehnal/LiteMol

Backed and used by PDB Europe.

molmil

Backed by Protein Data Bank Japan.

  • Main page: http://pdbj.org/help/molmil

NGL

by Alexander Rose

  • Main page: http://nglviewer.org/ngl/api/
  • Demonstration: http://proteinformatics.charite.de/ngl/html/ngl.html
  • Article in Nucleic Acid Research, doi:10.1093/nar/gkv402
  • Repository: https://github.com/arose/ngl

Used by RCSB Protein Data Bank. Beautiful graphic capabilities. Many bio-molecular representations (some unique such as «hyperballs» and «ropes» ). Abilities to act on selections with a Jmol-like syntax.

PV Protein Viewer

By Marco Biasini. Open source.

  • Main page: http://biasmv.github.io/pv/
  • Documentation: http://pv.readthedocs.org/en/latest/intro.html
  • Repository: https://github.com/biasmv/pv

Used by SwissModel and RCSB Protein Data Bank. Very clear documentation. Graphics are stylized but also really clear in their depiction. Common bio-molecular representations are available. Selections are based on javascript and a JSON syntax.

Speck

By Rye Terrell. Public domain.

  • Main page: http://wwwtyro.github.io/speck/
  • Repository: https://github.com/wwwtyro/speck

Reads only xyz files. Implements spacefill, sticks, ball & stick styles, but no cartoons etc. Offers ambient occlusion rendering. Beautiful images, but not useful for a smooth real time manipulation of the model.

UglyMol

By Marcin Wojdyr.

  • Main page: http://uglymol.github.io/

A web-based macromolecular viewer with a focus on reading and display of electron density maps. Model handling is made similar to that of Coot. A viewer suitable for a quick look without downloading the data and starting Coot.

Compared to other WebGL viewers:

  • No cartoons, no electrostatic potential surfaces, etc.
  • Orthographic projection only.
  • Specifically suited for electron density maps.
  • Keyboard shortcuts for almost everything.

Literature

  • Implementing WebGL and HTML5 in macromolecular visualization and modern computer-aided drug design. S. Yuan, H.C.S. Chan, Z. Hu (2017) doi:10.1016/j.tibtech.2017.03.009

Contributors

AngelHerraez

Retrieved from "https://wiki.jmol.org/index.php?title=Jmol_JavaScript_Object/WebGL&oldid=9913"