1

MODULE 2

Basics of 2D & 3D Graphics

and Mathematics in Gaming &
Rendering engine
 2
Content

 2D Graphics: Sprites, Tiled Images and

Backgrounds
 3D Graphics: 3D Graphics Pipeline, 3D Math
 Coordinates and Coordinate Systems, Quaternion
Mathematics, Transformations & Geometry -
Rendering Pipeline
 3
2D GRAPHICS

 2D graphics have been around since the very

beginning of gaming.
 The way 2D images are generated and displayed to
the screen has evolved quite a bit since the first
video games and remains a very popular way to
make and play games.
 Before the Nintendo 64 and PlayStation era of home
gaming consoles, most of the console video games
were created in 2D.
 4
SPRITES

 2D games use what are known as sprites for the

virtual objects and elements that can be found in a
video game.
 A sprite is a 2D image that is drawn to the screen.
 In 3D games, sprites are normally used for things
such as particle effects, where the 2D representation
of such small entities is reasonable for the simulation.
 In 2D games, sprites are used for everything that is
visible.
 5
Types of 2D Sprites

 There are generally two types of sprites: static and dynamic.

 A static sprite is a single sprite image that consists of a non -
animating character, object, or element.
 A dynamic sprite is made up of a collection of images that, when
viewed one after the other, form an animation. This animation is similar
to a flip-book in the sense that each frame, which is a single image of
the animation, is a different snap-shot of the animation being
performed.
 2D Graphics: Sprites

In 2D graphics, sprites is a common task in game development.

Step 1: Creating Sprites
 Using an Image Editing Tool: Adobe Photoshop, GIMP to create your 2D
sprites.
 Create the Sprite:
 Open image editing tool.
 Create a new image with transparent background.
 Draw or import 2D graphic.
 Save the Image: Save sprite as a PNG file to preserve transparency.
 2D Graphics: Sprites

Step 2: Importing Sprites into Unity

 Open Unity:
 Start Unity and create a new project or open an existing one.
 Import the Sprite:
 Drag and drop your PNG file into the Assets folder in the Unity
Editor.
 Configure the Sprite:
 Select the imported image in the Assets folder.
 In the Inspector window, set the Texture Type to Sprite (2D and
UI).

 2D Graphics: Sprites

Step 3: Using Sprites in Unity

 Create a New Scene:
 Open or create a new scene in Unity.
 Add the Sprite to the Scene:
 Drag the sprite from the Assets folder into the Hierarchy
window, or directly into the Scene view.
 Adjust Position and Scale:
 Use the Transform component in the Inspector window to
position and scale the sprite as needed.
 2D Graphics: Sprites

Step 4: Animating Sprites

 Creating a Sprite Sheet: If there is a sequence of images for animation (sprite sheet), use them to create
animations in Unity.
 Prepare the Sprite Sheet:
 Combine all the individual frames of animation into a single image file, with each frame laid out in a grid.
(Download it from [Link] )
 Import the Sprite Sheet:
 Drag and drop sprite sheet PNG file into the Assets folder in Unity.
 Slice the Sprite Sheet:
 Select the sprite sheet in the Assets folder.
 In the Inspector window,
 Change Sprite Mode to Multiple and Pixels per unit to 48 and Filter mode to Point.
 click the Sprite Editor button.
 In the Sprite Editor, choose the Slice option and set the slicing parameters (e.g., grid size) to match your
frames.
 Click Slice and then Apply.
 In the Assets window click the play button on the sprite sheet, all the sliced individual sprite
 2D Graphics: Sprites
Creating an Animation
 Select the Sliced Sprites:
 In the Assets folder, expand the sprite sheet to reveal the individual frames.
 Select all the frames you want to include in the animation.
 Create an Animation Clip:
 Drag the selected frames into the Scene or Hierarchy window. Unity will prompt you to
create a new animation clip.
 Name and save the animation clip.
 Animator Controller:
 Unity will automatically create an Animator Controller and assign the animation clip to
it.
 2D Graphics: Sprites

Step 5: Scripting for Interaction: Script to control the sprite’s animation and
movement:
 Create a Script:
 In the Assets folder, right-click and select Create > C# Script.
 Name it SpriteController.
 2D Graphics: Sprites
