Computer Graphics

Jochen Lang

[email protected]

Faculté de génie | Faculty of Engineering

Jochen Lang, EECS
[email protected]
 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 Right Subdivision

• Curves and Splines

Left Subdivision

Jochen Lang, EECS

[email protected]
 Objectives of the Course
• Specifics
– Focus on interactive 3D rendering
– Focus on rasterization pipeline Geometry Geometry Processing (Per-
vertex operation)
Vertex Processor

– Course topics independent of any

specific rendering API
Rasterization

– Examples and labs use WebGL, Texturing (Per-fragment

operations)
Fragment
Processor

Three.js and “modern” OpenGL Textures and

Per-
Images Frame-

• Goal
fragment buffer
operations

– Understanding of rendering
techniques
– Working knowledge of Three.js,
WebGL, some OpenGL
• applicable cross-platform;
desktop, mobile and web.
Jochen Lang, EECS
[email protected]
 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.
• In-person lectures and laboratories
• Discussions and office hours (also in person) 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 or in person.
– Individual questions in the 1:1 chat or in person.

Jochen Lang, EECS

[email protected]
 Textbooks
• Strongly Recommended
– Steve Marschner and Peter Shirley, “Fundamentals of
Computer Graphics”, 5th ed., A.K. Peters, 2021. List
price US $ 150.00
• 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. List price US $ 110.00
• 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

[email protected]
 Programming References
• Dan Ginsburg, Budirijanto Purnomo, Dave Shreiner and
Aaftab Munshi, OpenGL ES 3.0 Programming Guide, 2nd
Ed., Addison-Wesley Professional, 2014. List price US $
49.99
• Kouichi Matsuda and Rodger Lea, WebGL Programming
Guide: Interactive 3D Graphics Programming with
WebGL, Addison-Wesley Professional, 2013. Digital List
Price US $47.99.
• Jos Dirksen, Learning Three.js: Programming 3D
Animations and Visualizations for the Web with HTML5
and WebGL, 3rd ed., 2018. List price CAD $ 71.99
• Farhad Ghayour and Diego Cantor, Real-Time 3D
Graphics with WebGL 2, 2nd ed., Packt Publishing,
2018. List price CAD $ 61.99

Jochen Lang, EECS

[email protected]
 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

[email protected]
 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

[email protected]
 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

[email protected]
 Syllabus (cont’d)

• Triangles and Rasterization

– Linear interpolation
– Triangles
– Baricentric coordinates and triangle rasterization
• Midterm . . . . . . . . . . . . . . . . . . Feb. 12
– Material covered in class and labs
– Midterm is on-line on Virtual Campus during class
time
• Reading Week . . . . . . . . . . . . . . Feb 17-21
– No classes, no lab

Jochen Lang, EECS

[email protected]
 Syllabus (cont’d)
• Shading
– Lighting
– Diffuse Shading
– Phong Shading
– OpenGL lighting and shading
• 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

Jochen Lang, EECS

[email protected]
 Syllabus (cont’d)
• More Texturing Techniques
– Bump Mapping
– Displacement Mapping
– Environment Maps
– Shadow Mapping
• Ray Tracing
– Basic algorithm
– Eye and shadow rays
– Acceleration data structures
• Volume Rendering
– Overview
– Particle-light interaction
– Volume rendering integral, ray casting and alpha blending
– Shear-Warp algorithm, 3D Textures, GPU approaches
– NeRF Rendering

Jochen Lang, EECS

[email protected]
 Syllabus (cont’d)
• Point-based Rendering or Splatting
– Pure point representation and neighborhoods
– Surface splats
– PBR or rendering approaches
– 3D Gaussian Splatting
• Bezier Curves
– Bezier curves
– Subdivision
– Bernstein-Bezier formula
– De Casteljau algorithm
• Splines
– Canonical form, constraint and basis matrix
– Catmull-Rom splines

Jochen Lang, EECS

[email protected]
 Syllabus (cont’d)

• Spline Surfaces
– Bi-linear patches
– Bezier surfaces
– Loop subdivision
• Physics-based rendering
– Motivation and goals
– Particle systems
– Time stepping and basic equation
– ODE solvers

Jochen Lang, EECS

[email protected]
 Marking Scheme
On-line lab quizzes (10) 10 marks
Assignments (3) 9 + 9 + 8 = 26 marks
Final Assignment (incl. presentation
20 marks
on Teams, groups of 2)
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

[email protected]
 Assignment 4

• Assignment 4 is a small project

– It includes a brief project demo/presentation in the
last lecture (and on MS Teams)
• Groups of 4
• Presentation of the project by a 2-3 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.

Jochen Lang, EECS

[email protected]
 Academic Integrity and Academic
Misconduct
– Any copying on an assignment will result in an
automatic zero for the assignment.
– For any academic misconduct possible university
sanctions apply.
– The rules on academic integrity of the University of
Ottawa apply. Please familiarize yourself with them.
• Use of AI tools in CSI4130
– Any code that is not your own, i.e., looked-up from a
webpage with a browser or using a LLM must be
clearly marked in your code.
– You must add a comment which indicates the source
and clearly mark the start and end of the section.
– Remember source code is covered by copyright.

