Engineering Techniques for Computer Graphics
1
Topics in Computer Graphics
http://www.ee.cityu.edu.hk/%7Esyyuen
2
Goals of Computer Graphics
To use computer and mathematical
techniques to build a virtual, real-like 3D
world, animated by time changes, inside the
computer
To study techniques that can render the
virtual 3D world to real-like 2D images and
movies
3
Movie Industry Applications
Different kinds of “CG” movies
Type I: Created entirely Using CG
e.g. ”Fozen 2”
Type 2: Real people + CG characters
e.g. “District 9”
Type 3: CG Movie + Real People
e.g. “Space Battleship Yamato”
Type 4: Conventional movie with CG special effects
e.g. “Initial D” (production documentary)
Type 5: “3D Movies”
e.g. “Avatar”
http://www.madagascar-themovie.com/main.php
http://www.madagascar-themovie.com/main.php
https://www.youtube.com/watch?v=uFiow5HMu88
http://www.cgvisual.com/headlines/initialD/CGVheadlines_initialD_p1.htm
Mobile phone games (i-phone apps, android …)
Playstation (PS, Nintendo, Sega …)
PC Single Person games (Single player and multiple
player)
Hand held games
Web games
Motion control games
…
4
Game Industry Applications
5
Advertising Industry Applications
Commercials in TV
e.g. TVB Jade
animations in web page
e.g. South China Morning Post
http://www.scmp.com/frontpage/hk
6
Design Industry Applications
Computer Aided Design (CAD)
7
Virtual Reality Industry Application
VR creates an immersive
environment such that the
user has the false but real
sensation of being in an
artificially created world
Applications in games,
medical therapy,
visualization, design,
surgery practice,
teaching, …
8
Other less well known Applications
Visualization
Visualize mathematical problems
Riemann
Hypothesis
UNCRACKABLE? The Collatz
Conjecture
Goldbach’s Conjecture
https://en.wikipedia.org/wiki/Riemann_hypothesis
https://en.wikipedia.org/wiki/Goldbach%27s_conjecture
9
Worldwide air transportation network
Complex networks
https://en.wikipedia.org/wiki/Complex_network
10
A global genetic interaction network maps a wiring diagram of cellular function
https://www.ncbi.nlm.nih.gov/pubmed/27708008
11
Training
flight simulator
car simulator
spaceship cabin simulator
…
12
Education
animated story
book
animated
presentation
Electronic books for children
13
Computer Art
new type of
painting
New type of
art form
…
“Butterfly 6228” Author: Human and Computer
14
Full-body anime generation with Generative Adversarial Nets (GAN)
15
Converting movie to cartoon and vice
versa
Movie to cartoon
Cartoon to movie
key
frames
Add several intermediate frames
in between each key frame by
interpolation
Comic H2
H2 CG movie
16
CG in Hong Kong
CG forum
http://www.cgvisual.com/forum/index.php
http://www.cgvisual.com/forum/index.php
17
Course Aim
The aim of this course is to provide students
with an understanding of the basic principles,
concepts, and techniques of computer
graphics from an engineering viewpoint.
18
CILOS
(CILO1) Apply 3D object representation
techniques to build up a graphics scene
(CILO2) Model and view articulated objects by
hierarchical structuring techniques and coordinate
transform
(CILO3) Apply lighting, shading and rasterization
techniques to create a 2D image
(CILO4) Apply texture mapping and animation
techniques to create a movie
(CILO5) Apply and evaluate advanced graphics
techniques
(CILO6) Create an animation or a game using
computer graphics
Course Content
19
Modeling
Transform
Object
Representation
Lighting
& Rasterization
Viewing &
Projection
Transform
Animation
Sample of Advanced
Techniques
Sample of Advanced
Techniques
20
Object Representation (CILO1)
Lecture 2
How to construct simple objects such as spheres,
cones, boxes …
21
Modeling Transform (CILO2)
Lecture 3
how to move the simple objects around, rotate them,
scale them, reflect them, …
Lecture 4
introduce the idea of local coordinate system, and how
to use the concepts to build a complex coherent
moving object by using the hierarchy concept
22
Viewing and Projection Transform
(CILO2)
Lecture 5
how to put the camera in a desired configuration within
the graphics scene and
how to use different projections to project a 2D image
on the camera, and as a result, the different projection
effect that can be achieved
23
Lighting and Rasterization (CILO3)
Lecture 7
how to create light sources, shading and colour
Lecture 8
how to eliminate hidden parts
Lecture 9
how to create realistic shadows
24
Animation (CILO4)
Lecture 6
how to animate the images to create a smooth flowing
movie
25
Advanced Graphics Techniques (CILO5)
Lecture 10
How to create more realistic graphics by texture
mapping
Lecture 11
Sample of advanced techniques
26
OpenGL Mini Project (CILO6)
This course uses the open source de facto industry
standard: OpenGL, It is a C/C++ library that allows C
programmers to write programs that directly access
graphics hardware
The gl and glut libraries
How to learn OpenGL
a) Learn during lecture, tutorial and mini project
b) Search the web for the command
c) OpenGL Function Index at the end of the text
Other forms of OpenGL
Fixed function OpenGL is taught in this course first as it
is the best for beginners. There are other forms of
OpenGL
WebGL – OpenGL JAVA version is popular
OpenGL ES is used in iphone
OpenGL shading language (GLSL) is used nowadays
27
Relationship of this course with
commercial software
Commercial software e.g. 3D studio
used by game developers, many TV commercial studios
and architectural visualization studios, movie effects etc.
This course gives you the technical knowhow behind the
techniques in these software. Thus
You can use them more sensibly
You know the limitations of these software and why
You acquire the background for more advanced state of the art
knowledge (e.g. SIGGRAPH is the premier conference in CG)
You can create a new special effect not supported by the
software or research your own novel effect
OpenGL is also a popular tool
28
http://en.wikipedia.org/wiki/3D_studio
29
Text Book and References
Text book:
Computer Graphics with OpenGL, Hearn and Baker, 4th Ed. (2011)
Pearson (ISBN 10: 0-13-248457-9)
Course Reserve has four copies. To access Course Reserve, go to
CityU Library and select “Course Reserve”
Course Reserve also has other useful supplementary reference
material.
https://julac.hosted.exlibrisgroup.com/primo-explore/search?vid=CUH&sortby=rank&mode=advanced&search_scope=CourseReserve&query=any,contains,EE5808
30
Assessment and Schedule
31
Coursework Components (50%)
Time Item Scope Percentage
Tests
Wk 6
(24 Feb.)
Test 1 everything taught
in Wk 1- 5
15%
Wk 11
(31 Mar.)
Test 2 everything taught
in Wk 6 -10
15%
Assignments
Wk 13
(21 Apr.)
Mini-Project 12.5%
Other Assignments
(at least 2)
5%
Wk 8
(10 Mar.)
Mini-Project
Progress
2.5%
Guideline for mitigation request
Departmental guideline: “For course assessment work with
weighting less than 20% such as short quiz, test, etc., make-
up assessment will not be provided to students. The students
will score “0” for the assessment work concerned.”
According to this guideline, no make up assessment will be
provided
32
Mini-project progress
Hand in mini-project progress with
Realistic hierarchical structures
Realistic animation
See mini project for the format
No need to hand in report this time
Hand in through Canvas. It will be opened for hand in
33
Grade distribution 19/20
34
If you have questions
Please email me your questions during the week.
We can also chat using Zoom. Please let me know
when you would be available.
35
Teaching Assistant
Ms. LIU Wenwen
Office: FYW2386 Tel: 3442 9845
Email: wenwen.liu@my.cityu.edu.hk
Please email/phone to book an appointment
36
mailto:wenwen.liu@my.cityu.edu.hk
37
Mathematical Background
You should have the mathematical background below:
3D coordinate systems in Euclidean coordinates and polar
coordinates
Basic matrix and vector arithmetic
Calculation of determinant
Scalar (dot) product: how to calculate and its physical meanings
Vector (cross) product: how to calculate and its physical
meanings
Concepts of partial derivatives
Please consult any standard text in Linear Algebra
38
Non-standard mathematical notation used
|N| is normally used to denote the magnitude of vector N
and is a scalar. In this course, |N| is sometimes also
used to denote “normalize the vector N to a unit vector”
e.g. The light source is at (3, 3, 3) and the surface point
is at (0, 0, 0). The unit lighting vector
𝐿𝐿 = 3,3,3 − (0,0,0) = 1
3
, 1
3
, 1
3
EE5808 �Topics in Computer Graphics�
Goals of Computer Graphics
Movie Industry Applications
Game Industry Applications
Advertising Industry Applications
Design Industry Applications
Virtual Reality Industry Application
Other less well known Applications
Slide Number 9
Slide Number 10
Slide Number 11
Slide Number 12
Slide Number 13
Slide Number 14
Converting movie to cartoon and vice versa
CG in Hong Kong
Course Aim
CILOS
Course Content
Object Representation (CILO1)
Modeling Transform (CILO2)
Viewing and Projection Transform (CILO2)
Lighting and Rasterization (CILO3)
Animation (CILO4)
Advanced Graphics Techniques (CILO5)
OpenGL Mini Project (CILO6)
Other forms of OpenGL
Relationship of this course with commercial software
Text Book and References
Assessment and Schedule
Coursework Components (50%)
Guideline for mitigation request
Mini-project progress
Grade distribution 19/20
If you have questions
Teaching Assistant
Mathematical Background
Non-standard mathematical notation used
Time
Item
Scope
Percentage
Tests
Wk 6
(24 Feb.)
Test 1
everything taught in Wk 1- 5
15%
Wk 11
(31 Mar.)
Test 2
everything taught in Wk 6 -10
15%
Assignments
Wk 13
(21 Apr.)
Mini-Project
12.5%
Other Assignments
(at least 2)
5%
Wk 8
(10 Mar.)
Mini-Project Progress
2.5%