02560 Web Graphics and Scientific Visualization

Course description from the DTU course catalogue [danish version]

Course Overview

This course uses a flipped learning model (exercises first, lecture later). Lectures will sometimes also include plenary sessions (plenums), where students present/discuss their progress and results.


Calender weeks: 36-41 + 43-49.

Weekly timetable:

Monday 13-15 exercises Building 305, Room IT005 (VR-lab)
15-17 lecture/plenum Building 305, Room IT005 (VR-lab)

Project webpage must be final by Monday 8 December 2014 at 08:00.

Text Books and Notes

The text books for this course are

GL Matsuda, K., and Lea, R. WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL. Addison-Wesley, 2013. [webpage]
DV Telea, A. C. Data Visualization: Principles and Practice, second edition. CRC Press, September 2014. [webpage]

In addition, we may use online resources and may upload papers to CampusNet that serve as supplementary reading material.


We assume that you know basic geometry, trigonometry, and vector algebra. We also assume basic calculus and linear algebra, and we expect some general experience with technical challenges and programming from other courses. Previous exposure to scientific computing is an advantage, but not a requirement.

Project Webpage

This entire course revolves around your DTU Student Homepage. Your goal is to develop a webpage which is a scientific report that integrates interactive 3D graphics. Throughout the course you should develop and improve the contents of this report until we reach the deadline listed in the timetable above. In the end, your project webpage should, as much as possible, illustrate that you have fulfilled the learning objectives of the course (these are listed in the course description in the DTU Course Base).


The assessment is based on your project webpage and its underlying source code. The webpage must be available on your DTU Student Homepage and the complete source must be submitted to CampusNet before the deadline listed in the timetable above. There is no oral examination in this course. Your work is assessed in its entirety and you will be graded using the 7-step scale.


You will receive feedback through plenary sessions during or following the lectures. We hope that you will also give feedback to others during these sessions.

About the Exercises

The lab exercises take place in the VR-lab. You are allowed to share code snippets, but you must each individually produce a project webpage.
You can develop your webpage on your personal laptop. We recommend that you also use the computers in the VR-lab to test that your webpage runs as intended on a different system. The user-id for the system is your ordinary CampusNet user-id.
You can use the lab in the period reserved for the course. At other times you have to respect reservations. Remote login is not permitted. In vacant periods or when a course does not fully use the reservation made, you can use the workstations on a first come first served basis. You need your student identity card to get entrance permission to the lab and you have to show the card on any request.
Do not use the C-disk for storing your data. You can store your data on the student disk S (\\nas1.dtu.dk), on the local server VR00 (disk N), or temporarily on local machines (disk L). Disks N and L are only available for special purposes. There is no back-up in the VR-databar. The C-disk , the N-disk, and the L-disk may be cleaned daily. Use a CD-RW or a memory stick for backup.


Week 1: webpage, canvas, and simple drawing

Week 2: transformation, animation, camera, and the virtual trackball

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

Week 4: drawing a mathematical surface (triangle strips, wireframe, lighting, shading, and blending)

Week 5: drawing a sampled surface (grid types, loading from files, computing normals)

Week 6: the visualization pipeline (project proposals)

Week 7: visualizing mean curvature on meshes

Week 8: structured light scan and surface reconstruction

Week 9: volume data and render to texture

Week 10: WebGL limitations and extensions

Week 11: volume visualization basics

Lecture Examples

Week 1: Colour example

Week 2: Trackball example

Week 3: Globe example

Week 4: Surface example

Week 5: Bunny example

Week 6: Translucency example

Week 7: Curvature example

Week 7: Wireframe example

Week 8: Reconstruction example

Week 9: Depth example

Week 10: Volume example

Week 11: Teddybear example [simplified version for Internet Explorer]


KHRONOS Group: WebGL (OpenGL ES 2.0 for the Web)

KHRONOS Group: WebGL 1 Specification

KHRONOS Group: WebGL 2 Specification

KHRONOS Group: WebGL Extensions Registry

Test if your browser supports WebGL or get a WebGL report


WebGL Samples

30 amazing examples of WebGL in action

PhiloGL: a WebGL Framework for Data Visualization, Creative Coding and Game Development

The X Toolkit: WebGL for Scientific Visualization

NASA Scientific Visualization Studio

Vicomtech-IK4 Demo Showroom

Udacity online WebGL course: Interactive 3D Graphics: Creating Virtual Worlds

Learning WebGL: 3D Programming for the Web

IBM: 3D development with WebGL: Part 1. Part 2. Part 3.

Why use WebGL for Graphics Research?

ChemDoodle Web Components

webgl.org currently just showing the Khronos OpenROAD animated video

webgl.com currently just a questionnaire on your use of WebGL


This course material was written by Jeppe Revall Frisvad, Associate Professor, DTU Compute, Technical University of Denmark.

© DTU Compute 2014.

Last updated 1 September 2015.