Difference between revisions of "Jmol JavaScript Object/WebGL"

From Jmol
Jump to navigation Jump to search
(WebGL; alternatives)
(WebGL; alternatives)
Line 28: Line 28:
 
* ...
 
* ...
 
=== Not supported ===
 
=== Not supported ===
 +
* background color is ignored; always transparent
 
* ...
 
* ...
 +
  
 
== WebGL-based alternatives to JSmol ==
 
== WebGL-based alternatives to JSmol ==
Line 40: Line 42:
  
 
=== 3Dmol.js ===
 
=== 3Dmol.js ===
−
* Main page: <nowiki>http://3dmol.csb.pitt.edu/index.html</nowiki>
+
* Main page: <nowiki>http://3dmol.csb.pitt.edu/</nowiki>
−
* Article in PMC: <nowiki>http://www.ncbi.nlm.nih.gov/pmc/articles/PMC4393526/</nowiki>
+
* Article in ''Bioinformatics'', doi:10.1093/bioinformatics/btu829
 
* Github Repo : <nowiki>https://github.com/3dmol/3Dmol.js</nowiki>  
 
* Github Repo : <nowiki>https://github.com/3dmol/3Dmol.js</nowiki>  
 
Has a very simple embedding mechanism, based on HTML markup or  
 
Has a very simple embedding mechanism, based on HTML markup or  
Line 47: Line 49:
 
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 ===
 +
* Main page: <nowiki>http://biasmv.github.io/pv/</nowiki>
 +
* Documentation: <nowiki>http://pv.readthedocs.org/en/latest/intro.html</nowiki>
 +
* GitHub repo: <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 ===
 
=== NGL ===
Line 52: Line 63:
 
* Main page: <nowiki>http://arose.github.io/ngl/doc/#User_manual/Introduction/Welcome</nowiki>
 
* 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>  
 
* Demonstration: <nowiki>http://proteinformatics.charite.de/ngl/html/ngl.html</nowiki>  
−
* Article in Nucleic Acid Research <nowiki>http://nar.oxfordjournals.org/content/early/2015/04/28/nar.gkv402.full</nowiki>
+
* Article in ''Nucleic Acid Research'', doi:10.1093/nar/gkv402
 
* Github Repo: <nowiki>https://github.com/arose/ngl</nowiki>  
 
* Github Repo: <nowiki>https://github.com/arose/ngl</nowiki>  
 
Beautiful graphic capabilities. Many bio-molecular representations (some unique  
 
Beautiful graphic capabilities. Many bio-molecular representations (some unique  
 
such as «hyperballs» and «ropes» ). Abilities to act on  
 
such as «hyperballs» and «ropes» ). Abilities to act on  
 
selections with a Jmol-like syntax.
 
selections with a Jmol-like syntax.
−
 
−
=== PV ===
 
−
PV Protein Viewer
 
−
* Main page: <nowiki>http://biasmv.github.io/pv/</nowiki>
 
−
* Dcoumentation: <nowiki>http://pv.readthedocs.org/en/latest/intro.html</nowiki>
 
−
* GitHub repo: <nowiki>https://github.com/biasmv/pv</nowiki>
 
−
Used by SwissModel and RCSB. 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.
 
  
 
=== Chemdoodle Web Components ===
 
=== Chemdoodle Web Components ===
−
* Examples: <nowiki>https://web.chemdoodle.com/demos/iza-zeolite-explorer/</nowiki>
+
* Examples: <nowiki>https://web.chemdoodle.com/demos/iza-zeolite-explorer/</nowiki> <nowiki>http://www.glmol.com/</nowiki>
 
Handles bimolecular representations and has some capabilities to handle cif  
 
Handles bimolecular representations and has some capabilities to handle cif  
 
files and generate multiple cells. Viewer canvases can be linked to a range of  
 
files and generate multiple cells. Viewer canvases can be linked to a range of  
 
different widgets (spectrum display, 2D formula, etc.). Selection and display  
 
different widgets (spectrum display, 2D formula, etc.). Selection and display  
 
is based on the manipulation of JavaScript objects.
 
is based on the manipulation of JavaScript objects.
 +
 +
=== iview ===
 +
By Li, Leung, Nakane and Wong, Chinese University of Hong Kong
 +
* Main page: <nowiki>http://istar.cse.cuhk.edu.hk/iview/</nowiki>
 +
 +
=== molmil ===
 +
Backed by Protein Data Bank Japan
 +
* Main page: <nowiki>http://pdbj.org/help/molmil</nowiki>
 +
 +
=== Speck ===
 +
* Main page: <nowiki>http://wwwtyro.github.io/speck/</nowiki>
 +
Offers Ambient Occlusion rendering

Revision as of 20:55, 7 November 2015

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, and so compatibility may be limited, although it is a growing standard feature.

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

Hardware support

Old graphics cards may not support WebGL.

Browser support

Browser support is irregular, although growing. Chrome, Safari, Edge are compatible, Firefox may be depending on graphics card drivers. Please check e.g. Can I use for current status.

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)


JmolScript features

Please, if you have experienced with JSmol/WegGL feel free to add items here.

Supported

  • ...

Not supported

  • background color is ignored; always transparent
  • ...


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

  • 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/
  • Article in Bioinformatics, doi:10.1093/bioinformatics/btu829
  • Github Repo : https://github.com/3dmol/3Dmol.js

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.

PV Protein Viewer

  • Main page: http://biasmv.github.io/pv/
  • Documentation: http://pv.readthedocs.org/en/latest/intro.html
  • GitHub repo: 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.

NGL

by Alexander Rose

  • Main page: http://arose.github.io/ngl/doc/#User_manual/Introduction/Welcome
  • Demonstration: http://proteinformatics.charite.de/ngl/html/ngl.html
  • Article in Nucleic Acid Research, doi:10.1093/nar/gkv402
  • Github Repo: https://github.com/arose/ngl

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

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

Handles bimolecular 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

  • Main page: http://istar.cse.cuhk.edu.hk/iview/

molmil

Backed by Protein Data Bank Japan

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

Speck

  • Main page: http://wwwtyro.github.io/speck/

Offers Ambient Occlusion rendering

Contributors

AngelHerraez

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