Interactive 3D Graphics
Contents
The main goal of the course is to introduce concepts, algorithms and technologies in the field of interactive 3D graphics, with practical examples in WebGL / ThreeJS. By the end of the course, the student will be able to:
 understand the basic principles of computer graphics and interactive 3D graphics applications, such as videogames, data visualizations, and simulations;
 design and implement a 3D graphics application, based on WebGL, that runs in a Web browser ^{1}.
Syllabus
 Introduction. The interactive 3D rendering cycle. The realtime rendering pipeline.
 WebGL and three.js. Introduction to WebGL and three.js. Rendering a simple scene.
 Geometry representation. Polygon meshes and their representation. Triangle representation and triangle meshes. Tessellation.
 Transformations. Coordinate spaces used in 3D graphics. Affine transformations: rotations, scaling, translation. Transformations in 4D homogeneous coordinates.
 The virtual camera. Representation of a virtual camera. Camera space, clip space and screen space. Orthographic and perspective projections. Clipping and screen mapping.
 Rasterization and interpolation. Algorithms for rasterizing points, lines and polygons. Perspective interpolation of vertex data. Aliasing and screenbased antialiasing methods.
 Buffer and fragment operations. Fragment operations: blending. Buffer operations: depth test. Algorithms for rendering semitransparent surfaces.
 Programmable shaders. Vertex and fragment shaders. The Glsl language.
 Shading. Visual phenomena and their importance in shading. The Rendering Equation. Realtime shading equations and their implementation through shaders. BRDF: lambertian and microfacet. Implementation through shaders.
 Using textures in shading. Material mapping, normal mapping, reflection mapping, refraction mapping, shadow mapping. Implementation through shaders.
 Spatial data structures. Bounding volumes, Bounding Volume Hierarchies, Binary Space Partitioning Trees. Culling algorithms: Hierarchical View Frustum Culling
 Imagebased rendering. Full screen effects. Using shaders to implement image processing algorithms: color filters, convolutions, edge detection.
 Introduction to animations. Keyframe animations: interpolation through splines. Interpolation of rotations with quaternions. Particle Systems.
 Controlling a virtual camera. Interactive, assisted and automatic methods. Reactive and declarative methods. Examples of stateoftheart techniques for automatically controlling a virtual camera.
Materials and Bibliography
 Course slides available at elearning.uniud.it
 Code examples available at GitHub (how to run programs locally)
Reference textbooks:
 RealTime Rendering, (2nd or 3rd edition), T. AkenineMöller, E. Haines, and N. Hoffman.
 3D Math Primer for Graphics and Game Development, F. Dunn e I. Parberry.
 Mathematics for 3D Game Programming and Computer Graphics, E. Lengyel.
Note: The course slides report, for each topic, references to specific chapters in the above books. At least one copy of each book is available at the University Library.
Books on WebGL and three.js (just for reference, slides and online docs are sufficient):
 WebGL: Up and Running, T. Parisi, O’Really.
 WebGL Beginner’s Guide, B. Jones and D. Cantor, Packt Publishing.
On the Web:
 Free Interactive 3D Graphics Online Course, taught by E. Eynes. Based on WebGL and three.js. It covers many arguments of our course. Recommended.
 Some useful articles about glsl programming.
Exam
 Written exam with open questions and exercises.
 Two practical projects, that are due before the written exam, and whose specific topics will be given during lectures and posted on the course web page.

We use WebGL/three.js to focus on graphics concepts and algorithms, rather than low level graphics APIs details. However, at the end of the course you should be able to learn how to write an application using, e.g., C++ and OpenGL, with quite low effort. Also, you will have understood the main graphics concepts and techniques that are necessary to productively use 3D engines and game development systems such as Unity or Unreal. ↩