3D Graphics

Outline

3D GRAPHICS PIPELINE 3D MATH COORDINATES AND QUATERNION TRANSFORMATIONS &

COORDINATE SYSTEMS MATHEMATICS GEOMETRY-

RENDERING PIPELINE
 3D Graphics
• 3D graphics are at the front of game development in modern times.
• 3D games can be found everywhere from PCs, home consoles,
handheld consoles, and even mobile devices, such as cell phones.
• One of the main focuses of 3D game development is computer
graphics.
• Often, the goal is to achieve realistic real-time graphics in games, as
is Alan Wake , but graphics can also be nonrealistic, as in Nintendo’s
The Legend of Zelda: The Wind Waker.
 3D Graphics-Z buffer
• The Z Buffer
• In modern 3D games, one of the important pieces of information used
during the rendering process is depth information.
• Depth information, which is stored in the Z buffer, is a value that
informs the rendering API about the calculated depth of each pixel of
the screen.
• This information is used mainly to determine what objects are in front
of others.
 3D Graphics-Z buffer
• In 2D games, the sprites are simple enough that they can be given a
draw order, and the objects are drawn in the order specified. Since the
objects are flat, one value can be used for each sprite.
• In 3D games this is not as simple, as surfaces are not 2D and can have
varying positions and orientations. Neighboring pixels can have
different depths across even a single surface. When it comes to lighting
and other common rendering techniques that are done in 3D, it is not
possible to use one value for an entire surface as you can with 2D. This
assumes that the surface isn’t perfectly flat and facing the camera.
• Although the Z buffer can do a good job ensuring that objects are drawn
correctly, other algorithms and techniques can be used to speed up the
process of avoiding calculations on information that is not visible.
 3D Graphics-Shading Surfaces
• One of the main advantages 3D games have over 2D games is the ability
to dynamically calculate surface information in the scene. By being able
to shade the surfaces that compose the scene of a video game, developers
are able to perform many calculations that can affect the final result
dynamically.
• One of the best examples of this is real-time lighting. By using the
information in the scene, we are able to take a surface in 3D and shade
each point that makes up the geometry, or even each fragment that
makes up the surface, and give it a realistic appearance and interactions.
• The shading of surfaces is the entire point of 3D computer graphics.
 3D Graphics Pipeline
The 3D graphics pipeline is a conceptual model that describes the steps involved in
rendering a 3D scene onto a 2D screen.
This pipeline is used in graphics APIs like Direct3D and OpenGL, and game engines like
Unity and Unreal Engine.
3D Graphics Pipeline stages
 3D Graphics Pipeline
1. Application Stage

• This stage involves high-level operations that define what needs to be rendered.
• Changes are made to the scene as required
• The new scene with all its primitives - mostly triangles, lines and points - is then
forwarded to the next step of the pipeline
• Scene Management: Organizing objects, lights, cameras, and other scene
elements.
• Animation: Calculating the positions and orientations of objects based on
animations or physics.
• Culling: Determining which objects are visible to the camera and should be
rendered.
 3D Graphics Pipeline
2. Geometry Stage
This stage processes the vertices and transforms
the 3D objects into a format suitable for
rasterization.
 3D Graphics Pipeline
2. Geometry Stage
• Model Transformation: Transforms object coordinates to world coordinates
using the model matrix.
• View Transformation: Converts world coordinates to camera (view)
coordinates using the view matrix.
• the scene is transformed so that the camera is at its origin, facing along the Z axis
• Projection Transformation: Converts camera coordinates to normalized
device coordinates (NDC) using the projection matrix.
• Clipping: Removes parts of objects that are outside the view.
• Viewport Transformation: Maps NDC coordinates to screen coordinates,
determining where on the screen the final image will be displayed.
• Lighting Calculation: Computes the color and brightness of vertices based on
lighting models.
 3D Graphics Pipeline
[Link] Stage
Converts the processed vertices into pixels or
fragments.
Converts 3D vector shapes(made of
mathematical coordinates) in our
camera’s view into 2D raster image(made
of pixels)
 3D Graphics Pipeline
[Link] Stage
Triangle Setup: Breaks down the transformed vertices into
triangles.
• Scan Conversion: Determines which pixels (fragments) are
covered by each triangle.
• Fragment Shader:
• Computes the color, texture, and lighting of each
fragment.
• Involve complex operations like texturing, bump
mapping, and shadow calculations.
• Depth Testing: Compares the depth of each fragment with
the depth buffer to determine visibility.
• Blending: Combines the fragment’s color with the existing
color in the framebuffer based on blending modes (e.g.,
transparency).
 3D Graphics Pipeline
