VIETNAM ACADEMY OF SCIENCE AND TECHNOLOGY

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF HANOI

COMPUTER GRAPHICS
Lecture 1: Introduction to Computer Graphics

Lecturer: Dr. NGUYEN Hoang Ha

ĐO TẠO NGHIÊN ỨU SÁNG TO

Course information

• Credit: 3
• Prerequisites: C++, Linear Algebra
• Moodle page:
https://moodle.usth.edu.vn/enrol/index.php?id=488
• Materials
• Assignment submissions
• Grading
• Attendance: 10%
• Middle term test: 40%
• Final test: 50%
• Rewards (+2, +1), Penalties (-2, - 1)

2
Textbooks

• Prescribed:
• JungHyun Han. 3D Graphics for Game Programming (1st ed.).
Chapman & Hall/CRC 2011.
• Recommended:
• Hughes, J.F. and van Dam, A. and Foley, J.D. and Feiner, S.K.
Computer Graphics: Principles and Practice (3rd Edition), Addison-
Wesley, 2014, ISBN: 9780321399526.
• Donald D. Hearn and M. Pauline Baker. Computer Graphics with
OpenGL (4th Edition). 2010. Prentice Hall Professional Technical
Reference.

3
Agenda

• Computer Graphics Overview

• Graphics Pipeline & Model creation

4
Computer Graphics Overview
Reference: Computer Graphics: Principles and Practice (3rd Edition, 2014)
What is Computer Graphics?

• Process of generating images using computers

• Creation, manipulation, storage, and visualization of object
models
• Study of digital synthesis of, interaction with, and
manipulation of visual content
→ Computer graphics consists of:
• Modeling (representations)
• Rendering (display): usually “computer graphics” refers to
rendering
• Interaction (user interfaces)
• Animation (combination of 1-3)
• Others: color theory, AR/VR

6
Computer Graphics is everywhere

• GUIs on PC, smartphones, automobile dashboards…

• Games
• CAD/CAM
• Architecture
• Movie industry
• Scientific Visualization and Analysis
• Medicine and Virtual Surgery

7
 Games

• Entertainment games • Serious games

• For fun • For problem solving

• Rich experiences • Important & precise
experience

8 8
CAD/CAM

• Virtual prototypes

9
Architecture

10
Movie industry

• Computer-Generated Imagery (CGI)

11
Scientific Visualization and Analysis
ApoA1 ©University of Illinois at Urbana-Champaign, Theoretical Biophysics Group

12
Scientific Visualization and Analysis

• Data Visualization
• Scientific, Engineering,
Medical data
• Visualizing millions to
billions of data points
• See trends
• Different schemes

13
Medical images rendering

14
Medicine and Virtual Surgery

The Visible Human project

15
Why Computer Graphics is fun?

• Inter-discipline:
• Within computer science: systems, hardware, compilers,
algorithms, numerical methods, image processing, computer
vision.
• Outside computer science: math, physics, art, architecture…
• You can see the results, create your own “virtual” world

16
Course objectives

• Theory
• Understand mathematical aspects and algorithms underlying 3D
graphics systems
• Practice
• Write 3D graphics programs
→ Prepare the foundation for
• Game programming
• AR/VR, metaverse

17
What to learn?

• Graphics pipeline
• Fundamentals of CG algorithms
• Concentrate on 3D, not 2D illustration
• Basic OpenGL, Web 3D

18
What NOT to learn?

• Image processing
• Game design
• Artistic skills
• Software packages
• Photoshop
• CAD, CAM
• Maya…

19
History

Whirlwind: early graphics using

