home overview research resources outreach & training outreach & training visitors center visitors center search search

Displaying Interactive 3D Model Views in Web Browsers

Introduction
Molecular visualization has been a main focus of the RBVI since its inception. UCSF Chimera is our application for visualizing and manipulating many types of three-dimensional data. However, there are times when users wish to illustrate one particular view of models via the web without requiring readers to download and install applications or plugins. Typically, this is done by creating a movie, either an animation (where the reader only gets to look at a prepared series or images) or as an interactive view (where the reader can control the direction of view). The latter is typically done using either Apple Quicktime VR or Adobe Flash, both of which require readers to have plugins or applications installed on their computer. In addition, instructions for constructing Quicktime VR or Flash movies for 3D viewing are either sparse or require commercial software. In this tech note, we describe a method for creating an interactive 3D model views in web browsers using only Chimera, HTML/CSS and Javascript. An example is in the image on the right.

Procedure

The implementation of an interactive web image is actually quite simple: load images of the same scene viewed from a variety of directions, then display the appropriate one in response to user input.

To get a reasonably smooth motion, we generate images at ten-degree intervals both longitudinally and latitudinally.

To select the appropriate view, we keep track of the azimuth (longitude) and inclination (latitude) angles. Mouse motion in the X direction proportionally changes the azimuth angle, while motion in Y changes the inclination angle. These two angles are mapped to the nearest longitude and latitude where we generated an image, and that image is displayed.

To help the user orient himself, we add a globe in the upper-left corner. The globe displays the current view orientation, and shows the user that horizontal mouse motion translates to rotation around the pole while vertical motion translates to tilting the pole.

Generating Images

To generate scene images from different view directions, we use UCSF Chimera. Once the view has been constructed (window size set to match image dimensions; model representations and colors selected; initial view chosen; etc.), we open the genview.py script which generates a series of image files named img-III-AAA.png, where III and AAA are three-digit numbers representing the inclination and azimuth angle values. Since inclination ranges from [0..180] and azimuth from [0..360), and we generate an image every 10 degrees, there are 684 files.

This script was used to generate the globe images at the upper-left corner. The globe BILD object was generated using genglobe.py, displayed in Chimera with transparent background enabled. The globe image size was selected to balance visibility (so that the globe orientation is easily seen) and size (so that it does not take up too much screen area over the displayed view).

Creating Web Content

The web content for displaying an interactive 3D model view consists of:

The Javascript file contains all the code for preloading images (so that rotations are smooth) and for tracking mouse motion to update the displayed image.

The two image folders are for the globe images and the view images. The contents of both folders should be the 684 image files generated using genview.py. In particular, the file names must be of form img-III-AAA.png, because globeview.js uses the same convention. The globe folder contains images of the upper-left corner globe; the 1gc1 example folder contains the view images.

The main HTML file must have three major elements:

The reference to globeview.js, typically in the head section within a script tag, is required to include the necessary Javascript code.

The view and globe image elements should be nested within a div element to control relative placement. Below is the HTML used in show.html: 

<div id="globeview" style="position:relative;">
  <img id="main" style="position:relative; left:0px; top:0px;"/>
  <img id="globe" style="visibility:hidden; position:absolute; left:0px; top:0px;"/>
  <p id="debug" style="visibility:hidden;">Debug</p>
  <p id="text" style="visibility:hidden;">Loading...</p>
</div>
The outer div uses CSS relative positioning so that the image elements can be aligned at its upper left corner. The main element displays the view image, while the globe element displays the globe image. Their CSS placement are relative and absolute respectively to force alignment. The debug and text elements are only used for informational purposes and are optional. It is important that no other elements use main, globe, debug or text as their id names because the Javascript code expects these elements to be unique and of the correct type.

A call to the init function is needed in order to start preloading images and monitoring mouse motion. In our example, show.html, the call is made as part of the onload callback of the body tag. Other possibilities include making init the callback function for an HTML button (see button.html), so that images are only downloaded in response to user action rather than spontaneously.

Limitations

The code and examples shown here are only for reference purposes. Clearly there are some limitations that will need to be addressed when used in more complex scenarios.

Currently, the Javascript code will only handle a single view because it uses fixed "id" names to find the image element; to handle multiple images on the same page, the code will need to be updated to use Javascript classes where each instance can be initialized with its own image id.

The image positioning CSS code shown here is only one of many possible variations. The code above known to work with Firefox 3.5 and Internet Explorer 8.

Discussion

As the example above shows, our method works reasonably well, but with some issues. Some shortcomings are:

The advantages of our method are:

Laboratory Overview | Research | Outreach & Training | Available Resources | Visitors Center | Search