4. Output Merging Stage
Finalizes the rendered image and prepares it for display.
• Framebuffer Operations: Performs operations like antialiasing,
stenciling, and final color blending.
• Display: Transfers the completed image from the framebuffer to the
screen.
 3D Graphics Pipeline-Unity

• Application Stage in Unity

• Unity manages scenes through the Scene view.
• Animation and physics calculations are handled by Unity’s
Animator and Rigidbody components.
• Culling is performed automatically by Unity’s camera system
and occlusion culling settings.
 3D Graphics Pipeline-Unity
• Geometry Stage in Unity
• Model Transformation: Defined by the Transform component
(position, rotation, scale).
• View Transformation: Managed by the Camera component, which
provides the view matrix.
• Projection Transformation: Also managed by the Camera
component, which provides the projection matrix.
• Clipping: Handled by Unity’s camera settings (near and far clip planes).
• Viewport Transformation: Unity maps the 3D scene to the 2D screen
based on the camera’s viewport settings.
• Lighting Calculation: Unity uses a variety of lighting models (e.g.,
Standard Shader) and handles lighting calculations based on scene lights.
 3D Graphics Pipeline- Unity
• Rasterization Stage in Unity
• Triangle Setup and Scan Conversion: Handled by Unity’s graphics
engine, which converts 3D models into triangles and determines pixel
coverage.
• Fragment Shader: Unity’s shaders, written in HLSL, define the
appearance of fragments (colors, textures, lighting).
• Depth Testing and Blending: Managed by Unity’s render pipeline,
which handles depth testing and blending based on material settings and
camera properties.
• Output Merging Stage in Unity
• Framebuffer Operations: Unity’s post-processing stack handles
operations like antialiasing and HDR.
• Display: Unity renders the final image to the screen.
 Coordinate Systems
Coordinates in 3D Space
In three-dimensional (3D) space, a point is represented by three coordinates (x,
y, z). These coordinates define the position of the point relative to an origin,
typically denoted as (0, 0, 0).
x-coordinate: The position along the horizontal axis.
y-coordinate: The position along the vertical axis.
z-coordinate: The position along the depth (length) axis.

Locating Objects in a Room: Steps to understand and perform calculations

related to these positions:
1. Define the coordinates of the objects.
2. Calculate distances between objects.
 Coordinate Systems
Coordinates in 3D Space
1. Define the Coordinates
Object A: (2,3,5)(2, 3, 5)(2,3,5)
Object B: (7,1,9)(7, 1, 9)(7,1,9)
Object C: (4,6,3)(4, 6, 3)(4,6,3)
2. Calculate Distances Between Objects: To calculate the distance between two points, use the Euclidean
distance formula:

Distance Between Object A and Object B

≈6.7
Distance Between Object B and Object C
≈8.4
Distance Between Object A and Object C
≈4.1
 Coordinate Systems

Coordinate systems can be used to represent 3D space. The

most common are:
1. Cartesian Coordinate System: The position of a point is
given by three coordinates (x, y, z). The axes are perpendicular
to each other and intersect at the origin.
 Coordinate Systems
2. Spherical Coordinate System: A point is represented by three
coordinates (r, θ, φ):
r: The radial distance from the origin to the point.
θ (theta): The azimuthal angle in the xy-plane from the x-axis.
φ (phi): The polar angle from the z-axis.

Ex:
Consider a lighthouse on the coast, with a ship at sea. The lighthouse
is the origin of our coordinate system.
• The radial distance r is the distance from the lighthouse to the
ship.
• The polar angle θ is the angle between the line from the
lighthouse to the ship and the vertical line (up from the
lighthouse).
• The azimuthal angle ϕ is the compass direction from the
lighthouse to the ship, measured from due north (positive x-axis).
 Coordinate Systems
Spherical Coordinate System
 Coordinate Systems
3. Cylindrical Coordinate System: A point is represented by three coordinates (ρ, φ,
z):
ρ (rho): The radial distance from the z-axis.
φ (phi): The azimuthal angle in the xy-plane from the x-axis.
z: The height along the z-axis.
Coordinate Systems
Coordinate Systems
 Coordinate Systems
Conversion Between Coordinate Systems
•
 3D Math
• A game is a mathematical model of a virtual world simulated in real-
time on a computer of some kind.
• Game programmers make use of virtually all branches of
mathematics, from trigonometry to algebra to statistics to calculus.
• Whenever you move a character on a screen, Linear
Algebra concepts are at play.
• Vectors are constantly being manipulated by Matrices;
essentially Transforming, the coordinate system of the vector.
• Vector(entity that has magnitude but also contains information about
its direction)
• Matrix (entity that contains within itself the information required to
transform one coordinate system to another)
 3D Math- Vectors
