WebGL has been quickly progressing, and we have been hard at work building our 3D ChemDoodle Web Components. I present the release of ChemDoodle Web Components 3.0, which contain the alpha development versions of the 3D ChemDoodle Web Components. I also discuss some of the programmatic details involved with WebGL and how to obtain the development browsers required to use WebGL technologies. Lastly, I give a brief review of the current events releated to HTML5/Canvas technology since my last article.
About the Author
Kevin Theisen is the President of iChemLabs, which funds, develops and hosts the open source ChemDoodle Web Components.
ChemDoodle Web Components 3.0
Since the last article, ChemDoodle Web Components have seen two major updates. For complete details of the changes, visit the ChemDoodle Web Component changelog.
- 2.5.0, October 8th, 2009: This release stabilizes the API and provides in-depth extendable functionality for creating your own custom components. The API has seen some major changes (it has been significantly improved), so make sure to review it before upgrading. jQuery has been introduced to standardize the handling of user input events, simplifying the Canvas class. Two new components have been introduced: Slideshow and Hyperlink. In addition, our test driven development suite is now exposed on the site using a modified version of QUnit. ChemDoodle Web Components 2.5 works on all major browsers, including Microsoft Internet Explorer, Mozilla Firefox, Apple Safari and Google Chrome/Chromium. Yahoo YUI Compressor is now used to minify the libs for even faster page loads.
3D ChemDoodle Web Components with WebGL
Before I continue, WebGL is still a beta technology, and is only available in the following development browsers:
- WebKit, the development version of Apple Safari
- MineField, the development version of Mozilla Firefox
- Google Chrome and Chromium
Each of the development browsers has WebGL disabled by default, so you will need to enable the technology. Giles Thomas provides instructions for obtaining, installing and enabling WebGL in the browsers on his blog, Learning WebGL. He also provides ongoing lessons to introduce developers to WebGL, and his blog has been one of my favorite resources.
3D ChemDoodle Web Components are now available for testing and development. They are still in an alpha stage, but are quite stable in the development browsers. Every once in a while, an update to a development browser will produce an incompatibility, but we are actively watching to fix those problems and improve the code so it is perfect by the time the standard browsers support WebGL, which I believe will be sometime in the middle of 2010. Currently, we provide four basic 3D components: Viewer3D, Rotator3D, Transformer3D and MolGrabber3D. Their functionality is identical to their 2D analogues.
We currently provide four preset visual representations of molecules to be viewed with 3D ChemDoodle Web Components. Of course, you may always create your own customized representations or replace our shaders with your own. The currently supported representations are Ball and Stick, van der Waals Spheres, Stick and Wireframe. You may set the representation for a component by calling the VisualSpecifications.set3DRepresentation(String representation) function of a given Canvas3D's specs object.
var transformer = new TransformCanvas3D('transformer', 250, 250); transformer.specs.set3DRepresentation('Ball and Stick'); transformer.loadMolecule(createMolecule());
As always, we will provide the funding, development and support that the ChemDoodle Web Components need to best benefit the community. If you are interested in collaborating with us on this project, or would like us to custom develop any functionality or graphics, please feel free to contact us. We are happy to help.
Internet Explorer and HTML5 Browser Compatibility
One of the lasting problems for HTML5 developers has been the lack of support from Internet Explorer. But thanks to the talented developers at Google, the ChemDoodle Web Components now work wonderfully in Microsoft Internet Explorer. Google now hosts Google Chrome Frame, a free and easy to install IE add-on that provides full support for the HTML5 specification. With this add-on, the ChemDoodle Web Components now work in all major browsers on all major platforms, including IE (Windows), Apple Safari (Mac, Windows), Google Chrome/Chromium (Windows, Mac, Linux) and Mozilla Firefox (Windows, Mac, Linux).
For better or for worse, Google's aggressive push to control Internet Explorer has convinced Microsoft's team to address this issue. Recently, Microsoft revealed that they would be supporting HTML5 in IE9. It is now very possible that HTML5 technologies will replace standards such as Flash and Java applets in the near future. Regardless, I am not confident that IE9 will support WebGL anytime soon, so Google Chrome Frame may still be a requirement for the 3D ChemDoodle Web Components in IE.
In addition to desktop browsers, mobile browsers are becoming very powerful. Apple's Mobile Safari already supports HTML5 (although text is not rendered properly and interactive gestures are not yet recognized), the new Mozilla Fennec is starting to be released on mobile operating systems, and certainly Google will be implementing the specification on mobile versions of Chrome and Chrome OS. It may be a possibility in the near future that we can write a complex application once in HTML5, and have it working on all operating systems and mobile devices for truly universal deployment.
Integration with ChemDoodle 3