Chapter 6.
3D Graphics (Part II)
2024-2025
COMP3329 Computer Game Design and Programming
Dr. T.W. Chim (E-mail: twchim@cs.hku.hk)
Department of Computer Science, School of Computing and Data Science,
Faculty of Engineering, The University of Hong Kong
Agenda
Basic Mathematics for 3D Graphics
Points, Vectors, Matrices, Transformations, Homogeneous
Coordinates
Euler Angles, Quaternions, Quaternion Interpolations
Model / World / View Spaces
Cameras
Lights
2
Rendering a 3D Scene
Basic steps:
1. Setting up a virtual scene
2. Positioning a virtual camera
3. Defining light sources
4. Defining the visual properties of surfaces
5. Computing the color and intensity of the light rays "shining" on a
screen pixel
3
Rendering a 3D Scene
Basic steps:
1. Setting up a virtual scene
2. Positioning a virtual camera
3. Defining light sources
4
Model Space
The points of an object in a game world is positioned
relatively to its own local coordinate system called
model space, local space or object space.
The origin of model space is either the center of an
object or at some convenient location
5
World Space
The game world has a coordinate system common
to all objects, and this is called the world space.
Each object has a position and orientation relative to
the world origin.
Apply a model-to-world transformation to transform
all points on an object to the world space.
6
Rendering a 3D Scene
Basic steps:
1. Setting up a virtual scene
2. Positioning a virtual camera
3. Defining light sources
7
Cameras
The position and orientation of a camera determines
how objects are ultimately displayed on screen.
Camera parameters:
 Position
 Up/Right/Look vectors
 orientation
 Aspect ratio
 view aspect
Projection parameters:
 Near / Far clip planes
 clipping distances of the
