` Displaying recent volcanic eruptions on a 3D globe with webgl/three.js

Displaying recent volcanic eruptions on a 3D globe with webgl/three.js

Significant volcanic eruptions 2001-2011 I thought I'd play around with WebGL (an up and coming standard for rendering 3D scenes in web pages). In particular, I used the popular three.js library.

Here is a screenshot image, but later in the post we'll try and render the globe in a full WebGL scene.

Just for fun, lets plot the locations of recent significant volcanic eruptions (2001-2011). The dataset is provided by the National Geophysical Data Center / World Data Center (NGDC/WDC) Significant Volcanic Eruptions Database, Boulder, CO, USA. (Available at http://www.ngdc.noaa.gov/nndc/servlet/ShowDatasets?dataset=102557&search_look=50&display_look=50)

I followed the basic recipie described in the tutorial at http://css.dzone.com/articles/html5-render-open-data-3d.

The earth satelite image used is provided by NASA Visible Earth and is used as the texture which is overlaid onto the main sphere in the scene. Each volcano is plotted as a small red sphere embedded into the surface of the earth sphere. The labels are plotted using HTML rather than as part of the WebGL scene. A routine for mapping WebGL (x,y,z) coordinates to HTML X,Y positions was helpfully provided by the following post post.

Note that WebGL support is not available/enabled on some browsers (in particular internet explorer including IE9 does not support WebGL) and may depend upon having suitable graphics hardware. I tested with firefox 11.0 and a pretty ordinary acer netbook. Use the left and right arrow keys to rotate the globe.



Leave a comment

Anti-Spam Check