Content uploaded by Joel Sussman
Author content
All content in this area was uploaded by Joel Sussman on Apr 21, 2022
Content may be subject to copyright.
DOI: 10.1002/ijch.201300024
JSmol and the Next-Generation Web-Based
Representation of 3D Molecular Structure as Applied to
Proteopedia
Robert M. Hanson,[a] Jaime Prilusky,[b] Zhou Renjian,[c] Takanori Nakane,[d] and Joel L. Sussman*[e]
Communicating Science Widely
There is a great need to improve the communication of
scientific concepts at all levels, so as to generate a passion
for science in the next generation, as well as to increase
the public understanding of science. Proteopedia[1–3] was
developed to tackle this issue via a novel approach. The
novelty of Proteopedia lies in the implementation of
a wiki web resource that presents information on the 3D
structure and function of biological macromolecules
(Figure 1) as a way of showing the principles of structural
biology to a broad audience. This includes a wide range
of web users, from high school students to medical school
students, from educators looking for a way to engage
their students in molecular structure to scientists doing
basic and applied research, as well as the general public.
Structural biology is concerned with accumulating
structural information at the atomic level for proteins, nu-
cleic acids, and other biological macromolecules. Such de-
tailed information can then be utilized to understand how
these macromolecules function, and how they recognize
other molecules with which they interact. However, bio-
logical macromolecules contain many thousands of atoms
and, even when displayed on a computer screen as high-
quality 3D representations, are often very difficult to
fathom, even for a trained biochemist, let alone for a clini-
cian, a layman, or a high school student.
Proteopedia was constructed with the specific objective
of providing a user-friendly tool that would enable under-
[a] R. M. Hanson+
St. Olaf College
Dept. of Chemistry
Northfield, MN 55057 (USA)
[b] J. Prilusky+
Bioinformatics Unit
Biological Services
Weizmann Institute of Science
Rehovot 76100 (Israel)
[c] Z. Renjian
Room 202, Building 38
Nianjiabang Road 425
Zhoupu Town, Pudong District
Shanghai 201318 (China)
[d] T. Nakane
Dept. of Cell Biology
Graduate School of Medicine
Kyoto University
Yoshidakonoe-cho, Sakyo-ku
Kyoto 606-8501 (Japan)
[e] J. L. Sussman
Dept. of Structural Biology and the Israel Structural Proteomics
Center
Weizmann Institute of Science
Rehovot 76100 (Israel)
phone +972-8-934-4531
fax: +972-8-934-6312
e-mail: joel.sussman@weizmann.ac.il
[
+
] R. M. H. and J. P. made equal contribution to this paper.
Abstract: Although Java does not run on some handheld de-
vices, e.g., iPads and iPhones, JavaScript does. The develop-
ment of JSmol, a JavaScript-only version of Jmol, is de-
scribed, and its use in Proteopedia is demonstrated. A key
aspect of JSmol is that it includes the full implementation of
the entire set of Jmol functionalities, including file reading
and writing, scripting, and rendering. The relative perform-
ances of Java-based Jmol and JavaScript-only JSmol are dis-
cussed. We can now confirm that the guiding principles of
Java programming can be completely and relatively straight-
forwardly transformed directly into JavaScript, requiring no
Java applet, and producing identical graphical results. JSmol
is thus the first full-featured molecular viewer, and the first
ever viewer for proteins, which can be utilized with an inter-
net browser on handheld devices lacking Java. Since the Me-
diaWiki features of Proteopedia have been modified to op-
tionally use JSmol, the wealth of crowd-sourced content in
Proteopedia is now directly available on such devices, with-
out the need to download any additional applet.
Keywords: bioinformatics ·databases ·Java ·JavaScript ·Proteopedia
Isr. J. Chem. 2013, 53, 207 – 216 2013 Wiley-VCH Verlag GmbH & Co. KGaA, Weinheim 207
Review
graduates, graduate students, scientists, and clinical inves-
tigators, amongst others, to understand such complex
macromolecular structures and how they function as mi-
croscopic bio-nano machines. It has not escaped our
notice that the development of such a tool for structural
biology might serve as a paradigm for developing similar
tools for other disciplines, such as astronomy, neuroanato-
my, architecture, and paleontology.
Structural biology has played a cutting edge role in the
immense progress of life science research over the past 60
years. There have been more than a dozen Nobel Prizes
in structural biology since the early 1950s, when Watson
and Crick[4] determined the 3D structure of the DNA
double helix (Figure 2a). Understanding the basic mecha-
nisms of how protein and nucleic acid molecules function
is crucial for biology. For example, without structural in-
sight (Figure 2b), it is impossible to comprehend how the
ribosome (the nano-machine that synthesizes all proteins
Robert Hanson is the Edolph A. Larson
and Truman E. Anderson Sr. Chair of
Chemistry and currently serves as chair
of the St. Olaf College Chemistry Dept.
He joined the St. Olaf faculty in 1986
after earning a B. S. from Caltech,
a PhD from Columbia University, and
completing postdoctoral work at MIT.
Over the course of his career, Hanson
has been the recipient of many awards
and grants from organizations that in-
clude the NSF, NIH, the ACS, DuPont,
Eli Lilly, and the W. M. Keck Founda-
tion. Hanson has published numerous articles in the areas of
chemistry, material science, informatics, and mathematics, as well
as two books: Molecular Origami: Precision Scale Models from Paper
and Introduction to Molecular Thermodynamics. He is the co-inventor
on one patent titled Catalytic Asymmetric Epoxidation (with K. Barry
Sharpless, who received the Nobel Prize in Chemistry in 2001).
Since 2006 Hanson has been the project leader and principal devel-
oper for the Jmol Molecular Visualization Project, a global open-
source interdisciplinary effort to develop novel web-based capabili-
ties for the visualization of molecular structure and energetics. Ap-
plicable in a wide range of fields, the Jmol applet can be found on
thousands of websites, including the PDB and Proteopedia. In 2010
Jmol became part of an exhibit on nanotechnology in the Innoven-
tions pavilion at the Walt Disney Epcot theme park, where more
than 300,000 visitors have interacted with it. He also developed the
Interim course Medicinal Chemistry in Jamaica: An International
Perspective, which brings students to the University of the West
Indies in Kingston, Jamaica, every other year for an in-depth look
into how drugs work and how they are designed and developed,
with a particular focus on the interactions of culture, traditional
healing, and pharmaceutical medicine. Prof. Hanson may be
reached at hansonr@stolaf.edu.
Jaime Prilusky is the Head of the Bioin-
formatics Unit at the Weizmann Insti-
tute of Science in Rehovot, Israel. He
received his PhD in neuroendocrinolo-
gy from the National University of Cor-
doba, Argentina in 1974, and was a full
professor at the National Technological
University in Argentina before joining
the Weizmann Institute in 1989. An
early online pioneer in bioinformatics,
Jaime developed the first web interface
to search and retrieve PDB data, called
3DB, and founded BioMOO (a virtual
meeting place for biologists). In addition to Proteopedia his proj-
ects include OCA (oca.weizmann.ac.il), a browser-database for pro-
tein structure/function and GeneCards (www.genecards.org), an
electronic encyclopedia integrating information about the functions
of human genes and their products, and of biomedical applications
based on this knowledge. For more, see http://miw.weizmann.ac.il.
Most recently he, together with Joel Sussman & Eran Hodis, has de-
veloped Proteopedia, the free, collaborative 3D encyclopedia of pro-
teins & other molecules (http://proteopedia.org). Prof. Prilusky may
be reached at Jaime.Prilusky@weizmann.ac.il.
Zhou Renjian earned his B. S. in Math-
ematics at Shanghai Jiao Tong Univer-
sity. He worked as a software engineer
for IDSignet, Primeton, and Koretide,
doing research and development in
digital signatures, enterprise software
platforms, and computer operating sys-
tems. He created the open source proj-
ect Java2Script, providing an Eclipse
plugin for converting existing Java code
into JavaScript. He also developed and
operated WeBuzz.IM service, providing
web messengers for users to connect
with their friends on popular instant messaging networks, such as
Gtalk, MSN, YMSG, and AIM. Recently, he co-founded Coco Voice
with Guo Lei, an app for iOS and Android devices, helping people
to send text, voice, and pictures to their friends. Mr. Renjian may be
reached at zhourenjian@gmail.com.
Takanori Nakane graduated from Kyoto
University’s School of Medicine in
2010. After passing Japan’s national
board exam and qualifying as a medical
doctor, Nakane decided to enter a four-
year PhD course in X-ray crystallogra-
phy at Kyoto University instead of clini-
cal practice. While working on “wet”
experiments, he realized that he is
more attracted to “dry” (computation-
al) aspects of science. Over the last
two years, Nakane has been developing
molecular viewers for web browsers
and mobile devices, including the NDKMol molecular viewer that
has been incorporated with the RCSB PDB Mobile app. Nakane
also contributes to several open-source projects, including PyMOL
and Jmol. Visit http://webglmol.sourceforge.jp to download Na-
kane’s GLmol (Molecular viewer on WebGL/Javascript) and ESmol
& NDKmol (Molecular viewer for Android). Dr. Nakane may be
reached at nakane.t@gmail.com.
208 www.ijc.wiley-vch.de 2013 Wiley-VCH Verlag GmbH & Co. KGaA, Weinheim Isr. J. Chem. 2013, 53, 207 – 216
Review
J. L. Sussman et al.
in all living systems) works. Structural information is also
crucial for understanding how regulatory proteins turn
genes on and off, by recognizing specific regions of DNA
(Figure 2c).
Proteopedia has been used particularly successfully in
conjugation with SMART Teams (“Students Modeling A
Research Topic” [http://proteopedia.org/w/Group:
SMART:Teams], a project developed by Dr. Timothy
Herman, Milwaukee School of Engineering). Within the
SMART framework, the students, together with their
mentors, e.g., professors and/or graduate or undergradu-
ate students at nearby universities, design and build phys-
ical models of proteins. They then make an oral presenta-
tion explaining their work to a lay audience, and prepare
a poster that is presented to a scientific audience. Follow-
ing this, a number of such teams have also produced Pro-
teopedia pages, some of which are spectacular. A striking
example of one such Proteopedia page is “A Physical
Model of the b2-Adrenergic Receptor.” This was one of
the first examples of a SMART Team Proteopedia page,
and it is a model of just how well high school students
can communicate the essence of the relationship of the
3D structure of a protein to its function (Figure 3).
Proteopedia also enables users to supplement their sci-
entific publications with Interactive 3D Comple-
ments (I3DCs) (http://proteopedia.org/w/Interactive_3D_
Complements_in_Proteopedia). A new “Workbench” fea-
ture (http://proteopedia.org/w/Workbenches), intended
expressly for the creation of articles complementing up-
coming scientific publications, allows authors to hide their
protected article during its development. These hidden
pages may be made accessible for viewing and editing by
co-authors, referees and editors, and can quickly be made
public upon publication of the accompanying paper. Such
I3DCs for publications have already been used effectively
(Figure 4). Already 65 such I3DCs, associated with arti-
cles published in 12 different journals, have been generat-
ed (http://proteopedia.org/w/Special:SpecialI3DC).
Interactive Molecular Visualization
Proteopedias unique character hinges on the fact that it
allows a relative novice to create a story around an inter-
active molecular visualization that the reader can then ex-
plore on his or her own, or with a variable amount of
guidance. This capability has been made possible by
a rich history of technological developments. Over the
course of the last 50 years, the interactive 3D representa-
tion of molecular structures has changed dramatically.
From Levinthals Kluge[5,6] (Figure 5) to current capabili-
ties, we have seen an enormous transition from graphics
intended for private viewing on specialized main-frame
computers, to graphics that run on literally billions of per-
sonal hand-held devices. With the advent of the web, and
the development of the Chime plug-in in the 1990s, chem-
ists,[7] biochemists, and molecular biologists finally ob-
tained a means of communicating their research results
and teaching lessons that related to molecular structure
in an interactive form. Chimes nature as a Netscape
browser plug-in was both its strength and its downfall.
While it made interactive structure manipulation widely
available, it was not compatible with newer technologies,
and had to be abandoned.
One of these newer technologies was Java, introduced
into browsers as its own Netscape plug-in in 1995.[8] For
roughly two decades, Java has served the web community
as a ubiquitous mechanism for delivering interactive web-
based content. Capitalizing on the widespread availability
of Java, the developers of Jmol found ways to deliver es-
sentially all of the capabilities of RasMol and Chime,
along with many additional capabilities that crossed into
additional scientific fields, such as inorganic chemistry,
crystallography, and materials science. To date, hundreds,
if not thousands, of web sitesfar too many to list here
utilize the Jmol Java applet (Figure 6) to enhance their
content and provide an interactive visitor experience.
Joel L. Sussman is the Morton and
Gladys Pickman Professor of Structural
Biology at the Weizmann Institute of
Science, and the Director of the Israel
Structural Proteomics Center (ISPC,
http://www.weizmann.ac.il/ISPC). He
is a member of EMBO, a Fellow of the
AAAS, on the Executive Board of the
Int’l Structural Genomics Org (ISGO)
and on the editorial board of Proteins,
PEDS &PLoS ONE. He is an Honorary
Professor of the Chinese Academy of
Sciences, received the Bergmann Prize
for Outstanding Research in Chemistry in Israel (1979), the U.S.
Army Science Conference Award for Outstanding Research (1991),
the Elkeles Prize for Outstanding Scientist in Medicine in Israel
(2005) and the Teva Founders Prize for Breakthroughs in Molecular
Medicine (2006). From 1994 to 1999 he was the director of the
Brookhaven PDB. He obtained his B. A. at Cornell University in
1965, and his PhD in biophysics at MIT in 1972. His research
group, at the Weizmann, is studying the 3D structure/function of
nervous system proteins, including b-secretase, acetylcholinester-
ase, cholinesterase-like adhesion molecules (CLAMs), b-glucosidase
(the enzyme that is defective in Gaucher disease) and paraoxonase
(a key enzyme that helps rid the arteries of plaque-forming clumps
of LDL, “bad” cholesterol, that can lead to arteriosclerosis). The
goal of his research is to use the 3D structures of proteins as
a basis for new leads for treating neurological disorders, such as
Alzheimer’s Disease, autism, and in developing new therapies for
Gaucher and arteriosclerosis. He is also studying intrinsically disor-
dered proteins. Most recently he, together with Jaime Prilusky &
Eran Hodis, has developed Proteopedia, the free, collaborative 3D
encyclopedia of proteins and other molecules (http://proteopedia.
org).
Isr. J. Chem. 2013, 53, 207 – 216 2013 Wiley-VCH Verlag GmbH & Co. KGaA, Weinheim www.ijc.wiley-vch.de 209
Web-Based 3D Molecular Structure
Creating Value
The key to Jmols success and wide acceptance by the
web development community has been the way it, like its
predecessor Chime, has enabled a completely new type of
“developer” to create value. Whereas traditional 3D soft-
ware development (still) involves a software developer
(usually a professional engineering team or a motivated
computer-savvy amateur) and a user (often a well-trained,
experienced scientist), these web-based tools are differ-
ent. The Jmol[3] software designers are programmers in
the traditional sense. The ultimate users of these tools,
however, are true novices, who have, most probably, abso-
lutely no experience in running 3D software tools. In-
stead, they are simply visitors to web sitesstudents, non-
scientists, and professional scientists alike. What lies in
between these two constituents is what makes Jmol so in-
teresting: a large group of web page designers, mostly
amateurs in the programming world, including scientists
and educators who have learned a bit of JavaScript and
HTML and are able to express their creativity in the
form of web sites. In effect, the Jmol applet provides
a blank slate upon which molecularly minded scientists in
a wide variety of fields can create customized visual por-
tals into their worlds. The “value-added” nature of Jmol
includes a rich high-level scripting language with nearly
1,000 semantic tokens embedded in a fully functional,
mathematically based programming language that permits
the sophisticated manipulation of molecular “objects.”
On top of that, Jmols user-developers have designed
a JavaScript library that makes customization exception-
ally easy.
Due to the flexibility and wide-ranging capabilities of
Jmol, the crowd-sourcing of web page content creation to
this group of dedicated “Jmol users” (in effect, web page
developers) has been enormously productive over the
past 5–10 years. Pages range from very simple to highly
complex, and from displays of just one molecule to full
web-based applications, e.g., Proteopedia, First Glance,[9]
the CheMagic Virtual Molecular Model Kit,[10] and many
others.
The Java Dilemma
Recently, however, between Apples decision not to allow
Java on their iOS platform and the Java browser plug-in
coming under fire as a possible security risk,[11] we find
ourselves once more at a technology cusp. No longer is
the Java plug-in ubiquitous. As a consequence, as technol-
Figure 1. The hemoglobin page in Proteopedia (http://proteopedia.org/w/Hemoglobin), a typical Proteopedia page. It displays the red
blood cell protein, hemoglobin, in the center, surrounded by representations of individual 3D images of functional parts of the protein,
which are displayed as the viewer clicks on a particular highlighted hyperlink in the explanatory text.
210 www.ijc.wiley-vch.de 2013 Wiley-VCH Verlag GmbH & Co. KGaA, Weinheim Isr. J. Chem. 2013, 53, 207 – 216
Review
J. L. Sussman et al.
Figure 2. Important biomacromolecules as represented in Proteopedia. (a) Forms of DNA; showing 3D models of A-, B-, and Z-DNA that
can be synchronized to illustrate differences between them (by Adithya Sagar, a visiting student at the Weizmann Institute of Science from
the India Institute of Technology ;[22] http://proteopedia.org/w/Forms_of_DNA). (b) Large ribosomal subunit (by Dr. Wayne Decatur, postdoc-
toral fellow at University of New Hampshire;[23] http://proteopedia.org/w/Large_Ribosomal_Subunit_of_Haloarcula). (c) Structure of a com-
plex of a regulatory protein with its gene (by Prof. Eric Martz at University of Massachusetts; http://proteopedia.org/w/Lac_repressor).
Isr. J. Chem. 2013, 53, 207 – 216 2013 Wiley-VCH Verlag GmbH & Co. KGaA, Weinheim www.ijc.wiley-vch.de 211
Web-Based 3D Molecular Structure
Figure 3. Proteopedia use in pedagogy. Proteopedia page: “A Physical Model of the b2-Adrenergic Receptor” (http ://proteopedia.org/w/
Group:SMART:A_Physical_Model_of_the_b2-Adrenergic_Receptor) authored by the Madison West High School SMART team. To the right of
the interactive 3D structure is a movie that the SMART team created and uploaded, which uses a physical model of the receptor to explain
its structure and function.
Figure 4. Example of an I3DC (http://proteopedia.org/w/Journal :Cell :1) for a recent paper on interferon, published in Cell.[24]
212 www.ijc.wiley-vch.de 2013 Wiley-VCH Verlag GmbH & Co. KGaA, Weinheim Isr. J. Chem. 2013, 53, 207 – 216
Review
J. L. Sussman et al.
ogy advances, web applications, such as Proteopedia, are
at risk of losing their audience. This time it is Java that is
losing its hold, and the new technology is HTML5.[12]
Combined with WebGL[13] (a browser-based version of
OpenGL[14]), HTML5 allows reasonable speed in render-
ing complex 3D graphical scenes. Now available in all sig-
nificant browsers, HTML5 holds the promise of deliver-
ing 3D molecular content without Java. However,
WebGL is not generally available on mobile operating
systems (most notably not on iOS or Android).
Will HTML5 indeed serve as a suitable replacement
for Java, in terms of the interactive graphical representa-
tion of molecular structure on the web? This was the
question that we, as Jmol and Proteopedia developers,
posed in the fall of 2012. The fear was that we would
have to start all over again, as some bold developers have
attempted to do, e.g., iChemLabs.[15] However, such an
option seemed extremely daunting for such a feature-
filled program as Jmol and such a complex application as
Proteopedia. Nonetheless, the decision was made to ex-
plore the possibility of using HTML5, with or without
WebGL, and the results of that exploration are presented
here.
Java-less Jmol?
The fact that Jmol is written in Java suggests that perhaps
its run is over, that it needs to give way to a new genera-
tion of technology. However, there are two important as-
pects of Jmol that suggest that this might not be necessa-
ry. First, Jmol is written in a highly modularized style of
Java programming. From the start, it was recognized that
success on the web involves targeted downloads, allowing
only the parts necessary for a given application to be
downloaded, and the program to be delivered incremen-
tally. This modularization might easily be transferable
into JavaScript,[16] allowing, again, targeted download of
Jmol features on a need-to-use basis. Second, Jmol has
been developed in a truly unusual way, utilizing absolute-
ly no external 3D graphics packages. Every pixel that
a user sees as a model is manipulated in a Jmol rendering,
and is created on the fly, using exceptionally efficient ras-
tering techniques. This allows Jmol (in whatever program-
ming language) to be completely independent of the com-
puter/tablet operating system employed, and allows it to
be the first full-featured molecular viewer for web brows-
ers to become available on Apples iPad.
We can now confirm that these guiding principles of
Java programming can be completely and relatively
straightforwardly transformed directly into JavaScript, re-
quiring no Java applet, and producing identical graphical
results. Thus, over the course of the past six months, we
have been able to completely recreate Jmol in pure Java-
Script, in the form we now refer to as JSmol.[17] Key to
this development has been the use and co-development
of the Java2Script Eclipse Plug-In,[18] a remarkable piece
of software that allows “compiling” of Java code directly
into JavaScript. A huge benefit of using Java2Script has
been that Jmol development can still be done in Java,
producing all the Java compiled versions (Jmol desktop
application, JmolData server application, and the signed
and unsigned Jmol applets), just as before. A few simple
steps within the Eclipse programming environment com-
pile that code into JavaScript.
Substantial optimization of the Jmol Java code, of the
portions of the Java language utilized by Jmol, and of the
compiler itself, was necessary to achieve this success.
Many routine Java techniques (such as the overriding of
methods by sub-classing or the overloading of methods
by using multiple “signatures”) must be completely avoid-
Figure 5. Image of the Kluge, one of the earliest (if not the earli-
est) molecular graphics systems, which was developed by Cyrus
Levinthal at MIT in the early 1960s. The computer was a Digital
Equipment Corp. (DEC) PDB-7, and the glass hemisphere was
a powerful interactive device that permitted rotation in three di-
mensions.
Figure 6. Examples of the broad range of visualizations possible
with Jmol/JSmol, including a small molecule with molecular orbi-
tals, a biomolecule with surfaces, and a PyMOL session.
Isr. J. Chem. 2013, 53, 207 – 216 2013 Wiley-VCH Verlag GmbH & Co. KGaA, Weinheim www.ijc.wiley-vch.de 213
Web-Based 3D Molecular Structure
ed in critical code sections. Needless to say, a substantial
amount of experimentation was necessary. In the end,
however, the results achieved are impressive: A fully
functional JavaScript-only version of Jmol now runs on
all modern browsers, including Internet Explorer, Firefox,
Safari, Chrome, and Opera, and on all platforms tested,
including Windows, Linux, Apple OS X, and Apple iOS.
A comparison of Jmol and JSmol is provided in
Table 1. Not surprisingly, Jmol is more compact than
JSmol, by a factor of ~2–3. Much of this difference is due
to the fact that the Java language library is already pres-
ent on the client machine, in the form of a Java plug-in,
and that the Java code is in a binary format. In contrast,
when a page utilizing JSmol is accessed, the required
components of the Java language, translated into non-
binary JavaScript, must be downloaded in full. In both
cases, however, files are cached, and subsequent page
views are far faster than the first viewing.
Performance with small molecules is very similar in the
two versions, but clearly JavaScript does not scale at the
same rate as Java. Todays JavaScript lacks many of the
basic features of Java, including integer and bit set data
types, both of which are widely used in Jmol/JSmol.
These types have to be “faked” in JavaScript using
double-precision numbers, leading to performance issues.
Developers of different browsers have optimized their
JavaScript implementations in different ways and to dif-
ferent extents, resulting in significant performance differ-
ences between browsers. The end result is that model pro-
duction can take significantly more time in JavaScript,
and, for large systems, model rotation may seem some-
what sluggish in comparison to Jmol.
JSmol with WebGL
The above discussion relates to the pure HTML5 version
of JSmol, which uses a 2D-only canvas to render scenes.
We have also been experimenting with WebGL, which
allows for hardware acceleration of 3D rendering similar
to OpenGL. Our efforts have not been as advanced in
this area, partially because writing WebGL export drivers
for Jmol is somewhat more complicated than a direct
translation of Java into JavaScript. Our starting point in
this effort has been GLmol,[19] a web-based viewer that
was developed by one of us (TN). The fact that Apple
has also disabled WebGL in its browser for the iPad has
slowed this development somewhat. Nonetheless,
WebGL-based versions of JSmol could potentially pro-
vide an alternative to our current HTML5-only solution.
JSmol in Proteopedia
The sophisticated and feature-demanding nature of Pro-
teopedia poses an excellent challenge for JavaScript-based
interactive molecular graphics. We are happy to report
that, despite the performance limitations of JavaScript,
utilization of JSmol has been successfully implemented in
Proteopedia. As described elsewhere,[1,2] Proteopedia runs
on top of MediaWiki,[20] an open source collaborative en-
vironment that provides Proteopedia the basic infrastruc-
ture for community editing. To maintain the smooth wiki-
3D structure integration characteristic of Proteopedia, we
have developed JSmolExtension,[21] a dedicated software
that enables MediaWiki to display 3D structures using
JSmol, utilizing the best available rendering engine
whether it be WebGL, HTML5, Javaor resorting to
a static image, in the unlikely case that either none of
these is available or that the available engine is limited
too much by performance issues. JSmolExtension pro-
vides full backward compatibility, enabling Proteopedia
to display the >90,000 pages created utilizing Jmol on
Java-less devices, such as the Apple iPad (Figure 7) and
Google Android tablets. The Proteopedia server is able
to sense the clients device, whether it is a computer or
a Java-less device, and then automatically delivers the
Proteopedia page requested with the appropriate viewer.
Table 1. Relative performance comparison of Jmol and JSmol.[a]
Jmol JSmol
core download (MB)[b] 1.0 2.2
core+bio package download (MB)[c] 1.1 2.4
Small-molecule loading time (ms)[d] 90 60
Small-protein loading time (ms)[e] 120 140
Large-protein loading time (ms)[f] 730 2600
Large-protein rendering time (ms)[g] 11/12 95/85
Small-protein surface creation time (ms)[h] 150 1250
PyMOL session file loading (ms)[i] 96 750
[a] Performance will vary with platform, browser, and machine; the reported testing was carried out using Firefox 18.0.2/Windows 8 on
a Toshiba Satellite P845t laptop with i5–3317U 1.70 GHz CPU and 6 GB memory ; [b] includes JmolApplet0.jar vs. core.z.js +corescript.z.js ;
[c] adds JmolApplet0ShapeBio.jar or core.bio.js; [d] loading caffeine model; [e] loading 1CRN (49 KB, 327 atoms); [f] loading 2bxaH (2BXA,
with hydrogen atoms, 1.4 MB, 16,731 atoms); [g] rendering of 2bxaH as balls and sticks/as cartoons ; [h] 1CRN, 1.2 solvent-accessible sur-
face; [i] loading dna.pse (DNA 12-mer scene, 796 atoms).
214 www.ijc.wiley-vch.de 2013 Wiley-VCH Verlag GmbH & Co. KGaA, Weinheim Isr. J. Chem. 2013, 53, 207 – 216
Review
J. L. Sussman et al.
Figure 7. Comparison of Proteopedia pages showing the HIV-1 Protease in (a) Jmol on a MacBookPro (using the Safari browser), and (b)
JSmol on an iPad (using the Safari browser).
Isr. J. Chem. 2013, 53, 207 – 216 2013 Wiley-VCH Verlag GmbH & Co. KGaA, Weinheim www.ijc.wiley-vch.de 215
Web-Based 3D Molecular Structure
Conclusions
Clearly, a new age of web-based molecular visualization
is at hand. Technology is changing rapidly, and great op-
portunities are opening up for meaningful, interactive, 3D
molecular visualization over the web that will be able to
reach millions of people in ways that could not have been
imagined only a decade ago. If the international collabo-
ration that has propelled Proteopedia and JSmol to the
frontier of this new age is any indication of what will be,
we can anticipate many more full-featured web-based
tools built by students, educators, and practicing scientists
in the near future.
Acknowledgements
This study was supported by grants from the Yeda Re-
search and Development Company, Ltd. of the Weizmann
Institute of Science, the Bruce H. and Rosalie N. Rosen
Family Foundation, the Nalvyco Trust, the Divadol Foun-
dation, the Kimmelman Center, and from the James H.
Hammons Professorship endowment at Swarthmore Col-
lege. We would like to thank the Japan Society for the
Promotion of Science (JSPS) for a scholarship, and ac-
knowledge the generous support of Takuya Kobayashi.
The authors are very grateful to the Jmol and MediaWiki
development teams for their respective software packages
and for the support that they generously offered us. We
thank Paul Pillot for his assistance in developing Jmol-
JSO, a framework upon which JSmol was built, Duncan
Blue (St. Olaf 16) who assisted in testing JSmol during
its development, and Israel Silman for valuable discus-
sions and comments on the manuscript. RMH holds the
Edolph A. Larson and Truman E. Anderson, Sr. Chair of
Chemistry. JLS is the Morton and Gladys Pickman Pro-
fessor of Structural Biology. Data files and code used for
this paper can be found at http://chemapps.stolaf.edu/
jmol/jsmol.
References
[1] E. Hodis, J. Prilusky, E. Martz, I. Silman, J. Moult, J. L.
Sussman, Genome Biol. 2008,9, R121.
[2] J. Prilusky, E. Hodis, D. Canner, W. A. Decatur, K. Ober-
holser, E. Martz, A. Berchanski, M. Harel, J. L. Sussman, J.
Struct. Biol. 2011,175, 244– 252.
[3] Proteopedia, Proteopedia: Main Page,2008, http://proteope
dia.org.
[4] J. D. Watson, F. H. C. Crick, Nature 1953,171, 737–738.
[5] C. Levinthal, Sci. Am. 1966,214, 42– 52.
[6] E. Francoeur, Endeavour 2002,26, 127–131.
[7] MDL Information System, Inc., MDL Chime (Version 2.6
SP7),2007, http://accelrys.com/products/informatics/chemin
formatics/chime/chime-release-notes.html.
[8] Oracle, The History of Java Technology,2013, http://
www.oracle.com/technetwork/java/javase/overview/javahis
tory-index-198355.html.
[9] E. Martz, FirstGlance in Jmol,2006, http://bioinformatics.
org/firstglance/fgij/.
[10] O. Rothenberg, T. Newton, CheMagic Virtual Molecular
Model Kit,2012, http://chemagic.com/JSmolVMK.htm.
[11] Reuters, U.S. warns on Java software as security concerns es-
calate,2013, http://www.reuters.com/article/2013/01/11/
us-java-security-idUSBRE90A0S320130111.
[12] W3C, HTML5 differences from HTML4,2013, http ://
www.w3.org/TR/2011/WD-html5-diff-20110405.
[13] Mozilla Developer Network, WebGL,2013, https://
developer.mozilla.org/en-US/docs/WebGL.
[14] OpenGL,2013, http://www.opengl.org.
[15] iChemLabs,2013, http://www.ichemlabs.com.
[16] How is JavaScript different from Java?,2013, http://www.
java.com/en/download/faq/java_javascript.xml.
[17] JSmol,2013, http://jsmol.sourceforge.net.
[18] R. Zhou, The Java2Script Eclipse plugin,2005, http://
j2s.sourceforge.net.
[19] GLmol-Molecular Viewer on WebGL/Javascript,2013,
http://webglmol.sourceforge.jp/index-en.html.
[20] MediaWiki, MediaWiki, http://www.mediawiki.org/wiki/
MediaWiki.
[21] J. Prilusky, JSmolExtension: a MediaWiki extension to in-
clude JSmol structures in MediaWiki,2013, http://proteope
dia.org/support/JSmolExtension.
[22] A. Sagar, K. Oberholser, Biochem. Mol. Biol. Educ. 2012,
40, 74.
[23] W. A. Decatur, Biochem. Mol. Biol. Educ. 2010,38, 343.
[24] C. Thomas, I. Moraga, D. Levin, P. O. Krutzik, Y. Podople-
lova, A. Trejo, C. Lee, G. Yarden, S. Vleck, J. S. Glenn, G. P.
Nolan, J. Piehler, G. Schreiber, K. C. Garcia, Cell 2011,146,
621– 632.
Received: February 22, 2013
Accepted: March 8, 2013
216 www.ijc.wiley-vch.de 2013 Wiley-VCH Verlag GmbH & Co. KGaA, Weinheim Isr. J. Chem. 2013, 53, 207 – 216
Review
J. L. Sussman et al.
