Displaying Interactive 3D Model Views in Web Browsers
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.
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
AAAare 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:
- two folders of images (globe and, for example, 1gc1),
- and the main HTML file (for example, show.html).
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:
scripttag referencing globeview.js,
imagetags with identifiers
- and a call to the
initfunction defined in globeview.js.
The reference to globeview.js, typically in the
headsection within a
The view and globe image elements should be nested within a
divelement to control relative placement. Below is the HTML used in show.html:The outer<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>
relativepositioning so that the image elements can be aligned at its upper left corner. The
mainelement displays the view image, while the
globeelement displays the globe image. Their CSS placement are
absoluterespectively to force alignment. The
textelements are only used for informational purposes and are optional. It is important that no other elements use
A call to the
initfunction 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
onloadcallback of the
bodytag. Other possibilities include making
initthe callback function for an HTML button (see button.html), so that images are only downloaded in response to user action rather than spontaneously.
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.
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.
As the example above shows, our method works reasonably well, but with some issues. Some shortcomings are:
The advantages of our method are:
- Readers do not need to download and install any applications or web browser plugins.
- The user interface is simple and easy to understand, especially with the globe displayed in the upper-left corner.
Laboratory Overview | Research | Outreach & Training | Available Resources | Visitors Center | Search