Jochen Lang, EECS

[email protected]
 Computer Graphics Applications

• Movies Pixar http://www.pixar.com

• Games
• Fabrication Jurassic Park,
Universal Studios, 1993.
• Virtual reality
• Scientific visualization The Matrix, Warner Brothers, 1999.
• Medical
• Industrial design
Lord of the Rings, 2001-2003
• E-commerce New Line Productions, Inc.
• Architecture
• Cultural Heritage
• Art
• (Mobile) User interfaces
Jochen Lang, EECS
[email protected]
 Computer Graphics Applications
EA, Vancouver, Montreal, and other
• Movies Radical Entertainment - Activision,
• Games Vancouver (defunct)
• Virtual reality BioWare (EA), Edmonton
• Fabrication
UbiSoft, Montreal, Quebec, Toronto and other
• Scientific visualization
• Industrial design RockStar, Toronto
• Medical
Magmic Games, Ottawa
• E-commerce
• Architecture Sega/Relic Entertainment, Vancouver
• Cultural heritage
Snowed-In Studios, Ottawa
• Art
• (Mobile) User interfaces
Jochen Lang, EECS
[email protected]
 Computer Graphics Applications
Brunton, Alan, and
• Movies Lubna Abu Rmaileh:
Displaced signed
• Games distance fields for
• Virtual reality additive manufacturing,
ACM Siggraph 2021.
• Fabrication
• Scientific visualization
• Industrial design
• Medical
• E-commerce
C. Schumacher, B. Bickel,
• Architecture J. Rys, S. Marschner, C.
Daraio, M. Gross:
• Cultural heritage
Microstructures to Control
• Art Elasticity in 3D Printing,
ACM Siggraph 2015
• (Mobile) User interfaces
Jochen Lang, EECS
[email protected]
 Computer Graphics Applications
Panuelos J, Goldade R, Grinspun
• Movies E, Levin D, Batty C. PolyStokes:
A polynomial model reduction
• Games method for viscous fluid
• Virtual reality simulation. ACM Siggraph 2023.

• Fabrication
• Scientific visualization
• Medical
N. Chentanez
• Industrial design and M. Müller,
• E-commerce NVIDIA
PhysX
• Architecture Research, 2011
• Cultural heritage D. Weiskopf, K. Engel,
and T. Ertl, E. Vuçini, T. Möller and M. E.
• Art VIS Stuttgart, 2003 Gröller, SFU and Vienna U., 2009
• (Mobile) User interfaces
Jochen Lang, EECS See paraview for more examples.
[email protected]
 Computer Graphics Applications
AutoCAD, Catia,
• Movies
SolidEdge, Autodesk
• Games Inventor, SolidWorks
• Virtual reality
• Scientific visualization TinkerCad
• Medical
• Industrial design, CAD, 3D printing
• E-commerce
SketchUp
• Architecture
• Cultural heritage
• Art OpenRT,
P.Slusallek et al.,
• (Mobile) User interfaces Saarbrücken

Jochen Lang, EECS

[email protected]
 Computer Graphics Applications Rome Reborn
VR, Image ©
The Board of
• Movies Visitors of the
University of
• Games Virginia, 2008
• Virtual reality
• Fabrication M. Levoy et
al., Stanford
• Scientific visualization
• Medical
• Industrial design
• E-commerce
H. Lensch, J. Lang, M. Goesele, C.
• Architecture Rocchini, P. Cignoni, C. Montani, P.
• Cultural heritage Pingi, R. Scopigno, MPI Informatik,
CNR Italy, 2003
• Art F. Bernardini, H. Rushmeier
• (Mobile) User interfaces et al., IBM Watson
Jochen Lang, EECS
[email protected]
 Computer Graphics Applications

• Movies
• Games
• Virtual reality Liao J, Yao Y, Yuan L, Hua G, Kang SB, 2017
• Digital printing Copyright ACM

• Scientific visualization
T. Li and D.
• Medical
Mould, 2011
• Industrial design
• E-commerce
• Architecture
• Cultural heritage R. Azami, L.
Doyle and D. M. Zhao,
• Art Mould, 2019 S.-C. Zhu,
• (Mobile) User interfaces 2010

Jochen Lang, EECS

[email protected]
 See ACM Siggraph Trailer for
Research Areas an Intro

• Core Areas:
– (Geometric) Modeling: curves and surfaces,
parameterization
– Rendering: global illumination, real-time, hardware
support, libraries, cloud
– Animation: characters, physical phenomena
• Further Areas:
– User interaction, Virtual and augmented reality,
Visualization, 3D Scanning, Image processing, NPR
• Current Trends:
– Generative models (LLMs and Diffusion), deep
learning, neural rendering, digital fabrication,
physical properties
Jochen Lang, EECS
[email protected]
 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

[email protected]
 Next lecture

• Drawing and Animation

– Drawing and graphics pipeline
– Modelling a Tetrahedron
– Projections from 3D to 2D
– Rasterization
– Animations

Jochen Lang, EECS

[email protected]