02561 Computer Graphics

Course description from the DTU course catalogue.

Course Overview

Interactive computer graphics enables us to manipulate digital 3D objects. The ability to work interactively with digital objects is an important engineering skill. Our objective in this course is to enable the participants to (a) implement real-time computer graphics systems and (b) to develop graphics algorithms with applications in visualization, modelling, and animation. The course covers web graphics technology and introduces the principles of 3D graphics that one would need for working on CAD systems, game engines, computer animation, 3D multimedia, virtual reality, and scientific visualization.

We will do lectures and exercises interspersed in the first half of each teaching session and then exercises only in the second half.

You need a computer to complete the course work.

Timetable

Calender weeks: 35-41 + 43-48.

Weekly timetable:

Wednesday 8-12 lecture and exercises Building 303A, Auditorium 44 (and Zoom)

Hand-in deadline: Sunday 17 December 2023 at 23:59.

Textbooks and Notes

The textbook for this course is

A Angel, E., and Shreiner, D. Interactive Computer Graphics: A Top-Down Approach with WebGL, 7th edition. Pearson, 2015. [webpage]

If you prefer extra details on the WebGL programming, we recommend the following textbook as a supplement:

GL Matsuda, K., and Lea, R. WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL. Addison-Wesley, 2013. [webpage]

In addition, we may upload papers to DTU Learn that serve sometimes as part of the curriculum, sometimes as supplementary reading material.

Please note that code samples from these books are available on their respective webpages. However, be aware that the coding style is quite different in the two books despite the fact that they are both based on the same tools (JavaScript/WebGL).

The main textbook A has many typos (especially in the printed code). Some of them have been corrected in the code samples on the webpage. A wiki page on various minor issues in the textbook that you might encounter is available here: Clarifications for Angel's Interactive Computer Graphics

In the spirit of WebGL, there is also a very useful online collection of articles that teach WebGL from basic principles using interactive editable examples: WebGL Fundamentals.

Prerequisites

We assume that you know basic geometry, trigonometry, and vector algebra, and also introductory linear algebra and the concept of multivariate functions. We further expect that you have some general experience with programming and problem solving from other courses.

Programmatically, you will work with HTML, JavaScript, and WebGL/WebGPU. This entails working with buffers and data flow between server, CPU, and GPU. Mathematically, you will work with projections in space, projective geometry, transformations, and mappings. We may also explore parametric curves and surfaces. The subjects listed in this paragraph will be covered in the course.

Lab Journal

You are expected to maintain a lab journal where you present the outcome of your work. The lab journal is a webpage containing your solution for each part of each worksheet. A good way to work is to have a separate html and js file for each part of each worksheet. The lab journal must be submitted in a zip-file to DTU Learn (Assignments) before the deadline (see above).

Project

Toward the end of the course you must choose a minor project to work on. Some projects will be proposed at the lectures. A project of your own choosing is acceptable as long as it has a reasonable connection with the course. You can choose one of the proposed projects or hand in a short project description (one paragraph) and get it approved by the course responsible. The project must be submitted to DTU Learn (Assignments) before the deadline (see above). This submission must include a project report of the following structure: Introduction, Method, Implementation, Results, Discussion, so that it is possible to understand what you developed and the intentions and ideas behind the project. Include a zip-file containing the code.

Assessment