Spacewars: first computer graphics game (MIT 1961
VectorScope (1951)

20
first CAD system (IBM 1959) SketchPad: first interactive graphics (1963)
History

The term “computer graphics” was coined in 1960 by William

Fetter to describe new design methods that he was
developing at Boeing.
He created a series of widely reproduced images on a
plotter exploring cockpit design using a 3D model of a
human body

21
Rendering: 1960s (visibility)

• Roberts (1963), Appel (1967) - hidden-line algorithms

• Warnock (1969), Watkins (1970) - hidden-surface

Images from FvDFH, Pixar’s Shutterbug

22
 Rendering: 1970s (lighting)

1970s - raster graphics

• Gouraud (1971) - diffuse lighting, Phong (1974) - specular lighting
• Blinn (1974) - curved surfaces, texture
• Catmull (1974) - Z-buffer hidden-surface algorithm
First bump-mapped images (Blinn 1978)

23
Rendering (1980s, 90s: Global Illumination)

early 1980s - global illumination

• Whitted (1980) - ray tracing
• Goral, Torrance et al. (1984) radiosity
• Kajiya (1986) - the rendering equation

24
2010s: realistic images

• Thies et. 2016, Face2Face: Real-time Face Capture and

Reenactment of RGB Videos

25
Graphics pipeline & Model Creation
Reference: Chapter 1 3D graphics for Game Programming
Graphics pipeline

Modeling Animation Rendering

• Artists: in charge of modelling, off-line task of animation

• Software engineers: run-time task of animation, rendering

27
Modeling

▪ Model is referred to as a computer representation of an

object, and modeling is the process of creating the
components of the virtual environment.
▪ The most popular modeling method in games is using
polygons, and the model is called polygon meshes.

texture image

▪ creating textures to increase their realism.

28
Animation

▪ Eg: soldier model should be able to walk, run, and crawl.

▪ → specify the skeletal structure of the soldier, define how the
skeletal motion deforms the soldier's polygon mesh.
→This process is referred to as rigging.

skeleton skeleton embedded into the mesh

29
Animation (cont’)

▪ A rigged model is animated by artists

▪ 3ds Max and 3ds Maya are popularly used for modeling and off-line
animation.

30
Rendering

• Generate a sequence of images (a.k.a frame) to illustrate

the character animation
• Rendering: process of generating 3D image from 3D data

• Take into account: 3D models, texture, lighting condition,

camera pose (position, aperture, lens, iso…)

31
Rendering

▪ Unlike modeling and off-line animation conducted by artists, run-time

animation and rendering are executed by software engineers.
▪ A game program is usually built upon graphics APIs such as Direct3D
and OpenGL.
▪ Direct3D is part of Microsoft's DirectX API, and is available only for
Microsoft platforms.
▪ OpenGL (Open Graphics Library) is managed by a non-profit consortium,
the Khronos Group, and is a cross-platform standard API.
▪ Graphics APIs
▪ They provide application programmers with essential graphics functions.
Today, such functions are implemented in a processor specialized for
graphics, named GPU (Graphics Processing Unit).
▪ A graphics API can be taken as a software interface of the GPU. The API
translates the application's graphics command to instructions that can be
executed by the GPU.

32
3D model: polygon mesh

• In real-time applications such as games, the polygon mesh

representation dominates. It is not an accurate
representation but an approximate one, where the mesh
vertices are the points sampling the smooth surface.

33
Polygon Mesh (cont’)

▪ In OpenGL, the polygons should be convex and planar.

▪ Direct3D supports only triangles. Note that the simplest

polygon is a triangle, and triangles are both convex and
planar.

34 triangle mesh quad mesh

Level of detail (LOD) of Polygon Mesh

refinement

simplification
• Tradeoff between accuracy and efficiency: As the
resolution is increased, the mesh becomes closer to the
original curved surface, but the time needed for processing
the mesh is increased.

35
Polygon Mesh Creation

▪ In most cases, the polygon mesh is interactively created

using graphics packages such as 3Ds Max.

36
Polygon Mesh Creation (cont’)

37 1-37
Polygon Mesh Creation (cont’)

38 1-38
Polygon Mesh Creation (cont’)

39 1-39
Polygon Mesh: Non-indexed
Triangle List
▪ Non-indexed triangle list
▪ The vertices are enumerated in a memory space, named vertex
buffer.
▪ Three vertices are read in linear order to make up a triangle.

▪ It is inefficient because the vertex buffer contains redundant data.

40
Polygon Mesh: Indexed Triangle List

▪ Separate index buffer (indexed triangle list) is better:

▪ A vertex appears only once in the vertex buffer.
▪ Three indices per triangle are stored in the index buffer.

▪ The vertex data stored in the vertex buffer include not only positions
but also normals, texture coordinates, and many more. Therefore, the
vertex buffer storage saved by removing the duplicate data outweighs
the additional storage needed for the index buffer.

41
Surface Normal

▪ Surface normals play a key role in computer graphics.

▪ Given triangle p1, p2, p3, let v1 denote the vector connecting the first
vertex (p1) and the second (p2). Similarly, the vector connecting the first
vertex (p1) and the third (p3) is denoted by v2. Then, the triangle normal
is computed using the cross product based on the right-hand rule.

▪ When v1 and v2 are represented in (x1 y1 z1) and (x2 y2 z2), respectively,
v1×v2 is defined as (y1z2-z1y2 z1x2-x1z2 x1y2-y1x2).
▪ Every normal vector is made to be a unit vector by default.
▪ Note that p1, p2, and p3 are ordered counter-clockwise (CCW).

42
Surface Normal (cont’)

▪ Vertex normal should approximate the normal of the

smooth surface at the vertex position.

▪ A vertex normal is usually computed by averaging the

normals of all polygons sharing the vertex.

43
Surface Normal (cont’)

▪ The vector connecting the first vertex (p1) and the second (p3)
and that connecting the first vertex (p1) and the third (p2) define
the triangle normal.

▪ The normal is in the opposite direction!

▪ The normal direction depends on the vertex order, i.e., whether
p1, p2, p3 or p1, p3, p2.
▪ In computer graphics, surface normals are supposed to point out
of the polyhedron. For this, we need CCW ordering of the
vertices, i.e., p1, p2, p3, instead of p1, p3, p2.
44
Surface Normal (cont’)

• In the index buffer, the vertices are ordered CCW.

45
Coordinate System’s Handedness
and Vertex Ordering
▪ Right-hand system vs. left-hand system

▪ To make the normals point out of the object, RHS adopts

CCW ordering whereas LHS adopts CW ordering.

46
Conversion between RHS and LHS

• RHS is the default coordinate system of OpenGL, and LHS is

that of Direct3D. Porting between RHS and LHS needs to
be clearly understood.
▪ The difference constructed a barrier hard to cross over for
inexperienced programmers. However, the barrier has
crumbled away, and we can run an RHS-based application
on top of Direct3D, for example. It has been due to GPU's
programmability.

47
Conversion between RHS and LHS
(cont’)
▪ Problem: flipped image could be negated

48
Conversion between RHS and LHS
(cont’)
▪ Porting an application between RHS and LHS needs two tasks.
▪ The order of triangle vertices has to be changed: p1, p2, p3 → p1, p3, p2
▪ The z-coordinates (objects and view parameters) are negated.

49
Exercise

Consider a tetrahedron
composed of four vertices,
(0,0,0), (1,0,0), (0,1,0), (0,0,1).
• (a) tetrahedron is exported to
a right-hand system, draw the
vertex and index buffers for
its indexed triangle list.
• (b) Assuming that the
tetrahedron is exported to a
left-hand system,
do the same.

50