Computer Graphics
Jochen Lang
jlang@uottawa.ca
Faculté de génie | Faculty of Engineering
Jochen Lang, EECS jlang@uOttawa.ca
Objectives of the Course
• General
– The course is designed to teach the fundamentals of computer graphics
• 3D Graphics
• Geometric primitives
• Meshes
• Image-based techniques • Animation
• Rasterization pipeline
• Intro to ray tracing
• Curves and Splines
Left Subdivision
Right Subdivision
Jochen Lang, EECS jlang@uOttawa.ca
Objectives of the Course
• Specifics
– Focus on interactive 3D rendering
– Focus on rasterization pipeline
– Course topics independent of any specific rendering API
– Examples and labs use WebGL, Three.js and “modern” OpenGL
• Goal
– Understanding of rendering techniques
– Working knowledge of Three.js, WebGL, some OpenGL
• applicable cross-platform; desktop, mobile and web.
Geometry
Vertex Processor
Fragment Processor
Frame- buffer
Geometry Processing (Per- vertex operation)
Rasterization
Texturing (Per-fragment operations)
Textures and Images
Per- fragment operations
Jochen Lang, EECS jlang@uOttawa.ca
Course Organization
• Complete syllabus at https://www.site.uottawa.ca/~jlang/csi4130.html
– (Also as pdf from Virtual Campus)
• Course notes, laboratory exercises and assignments will be made available through Virtual Campus.
• All lectures, laboratories, discussions and office hours will occur through MS Teams.
• Please ask questions:
– General questions about lectures and the course in the general channel.
– Questions about assignments in the assignment channel.
– Individual questions in the 1:1 chat.
Jochen Lang, EECS jlang@uOttawa.ca
Textbooks
• Strongly Recommended
– Steve Marschner and Peter Shirley, “Fundamentals of Computer Graphics”, 4th ed., A.K. Peters, 2015.
• This is an excellent textbook for this course. It is more teaching- and research-oriented. It does not try to describe any API or code.
• Recommended
– Tomas Akenine-Möller, Eric Haines, Naty Hoffman, Angelo Pesce, Michał Iwanicki, and Sébastien Hillaire, Real-Time Rendering, A K Peters/CRC Press, 4th ed., 2018.
• This text describes real-time rendering techniques suitable for games and on-line applications. It provides (mostly) additional information to the course.
Jochen Lang, EECS jlang@uOttawa.ca
Programming References
• Dan Ginsburg, Budirijanto Purnomo, Dave Shreiner and Aaftab Munshi, OpenGL ES 3.0 Programming Guide, 2nd Ed., Addison-Wesley Professional, 2014.
• Kouichi Matsuda and Rodger Lea, WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL, Addison-Wesley Professional, 2013.
• Jos Dirksen, Learning Three.js: Programming 3D Animations and Visualizations for the Web with HTML5 and WebGL, 3rd ed., 2018
• John Kessenich, Graham Sellers, Dave Shreiner, OpenGL Programming Guide: The Official Guide to Learning OpenGL, Version 4.5 with SPIR-V, 9th ed., Addison-Wesley, 2016.
Jochen Lang, EECS jlang@uOttawa.ca
Syllabus
• Introduction
– Applications , brief history, research areas, class organization – Self-Study: Basic math, Textbook, on-line appendix
• Drawing and Animation
– Drawing and graphics pipeline – Modelling a Tetrahedron
– Projections from 3D to 2D
– Rasterization
– Animations
• Introduction to OpenGL, WebGL and Three.js
– Game or Rendering Engines, Graphics API, Low-level APIs – Three.js, OpenGL (ES) and WebGL
– Programmable pipeline
– Drawing a triangle (yeah!)
Jochen Lang, EECS jlang@uOttawa.ca
Syllabus (cont’d)
• Transformations in 2D
– Why spatial transformations in computer graphics?
– Scaling, shearing and rotation
– Multiple transformations: Matrix composition and decomposition
– Self-Study: Basic linear algebra, Textbook, on-line appendix
• Transformations in 3D
– Translations and homogeneous transforms – 3D Transformation
• Coordinate Transformations – Inverse transforms
– Coordinate transforms
Jochen Lang, EECS jlang@uOttawa.ca
Syllabus (cont’d)
• Scenegraph and Viewing Transformations – Scenegraph transforms
– Viewing and canonical viewing volume
• Camera Modelling
– 3D to 2D projection
– Projection matrix
– Camera modelling in WebGL
• Curves and Surfaces
– 2D implicit and parametric curves – 3D implicit and parametric curves – 3D parametric surfaces
– Linear interpolation
Jochen Lang, EECS jlang@uOttawa.ca
Syllabus (cont’d)
• Triangles and Rasterization
– Linear interpolation
– Triangles
– Baricentric coordinates and triangle rasterization
• ReadingWeek…………..Feb14-20 – No classes, no lab
• Midterm ………………Feb. 22 – Material covered in class and labs
Jochen Lang, EECS jlang@uOttawa.ca
Syllabus (cont’d)
• Shading
– Lighting
– Diffuse Shading
– Phong Shading
– OpenGL lighting and shading
• Vertex Pipeline Review
– OpenGL/WebGL programs and review of vertex pipeline
– Vertex shader
– Loading, compiling and linking a shader
– Setting up vertex attributes
– Sending uniforms
– Drawing calls
Jochen Lang, EECS jlang@uOttawa.ca
Syllabus (cont’d)
• Meshes and 2D Texture Mapping – Indexed meshes
– 2D texture mapping
– Sphere mapping
• 3D Texture and Noise
– 3D texture mapping
– Noise textures
– OpenGL Perlin noise shader
• More Texturing Techniques – Bump Mapping
– Displacement Mapping – Environment Maps
– Shadow Mapping
Jochen Lang, EECS jlang@uOttawa.ca
Syllabus (cont’d)
• Bezier Curves
– Bezier curves
– Subdivision
– Bernstein-Bezier formula – De Casteljau algorithm
• Splines
– Canonical form, constraint and basis matrix – Catmull-Rom splines
• Spline Surfaces
– Bi-linear patches – Bezier surfaces – Loop subdivision
Jochen Lang, EECS jlang@uOttawa.ca
Syllabus (cont’d)
• Physics-based rendering
– Motivation and goals
– Particle systems
– Time stepping and basic equation – ODE solvers
• Raytracing
– Basic algorithm
– Eye and shadow rays
– Acceleration data structures – Commercial ray tracers
Jochen Lang, EECS jlang@uOttawa.ca
Syllabus (cont’d)
• Graphics Pipeline – Clipping
– Z-buffer
– Perspective correct texture mapping
• Spatial Data Structures
– Spatial data structures
– Binary Space Partioning tree
• Colour and Illumination
– Brief overview of human vision
– CIE Tristimulus Values
– Chromaticity and Luminance
– RGB Colours and Colour Manipulatio
Jochen Lang, EECS jlang@uOttawa.ca
Marking Scheme
On-line quizzes (labs and lectures)
10 marks
Assignments (3)
9 + 9 + 8 = 26 marks
Final Assignment (incl. presentation on Teams, groups of 2)
20 marks
Midterm
14 marks
Final exam
30 marks
• Assignments 1-3 to be carried out alone.
• The four programming assignments must be submitted via Virtual Campus.
– Late hand-ins will NOT be accepted.
Jochen Lang, EECS jlang@uOttawa.ca
Assignment 4
• Assignment 4 is a small project
– It includes a project presentation on Teams
• Recommended in groups of 2
• Presentation of the project by a 3-4 minute video to be uploaded on MS Teams.
– Early upload will be rewarded by bonus marks!
– The best video will be selected by you!
– If the presentation is missing, assignment 4 will receive at most 10 marks.
• Examples from the past.
Jochen Lang, EECS jlang@uOttawa.ca
Academic Fraud and Plagiarism
– Any copying on an assignment will result in an automatic zero for the assignment.
– For any plagiarism or fraud possible university sanctions apply.
– The plagiarism rules of the University of Ottawa apply. Please familiarize yourself with them.
Jochen Lang, EECS jlang@uOttawa.ca
Computer Graphics Applications
• Movies
• Games
• Digital printing
• Virtual reality
• Scientific visualization
• Medical
• Industrial design
• E-commerce
• Architecture
• Cultural Heritage
• Art
• (Mobile) User interfaces
Pixar http://www.pixar.com
Jurassic Park,
Universal Studios, 1993.
The Matrix, Warner Brothers, 1999.
Lord of the Rings, 2001-2003 New Line Productions, Inc.
Jochen Lang, EECS jlang@uOttawa.ca
Computer Graphics Applications
• Movies
• Games
• Virtual reality
• Digital printing
• Scientific visualization
• Industrial design
• Medical
• E-commerce
• Architecture
• Cultural heritage
• Art
• (Mobile) User interfaces
EA Canada, Vancouver and Montreal Radical Entertainment – Activision, Vancouver BioWare, Edmonton
UbiSoft, Montreal, Quebec, Halifax and Toronto
RockStar, Toronto
Magmic Games, Ottawa Sega/Relic Entertainment, Vancouver Snowed-In Studios, Ottawa
Play Brains, Ottawa
Jochen Lang, EECS jlang@uOttawa.ca
Computer Graphics Applications
• Movies
• Games
• Virtual reality
• Digital printing
• Scientific visualization
• Industrial design
• Medical
• E-commerce
• Architecture
• Cultural heritage
• Art
• (Mobile) User interfaces
C. Schumacher, B. Bickel, J. Rys, S. Marschner, C. Daraio, M. Gross: Microstructures to Control Elasticity in 3D Printing, ACM Siggraph 2015
C. Dai, C.C. Wang, C. Wu, S. Lefebvre, G. Fang, Y. J. Liu: Support-free volume printing by multi-axis motion. ACM Siggraph 2018
Jochen Lang, EECS jlang@uOttawa.ca
Computer Graphics Applications
• Movies
• Games
• Virtual reality
• Digital printing
• Scientific visualization
• Medical
• Industrial design
• E-commerce
• Architecture
• Cultural heritage
• Art
• (Mobile) User interfaces
D. Weiskopf, K. Engel, and T. Ertl,
VIS Stuttgart, 2003
N. Chentanez and M. Müller, NVIDIA PhysX Research, 2011
E. Vuçini, T. Möller and M. E. Gröller, SFU and Vienna U., 2009
Jochen Lang, EECS jlang@uOttawa.ca
See paraview for more examples.
Computer Graphics Applications
• Movies
• Games
• Virtual reality
• Scientific visualization
• Medical
• Industrial design, CAD, 3D printing
• E-commerce
• Architecture
• Cultural heritage
• Art
• (Mobile) User interfaces
AutoCAD, Catia, SolidEdge, Autodesk Inventor, SolidWorks
TinkerCad
SketchUp
OpenRT, P.Slusallek et al., Saarbrücken
Jochen Lang, EECS jlang@uOttawa.ca
Computer Graphics Applications
Rome Reborn VR, Image © The Board of Visitors of the University of Virginia, 2008
M. Levoy et al., Stanford
• Movies
• Games
• Virtual reality
• Digital printing
• Scientific visualization
• Medical
• Industrial design
• E-commerce
• Architecture
• Cultural heritage
• Art
• (Mobile) User interfaces
H. Lensch, J. Lang, M. Goesele, C. Rocchini, P. Cignoni, C. Montani, P. Pingi, R. Scopigno, MPI Informatik, CNR Italy, 2003
F. Bernardini, H. Rushmeier et al., IBM Watson
Jochen Lang, EECS jlang@uOttawa.ca
Computer Graphics Applications
• Movies
• Games
• Virtual reality
• Digital printing
• Scientific visualization
• Medical
• Industrial design
• E-commerce
• Architecture
• Cultural heritage
• Art
• (Mobile) User interfaces
Liao J, Yao Y, Yuan L, Hua G, Kang SB, 2017 Copyright ACM
T. Li and D. Mould, 2011
R. Azami, L. Doyle and D. Mould, 2019
M. Zhao, S.-C. Zhu, 2010
Jochen Lang, EECS jlang@uOttawa.ca
Research Areas
• Core Areas:
See ACM Siggraph Trailer for an Intro
– (Geometric) Modeling: curves and surfaces, parameterization
– Rendering: global illumination, real-time, hardware support, libraries
– Animation: characters, physical phenomena
• Further Areas:
– User interaction, Virtual and augmented reality, Visualization, 3D Scanning, Image processing, NPR
• Current Trends:
– Deep learning, visual computing, automatic modeling support, computational photography, digital fabrication
Jochen Lang, EECS jlang@uOttawa.ca
Brief History
• MIT – Harvard – Utah
– User interfaces: Sketchpad system (Sutherland, MIT, 1962)
– Homogeneous coordinates for CG, hidden line removal (Roberts, Harvard, 1960s)
– Virtual Reality – Harvard 3D Display (Seitz, MIT, late 1960s)
– Coons patches (MIT, 1965) • Renault
– Bézier curves (late 1960s)
Jochen Lang, EECS jlang@uOttawa.ca
Next lecture
• Drawing and Animation
– Drawing and graphics pipeline – Modelling a Tetrahedron
– Projections from 3D to 2D
– Rasterization
– Animations
Jochen Lang, EECS jlang@uOttawa.ca