using UnityEngine;
public class SpriteController : MonoBehaviour
{
public float moveSpeed = 5f;
private Animator animator;
void Start()
{
animator = GetComponent<Animator>();
}
void Update()
{
float moveX = [Link]("Horizontal");
float moveY = [Link]("Vertical");
Vector2 move = new Vector2(moveX, moveY);
2D Graphics: Sprites

if (move != [Link])
{
[Link]("isMoving", true);
[Link](move * moveSpeed * [Link]);
}
else
{
[Link]("isMoving", false);
}
}
}
2D Graphics: Sprites

 Attach the Script to the Sprite:

 Select the sprite in the Hierarchy window.
 In the Inspector window, click Add Component and attach the SpriteController script.
 Configure the Animator:
 Open the Animator window (Window > Animation > Animator).
 Create a parameter named isMoving (type: Bool).
 Set up transitions between idle and moving animations based on the isMoving parameter.
Step 6: Testing
 Play the Scene:
 Click the Play button to run the scene.
 Use the arrow keys or WASD keys to move the sprite and see the animation.
 15
Tiled Images and Backgrounds

 In 2D game graphics, sprites are used together to create

the environments and backgrounds.
 Often, one or more sprite images act as the environment’s
background (e.g., sky, clouds, underwater, etc.).
 This background often scrolls with the player to give the
effect of the player moving through the environment.
 [Link]
 16
Foregrounds using tiled sprites

 In addition to the background environment, there is often

also a foreground environment.
 Often, this foreground environment is made up of tiles.
 A tile is an image, in this case a sprite image, that is
composed of a repeatable pattern. By placing a tile-able
image next to other tile-able images of the same set, an
artist can create complex environments out of a small and
simple image-set.
 [Link]
Tiled Images and Backgrounds

Tiled Images:
• Ideal for 2D games with large, scrolling environments.
• Suitable for games with procedurally generated levels or maps.
• When memory efficiency and scalability are important.
• If you need flexibility in designing and modifying the environment.

Background:
• Best for scenes requiring detailed, custom artwork.
• Suitable for static scenes or smaller, fixed environments.
• When artistic detail and uniqueness are prioritized over scalability.
• If you prefer a simpler implementation without managing multiple tiles.
 Tiled Images and Backgrounds

Step 1: Creating Tiled Images

 Create a Seamless Texture:
 Use an image editing tool like Adobe Photoshop, GIMP, or Aseprite.
 Design texture ensuring it can tile seamlessly. This means the edges of the texture
should match perfectly when repeated and save the texture as a PNG file.
Step 2: Importing the Texture into Unity
 Open Unity:
 Start Unity and create a new project or open an existing one.
 Import the Texture:
 Drag and drop PNG texture file into the Assets folder in the Unity Editor.
 Configure the Texture:
 Select the imported texture in the Assets folder.
 In the Inspector window:
 Set the Texture Type to Sprite (2D and UI) if using it for a 2D game.
 Ensure Wrap Mode is set to Repeat to enable tiling.
 Click Apply.
 Tiled Images and Backgrounds

Step 3: Using Tiled Textures in Unity

 Create a Quad or Plane:
 In the Hierarchy window, right-click and select 3D Object > Quad or Plane.
 This object will serve as the base for tiled background.
 Create a Material:
 In the Assets folder, right-click and select Create > Material.
 Name the material (e.g., TiledBackgroundMaterial).
 Apply the Texture to the Material:
 Select the created material.
 In the Inspector window, assign texture to the Albedo property.
 Configure Tiling:
 In the Inspector window of the material, adjust the Tiling settings under the Main
Maps section to control how the texture repeats on the object.
 For example, set Tiling X and Tiling Y to control the number of times the texture
repeats horizontally and vertically.
 Apply the Material to the Quad/Plane:
 Drag the material onto the Quad or Plane in the Scene or Hierarchy window.
 Tiled Images and Backgrounds

Step 4: Using Tiled Textures for 2D Backgrounds

 Create a Sprite Renderer:
 In the Hierarchy window, right-click and select 2D Object > Sprite.
 This object will serve as the base for tiled background.
 Create a Material:
 In the Assets folder, right-click and select Create > Material.
 Name the material (e.g., TiledBackgroundMaterial).
 Apply the Texture to the Material:
 Select the created material.
 In the Inspector window, assign texture to the Main Texture property.
 Configure Tiling:
 In the Inspector window of the material, adjust the Tiling settings under the Main Maps section to
control how the texture repeats on the object.
 For example, set Tiling X and Tiling Y to control the number of times the texture repeats horizontally and
vertically.
 Apply the Material to the Sprite:
 Select the Sprite object in the Hierarchy window.
 In the Inspector window, change the Sprite Renderer component’s Material property to the created
 Tiled Images and Backgrounds

