02560 Web Graphics and Scientific Visualization

Week 3

To illustrate the drawing of rounded points and colouring and texturing, this lecture provides an example of rendering the earth with an animated temperature anomaly overlay.

The webpage is developed in the following steps:

1. Drawing globes that we can interact with by combining the rounded points rendering from the fifth subsection in Chapter 10 of GL with the virtual trackball from Week 2.


2. Using a large rounded point to draw a globe coloured by its surface positions.


3. Using the surface positions of the globe to texture map an image of the Earth onto the globe using cylindrical projection.


4. Using multi-texturing to visualize data across the globe.

Press F12 in your browser to view the source behind each step. The final result is in the following section. It includes animation of the overlay texture and combination of the WebGL canvas with text written in a 2D canvas (Head Up Display, see the third subsection of Chapter 10 in GL).

Globe Example

Temperature anomalies computed by NASA and others relative to the base period 1951-1980.

Mouse control: orbit - left button, zoom - middle button, pan - right button.