02560 Web Graphics and Scientific Visualization

Week 4

We will now start working with the textbook on scientific visualization DV. To get started, we will move the example of visualizing a mathematical surface in Chapter 2 of DV to WebGL.

We will follow the same steps as in Chapter 2 of DV (except for step 7 where the surface is textured):

1. Using the trackball example, we build a minimal WebGL application that renders the 3D plot of a two-variable function.


2. We then draw a different, more complicated, function using a higher sampling rate.


3. In the next step, we compute vertex normals using forward differences and do Gouraud shading based on the sample program LightedCube.js from Chapter 8 in GL.


4. To improve the lighting quality, we instead use central differences for the normal computation and do Phong shading.


5. The next step is to draw the domain grid as a wireframe underneath the function graph.


6. Finally, we make the graph partly transparent using alpha blending (see the sixth subsection in Chapter 10 of GL).

Press F12 in your browser to view the source behind each step. The final result follows below with a couple of keyboard options.

Surface Example

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

Keyboard options: toggle domain grid on/off - [g], toggle transparency on/off - [t], toggle wireframe on/off - [w].