The assessment is based on your lab journal and project report (and associated code). These must be in pdf or html format and uploaded to DTU Learn (Assignments) before the deadline (see 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.

As a rough guideline, the project is usually 40% to 50% of the grade because it is carried out more independently. The exercises are then roughly 50% to 60% of the grade. You need more than 50% to pass. This means that it is very difficult to pass the course if you do not hand in a project together with a project report, and it is not possible to pass if you do not hand in any solutions for any of the worksheets. On the other hand, if you do 75% of the exercise worksheets and work your way through the project and write a decent project report for this work, you will probably pass with a decent grade. The word "probably" in this context means "depending on the correctness of your solutions".

Individualization

In case you work in a group, it is important that proper credit is assigned to your collaborator(s) and that your final hand-in is individualized.

As an example, you can work on exercises and project in a group of two and each write your own lab journal and project report. These must then clearly state who you collaborated with.

It is allowed to write lab journal and project report in a group of two (or perhaps three), but then you must clearly state the main responsible for each part of the lab journal and the project. In the project report, you can share main responsibility for introduction and discussion. Having assigned main responsibility of a part to one person in the group does not mean that the other person did not contribute to this part. A statement saying that all group members contributed equally is inadequate.

Feedback

Use your current status with respect to solving the worksheets and completing your project as an indicator of your performance. Ask instructors during exercise sessions to get an indication of the correctness of your solutions or the level of ambition of your project work.

Preliminary Weekly Schedule

Week Subject Curriculum Exercises
1
30/8
Introduction,
graphics pipeline,
primitives, attributes, color.
A: Section 1-1.2, 1.6-1.10
A: Chapter 2
(Supp: GL pp. 1-160)
Worksheet 1
2
6/9
Animation, interaction,
event-driven input,
position input.
A: Chapter 3
(Supp: GL pp. 1-160)
Worksheets 1-2
3
13/9
Interactive programs,
time-stamped animation.
A: Chapter 3
(Supp: GL pp. 1-160)
Worksheets 2
4
20/9
Synthetic camera models,
transformation matrices,
viewing and perspective.
A: Sections 1.3-1.5
A: Sections 4.3-4.12
A: Sections 5-5.7
Worksheet 3
5
27/9
Hidden-surface removal,
lighting and shading.
A: Section 5.8
A: Sections 6-6.10
Worksheet 4
6
4/10
Indexed face set,
load and display 3D models,
local vs. online webpage.
A: Section 4.6
GL: pp. 414-430
Worksheet 5
7
11/10
Buffers and images,
texture mapping,
multitexturing.
A: Section 7-7.6 Worksheet 6
8
25/10
Environment mapping,
reflection mapping,
bump mapping.
A: Sections 7.7-7.9 Worksheet 7
9
1/11
Projection shadows,
blending,
z-buffer and depth sorting.
A: Section 5.10
A: Sections 7.10-7.10.3
A: Section 8.11
Worksheet 8
10
8/11
Off-screen buffers,
multiple shaders,
shadow mapping.
A: Sections 5.11, 7.12
GL: pp. 386-392
GL: pp. 405-414
Worksheet 9
11
15/11
Quaternion rotation,
virtual trackball,
project proposals.
A: Sections 4.12-4.14
GL: pp. 357-360
Worksheet 10
12
22/11
Curves and surfaces. A: Chapter 11
(supplement)
Project work
13
29/11
Volume rendering. A: Sections 12.11, 12.15 Project work

Exercises

Preliminary list of worksheets.

Worksheet 1: Getting started with WebGL (or WebGPU)

Worksheet 2: Input devices and interaction

Worksheet 3: Projections (virtual camera) and transformations

Worksheet 4: Lighting and (forward) shading

Worksheet 5: Rendering a triangle mesh

Worksheet 6: Texture mapping

Worksheet 7: Environment mapping and normal mapping

Worksheet 8: Projection shadows and render pipeline

Worksheet 9: Shadow mapping

Worksheet 10: Virtual trackball

Graphics resources

Blender (free open source 3D creation suite)

Real-Time Rendering Resources (many useful links, including links to free books)

NVIDIA books: GPU Gems (HTML versions of books with many project-relevant techniques)

NVIDIA book: The Cg Tutorial (old book on shader programming with useful explanations)

The Cornell box (standard scene for testing global illumination algorithms)

McGuire Computer Graphics Archive (useful OBJ meshes)

Thingiverse (3D printable 3D models)

ShapeNet (large-scale dataset of 3D shapes)

Poly Haven (free textures and high dynamic range panoramic images)

sIBL Archive (free high dynamic range panoramic images)

Paul Debevec's Light Probe Image Gallery (light probe images in different formats, including cube map format)

Paul Debevec's High-Resolution Light Probe Image Gallery (high dynamic range panoramic images)

Pixar's OpenSubdiv (libraries that implement high performance subdivision surface evaluation)

glTF (royalty-free specification for the efficient transmission and loading of 3D scenes and models)

WebGPU links

WebGPU specification (latest published version)

WGSL - WebGPU Shading Language - specification (latest published version)

WebGPU API reference

WebGPU/WGSL Reference

Can I use WebGPU? (browser WebGPU status)

Your first WebGPU app (Google Codelabs)

WebGPU fundamentals (articles to help learn WebGPU)

Web Programming Using the WebGPU API by Benjamin Kenwright [DTU access]

Introduction to Computer Graphics and Ray-Tracing Using the WebGPU API by Benjamin Kenwright [DTU access]

WebGPU Lab (editable code samples by Benjamin Kenwright)

From 0 to glTF with WebGPU by Will Usher

wgpu (graphics library for Rust based on the WebGPU API)

wgpu-py (a Python implementation of WebGPU)

WebGL links

WebGL 1.0 API Quick Reference Card

KHRONOS Group: WebGL (OpenGL ES for the Web)

KHRONOS Group: WebGL 1 Specification

KHRONOS Group: WebGL 2 Specification

KHRONOS Group: WebGL 2 Compute Specification

KHRONOS Group: WebGL Extensions Registry

KHRONOS Group: Vertex Specification Best Practices

KHRONOS Group: glTF Sample Viewer

Test if your browser supports WebGL or get a WebGL report

WebGL Fundamentals (articles that teach WebGL from basic principles)

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

Patrick Cozzi: Why use WebGL for Graphics Research?

WebGL Samples

Evan Wallace projects (WebGL water, WebGL path tracing, etc.)

WebGL 2.0 Compute shader Demos

OpenSubdiv 3.0 WebGL viewer

Three.js

Ammo.js (port of the Bullet physics engine to JavaScript)

Tutorial: Intro to JavaScript 3D Physics using Ammo.js and Three.js

MatCaps (Material Capture, also known as LitSphere)

ZBrush MatCap Library

WebGL Experiments with Google

Alexandra Institute: Visual Computing Lab development blog

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

The X Toolkit: WebGL for Scientific Visualization

PyScript (run Python in your HTML)

Disclaimer

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

© DTU Compute 2023.

Last updated 21 November 2023.