Roberto Ranon bio photo

Roberto Ranon

Assistant Professor at the Department of Math and Computer Science of the University of Udine, Italy.

LinkedIn ResearchGate

Interactive 3D Graphics


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.


  1. Introduction. The interactive 3D rendering cycle. The real-time rendering pipeline.
  2. WebGL and three.js. Introduction to WebGL and three.js. Rendering a simple scene.
  3. Geometry representation. Polygon meshes and their representation. Triangle representation and triangle meshes. Tessellation.
  4. Transformations. Coordinate spaces used in 3D graphics. Affine transformations: rotations, scaling, translation. Transformations in 4D homogeneous coordinates.
  5. The virtual camera. Representation of a virtual camera. Camera space, clip space and screen space. Orthographic and perspective projections. Clipping and screen mapping.
  6. Rasterization and interpolation. Algorithms for rasterizing points, lines and polygons. Perspective interpolation of vertex data. Aliasing and screen-based anti-aliasing methods.
  7. Buffer and fragment operations. Fragment operations: blending. Buffer operations: depth test. Algorithms for rendering semi-transparent surfaces.
  8. Programmable shaders. Vertex and fragment shaders. The Glsl language.
  9. Shading. Visual phenomena and their importance in shading. The Rendering Equation. Real-time shading equations and their implementation through shaders. BRDF: lambertian and microfacet. Implementation through shaders.
  10. Using textures in shading. Material mapping, normal mapping, reflection mapping, refraction mapping, shadow mapping. Implementation through shaders.
  11. Spatial data structures.  Bounding volumes, Bounding Volume Hierarchies, Binary Space Partitioning Trees. Culling algorithms: Hierarchical View Frustum Culling
  12. Image-based rendering. Full screen effects. Using shaders to implement image processing algorithms: color filters, convolutions, edge detection.
  13. Introduction to animations. Keyframe animations: interpolation through splines. Interpolation of rotations with quaternions. Particle Systems.
  14. Controlling a virtual camera. Interactive, assisted and automatic methods. Reactive and declarative methods. Examples of state-of-the-art techniques for automatically controlling a virtual camera.

Materials and Bibliography

Reference textbooks:

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):

On the Web:


  • 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.
  1. 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.