Signals Blog

WebGL for Chemistry Part 1: Introduction

3D graphics play a vital role in a large amount of scientific software. Until very recently, however, Web browsers offered little in the way of powerful tools for the creation of compelling 3D graphics software.

All Articles in This Series

  1. WebGL for Chemistry Part 1: Introduction
  2. WebGL for Chemistry Part 2: Displaying a Sphere in a View
  3. WebGL for Chemistry Part 3: Hello, Benzene!
  4. WebGL for Chemistry Part 4: Bond, James Bond

About WebGL

WebGL™ changes all of this. From the about page:

WebGL is a cross-platform, royalty-free web standard for a low-level 3D graphics API based on OpenGL ES 2.0, exposed through the HTML5 Canvas element as Document Object Model interfaces. Developers familiar with OpenGL ES 2.0 will recognize WebGL as a Shader-based API using GLSL, with constructs that are semantically similar to those of the underlying OpenGL ES 2.0 API. It stays very close to the OpenGL ES 2.0 specification, with some concessions made for what developers expect out of memory-managed languages such as JavaScript.

The novelty of WebGL means that documentation, although available if you know where to look, is somewhat jumbled. And very little of the documentation that has been written discusses the subject from the perspective of scientific data visualization.

This article is the first of a technically-oriented, in-depth series on the application of WebGL to chemical data visualization problems. A previous article discusses some of the potential for WebGL in chemistry.

WebGL-Enabled Browsers

Currently, Chrome is the only major browser to support WebGL by default. WebGL is already available in developer/beta versions of Firefox and Safari, and will likely be available in release versions soon.

Support for WebGL on Internet Explorer is unlikely, at least for the upcoming IE9 release. What happens after that remains uncertain, as Microsoft has commented little on the subject.

A High-Level API for WebGL

WebGL is a complex beast, as a few hours working through the Learning WebGL Lessons will reveal. Rather that diving deep into WebGL, we're going to use a toolkit that makes it possible to work at a substantially higher level.

PhiloGL is a new JavaScript toolkit for working with WebGL. Alternatives worthy of future research exist, for example o3d. At this point, my choice in toolkit was motivated mainly by visible developer activity and the fact that the PhiloGL project has ported all of the Learning WebGL Lessons, making it easy to compare the same code using both PhiloGL and straight WebGL.

A Goal

When learning any new technology, it helps to set a goal. In this series, we'll be working toward producing a browser-based component capable of rendering static 3D representations of small organic molecules.

Let's call our component M3D (Molecule 3D).

Next Steps

We've set a goal (display a 3D representation of a small organic molecule using WebGL) and identified a tool to help us get there (PhiloGL). The next articles in this series will show how to use PhiloGL to render basic drawing primitives.

WebGL and the WebGL logo are trademarks of the Khronos Group Inc.