Step 5: Scripting for Dynamic Tiling (Optional)

 To dynamically adjust tiling based on the object size or other parameters,
 Create a Script:
 In the Assets folder, right-click and select Create > C# Script.
 Name it DynamicTiling.
 Attach the Script to the Object:
 Select the Quad/Plane or Sprite in the Hierarchy window.
 In the Inspector window, click Add Component and attach the DynamicTiling
script.
Step 6: Testing
 Play the Scene:
 Click the Play button to run the scene.
 Observe the tiled texture repeating on the Quad/Plane or Sprite as expected.
 22
2D Side Scrolling Game
[Link]
bPYQ
using [Link];
using [Link]; else if(input > 0)
using UnityEngine; {
public class movement : MonoBehaviour [Link]=false;
{ }
public Rigidbody2D playerRb; if([Link]("Jump"))
public float speed; {
public float input; [Link]=[Link] * jumpForce;
public SpriteRenderer spriteRenderer; }
public float jumpForce; }
// Update is called once per frame void FixedUpdate()
void Update() {
{ [Link]=new Vector2(input * speed,

input=[Link]("Horizontal"); [Link].y);
if(input < 0) }
{ }
[Link]=true;
}
 23
Texture Scrolling

using [Link];
using [Link];
using UnityEngine;
public class scrolltex : MonoBehaviour
{
public float Scrollx=0.5f;
public float Scrolly=0.5f;
void Update()
{
float OffsetX =[Link] * Scrollx;
float OffsetY=[Link] * Scrolly;
GetComponent<Renderer>().[Link]=new
Vector2(OffsetX,OffsetY);
}
 24
3D GRAPHICS

 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
 25
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. An example is shown in Figure, and this
is a process that is commonly known as depth testing.
 26
Z Buffer (contd)

 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.
 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.
 27
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/fragment that makes up the geometry and
give it a realistic appearance and interactions.
 The shading of surfaces is the entire point of 3D computer
 28
GEOMETRY AND PRIMITIVES

 The heart of 3D lies in using various geometric entities

to represent the objects and environments of a virtual
scene.
 In 3D video games this information is usually processed
by a dedicated piece of hardware: the graphics card.
 Rendering pipeline - can be thought of as a series of
algorithmic steps that operate on the data that make
up the scene to be rendered.
 29
Lines

 A line is a simple primitive that has a starting location and an ending location With two points, a line
segment can be represented in 2D or 3D space and can take on the following form using two
dimensions, for example:
struct Point
Lines can be used to form
{ mathematical rays where the
int x; starting point of a line is the
int y; ray’s origin and the ending
point of the line can be used
}
to determine the ray’s
struct Line direction.
{
Point start;
Point end;
}
 31
Triangles

 Triangles are the most common type of primitive used in

3D video games.
 Triangles are three-point polygons whose three edges
are used to connect each of the points that make up the
shape of the primitive.
 Graphics hardware is very efficient at processing triangle
primitives.
 Games often use three types of triangles.
 32
Triangles (contd)

 Triangle lists are individual triangles specified in an

array that is sometimes referred to as a buffer
 In a triangle list each triangle is individually specified.
 Points of a triangle can be shared by using indices to
reduce the amount of data that must be passed to the
graphics hardware.
 An index in a triangle list, is an array index into a list
of points.
 An example of using indices is shown, where four
points are used to specify two distinct triangles.
 33
Triangles (contd)

 There are also triangle strips, which are defined

by specifying the first three points of the first
triangle and then one point for each additional
triangle that branches off the first.
 Using a triangle strip is a way to reduce the
amount of data that must be passed to the
graphics hardware.
 By using six points we can form four separate
triangles.
 Triangle strips are commonly used for terrain
geometry, where a terrain is normally a
rectangular grid with varying Y-axis (height) values
for each of its polygons.
 34
Triangles (contd)

 The last type of triangle is

triangle fans, which are triangles
that all connect to the same
common point on the mesh.
 By specifying a common point that
all triangles connect to, you can
create various shapes that would
require more information to create
with triangle lists.
 35
Convex and Concave Polygons

 Polygons and shapes in computer graphics can be

either convex or concave.
 A convex polygon, or shape, has a convex set for its
surface, which means that if a line segment is created
between any two points that make up the object, it
cannot penetrate any edge of said object.
 If a line segment does penetrate one of the object’s A strict convex polygon or
edges, it is considered concave. shape is one that has at
most a 180-degree angle
 Using convex geometry is a better choice for things between
such as collision detection because convex shapes each edge that makes up the
and polygons are more efficient to calculate and object.
work with mathematically on a processor.
 36
Spheres and Boxes