view volume (contains
everything to be projected
on screen)
8
Projection
Determines how a 3D scene is rendered onto the 2D
display.
Perspective projection
Objects further away
looks smaller than
objects closer to the
camera
9
Projection
Determines how a 3D scene is rendered onto the 2D
display.
Orthographic projection
Objects further away have
the same size as objects
closer to the camera
10
Projection
Perspective projection gives a sense of depth, while
orthographic projection is better if measurements or
comparisons of lengths are needed.
Perspective projection
Orthographic projection
Most 3D games use perspective transformation.
Pure 2D games can be thought of as using an orthographic
projection. Some games like Diablo use isometric projection
(orthographic projection at an angle) to convey 3D
information.
11
Rendering a 3D Scene
Basic steps:
1. Setting up a virtual scene
2. Positioning a virtual camera
3. Defining light sources
12
Lights
Real world light sources are complex, e.g., sunlight,
neon lights, car headlights, indirect light bounces off
surfaces. We use simplified light models to
approximate real world light sources
Ambient light
uniform amount of light is applied to every object in the scene
Independent of viewing angle and has no specific direction
[unity]
No light source
With ambient light only
13
Lights
Point light (omni light)
– Emits from a specific point and casts light in all direction
– Can illuminate only one side of an object
– Has attenuation, i.e., a falloff radius that determines how
much light decreases as the distance from the light
increases
[unity]
14
Lights
Spotlight
Use of spotlight:
- Lock the direction of
spotlight on a moving object
- Attach the spotlight to a
moving object such as the
player (like holding a torch)
Has its position and attenuation
Can focus the emitted light in a cone
Cone parameter: orientation (direction), angle
[unity]
15
Lights
Directional light
Without position but is emitted from a specific direction
Parallel light from infinity
Best for emulating sunlight
[unity]
16
Lights
Area light
Simulate light coming from a large surface area, e.g.,
large rectangular ceiling light boxes
Can cast soft shadow that add realism to a scene
Computationally intensive, cannot be done in real-time
Can be simulated using several point lights or spotlights.
[geekatplay.com]
[peterkutz.com]
17
Lights in Unity (Examples)
18
Lights in Unity (Examples)
Point light
Directional light
Spot light
19
Rendering a 3D Scene
Basic steps:
4. Defining the visual properties of surfaces
5. Computing the color and intensity of the light rays
"shining" on a screen pixel
20
Object Properties
Objects in a scene might be
Opaque: light cannot pass through its volume
Transparent: light passes through without scattered
Translucent: light passes through and is scattered in all
directions
opaque
transparent
translucent
21
Object Properties
Opaque objects can be rendered by considering only
their surfaces.
For transparent or translucent object, we need to model
how light is reflected, refracted, scattered, and absorbed
as it passes through the object's volume.
We usually use an alpha value to describe the opacity (or
transparency) of a surface and render a
transparent/translucent object almost the same way as
an opaque object.
Hence, games primarily concern about rendering
surfaces.
22
Surface Representations
A surface is in theory a twodimensional sheet comprising an
infinite number of points in 3D space.
Spline surfaces: defines a surface as
patches using a small number of
control polygons.
Subdivision surfaces: like spline
surfaces, a surface is represented by a
mesh of control polygons. Subdivision
rules (e.g., Catmull-Clark algorithm)
can be applied to iteratively subdivide a
polygon and thereby refining a surface.
Subdivision level can be up to pixel
resolution.
[Pixar]
23
Surface Representations
Game developers mostly modeled their surfaces
using triangle meshes, which are piecewise linear
approximation to a surface.
Two different discrete approximation of an ellipsoid
with triangle meshes.
24
Triangle Meshes
Triangles are the polygon of choice for real-time
rendering because
simplest type of polygon
a triangle is always planar
remains a triangle under most kinds of transformation
virtually all commercial graphics-acceleration hardware is
designed around triangle rasterization
25
Triangle Meshes
Coarse decimation may result in bad visual quality,
but fine decimation entails a large storage space
Use meshes at different levels of detail (LOD),
depending on the distance between object and
camera.
26
Vertex Attributes
Each vertex in a mesh is attached with some
attributes which determine the visual properties of
the surface, e.g.,
Position: defines the shape
Texture coordinates: for texture mapping
Surface normal: used for shading computation
Normal computed by
taking the average of
the normals of
incident faces
Use one of three
different normals,
depending on the
face
No normal averaging
With normal averaging
27
Rendering a 3D Scene
Basic steps:
4. Defining the visual properties of surfaces
5. Computing the color and intensity of the light rays
"shining" on a screen pixel
28
Shading
Shading specifies how the surface of a triangle is
filled in for every pixel that it occupies on screen.
To determine how a triangle should look on screen,
it needs to undergo some lighting computations (to
account for how lights and surfaces interact in a
scene).
Flat shading is to carry out light calculation once for
each triangle, and the entire triangle will be filled
with the same color.
29
[www.dma.ufg.ac.at/app/link/Grundlagen%3A3D-Grafik/module/9728]
Gouraud Shading
Lighting calculation is done once for each vertex,
which may then have different colors
The rest of the triangle is then filled by bilinearly
interpolating the colors at the 3 vertices.
Underlying geometry too
coarse leads to shading
artifacts
30
Phong Shading
Lighting calculation is carried out for every pixel
covered by a triangle.
Surface normal at a pixel is estimated using bilinear
interpolation.
Best shading but
computationally intensive
31
Lighting Models
Local illumination models account for direct lighting
in which light is emitted, bounces off a single object
in the scene, and then proceeds to the image plane
of the camera
The most common local illumination model is the
Phong reflection model, which models light
reflected from a surface as a sum of three terms:
Ambient
Diffuse
Specular
32
Phong Reflection Model
Ambient
An approximation of the overall illumination of the scene
Regions in shadow will not appear totally black
Independent of the location of lights and the camera
[Shading of a computer-generated hologram by zone plate modulation
Takayuki Kurihara and Yasuhiro Takaki]
33
Phong Reflection Model
Diffuse
Accounts for lights that is reflected uniformly in all
directions from each direct light source (directional, point,
or spotlights) affecting an object
Depends on N (surface normal) and L (vector from surface
to light); independent of view direction
Good for modeling
matt surfaces
Highest intensity when N and L coincide
34
Phong Reflection Model
Specular
Represents shiny highlights on the surface
Occurs when viewing angle is closely aligned with the
direction of the reflected light R
Good for modeling metallic surfaces
35
Phong Reflection Model
36
Global Illumination
Global illumination achieves true photorealism by
accounting for indirect lighting, where light bounces
multiple times off many surfaces before reaching
the virtual camera.
Can model a wide
range of optical
phenomena: shadow,
reflection,
transparency
37
References
Game Programming Algorithm and Techniques,
Chapters 4
Introduction to Game Development, Chapter 4.1
Game Engine Architecture, Chapters 10
Credits
Images from Wikipedia or the above references, if not
otherwise credited
38
Chapter 6.
End
2024-2025
COMP3329 Computer Game Design and Programming
Dr. T.W. Chim (E-mail: twchim@cs.hku.hk)
Department of Computer Science, School of Computing and Data Science,
Faculty of Engineering, The University of Hong Kong