Computer
Graphics
Summary
Chapter 1: Introduction to Computer Graphics
Overview of Computer Graphics
Computer graphics is the field of creating, manipulating, and rendering visual content using
computers.It is widely used in movies, video games, virtual reality, and various simulations.
A Historical Perspective
One of the early breakthroughs in computer graphics was in movies.
A notable example is Terminator 2: Judgment Day (1991),
which demonstrated the potential of CGI (Computer-Generated
Imagery) in filmmaking.
Since then, the field has evolved significantly, leading to more realistic
and immersive visual effects.
Computer graphics can be divided into two main categories:
•
Computer Animation: Involves creating
sequences of moving images entirely
generated by a computer.
These can be fully animated characters,
scenes, or environments.
•
Visual Effects (VFX): Enhances live-action
footage by integrating digital elements such
as explosions, weather effects, or fictional
creatures.
Unlike animation, VFX blends computergenerated imagery with real-world footage.
This course, based on Introduction to Computer Graphics with OpenGL ES by J. Han,
explores the fundamentals of creating such graphics, with all materials available at
https://github.com/medialab-ku/openGLESbook.
Key Areas of Computer Graphics
5 Major steps in 3D computer graphics production
1. Modeling
Modeling refers to the process of creating digital representations of
objects. These objects can be anything from a simple cube to complex
characters in video games or movies.
Model: Is a digital representation of an object used in computer graphics.
It defines the shape and structure of an object without applying materials
or textures.
Mesh: Is a collection of vertices, edges, and faces that define the shape of
a 3D object. It forms the structural framework of a model.
Polygon Meshes: Is a specific type of mesh made up of polygons (typically triangles or
quadrilaterals) connected by their edges. These are the most common way to represent 3D
models in computer graphics because they are efficient for rendering and animation.
There are many Software Tools dedicated to 3D computer graphics, such as Blender, Maya,
and 3ds Max. Using them, artists perform modeling semi-manually.
The scope of modeling includes creating textures.
Textures: Textures are images applied to a model’s
surface to add details like colors, patterns, and
materials.
2. Rigging
Rigging is the process of creating a skeleton (rig) inside a 3D model. This skeleton defines how
the model moves.
Rig: A rig consists of a series of interconnected bones and joints that control the movement
of a 3D model.
Skinning: is the process of attaching the 3D mesh to the rig so that the model deforms
naturally when animated.
• Example: In a video game, a human character needs to run, jump, and perform actions.
Rigging ensures that these motions look natural.
3. Animation
Animation brings models to life by making them move over time.
Animation creates the illusion of movement by displaying a sequence of
slightly altered images.
Artists design a series of skeletal motions, which the computer
interpolates to produce smooth transitions between poses.
4. Rendering
Rendering is the process of generating an image from a 3D scene by computing how light
interacts with objects.
Rendering converts a 3D scene into a 2D image. This complex process incorporates lighting
and texturing to achieve realism—for instance, shadows are calculated based on light
sources. Realistic rendering is computationally intensive but essential for visual quality.
•
•
Lighting: A crucial component in rendering, as it determines shadows, reflections, and
highlights.
Rendering Output: The final rendered image depends on factors like material
properties, texture mapping, and the light sources in the scene.
5. Post-Processing
Post-processing involves applying additional effects to rendered images to enhance their
realism.
• Motion Blur: A visual effect that simulates how real-world cameras capture moving
objects.
• Other Enhancements: Various techniques can be used to adjust brightness, contrast,
and other visual elements.
Physics-Based Simulation
Physics-based simulations enhance realism by ensuring objects behave according to realworld physics.
Example: In a baseball game, the ball's movement follows physical principles such as gravity
and momentum.
• Mathematical Model: The principle of conservation of momentum is used to calculate
how objects move upon collision.
• Euler’s Method: A numerical technique used to compute object motion over small time
steps based on position, velocity, and acceleration.
Calculating a baseball’s trajectory after being hit involves the conservation of
momentum, expressed as:
Here, 𝒎𝟏 and 𝒎𝟐 are the masses of the bat and ball, 𝒗𝒂𝟏
and 𝒗𝒂𝟐 are their velocities before collision, and 𝒗𝒔𝟏 and 𝒗𝒔𝟐
are their velocities after collision.
In a simpler 2D simulation (e.g., a shell’s trajectory), the state is
defined by position 𝒙(𝒕) and velocity 𝒗(𝒕).
Using Euler’s method, these are updated over time steps (e.g.,
Δt=0.1 seconds):
Acceleration 𝒂(𝒕) is derived from Newton’s second law (𝒇 = 𝒎𝒂), with gravity ( 𝒈 ≈
𝟏𝟎 𝒎/𝒔𝟐 ) often being the primary force. An example calculation shows a shell’s position
and velocity evolving under gravity, producing a parabolic trajectory.
Physics-based simulation is integral to modern graphics, especially in games, and modifies
the production pipeline to include simulation alongside animation
Real-Time Graphics
The computer-generated images are called frames.
Frame: is a single moment in an animation.
Videos plays animations frame by frame
• If an animation runs at 24 FPS (frames per second), it means 24 frames will be shown
every second.
Real-time graphics refers to the process of
generating and displaying computer-generated
images, known as frames, at a speed that
appears instantaneous to the human eye. This
typically requires producing at least 30 frames
per second (fps)
Unlike traditional film visual effects (VFX), which
may take minutes, or even hours to render a
single frame to achieve photorealistic quality,
real-time graphics prioritizes speed to enable immediate interaction.
This capability is fundamental to applications such as video games, virtual reality (VR),
augmented reality (AR), and most graphical user interfaces (GUIs) found in devices like
smartphones and computers.
The distinction between real-time and non-real-time graphics lies in their purpose and
execution.
Real-Time Graphics vs. Non-Real-Time Graphics
• Real-Time Graphics: Used in video games and VR applications where frames must be
rendered quickly (30+ fps).
balances quality with performance, ensuring that frames are rendered quickly enough
to respond to user inputs or environmental changes in real time. For instance, in a video
game, a player’s actions—like moving a character—must be reflected on-screen
instantly, requiring the system to complete all rendering tasks within a fraction of a
second.
•
Non-Real-Time Graphics: Used in movies and visual effects, where rendering each
frame can take minutes or even hours to achieve higher quality. focuses on maximizing
visual fidelity without time constraints, allowing for complex calculations like detailed
lighting and reflections.
The focus of this class is mostly on real-time graphics.
Technical Requirements and Constraints of Real-Time Graphics
To achieve real-time performance, graphics systems must adhere to strict timing constraints.
For example, targeting 40 fps means each frame must be fully processed—modeled,
animated, rendered, and displayed—within 25 milliseconds (𝒔𝒊𝒏𝒄𝒆 𝟏 𝒔𝒆𝒄𝒐𝒏𝒅/𝟒𝟎 = 𝟎. 𝟎𝟐𝟓). This
tight deadline demands optimization at every stage of the graphics pipeline. Two key
components enable this efficiency:
1. Optimized Game Engines: These are software
frameworks, such as Unity or Unreal Engine, that
provide pre-built tools and libraries for animation,
rendering, and post-processing.
Game engines streamline development by handling
complex tasks—like calculating object positions or
applying textures—allowing developers to focus on
creative aspects while ensuring performance meets
real-time standards.
In this class, we study the core algorithms embedded
in game engines, not the engines themselves.
2. Hardware Support: Graphics Processing Units (GPUs) are specialized processors
designed to accelerate graphics computations. Unlike general-purpose CPUs,
GPUs excel at parallel processing, performing thousands of calculations simultaneously
to render frames quickly. Real-time graphics relies heavily on GPUs to execute tasks
like lighting and shading within the required time frame.
The interplay between software (game engines) and hardware (GPUs) is critical. For instance,
a game might use a GPU to compute shadows for dozens of objects in a scene while the
engine manages the overall sequence of frames, ensuring smooth playback.
Graphics APIs
Graphics Application Programming Interfaces (APIs) bridge the gap between software and
hardware.
APIs like OpenGL, Direct3D, and OpenGL ES (a subset of OpenGL for embedded systems, such
as mobile devices) provide standardized functions for tasks like texturing or shading. These
functions translate high-level commands from a game engine or application into low-level
instructions that a GPU can execute.
•
OpenGL & Direct3D: Widely used APIs for rendering 3D graphics.
OpenGL (Open Graphics Library) is a cross-platform API launched in 1992 by Silicon
Graphics Inc., It offers functions to define geometry, apply textures, and render
scenes, working across systems like Windows and Linux. OpenGL ES, a lightweight
subset, is optimized for devices like smartphones, balancing efficiency and
capability. This course uses OpenGL ES to study real-time graphics algorithms.
•
OpenGL ES: A subset of OpenGL optimized for mobile and embedded devices.
Integration and Significance
Think of a graphics API as a translator: an application might request “apply a brick texture to
this wall,” and the API converts this into GPU-specific commands to map the texture onto the
wall’s polygon mesh.
OpenGL ES, the focus of this course, is optimized for resource-constrained devices, making it
ideal for studying real-time graphics fundamentals. By learning its algorithms, you’ll
understand how game engines achieve efficiency and how GPUs accelerate rendering.
Applications of Real-Time Graphics
1. Games
Games use real-time graphics for seamless gameplay,
rendering frames (e.g., 40 fps in 25 ms) with engines like
Unreal Engine 5 and GPUs. Physics simulations enhance
realism, as seen in advanced demos.
2. Virtual Reality (VR)
VR creates immersive worlds via head-mounted displays,
using tracking (HMD position) and real-time rendering.
Examples include VR games and simulations like virtual
parasailing with motion simulators.
3. Augmented Reality (AR)
AR overlays digital content on reality, requiring tracking,
3D reconstruction, registration, and rendering.
Applications range from Pokémon GO to industrial tools
(e.g., HoloLens).
Chapter 2: Mathematics: Basics
Overview
This chapter introduces key mathematical concepts such as matrices, vectors, coordinate
systems, dot and cross products, lines, and interpolation, all of which are essential for 3D
graphics computations.
Matrices and Vectors
Matrices and vectors are used extensively in graphics transformations
and calculations.
•
Matrix (𝒎 × 𝒏): A rectangular array of numbers arranged in 𝒎
rows and 𝒏 columns.
Square Matrix: A matrix where 𝒎 = 𝒏.
Matrix Multiplication: If matrix 𝑨 has dimensions 𝒍 × 𝒎 and matrix 𝑩 has dimensions
𝒎 × 𝒏 , the product results in a matrix of dimension 𝒍 × 𝒏 .
For example, a 3 × 2 matrix times a 2 × 3 matrix gives a 3 × 3 matrix.
•
•
Matrix-Vector Multiplication
Vectors are lists of numbers, like(𝒙, 𝒚) for 2D or (𝒙, 𝒚, 𝒛) for 3D, written as rows or columns
Multiplying a matrix by a vector changes
the vector’s values
•
OpenGL uses column vectors and the vector-on-the-right representation for matrixvector multiplication, while Direct3D uses row vectors and the vector-on-the-left
representation.
•
Transpose of a Matrix (𝑴𝑻 ): Interchanges rows and columns.
Transposition Rule: (𝑨𝑩)𝑻 = 𝑩𝑻 𝑨𝑻 .
Identity and Inverse Matrices
•
Identity Matrix (𝑰): A square matrix where
all diagonal elements are 1, and all others are 0.
Multiplying any matrix 𝑴 by 𝑰 (Identity
Matrix) gives 𝑴.
•
•
Inverse of a Matrix (𝑨−𝟏 ): If 𝑨𝑩 = 𝑰, then 𝑩 is the inverse of 𝑨 and vice versa.
Theorem: (𝑨𝑩)−𝟏 = 𝑩−𝟏 𝑨−𝟏.
Vector Length and Normalization
•
The length of a vector 𝒗 is denoted as ‖𝒖‖.
A vector’s length is found with √𝒖𝒙 𝟐 + 𝒖𝒚 𝟐 (2D) or √𝒖𝒙 𝟐 + 𝒖𝒚 𝟐 + 𝒖𝒛 𝟐 (3D).
•
Normalization: Dividing a vector by its length 𝒖/‖𝒖‖ results in a unit vector
(length = 1), which is useful for direction calculations in graphics.
Coordinate System and Basis
A coordinate system consists of an origin and a basis.
• Origin: The fixed reference point in a coordinate system, typically represented as (0,0)
in 2D and (0,0,0) in 3D. All positions are measured relative to this point.
•
•
Basis: A set of vectors used to define a coordinate system. Every point in space is
represented as a linear combination of these basis vectors.
o
Standard Basis: The most commonly used basis in Cartesian coordinates, where
the basis vectors are aligned with the coordinate axes.
o
Non-Standard Basis: A basis where the vectors are not aligned with the
standard axes but can still represent points in space.
Orthonormal Basis: A set of basis vectors that are both perpendicular (orthogonal)
and have unit length (normalized).
o Standard Orthonormal Basis: The typical Cartesian
coordinate system where basis vectors are mutually
perpendicular and have unit length (e.g., 𝑒1 = (1,0,0) ,
𝑒2 = (0,1,0) , 𝑒3 = (0,0,1) in 3D)
Any vector, like (𝟑, 𝟓, 𝟐), can be written using these
basis vectors (e.g., 𝟑𝒆𝟏 + 𝟓𝒆𝟐 + 𝟑𝒆𝟑 ).
o
•
Non-Standard Orthonormal Basis: A rotated or transformed basis where the
vectors remain perpendicular and unit length but are not aligned with the
standard axes.
Non-Orthonormal Basis: A basis where the vectors are not perpendicular or do not
have unit length. This type of basis is used in skewed or stretched coordinate systems.
Example:
Dot Product
The dot product is a fundamental operation in vector mathematics used to determine how
much two vectors point in the same direction.
The dot product of two n-dimensional vectors 𝒂 and 𝒃 is:
𝒂 ∙ 𝒃 = 𝒂𝟏 𝒃𝟏 + 𝒂𝟐 𝒃𝟐 + ⋯ + 𝒂𝒏 𝒃𝒏
Alternatively, using an angle 𝜽 :
It allows us to compute the angle between two vectors.
𝒂 ∙ 𝒃 = ‖𝒂‖ ‖𝒃‖ 𝐜𝐨𝐬(𝜽)
Geometric Interpretation
• If 𝒂 and 𝒃 are perpendicular, then 𝒂 ∙ 𝒃 = 𝟎 .
• If 𝜽 is acute, then 𝒂 ∙ 𝒃 > 𝟎 .
• If 𝜽 is obtuse, then 𝒂 ∙ 𝒃 < 𝟎.
• If 𝜽 = 𝟎𝐨 (vectors are parallel), then 𝒂 ∙ 𝒃 is maximized.
• If 𝜽 = 𝟏𝟖𝟎𝐨 (vectors point in opposite directions), then 𝒂 ∙ 𝒃 is minimized.
Orthonormal Basis Property: In an orthonormal basis, basis vectors
satisfy:
𝟏
𝒆𝒊 ∙ 𝒆𝒋 = {
𝟎
𝒊𝒇 𝒊 = 𝒋
𝒊𝒇 𝒊 ≠ 𝒋
Cross Product
The cross product is a mathematical operation
that finds a vector perpendicular to two given
vectors in three-dimensional space.
The cross product of two 3D vectors 𝒂 =
(𝒂𝒙 , 𝒂𝒚 , 𝒂𝒛 ) and 𝒃 = (𝒃𝒙 , 𝒃𝒚 , 𝒃𝒛 ) is calculated as:
𝒂 × 𝒃 = (𝒂𝒚 𝒃𝒛 − 𝒂𝒛 𝒃𝒚 , 𝒂𝒛 𝒃𝒙 − 𝒂𝒙 𝒃𝒛 , 𝒂𝒙 𝒃𝒚 − 𝒂𝒚 𝒃𝒙 )
Also you can compute cross product of two 3D vectors using the determinant of a matrix
formed by the unit vectors 𝒊, 𝒋, 𝒌 and the components of the vectors.
Example:
𝑿𝟏 = (𝟏, −𝟑, 𝟐) and 𝑿𝟐 = (−𝟐, 𝟏, 𝟏)
Geometric Interpretation
The magnitude of 𝒂 × 𝒃 equals the area of the parallelogram spanned by 𝒂 and 𝒃 :
‖𝒂 × 𝒃 ‖ = ‖𝒂‖‖𝒃‖ 𝐬𝐢𝐧(𝜽)
Antisymmetry Property:
𝒂 × 𝒃 = −(𝒃 × 𝒂 )
If 𝒂 = 𝒃 , then 𝒂 × 𝒃 = 𝟎 (zero vector).
Line, Ray, and Line Segment
A line, ray, and line segment are different ways of representing paths in space.
Point 𝒑 : A location in space, usually represented as coordinates (𝒙, 𝒚, 𝒛) in 3D.
Parameter 𝒕 : A variable that controls movement along the path, determining different
positions on the line, ray, or segment.
•
Line: An infinite path that extends in both
directions without end. It is defined by a
parametric equation:
𝒑(𝒕) = 𝒑𝟎 + 𝒕(𝒑𝟏 − 𝒑𝟎 ),
𝒕 ∈ (−∞, ∞)
This means the line passes through the points 𝒑𝟎 and 𝒑𝟏 , and extends infinitely in both
directions.
•
Ray: A portion of a line that starts at one point
and extends infinitely in one direction. It is
defined similarly, but with 𝒕 > 𝟎 :
𝒑(𝒕) = 𝒑𝟎 + 𝒕(𝒑𝟏 − 𝒑𝟎 ),
•
𝒕 ∈ (0, ∞)
Line Segment: A finite portion of a line that
connects two points. It is defined by restricting 𝒕
between 0 and 1:
𝒑(𝒕) = 𝒑𝟎 + 𝒕(𝒑𝟏 − 𝒑𝟎 ),
𝒕 ∈ (0,1)
Linear Interpolation
Linear interpolation (LERP) is a method for finding intermediate points between two given
points along a straight line.
• Point (𝒑): A position in space that we are calculating.
• Parameter (𝒕): A value between 0 and 1 that controls the interpolation.
Formula:
𝒑(𝒕) = (𝟏 − 𝒕)𝒑₀ + 𝒕 𝒑₁,
•
𝒘𝒉𝒆𝒓𝒆 𝒕 ∈ [𝟎, 𝟏]
How it Works:
o If 𝒕 = 𝟎, then 𝒑(𝒕) = 𝒑₀, meaning we are exactly at the first point.
o If 𝒕 = 𝟏, then 𝒑(𝒕) = 𝒑₁, meaning we are exactly at the second point.
o If 𝒕 = 𝟎. 𝟓, the result is the midpoint between 𝒑₀ and 𝒑₁.
o The larger 𝒕, the closer 𝒑(𝒕) is to 𝒑₁; the smaller 𝒕, the closer it is to 𝒑₀.
The x, y and zcoordinates of 𝒑(𝒕)are defined independently by linear interpolation.
Applications
Suppose that the endpoints are associated with colors 𝒄𝟎 and 𝒄𝟏 , respectively, where 𝒄𝟎 =
(𝑹𝟎 , 𝑮𝟎 , 𝑩𝟎 ) and 𝒄𝟏 = (𝑹𝟏 , 𝑮𝟏 , 𝑩𝟏 ). Then, the color 𝒄(𝒕) is defined as follows:
Linear Interpolation
(Finding a Vector at a Point on a Line Segment)
Linear interpolation is used not only to find a position between two points but also to compute
other quantities (such as vectors) at an intermediate location.
If a point 𝒑 lies between two given points 𝒑₀ and 𝒑₁, the
interpolation factor 𝒕 is calculated as:
𝒕=
where:
𝒙 − 𝒙𝟎
𝒙𝟏 − 𝒙𝟎
•
𝒙𝟎 and 𝒙𝟏 are the x-coordinates of the given
•
points 𝒑₀ and 𝒑₁.
𝒙 is the x-coordinate of the desired point 𝒑.
Once 𝒕 is determined, we find the interpolated vector at the
given point using:
𝒗𝒑 = (𝟏 − 𝒕)𝒗₀ + 𝒕 𝒗₁,
where:
•
•
𝒗₀ and 𝒗₁ are the vectors assigned to 𝒑₀ and 𝒑₁, respectively.
𝒗𝒑 is the vector at the intermediate point.
Barycentric Coordinates
Barycentric coordinates are a coordinate system used to
express the position of a point inside a triangle relative to its
three vertices. This system is particularly useful in computer
graphics for tasks like texture mapping, shading, and point-intriangle tests.
Definition
For a given triangle with vertices 𝒑𝟏 , 𝒑𝟐 , and 𝒑𝟑 , any point 𝒑 inside the triangle can be
expressed as a weighted sum of the three vertices:
𝑷 = 𝒖𝑨 + 𝒗𝑩 + 𝒘𝑪
where 𝒖, 𝒗, 𝒘 are the barycentric
coordinates, and they satisfy:
𝒖 + 𝒗 + 𝒘 = 𝟏
•
How It Works:
o If 𝒑 is exactly at 𝒑𝟎 , then 𝒖 = 𝟏 and 𝒗 = 𝒘 = 𝟎.
o If 𝒑 is on the edge between 𝒑𝟏 and 𝒑𝟐 , then 𝒖 = 𝟎 and 𝒗 + 𝒘 = 𝟏.
o If 𝒑 is at the triangle's centroid (center), then 𝒖 = 𝒗 = 𝒘 = 𝟏/𝟑.
Exmples:
Point 𝒑 coordinates:
Applications of Barycentric Coordinates in Computer Graphics
1. Texture Mapping: Used to map textures onto 3D models smoothly by interpolating
texture coordinates.
2. Shading & Color Interpolation: Helps in smooth shading (e.g., Gouraud shading),
where vertex colors are interpolated across a triangle.
Chapter 2 Exercises
Answer:
Answer:
Chapter 3: Modeling in Computer Graphics
Introduction
Modeling in computer graphics involves creating digital representations of objects. A key
approach to modeling is using polygon meshes, which approximate smooth surfaces using a
collection of polygons, typically triangles. This chapter explores polygon meshes, their
representations, surface normals, and the process of exporting/importing 3D models.
Polygon Mesh
Mesh: Is a collection of vertices, edges, and faces that define the shape of a 3D object. It
forms the structural framework of a model.
Polygon Meshes: Is a specific type of mesh made up of polygons (typically triangles or
quadrilaterals) connected by their edges.
These are the most common way to represent 3D models in computer graphics because they
are efficient for rendering and animation.
There are two ways to represent surfaces:
• Implicit representation defines surfaces using mathematical functions (using
equations) (e.g., sphere equations).
•
Explicit representation (polygon meshes) directly defines objects using a set of
vertices and faces.
In real-time applications like games, the explicit polygon mesh is preferred because GPUs
are designed to process polygons efficiently.
However, a polygon mesh is not an accurate representation
but an approximate one, as its vertices sample points on a
smooth surface, not capturing the exact shape.
The simplest polygon is a triangle, In a typical closed mesh (one with no gaps), the number
of triangles is about twice the number of vertices. For example, a mesh with 100 vertices
has roughly 200 triangles.
While triangle meshes are widely used, quad meshes (made of four-sided polygons) are often
preferred during the modeling stage because they are easier to work with.
Triangle Mesh vs. Quad Mesh
• A triangle mesh is a collection of interconnected triangles, commonly used because
triangles are always planar and easy to process.
•
A quad mesh consists of four-sided polygons. It is often used in modeling because it
provides smoother surface deformations.
A quad mesh can be converted to a triangle mesh by splitting each quad into two
triangles.
Mesh Simplification and Refinement
The number of vertices in a mesh determines its resolution,
it’s described as level of detail (LOD).
Higher resolution means more vertices, making the mesh closer to the original smooth
surface but requiring more processing time.
This creates a tradeoff between accuracy and efficiency.
•
Simplification reduces the number of polygons while maintaining shape, improving
performance.
•
Refinement increases polygon count for greater detail, making the model appear
smoother.
Polygon Mesh Storage: Non-Indexed and Indexed Representation
Polygon meshes are stored in memory for processing and It can be stored in two main ways:
Non-Indexed Representation
•
Stores every vertex separately in vertex array, listing all vertices for each polygon,
and three vertices are read in order to form a triangle.
•
This method is Inefficient because many vertices are repeated, leading to
unnecessary memory usage.
Note: Vertices in a triangle follow a counterclockwise (CCW) order to ensure correct
rendering and back-face culling. The starting vertex is chosen to maintain consistency across
all triangles but does not affect the shape.
Indexed Representation
•
•
•
Uses a vertex array to store unique vertices.
Uses an index array to reference vertices and define polygons.
More efficient since each vertex is stored only once, reducing redundancy.
The vertex array can also store additional data like normals or colors, not just positions.
The space saved by removing duplicates in the vertex array outweighs the extra space
needed for the index array, making this method more efficient.
Surface Normals
Surface normals are vectors perpendicular to a polygonal
surface. They are used for lighting calculations and shading in
rendering.
Triangle Normal Calculation
Given a triangle with vertices 𝒑𝟏 , 𝒑𝟐 , 𝒑𝟑 :
Ordered counter-clockwise (CCW), define two vectors:
(from 𝒑𝟏 to 𝒑𝟐 ): 𝒗𝟏 = 𝒑𝟐 − 𝒑𝟏
(from 𝒑𝟏 to 𝒑𝟑 ): 𝒗𝟐 = 𝒑𝟑 − 𝒑𝟏
The triangle’s normal is computed using the cross
product:
𝑵=
𝒗𝟏 × 𝒗𝟐
‖𝒗𝟏 × 𝒗𝟐 ‖
This normal is a unit vector (length 1) and points outward if the vertices are ordered CCW,
following the right-hand rule.
Importance of Vertex Order in Normals
• Counterclockwise (CCW) Order: If the vertices of a triangle are arranged in
counterclockwise order when viewed from the front, the computed normal will point
outward, away from the surface. This is the correct orientation for rendering in most
graphics applications.
•
Clockwise (CW) Order:
If the vertices are arranged in clockwise
order, the computed normal will point
inward, into the surface. This can cause
rendering errors, as lighting calculations
and visibility checks will be incorrect.
The triangle’s normal will computed by:
𝑵=
•
𝒗𝟐 × 𝒗𝟏
‖𝒗𝟐 × 𝒗𝟏 ‖
Why It Matters: Many graphics engines use the direction of the normal to determine
which side of the surface is visible (backface culling). Incorrectly oriented normals can
result in missing or incorrectly shaded surfaces.
Vertex Normals
Vertex normals are also important, as they approximate the normal of the smooth surface at
each vertex.
A vertex normal is calculated by averaging the normals of all triangles sharing that vertex.
•
Each vertex normal is computed by
averaging the normals of all triangles sharing
that vertex.
•
Vertex normals help achieve smooth
shading effects.
Modeling tools like 3ds Max compute these vertex normals, which are stored in the vertex
array for use in rendering.
Exporting and Importing 3D Models
3D models are often created in offline modeling software (e.g., Blender, 3ds Max) and then
imported into applications (e.g., game engines).
Exporting
• Exporting is the process of saving the mesh data (3D models) in a format that other
programs can read.
• Common export formats: .obj.
• Some applications provide scripting tools (e.g., MAXScript in 3ds Max) for exporting.
Importing
• The process of loading an exported model into a different application.
• Parsing the exported file allows reconstructing the vertex and index arrays.
Example: Importing an .OBJ File
• Vertex data: Specifies positions of the vertices.
• Face data: Defines how vertices are connected to form polygons.
• Normals and textures: Additional attributes stored for rendering.
Chapter 3 Exercises
Answer:
Vertex
Array
p
q
r
s
0
1
2
3
Index
Array
0
1
2
3
4
5
0
1
2
3
1
0
𝒕𝟏
𝒕𝟐
Answer:
Vertex
Array
0
1
2
3
(0, 0, 0)
(1, 0, 0)
(0, 1, 0)
(0, 0, 1)
Index
Array
0
2
1
0
1
3
0
3
2
1
2
3
𝒕𝟏
𝒕𝟐
𝒕𝟑
𝒕𝟒
Answer:
The triangular mesh has 8 triangles
Non-Indexed Representation
Each triangle lists 3 vertices in the vertex array, even if shared.
For 8 triangles: 𝟖 × 𝟑 = 𝟐𝟒 elements in vertex array
Indexed Representation
The triangular mesh has 8 triangles made of 6 unique
vertices,
so the vertex array has 6 elements.
4
5
3
The index array defines each triangle with 3 indices. For 8
triangles: 𝟖 × 𝟑 = 𝟐𝟒 elements in index array.
1
6
2
Answer:
• Latitude lines run parallel to the equator, dividing the sphere into
horizontal slices. They range from -90° (South Pole) to 90°
(North Pole).
•
Longitude lines run from the North Pole to the South Pole,
dividing the sphere vertically. They range from -180° to 180°.
Calculating the Number of Vertices
• Latitude Steps: From -90° to 90° in 10° steps gives:
𝟏𝟖𝟎
= 𝟏𝟖
𝟏𝟎
However, this only counts the divisions between the latitudes, one pole was
already included in the count and one is not.
Since we include both poles (-90° and 90° as extra points), we add 1:
𝟏𝟖 + 𝟏 = 𝟏𝟗 latitude layers (including poles)
Longitude Steps: From -180° to 180° in 10° steps gives:
𝟑𝟔𝟎
= 𝟑𝟔
𝟏𝟎
Calculating the Total Vertices
• The poles (North and South) are single points, not circles.
•
The middle latitudes (excluding poles) each have 36 longitude divisions.
•
Since there are 19 total latitude layers, and the poles are single points, the
number of circles between them is: 𝟏𝟗 − 𝟐 = 𝟏𝟕
So, the total number of vertices is:
(𝟏𝟕 × 𝟑𝟔) + 𝟐 = 𝟔𝟏𝟒 Vertices
Answer:
Vertex
Array
0
1
2
3
(0, 0, 0)
(1, 0, 0)
(0, 1, 0)
(0, 0, 1)
Index
Array
0
2
1
0
1
3
3
2
0
1
2
3
𝒕𝟏
𝒕𝟐
𝒕𝟑
𝒕𝟒
Answer:
We need to derive the relationship between the number of vertices (𝒗) and edges (𝒆) in
a closed triangle mesh, given 𝒇 = 𝟐𝒗 − 𝟒, where 𝒇 is the number of faces.
Use Euler’s Formula for a Closed Mesh
For a closed polyhedron (like a triangle mesh), Euler’s formula states:
𝒗−𝒆+𝒇=𝟐
Substitute the given 𝒇 = 𝟐𝒗 − 𝟒:
𝒗 − 𝒆 + (𝟐𝒗 − 𝟒) = 𝟐
Simplify the Equation
Combine terms:
𝒗 + 𝟐𝒗 − 𝟒 − 𝒆 = 𝟐 ⟹ 𝟑𝒗 − 𝒆 = 𝟔
The relationship between 𝒗 and 𝒆 is:
𝒆 = 𝟑𝒗 − 𝟔
Chapter 4: Spaces & Transformations
Introduction
In computer graphics, transformations are essential for manipulating objects within a scene.
They help position, rotate, and scale objects efficiently.
Transformations
Transformations such as rotation, scaling, and translation are represented as matrix
operations, enabling efficient computation in graphics pipelines like OpenGL ES.
1. Translation
Translation moves a point (𝒙, 𝒚) by a displacement (𝒅𝒙 , 𝒅𝒚 ):
Translation is an addition, not a linear transformation, so it cannot be directly represented as a
𝟐𝒙𝟐 matrix multiplication.
Homogeneous Coordinates:
A technique for representing translations, rotations, and scaling using
matrix operations.
Introduces an extra coordinate 𝒘, transforming a 2D point (𝒙, 𝒚) is
represented as (𝒙, 𝒚, 𝟏). Translation is then expressed as a 𝟑𝒙𝟑 matrix:
Enables uniform transformation calculations through matrix multiplication
Translation matrix multiplication
The Cartesian coordinates point can be converted into multiple homogeneous coordinates
For example (𝟐, 𝟑) → (𝟐, 𝟑, 𝟏), (𝟒, 𝟔, 𝟐), (𝟔, 𝟗, 𝟑)
General Form of Homogeneous Coordinates:
A point (𝒙, 𝒚) can be represented as (𝒘𝒙, 𝒘𝒚, 𝒘) for any
non-zero 𝒘.
To convert back to Cartesian coordinates, divide by 𝒘:
𝒘𝒙 𝒘𝒚 𝒘
,
, ) = (𝒙, 𝒚, 𝟏)
𝒘 𝒘 𝒘
then take the first two components (𝒙, 𝒚). For example,
(𝒘𝒙, 𝒘𝒚, 𝒘) → (
𝟒 𝟔
(𝟒, 𝟔, 𝟐) → ( , , 𝟏) = (𝟐, 𝟑, 𝟏) → (𝟐, 𝟑).
𝟐 𝟐
In 3D, translation uses 4x4 matrices in homogeneous coordinates (𝒙, 𝒚, 𝒛, 𝟏):
3D Translation matrix multiplication
2. Scaling
Scaling transforms a 2D vector (𝒙, 𝒚)
to(𝒙′ , 𝒚′ ) = (𝒔𝒙 𝒙, 𝒔𝒚 𝒚),where 𝒔𝒙 and
𝒔𝒚 are scaling factors along the 𝒙- and
𝒚-axes, respectively.
This is represented as matrix
multiplication:
To work with homogeneous coordinates, 2D transformation matrices are extended to 𝟑𝒙𝟑:
Scaling in 3D extends the 2D concept with factors 𝒔𝒙 , 𝒔𝒚 , 𝒔𝒛 :
Example in 3D:
Scaling Types:
•
Uniform Scaling: If 𝒔𝒙 = 𝒔𝒚 , the scaling is uniform, preserving the shape’s proportions
(e.g., (𝒔𝒙 , 𝒔𝒚 ) = (𝟐, 𝟐)).
•
Non-Uniform Scaling: If 𝒔𝒙 ≠ 𝒔𝒚 , the scaling distorts the shape (e.g., (𝒔𝒙 , 𝒔𝒚 ) = (𝟐, 𝟐)).
•
Application to Polygons: All vertices of a polygon are scaled using the same matrix to
maintain the shape’s structure.
𝟏
3. Rotation
Rotation in 2D involves rotating a vector (𝒙, 𝒚) by an
angle 𝜽 around the origin. This can be expressed using
trigonometry and matrix multiplication.
This can be written as a matrix operation:
The matrix 𝑹(𝜽) is the 2D rotation matrix
By default, the rotation is counter-clockwise.
Example: Rotate the point (𝟐, 𝟎) a 𝟗𝟎∘ degrees counter-clockwise (CCW)
Clockwise Rotation:
To rotate clockwise by 𝜽, use −𝜽 in the matrix: 𝑹(−𝜽)
Example:
Rotation by −𝜽 is equivalent to rotation by 𝟐𝝅 − 𝜽
To work with homogeneous coordinates, 2D transformation matrices are extended to 𝟑𝒙𝟑:
Rotation in 2D
In 2D, rotation always happens around the origin (𝟎, 𝟎) unless specified otherwise.
Rotation About a Specific Point in 2D
• If we want to rotate an object around an arbitrary (specific) point (𝒂, 𝒃) instead of
the origin, we follow three steps:
1. Translate the object so the rotation point becomes the origin by subtracting
its coordinates::
𝑻(−𝒂, − 𝒃)
2. Rotate using the standard 2D rotation matrix.
3. Translate back to the original position:
𝑻(𝒂, 𝒃)
The final transformation matrix is: 𝑻(−𝒂, − 𝒃) × 𝑹(𝜽) × 𝑻(𝒂, 𝒃)
Example: Rotating a Point Around a Specific Point in 2D
Steps:
Final result:
3D Rotation
In 3D, rotation happens around an axis rather than a fixed point. unlike 2D rotatio
Rotation about the 𝒛-axis (𝑹𝒛 ): Rotates in the 𝒙𝒚plane, leaving 𝒛 unchanged:
Rotation about the 𝒙-axis (𝑹𝒙 ):
Using the right-hand rule (Rotates in the 𝒚𝒛-plane,
leaving 𝒙 unchanged:):
Rotation about the 𝒚-axis (𝑹𝒚 ):
Using the right-hand rule (Rotates in the 𝒙𝒛-plane,
leaving 𝒚 unchanged:):
Direction of Rotation: A positive angle 𝜽 indicates CCW rotation when the axis points toward
the viewer, following the right-hand rule. A clockwise rotation uses −𝜽.
Summary of Transformation Matrices
Transformation
2D Matrix
3D Matrix
Translation
Scaling
Rotation
(origin (𝟎, 𝟎))
N/A
Rotation (X-axis)
N/A
Rotation (Y-axis)
N/A
Rotation (Z-axis)
N/A
Transform Composition
Combining Transformations: Multiple transformations can be applied sequentially to an
object. Using homogeneous coordinates, these transformations are represented as 3x3
matrices and can be combined into a single matrix through multiplication.
Example: Rotate a point (𝟎, 𝟒) by 𝟗𝟎∘ CCW, then translate by (𝟕, 𝟎):
First, rotate:
Then, translate:
As all transforms are represented in 33 matrices, they can be concatenated into a single
matrix.
Applying the combined matrix:𝑻𝑹 matching the sequential application.
Order matters:
Matrix multiplication is not commutative, meaning the order of transformations matters:
Scaling before translating produces different results than translating before scaling.
𝑻𝑹 vs. 𝑻𝑹𝑻: For a rotation 𝑹(𝜽) followed by translation 𝑻(𝒅𝒙 , 𝒅𝒚 )
Affine Transformations
An affine transformation in 2D combines linear transformations (e.g., scaling, rotation,
reflection, shearing) with translation.
It is represented as a 𝟑𝒙𝟑 matrix in homogeneous coordinates:
General Form:
, where 𝑳 is a 𝟐𝒙𝟐 linear transformation matrix,
and 𝒕 is a 2D translation vector.
Property: The third row of an affine matrix is always (𝟎, 𝟎, 𝟏), allowing multiple affine
transformations to be combined into a single matrix.
Example (Rotation, Translation):
Example (Scaling, Rotation, Translation):
An affine matrix applies the linear transformation 𝑳 first, followed by translation by 𝒕.
∘
For example, in 𝑹(𝟗𝟎∘ ) 𝑻(𝟕, 𝟎), 𝑳 is the 𝟐𝒙𝟐 submatrix of 𝑹(𝟗𝟎 ), but 𝒕 is modified due to the
composition.
3D Affine Transformations
3D affine transformations mirror 2D concepts, using 4x4 matrices:
General Form:
, where 𝑳 is a 𝟑𝒙𝟑 linear transformation matrix,
and 𝒕 is a 2D translation vector.
Fourth Row: The fourth row of a 3D affine matrix is always (𝟎, 𝟎, 𝟎, 𝟏).
Example:
Inverse of Transformation
The inverse of a transformation is a matrix that, when applied, reverses the effect of the
original transformation (undo), bringing the object back to its starting position or state.
1. Inverse of Translation
Translation moves a point by a displacement vector. In 2D, a translation by (𝒅𝒙 , 𝒅𝒚 ) is
represented in homogeneous coordinates as a 𝟑𝒙𝟑 matrix 𝑻(𝒅𝒙 , 𝒅𝒚 )
The inverse of this translation, denoted 𝑻−𝟏 (𝒅𝒙 , 𝒅𝒚 ), must move the point back to (𝒙, 𝒚, 𝟏). To
reverse a translation by (𝒅𝒙 , 𝒅𝒚 ), we need to translate by the opposite displacement
(−𝒅𝒙 , −𝒅𝒚 ),:
In 3D, translation by (𝒅𝒙 , 𝒅𝒚 , 𝒅𝒛 ) uses a 4x4 matrix and the inverse of this translation
𝑻−𝟏 (𝒅𝒙 , 𝒅𝒚 , 𝒅𝒛 )
2. Inverse of Scaling
Scaling transforms a point by stretching or shrinking it along each axis. In 2D, a scaling by
factors (𝒔𝒙 , 𝒔𝒚 ) is represented as 𝑺(𝒔𝒙 , 𝒔𝒚 )
The inverse of scaling, 𝑺−𝟏 (𝒔𝒙 , 𝒔𝒚 ), must return the point to (𝒙, 𝒚, 𝟏). To reverse a scaling by
𝟏
𝟏
(𝒔𝒙 , 𝒔𝒚 ), we scale by the reciprocal factors ( , ), assuming 𝒔𝒙 ≠ 𝟎 and 𝒔𝒚 ≠ 𝟎:
𝒔𝒙 𝒔 𝒚
In 3D, scaling by (𝒔𝒙 , 𝒔𝒚 , 𝒔𝒛 ) uses a 𝟒𝒙𝟒 matrix and the inverse of scaling 𝑺−𝟏 (𝒔𝒙 , 𝒔𝒚 , 𝒔𝒛 ),
3. Inverse of Rotation
In 2D, a rotation by angle 𝜽 counterclockwise (CCW) about the origin
The inverse of this rotation, 𝑹−𝟏 (𝜽), must rotate the point back to its original position.
Since rotation matrices are orthogonal (i.e., 𝑹−𝟏 𝑹 = 𝑰), the inverse of a rotation matrix is its
transpose. For 𝑹(𝜽), the inverse is:
𝑹−𝟏 (𝜽) = 𝑹𝑻 (𝜽)
Compute the transpose:
Notice that this matrix is equivalent to a rotation by −𝜽:
This means that to undo a CCW rotation by 𝜽, we perform a clockwise (CW) rotation by the
same angle, or equivalently, a CCW rotation by −𝜽.
Inverse of Rotation in 3D
In 3D, rotations are defined about a specific axis (𝒙, 𝒚, 𝒛)
to undo a counterclockwise (CCW) rotation by an angle 𝜽, we perform a clockwise (CW)
rotation by the same angle, which is equivalent to a CCW rotation by −𝜽. This applies to
rotations in both 2D and 3D spaces
Spaces
A coordinate space provides a reference for defining object positions. Multiple coordinate
spaces exist in computer graphics, each serving a specific role in rendering objects.
a. Object Space (OS) (Local Space)
•
•
•
This is the local coordinate system of an individual object. Each object has its own OS.
The origin is usually at the object's center.
Used for defining the shape and structure of an object before placing it in the scene.
b. World Space (WS)
•
•
This is the global coordinate system of the entire scene.
Objects are positioned relative to the world origin.
•
The WS serves as a common reference frame, allowing multiple objects to interact and
be rendered together. A point’s coordinates in WS are determined by applying the
object’s transformation (position and orientation) to its OS coordinates.
For instance, the point (𝟎, 𝟐, 𝟑) in the teapot’s OS might transform to (𝟏𝟎, 𝟐, 𝟎) in WS
after applying the teapot’s pose.
c. View Space (Camera Space)
•
•
The space relative to the camera.
Objects are transformed into this space before projection.
In computer graphics, we need to place 3D objects, such as a teapot, in a virtual scene so
they can be rendered on the screen.
Each object has its own local coordinate system, Object Space (OS), where its shape is
defined.
However, the scene has a global coordinate system World Space (WS), where all objects are
placed together.
Initially, an object’s OS is identical to WS. To place the object in the scene, we apply a world
transform (a combination of rotations, translations, etc.) to move it from OS to WS.
Key Idea: The world transform changes the object’s position and orientation in WS, but its
coordinates in OS remain unchanged.
Rotation and Object-space Basis
Objects and Their Fixed Spaces
Once an object (e.g., a teapot) is modeled, it remains fixed within its object space. Think of the
object as "stuck" to its own coordinate system.
Any changes to its orientation or position are handled by transforming its object space
relative to world space.
Basis Vectors and Rotation
Both world space and object space use a set of three basis vectors to define directions:
•
World Space Basis: {𝒆𝟏 , 𝒆𝟐 , 𝒆𝟑 }, the standard basis where 𝒆𝟏 = (𝟏, 𝟎, 𝟎), 𝒆𝟐 = (𝟎, 𝟏, 𝟎),
and 𝒆𝟑 = (𝟎, 𝟎, 𝟏), representing the 𝒙, 𝒚, and 𝒛 axes.
•
Object Space Basis: {𝒖, 𝒗, 𝒏}, which initially matches the world space basis but
changes when the object is rotated.
These bases are orthonormal, meaning each vector is unit length (magnitude 1) and
perpendicular to the others.
When a rotation 𝑹 (e.g., about the 𝒚 -axis) is applied, the object space basis {𝒖, 𝒗, 𝒏}, rotates
with the object. For example:
• If 𝒖 starts as = (𝟏, 𝟎, 𝟎), after a rotation 𝑹, it becomes (𝒖𝒙 , 𝒖𝒚 , 𝒖𝒛 ),.
•
Similarly, 𝒗 (initially (𝟎, 𝟏, 𝟎)) becomes (𝒗𝒙 , 𝒗𝒚 , 𝒗𝒛 ), and 𝒏 (initially (𝟎, 𝟎, 𝟏)) becomes
(𝒏𝒙 , 𝒏𝒚 , 𝒏𝒛 ).
These new vectors define the teapot’s orientation in world space after the rotation.
Chapter 4 Exercises