A vector is a quantity that has both a magnitude and a direction in n-dimensional
space.
Properties:
• Vectors can be added and subtracted among themselves.
• Vectors can be multiplied, but unlike scalars there are several different kinds of
vector multiplication.
In game programming, we most often work with the following two kinds of
multiplication
• Dot Product(a.k.a. scalar product or inner product)
• Cross Product(a.k.a. vector product or outer product)
The Dot Product produces a scalar and is mainly used to determine the angle between
vectors.
The Cross Product produces a vector perpendicular to the multiplicand and multiplier
vectors.
 3D Math- Vectors
Addition of two vectors a and b is defined as the vector whose components are the
sums of the components of a and b

A magnitude of a vector is a scalar representing the length of the vector

A unit vector is a vector with a magnitude (length) of one.

A vector is said to be normal to a surface if it is perpendicular to that surface.

 3D Math- Vectors
Dot Product
• The dot product of two vectors yields a scalar
• It is defined by adding the products of the individual components of the two
vectors

The dot product can also be written as the product of the magnitudes of the two vectors
and the cosine of the angle between them:
 3D Math- Vectors
Dot Product Tests
Dot products are great for testing if two vectors are collinear or perpendicular, or whether they point in
roughly the same or roughly opposite directions.
For any two arbitrary vectors a and b, game programmers often use the following tests, as shown in
Figure

Collinear. (a ⋅ b) = |a||b|= ab (i.e., the angle between them is

exactly 0 degrees—this dot product equals +1 when a and b are
unit vectors).
Collinear but opposite. (a ⋅ b) = –ab (i.e., the angle between
them is 180 degrees—this dot product equals –1 when a and b
are unit vectors).
Perpendicular. (a ⋅ b) = 0 (i.e., the angle between them is 90
degrees).
Same direction. (a ⋅ b) > 0 (i.e., the angle between them is
less than 90 degrees).
Opposite directions. (a ⋅ b) < 0 (i.e., the angle between them
is greater than 90 degrees).
 3D Math- Vectors
Cross Product
The cross product (also known as the outer product or vector product) of two vectors
yields another vector that is perpendicular to the two vectors being multiplied

The magnitude of the cross-product vector is the product of the magnitudes of the
two vectors and the sine of the angle between them.
3D Math- Vectors
 3D Math- Vectors in unity
Understanding of the object positioning in 3D world and usage of Dot function(detects if other transform is behind
this object)
 Quaternion
• Quaternions are a number system that extends complex numbers to higher
dimensions
• Quaternions are used to represent rotations
• A quaternion is a four-tuple of real numbers {x,y,z,w}
• A quaternion is a four-dimensional vector and can be written in the form:
q=w+xi+yj+zk
where w,x,y and z are real numbers
i,j and k are the fundamental quaternion units.
 Quaternion

[Link]
Quaternion
Quaternion
 Quaternion
• The fundamental units i,j and k satisfy the following multiplication
rules
 Quaternion
• Quaternion Operations

• Addition

• Multiplication

• Conjugate

• Norm
 Quaternion

Quaternions are useful for representing rotations in 3D space.

A unit quaternion can represent a rotation.
A rotation quaternion can be expressed as:
𝑞=cos(𝜃/2)+sin(𝜃/2)(𝑥𝑖+𝑦𝑗+𝑧𝑘)
where 𝜃 is the rotation angle and (𝑥,𝑦,𝑧) is the unit vector representing
the axis of rotation.

• scalar part w is represented by cos(θ/2)

• vector part xi+yj+zk is represented by
sin(𝜃/2)(𝑥𝑖+𝑦𝑗+𝑧𝑘)
 Quaternion

• To rotate a vector v using a quaternion q, follow these steps:

 Quaternion

•
 Quaternion
•
 Quaternion in unity

Unity internally uses Quaternions to represent all rotations.

[Link]
 Transformations in 3D
Transformations in 3D graphics involve changing the position, orientation, and
scale of objects. These transformations are achieved using matrices and are
applied in a specific order to achieve the desired effect.
Types of Transformations
 Transformations in 3D
1. Translation:
Purpose: Moves an object from one location to another in 3D space.
Matrix Representation

Applying the Translation Matrix

• To move a point P with coordinates (x0,y0,z0) to a new

point P′ in 3D space, multiply the translation matrix T
by the point's homogeneous coordinate vector:
 Transformations in 3D
Applying the Translation Matrix
• The new point P′ is obtained by:

The point (x0,y0,z0) is moved by x units along the x-axis, y units

along the y-axis, and z units along the z-axis.
 Transformations in 3D
2. Rotation: Rotates an object around an axis in 3D space.
Matrix Representation:

Around the X-axis:

Around the Y-axis:

Around the Z-axis:

 Transformations in 3D