 Spheres and boxes are commonly used in video games, not just for rendering but
also for physics and collision calculations.
 A sphere is a mathematical object with a position and a radius, which specifies the
circular region that surrounds the position.
 Spheres can take on the following form in pseudo-code:
struct Sphere
{
int radius;
Point position;
}
 37
Spheres and Boxes (contd)

 Spheres and boxes are used to surround

complex objects in virtual scenes.
 If a complex object such as a character model is
surrounded with a sphere or box primitive, they
can be used in the collision and physics tests
as a fast way to determine what action needs to be
taken.
 For example, the test between two spheres
colliding in a virtual scene is much faster
than testing two triangles.
 By testing two simple spheres you can quickly
determine if a collision is even possible
between two complex character models.
 38
Spheres and Boxes (contd)

 When it comes to collision detection against spheres, spheres are

much faster than other basic primitives such as triangles, boxes,
and so forth. This speed comes at a cost of accuracy because the
region that surrounds most objects tends to have a lot of wasted
space.
 Using models with hundreds or thousands of polygons the CPU
power required to calculate the average game physics using
triangle-to-triangle tests would be so vast that games like Halo 3,
Assassins Creed, Metal Gear Solid 4, and even Super Mario 64
(during its time) would be impossible.
 The triangle-to-triangle collision test is so expensive that game
developers avoid them altogether and instead perform collisions
on groups of very simple shapes.
 39
Additional Geometric Objects

 Cones
 Pyramids
 Cylinders objects found in video games, are often created

using triangles rather than some mathematical
Toruses equation.
 Torus knots
 Disks
 Ellipsoids
 Bezier curves
 Bezier patches
 Nurbs
 40
Loading Geometry

In video games, geometry is usually loaded into an

application during runtime from an external file. Games use
many types of files like….
Static models
Animation files
Terrains

Environment files
Collision meshes
 41
MATHEMATICS USED IN COMPUTER GRAPHICS

 Games graphics are made up of a lot of

mathematics.
 The mathematics used in game graphics,
physics, and so forth can become quite complex
and advanced.
 Having a firm understanding of the different
types of mathematics allow you to have an easier
time understanding and implementing the
information.
 42
Vectors, Vertices, and Points

 Vectors are the fundamental mathematical objects that are

used in every 3D game and game engine.
 Vectors define a direction in virtual space, but they can
also be used to define points called vertices.
 For example, a triangle is made up of three of these
points.
Technically, vectors and vertices are different, but they are used the same way most of
the time in games. Vectors are spatial directions, and vertices are points of a primitive.
 43
Vectors, Vertices, and Points (contd..)

 Vectors come in many types, with the most common

ones being 2D, 3D, and 4D.
 A vector is made up of n number of dimensions that
describe the total number of axes it uses.
 For example, a 2D vector only has an X and Y axis.
 A 3D vector has an X, Y, and Z axis, and
 A 4D vector has the same axes as a 3D vector in
addition to a W axis.
 A vector can generally be written as V = (V1, V2, …,
Vn)
 44
Vectors, Vertices, and Points (contd..)

 In a language such as C or C++ a 3D vector can have

the following structures:
struct Vector3D
Eg:
{ V.x = V1.x + V2.x
float x, y, z; V.y = V1.y + V2.y
V.z = V1.z + V2.z
}; V.x = V1.x + A
 Vectors can be operated on by scalars, which are V.y = V1.y + A
floating-point values. V.z = V1.z + A
 For example, you can add, subtract, multiply, and
divide a vector with another vector or a scalar.
 45
Vectors, Vertices, and Points (contd..)

 When you render a 3-dimensional computer graphics scene, you create a 2-

dimensional picture of the 3D scene.
 The picture is a projection of the models in the scene onto a 2-dimensional “screen”.
Therefore it is logical to call this operation in the graphics pipeline a projection.
 There are two standard projections used in computer graphics.
 An orthographic projection maintains parallel lines but provides no sense of
depth.
 A perspective projection provides for a sense of depth, but parallel lines are
skewed toward vanishing points.
 Orthographic projections are used in the engineering fields when an
accurate representation of a model is desired.
 Perspective projections are used when a “real life” view of a scene is
desired. Perspective projections simulate how the human eye sees the real world.
 46
Orthographic Projection

 An example of an orthographic projection. Notice that:

 Parallel lines stay parallel.
 There is no perception of depth.
 [Link]
[Link]
 47
perspective projection

 An example of a perspective projection. Notice that:

 Parallel lines of the model are not parallel in the rendering.
 You can perceive depth. (The off-center object changes size as its
distance from the camera changes.)
[Link]
ective_example.html
 48
Matrices

