02560 Web Graphics and Scientific Visualization

Week 3 - colouring, texturing, lighting, and the rounded point

As a first step toward scientific visualization, you should learn how to draw a 3D surface, how to colour it, and how to shade it using light sources. Texturing to vary the colour across the surface is also a useful technique. If you take a look at Chapter 2 of DV, From Graphics to Visuzalization, you will see that the elements of this set of exercises enable you to get started on scientific visulization.
  1. Point rendering is useful in scientific visualization. We very often want to direct attention to a specific point in a plot, on a curve, or on a surface. To learn more about drawing points, work with the first subsection of Chapter 5 in GL, Passing Other Types of Information to Vertex Shaders. After this, proceed to the fifth subsection of Chapter 10 in GL, Make a Rounded Point, and try to draw the more visually pleasing rounded points.

  2. From the Week 2 exercises, you should have a visualization of a 3D object, which you can rotate using a virtual trackball. If the object is uniformly coloured, it may look rather flat and uninteresting. Work with the second subsection of Chapter 5 in GL, Color Triangle, and try to colour your object by transforming its surface normals to colours.

  3. To get a real sense of three-dimensional space in your surface visualizations, you will need proper shading of your surface. Shading is accomplished by introducing light sources in the scene and by computing the surface colour in every pixel according to the light incident from these sources. Work through Chapter 8 in GL, Lighting Objects, to get proper shading of your 3D object.

  4. Another way to make the visualization of a 3D object more interesting is to map an image onto the surface of the object. This is called texture mapping. Try to texture map the surface of your 3D object by working with the third and fourth subsections of Chapter 5 in GL, Pasting an Image onto a Rectangle and Pasting Multiple Textures to a Shape. Beware when you start working with textures that many browsers do not accept loading image files locally from the computer. The examples in GL will work once they get on a webpage, but use Internet Explorer 11 (IE11) to test locally. In IE11, you can choose Allow blocked content, and it will run locally in a problem-free manner.

  5. If time permits, it is an interesting exercise to combine some of the different effects (texturing and lighting, for example). The lecture provides an example of coloured, rounded points combined with multi-texturing. With these exercises, you start using the OpenGL Shading Language for Embedded Systems (GLSL ES) to a larger extent. Take a look at Chapter 6 of GL, The OpenGL ES Shading Langauge (GLSL ES), if you would like to have a deeper understanding of this programming language.

Reading Material

GL Chapters 5 and 8. Using colors and texture images and lighting objects.
GL Chapter 10, the fifth subsection (pp. 377-379). Make a rounded point.