Applying a Rotation Matrix

• To rotate a point P with coordinates (x0,y0,z0)around an axis, multiply the
corresponding rotation matrix by the point's homogeneous coordinate vector:
 Transformations in 3D
Applying a Rotation Matrix
Ex: Rotating around the x-axis by an angle θ
 Transformations in 3D
3. Scaling: Changes the size of an object.
• Matrix Representation:
Transformations -Unity
using UnityEngine;
public class TransformExample : MonoBehaviour
{
void Start()
{
[Link] = new Vector3(1, 2, 3); // Initial position
[Link] += new Vector3(3, 4, 5); // Translate by (3, 4, 5)
[Link](new Vector3(0, 0, 90)); // Rotate 90 degrees around Z-axis
[Link] = new Vector3(2, 2, 2); // Scale by (2, 2, 2)
}
}
 Rendering Pipeline

Transform
Illuminat
e
Transform

Project
Rasterize

Model & Camera

Rendering Framebuffe
Parameters Pipeline r
 Rendering Pipeline

Scene graph
objec† geometry
Resul†:
Modeling
• All ver†ices of scene in shared 3-D “world” coordinate system
Tra

• Vertices shaded according to lighting model

Viewi - Scene vertices in 3-D “view” or “camera” coordinate

ng system
Tra
Exactly those vertices & portions of polygons in view frustum

Projection - 2-D screen coordina†es of clipped

Transfor ver†ices
m
 Rendering Pipeline
Transformations
• Modeling transforms
Size, place, scale, and rotate objects parts of the model
w.r.t. each other
Object coordinates , world coordinates
 Rendering Pipeline
Transformations
• Viewing transform
■ Rotate & translate the world to lie directly in front of the
camera
Typically place camera at
origin Typically looking down
-Z axis
» World coordinates, view coordinates
 Rendering Pipeline
Transformations
• Projection transform
■ Apply perspective foreshortening
•› Distant = small: the pinhole camera model
■ View coordinates , screen
coordinates
 Rendering Pipeline
Transformations
• All these transformations involve shifting coordinate
systems (i.e., basis sets)
• Represent coordinates as vectors, transforms as matrices

cos —sin θ
θ N
sin θ cos θ
• Multiply matrices = concatenate transforms!
Y
 Rendering Pipeline
Transformations
• Homogeneous coordinates represent coordinates in 3 dimensions
with a 4-vector
■ Denoted [x, y, z, w]T w = l in model coordinates
■ To get 3-D coordinates, divide by w:
[x’, y’, z’]T [x/w, y/w, z/w] T
• Transformations are 4x4 matrices
 Rendering Pipeline
Rendering: Lighting
• Illuminating a scene: coloring pixels according
to some approximation of lighting
■ Global Illumination: solves for lighting of the whole scene
at once
■ Local Illumination : local approximation, typically
lighting each polygon separately
• Interactive graphics (e.g., hardware) does only
local illumination at run time
 Rendering Pipeline
Clipping
Clipping a 3-D primitive returns its intersection with
the view frustum:
 Rendering Pipeline

Clipping

In: 3 vertices
Out: 6 vertices

In: 1 polygon
Out: 2 polygons
 Rendering Pipeline
Modeling: Basics
• Common interactive 3-D primitives: points, lines,polygons (i.e., triangles)
• Organized into objects
■ Collection of primitives, other objects
■ Associated matrix for transformations
• Intancing: using same geometry for multiple objects
■ 4 wheels on a car, 2 arms on a robot
 Rendering Pipeline
Modeling: Scene Graph
• The scene graph captures transformations and object- object relationships in a
DAG
• Nodes are objects;
• Arcs indicate instancing
■ Each has a matrix

Head Body

Mouth
 Rendering Pipeline
Modeling: Scene Graph
• Traverse the scene graph in depth-first order,
concatenating transformations
• Maintain matrix stack of transformations
 Rendering Pipeline
Modeling: The Camera
• Finally: need a model of the virtual camera
Can be sophisticated
Field of view, depth of field, distortion, chromatic aberration...
Interactive graphics (OpenGL):
Camera pose: position & orientation
« Captured in viewing transform (i.e., modelview matrix)
Pinhole camera model
+ Field of view
+ Aspect ratio
+ Near & far clipping planes
 Rendering Pipeline
Modeling: The Camera
• Camera parameters are encapsulated in a
• Projection matrix
■ Homogeneous coordinates 4x4 matrix!
• The projection matrix premultiplies the viewing matrix, which
premultiplies the modeling matrices
■ OpenGL uses viewing and modeling transforms into model view matrix
 References
3D graphics pipeline
[Link]
[Link]
[Link]
er%[Link]
• [Link]
• [Link]
• [Link]