 A matrix is a mathematical structure that is used in computer graphics to store information

about a space.
 In computer graphics matrices are often used for storing orientations, translations, scaling,
coordinate spaces, and more.
 A matrix is essentially a table, for example,
 float matrix3x3[3][3];
 matrix3x3[0] = 1; matrix3x3[1] = 0; matrix3x3[2] = 0;
 matrix3x3[3] = 0; matrix3x3[4] = 1; matrix3x3[5] = 0;
 matrix3x3[6] = 0; matrix3x3[7] = 0; matrix3x3[8] = 1;
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
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:
Applying the Translation Matrix

 The new point P′ is obtained by:

Applying the Translation Matrix

 Thus, the new coordinates (x′,y′,z′) are:

 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.
Types of Transformations

2. Rotation: Rotates an object around an axis in 3D space.

 Matrix Representation:
 Around the X-axis:

 Around the Y-axis:

Types of Transformations

 Around the Z-axis:

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:
Applying a Rotation Matrix

Ex: Rotating around the x-axis by an angle θ

Types of Transformations

3. Scaling: Changes the size of an object.

 Matrix Representation:
 58
Occlusions

 An occluder is an object that blocks the sight of another object or objects.

 When performing occlusion culling, the idea is to determine which objects in the
visible view frustum are blocked by other objects.
 By performing this test quickly on key objects we can avoid rendering objects that
we cannot see.
 By enclosing the view volume we can determine if an object is visible or not.
Objects that are not visible are not sent down the rendering pipeline, whereas
those that are visible are drawn.
 This can be a huge optimization if we are able to use a frustum to cull a large
number of polygons from the rendering process. If enough polygons are quickly
culled out, the performance benefits can become apparent early on in the
development of a game environment.
 This is commonly called frustum culling and is a very effective technique used
 Unity code

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
Illuminate
Transform

Project
Rasteriz
e
Model & Camera
Rendering Pipeline Framebuffer
Parameters
Rendering Pipeline
Scene graph
objec† geometry
Re s u l † :
Modeling
• All ver†ices of scene in shared 3-D “world” coordinate system
Tra

• Vertices shaded according tolighting model

Viewi
- Scene vertices in 3-D “view” or “camera” coordinate system
ng
Tra
Exactly those vertices & portions of polygons in view frustum

Projection - 2-D screen coordina†es of clipped ver†ices

Transform
Transformations

• Modeling transforms
Size, place, scale, and rotate objects parts of the
model
w.r.t. each other
Object coordinates , world coordinates
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

Transformations

• Projection transform
■ Apply perspective foreshortening
•› Distant = small: the pinhole camera model

■ View coordinates , screen

coordinates
Transformations

• All these transformations involve

shifting coordinate systems (i.e., basis
sets)
• Represent coordinates as vectors, transforms
as matrices
cos —sin θ
θ N
sin θ cos θ Y
• Multiply matrices = concatenate transforms!
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 3D
Scene graph
objec† geometry
Re s u l † :
Modeling
• All vertices of scene in shared 3-D “world” coordinate sys†em
Tra

• Vertices shaded according to Iighting model

Viewin
- Scene verti ces in 3- D “view” or “camera” coordinate system
g
Tra
Exactly those verti ces & porti ons of polygons in view frustum

Projection - 2-D screen coordinates of clipped vertices

Transform
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
3D
Scène graph
bjec† geometry
Re s u l † :
Modeling
• AII ver†ices of scene in shared 3-D “world” coordina†e sys†em
Tra

• Vertices shaded a ccording to lighting model

Viewin
- Scene verti ces in 3- D “view” or “camera” coordinate system
g
Tra
• Exactly those vertices d‹ portions of polygons in view frus†um
Clipping

Projection - 2-D screen coordina†es of cliped ver†ices

Transform
Clipping
Clipping a 3-D primitive returns its intersection with
the view frustum:
Clipping

In:

3 vertices
Out: 6 vertices

In: 1 polygon
Out: 2 polygons
Rendering Pipeline
3D
Transform
Illuminate
Transform

Project
Rasterize

Model and
Camera
Rendering Pipeline Framebuffer
parameters
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
 Modeling: Scene Graph

• The scene graph captures transformations and object-

object relationships in a DAG
• Nodes are objects;
• Arcs indicate instancing
Head Body
■ Each has a matrix

Mouth
Modeling: Scene Graph
• Traverse the scene graph in depth-first order,
concatenating transformations
• Maintain matrix stack of transformations
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
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