1

Chapter Zero: Course Description

COMPUTER GRAPHICS
COURSE NUMBER: COSC3072
PREREQUISITE: COMPUTER PROGRAMMING (COSC 1012)

Compiled by: Kidane W.

Introduction 2

This course will introduce students to all aspects

of computer graphics including hardware,
software and applications.
Students will gain experience using a graphics
application programming interface (OpenGL) by
completing several programming projects.
In this course, we will embark on a journey into
the exciting world of computer graphics,
specifically focusing on interactive graphics
using the OpenGL library.
Introduction 3

We will explore the fundamental concepts,

techniques, and applications that form the
backbone of creating visually stunning and
interactive graphical experiences.
Computer graphics are all around us, from the
video games we play to the movies we watch
and the special effects that bring them to life.
This course will equip you with the knowledge
and skills to create your own interactive
computer graphics applications.
Introduction 4

The course is structured into ten comprehensive

chapters, each building upon the previous one.
We will begin with the fundamentals, exploring
the history of computer graphics, different 3D
graphics techniques and terminology, and its
vast array of applications.
We will then delve into the world of graphics
hardware, understanding how raster displays
work and the role of the 3D graphics pipeline.
Interactive Computer Graphics 5

Interactive Computer Graphics (ICG) refers to

graphics systems that allow users to interact with
the graphical content in real-time.
These systems respond immediately to user inputs,
providing a dynamic and engaging experience.
APPLICATION: Video games, Virtual reality (VR),
augmented reality (AR), Simulation and training
programs, Interactive design tools and software
Non-Interactive Computer 6
Graphics
Non-Interactive Computer Graphics (NICG)
refers to graphics that do not require or allow
user interaction in real-time.
The graphics are typically pre-rendered or
generated without real-time user input, often for
visualization, analysis, or presentation purposes.
APPLICATION: Scientific visualization, Animated
films and pre-rendered videos, Info-graphics and
static images, Architectural renderings, and
design visualizations.
Objectives 7

 On completion of the course successfully, students will be

able to:
 Have a basic understanding of the core concepts of computer
graphics.

 Be capable of using OpenGL to create interactive computer

graphics.

 Understand a typical graphics pipeline.

 Have made pictures with their computer.

CHAPTER 1: Introduction 8

BriefHistory of Computer Graphics

3D Graphics Techniques and Terminology
Interactive Computer Graphics Overview
Common Uses of Computer Graphics
Application Area
CHAPTER 1: Introduction 9

Input Devices: Tools like mice, keyboards,

touchscreens, and VR controllers that enable
user interaction.
Graphics Processing Unit (GPU): Hardware
responsible for rendering images quickly to
ensure smooth interaction.
Software Tools: APIs like OpenGL, DirectX, and
game engines (e.g., Unity, Unreal Engine) that
facilitate the creation of interactive graphics.
CHAPTER 1: Introduction 3D 10
Graphics Techniques
 Modeling
 Texturing
 Rendering
 Animation
 Shaders
CHAPTER 1: Introduction - 11
Common Uses
 Entertainment: Video games, movies (CGI), and
virtual/augmented reality.
 Design and Visualization: Architecture, engineering
(CAD), and product design.
 Education and Training: Simulations for medical training,
flight simulators, and virtual labs.
 ScientificVisualization: Visualizing complex scientific
data, simulations in physics, and biology.
 Communication: Infographics, data visualization, and
graphical presentations.
CHAPTER 1: Introduction 12
Application Areas
Entertainment Industry: Creating lifelike
animations, special effects in movies, and
immersive video game experiences.
Medical Field: Visualizing medical data (MRI, CT
scans), surgical simulations, and educational
tools.
Engineering and Manufacturing: CAD tools for
designing machinery, buildings, and consumer
products.
CHAPTER 1: Introduction 13
Application Areas
 Education:Interactive learning tools, virtual dissection in
biology, and historical reconstructions.
 Scientific Research: Visualizing astronomical data,
molecular models in chemistry, and environmental
simulations.
 Geographic Information Systems (GIS): Mapping, urban
planning, and environmental monitoring. These overviews
capture the essence of computer graphics' history,
techniques, terminology, and applications.
CHAPTER 2: Graphics Hardware 14

Raster Scan and Random Scan Devices

3D Graphics Display Devices (Pipeline)
The Z-buffer (or depth buffer) for Hidden Surface
Removal
CHAPTER 3: Introduction to The 15
Rendering Process with OpenGL
TheRole of OpenGL in the Reference Model
Coordinate Systems
Viewing Using a Synthetic Camera
Output Primitives and Attributes
CHAPTER 3: Introduction to The 16
Rendering Process with OpenGL
Chapter 3 will introduce us to OpenGL, a
powerful graphics library that plays a pivotal role
in rendering stunning visuals. OpenGL acts as a
bridge between your application and the
graphics hardware, allowing you to specify how
objects should be drawn on the screen.
Imagine using OpenGL to render the complex 3D
worlds of video games, where every character,
object, and environment is built using OpenGL
primitives and techniques.
CHAPTER 3: Introduction to The 17
Rendering Process with OpenGL
In architectural visualization, OpenGL can be
used to create realistic 3D models of buildings,
allowing architects and designers to explore
different design options before construction
begins.
Flight simulators heavily rely on OpenGL to render
realistic 3D landscapes and aircraft, providing
pilots with a realistic training environment.
CHAPTER 3: Introduction to The 18
Rendering Process with OpenGL
We will explore how OpenGL interacts with the
graphics pipeline, understand the importance of
coordinate systems for positioning objects in 3D
space, and learn how to manipulate the virtual
camera to create different viewing perspectives.
Additionally, we will delve into the concept of
output primitives, the basic building blocks that
form the foundation of computer graphics, and
explore their associated attributes.
Chapter 4: Geometry and Line 19
Generation
Generating points and lines using Bresenham's
algorithm
Creating circles and general curves
Exploring line thickness, line styles, and polygons
Understanding filling techniques and text
rendering
Chapter 4: Geometry and Line 20
Generation
Chapter 4 focuses on the fundamentals of geometry and
line generation. We will explore Bresenham's algorithm, a
powerful technique used in many computer graphics
applications to draw smooth lines on raster displays.
Imagine using Bresenham's algorithm in CAD software to
create precise lines and shapes for engineering designs.
We will then dive into creating circles and more complex
curves, essential for animation and creating smooth
shapes.
Chapter 4: Geometry and Line 21
Generation
Additionally, we will explore how to control line
thickness and define different line styles, used for
creating visual emphasis or differentiation in
various applications.
Polygons are the fundamental building blocks for
creating 2D and 3D shapes in computer
graphics.
We will delve into their creation and
manipulation.
Chapter 5: Transformation 22

Explore 3D transformations: translation, rotation,

scaling
Learn about matrix representation and
homogeneous coordinates
Discover how to combine multiple
transformations
Chapter 5: Transformation 23

Chapter 5 delves into the world of 3D

transformations, a crucial concept for
manipulating and positioning objects in 3D
space.
Imagine using 3D transformations to animate a
character in a video game, where each
movement involves translations (moving across
the scene), rotations (turning the head), and
scaling (enlarging or shrinking the character).
Chapter 5: Transformation 24

In flight simulation, 3D transformations are used to

control the movement of the aircraft, allowing
players to pitch, roll, and yaw the airplane
realistically.
We will explore the three fundamental
transformations: translation, rotation, and scaling.
We will then learn how to represent these
transformations using matrices, a powerful
mathematical tool for manipulating objects in 3D
space.
Chapter 5: Transformation 25

Additionally, we will introduce homogeneous

coordinates, a special coordinate system that
simplifies the representation of transformations.
Finally, we will explore how to combine multiple
transformations to achieve complex object
manipulation, such as creating the realistic
movement of a robotic arm.
By mastering these techniques, you will gain the
ability to bring your 3D creations to life.
Chapter 6: State Management 26
and Drawing
Explore basic state management in OpenGL
Learn how to display points, lines, and polygons
Understand the concept of normal vectors and
using vector arrays
Chapter 6: State Management 27
and Drawing
Chapter 6 focuses on state management and
drawing geometric objects in OpenGL.
Imagine using OpenGL in 3D modeling software,
where state management controls various
aspects of how objects are drawn, such as their
color, material properties, and lighting.
We will explore the fundamental concepts of
state management, which controls how OpenGL
interprets and renders your graphics commands.
Chapter 6: State Management 28
and Drawing
We will then learn how to display points, lines,
and polygons, the fundamental building blocks
of 2D and 3D graphics.
Additionally, we will delve into the concept of
normal vectors, which define the surface
orientation of polygons and are crucial for
lighting and shading effects.
Chapter 6: State Management 29
and Drawing
We will also explore using vector arrays, an
efficient way to store and manipulate large sets
of geometric data in OpenGL.
By understanding these concepts, you will gain
the ability to effectively draw and manipulate
geometric objects within your OpenGL
applications.
Chapter 7: Representing 3D 30
Objects
Modeling using polygons:
triangles, quads, and more
Techniques for creating
efficient polygon meshes
Exploring non-polygonal
representations of 3D objects
Chapter 7: Representing 3D 31
Objects
Chapter 7 dives into the exciting world of
modeling 3D objects. We will explore polygonal
modeling, the most common technique for
creating 3D objects using polygons like triangles,
quads, and other shapes.
Imagine using polygonal modeling to design
characters for video games, where each
character is built from a collection of carefully
crafted polygons.
Chapter 7: Representing 3D 32
Objects
We will delve into various techniques for creating
efficient polygon meshes, which are collections
of polygons that represent the surface of a 3D
object. In 3D printing, efficient polygon meshes
are crucial for creating accurate and printable
models.
Additionally, we will explore non-polygonal
representations, such as curves and surfaces,
used for specific modeling needs.
Chapter 8: Color and Images 33

Exploring color models in computer graphics:

RGB,
CIE: The CIE color model is a mapping system that uses
tristimulus (a combination of 3 color values that are
close to red/green/blue) values, which are plotted on
a 3D space. When these values are combined, they
can reproduce any color that a human eye can
perceive.
Understanding different image formats and their
applications:
GIF, JPG, PNG
Chapter 8: Color and Images 34

Chapter 8 explores the world of color and

images, essential components of creating
visually appealing computer graphics.
We will delve into different color models used to
represent color information in computer
graphics.
The most common model is RGB (Red, Green,
Blue), which combines these primary colors to
create a vast spectrum of colors. Digital cameras
capture image data using the RGB model.
Chapter 8: Color and Images 35

We will also explore the CMYK (Cyan, Magenta,

Yellow, Key Black) color model, primarily used in
printing.
Understanding these color models is crucial for
creating and manipulating colors effectively in
your computer graphics projects.
Additionally, we will explore various image
formats, each with its strengths and weaknesses
suited for different applications.
36
Chapter 8: Color and Images 37

The JPG format is a popular choice for storing

photographs due to its efficient compression
capabilities.
PNG offers lossless compression, making it ideal
for graphics with sharp lines and text. GIFs, known
for their ability to display animations, are often
used for web graphics.
By understanding these image formats, you will
be able to choose the right format to optimize
your images for specific uses.
Chapter 9: Illuminating the Scene 38

 Exploreperspective and other

projection types
 Understand different types of light
sources: point lights, directional lights,
spotlights
 Learn about reflectance models:
diffuse, specular
 Discover
Gouraud and Phong shading
techniques
 Explore lighting and textures in OpenGL
Chapter 9: Illuminating the Scene 39

Chapter 9 dives into the realm of viewing and

illumination models, crucial for creating realistic
and visually appealing 3D scenes.
We will explore perspective projection, the most
common method for creating realistic images,
and learn about other projection types used for
specific applications.
Chapter 9: Illuminating the Scene 40

We will then delve into different light source

types, such as point lights, directional lights, and
spotlights, and understand how they affect the
appearance of objects in a scene.
Additionally, we will explore reflectance models,
which describe how materials interact with light,
including diffuse reflection (ambient light
scattering) and specular reflection (mirror-like
highlights).
Chapter 9: Illuminating the Scene 41

We will then discover Gouraud and Phong

shading techniques, used to create smooth
shading effects on 3D objects.
Finally, we will explore how to implement lighting
and textures in OpenGL to bring your 3D scenes
to life.
Chapter 10: Building the 42
Application
Distinguish between modeling and
graphics
Understand immediate mode vs.
retained mode modeling
Explore storage strategies for 3D objects
Learn about matrix stacks and their
applications
Discover OpenGL display lists and their
benefits
Chapter 10: Building the 43
Application
Chapter 10 explores the world of application
modeling, focusing on how to integrate the
concepts learned throughout the course into
creating interactive computer graphics
applications.
We will distinguish between modeling, which
focuses on creating 3D object representations,
and graphics, which deals with rendering those
objects on the screen.
Chapter 10: Building the 44
Application
We will then explore the differences between
immediate mode and retained mode modeling
approaches.
Additionally, we will delve into storage strategies
for 3D objects, learn about matrix stacks used to
manage multiple transformations, and discover
OpenGL display lists, which can improve
rendering efficiency.
Chapter 10: Building the 45
Application
Finally,
by understanding these concepts, you will
gain the ability to build interactive computer
graphics applications that bring your 3D
creations to life.
Assessments 46

Tests and(or) Quizzes (20%)

Assignments (10%)
Lab Exam and (or) Project (20%)
Final Exam (50%)
Textbook and References 47

 Richard S. Wright et.al. OpenGL® SuperBible:

Comprehensive Tutorial and Reference, Fifth Edition
Addison-Wesley Professional
 (UndergraduateTopics in Computer Science) Karsten
Lehn, Merijam Gotzes, Frank Klawonn - Introduction to
Computer Graphics_ Using OpenGL and Java-Springer
(2023)
 Interactive
Computer Graphics A Top-down Approach
With Shader-based Opengl, Edward Angel, 6th Edition
 V.Scott Gordon, John L. Clevenger - Computer Graphics
Programming in OpenGL With C++-Mercury Learning and
Information (2024)
 48

End of Chapter 0

“LIKE MOST LEARNING, LEARNING HOW TO PROGRAM IS A CHICKEN AND EGG PROBLEM: WE
WANT TO GET STARTED, BUT WE ALSO WANT TO KNOW WHY WHAT WE ARE ABOUT TO LEARN
MATTERS.”
BJARNE STROUSTRUP

“PROGRAMMING IS LEARNED
BY WRITING PROGRAMS.”
—BRIAN KERNIGHAN
 49

Chapter 1: Introduction to Computer Graphics

COMPUTER GRAPHICS
COURSE NUMBER: COSC3072
PREREQUISITE: COMPUTER PROGRAMMING (COSC 1012)

Compiled by: Kidane W.

 50

Computers:
accept, process, transform and present
information.

Computer Graphics:
accept, process, transform and present
information in a visual form.
Motivation 51

“Computer graphics is science and art of

communicating visually via computer
display and its interaction devices”
Introduction to Computer 52
Graphics
Graphics is a broad field; to understand it, you
need information from perception, physics,
mathematics, and engineering.
Building a graphics application entails user-
interface work, some amount of modeling (i.e.,
making a representation of a shape), and
rendering (the making of pictures of shapes).
Introduction to Computer 53
Graphics
Rendering is often done via a “pipeline” of
operations; one can use this pipeline without
understanding every detail to make many useful
programs.
But if we want to render things accurately, we
need to start from a physical understanding of
light.
Knowing just a few properties of light prepares us
to make a first approximate renderer.
Introduction to Computer 54
Graphics
Computer graphics involves the creation, manipulation,
and representation of visual images using computers.
Importance: Used in various fields such as video games,
movies, simulations, virtual reality, and more.
Although the term “Computer Graphics” itself was coined
in 1960 by William Fetter, a designer at Boeing, to
describe his own job, the field can be said to have first
arrived with the publication in 1963 of Ivan Sutherland's
Sketchpad program, as part of his Ph.D. thesis at MIT.
Early Beginnings (1940s-1960s) 55

SAGE - Semi-Automatic Ground Environment

System (1950s): One of the first graphical
computer systems used for air defense. Most of
the human-machine interaction took place at
large radar screens with light pens
Sketchpad (1963): Created by Ivan Sutherland,
considered the first graphical user interface,
allowing direct manipulation of objects on a
screen.
 Scalable Vector Graphics
PNG is short for Portable Network Graphic, a type of raster image file.
Joint Photographic Experts Group.

The Advent of Raster

Graphics Interchange Format
56
Graphics (1960s-1970s)
Raster Displays: Transition from
vector graphics (SVG) to raster
graphics (Pixelated e.g. JPG); each
image composed of a grid of pixels.
Significant Developments:
IBM 2250 (1964): One of the first
computer graphics terminals.
Computer Animation: Early experiments
in computer-generated animations by
pioneers like John Whitney.
The 3D Graphics Revolution 57
(1970s-1980s)
Hidden Surface Determination: Algorithms like Z-
buffering (Ed Catmull) that handle which
surfaces are visible.
Shading Models: Gouraud and Phong shading
techniques developed to simulate realistic
lighting.
Key Milestones:
1974: First 3D-rendered human figure by Ed Catmull.
1979:
The development of the Graphics Standards
Committee (GSC).
Commercial Graphics Systems 58
(1980s)
Silicon Graphics (1982): Pioneers in high-
performance graphics workstations.

Personal Computers: Rise of graphics capabilities

in personal computers, such as Apple Macintosh
(1984).
Real-time Graphics and 59
Video Games (1980s-1990s)
Arcade Games: Introduction of
real-time graphics in video games
(e.g., Pac-Man, 1980).
Consoles: Graphics advancements
in home consoles (e.g., Nintendo).
3D Acceleration: Introduction of 3D
accelerators, e.g., 3dfx Voodoo
(1996). Speed up 3D rendering by
doing some of the calculations
themselves
The Birth of Modern Graphics 60
Software (1990s)
Graphics APIs: OpenGL (1992) and
DirectX (1995), standardizing graphics
programming.
Software Milestones: Run  DxDiag (Windows)
Adobe Photoshop (1990): Revolutionized
digital image editing.
Autodesk 3D Studio (1996): Became the
industry standard for 3D modeling and
animation.
Photorealism and CGI in Movies 61
(1990s-2000s)
Photorealistic rendering is the process of
creating a digital 3D image that is hard to
cut off from a real photo by correctly
setting the light, adding shadows,
camera positioning, and focusing on
details.
Jurassic Park (1993): Groundbreaking use
of CGI for realistic dinosaurs.
Toy Story (1995): First fully computer-
generated feature film by Pixar.
Advances in Real-time Rendering 62
(2000s-2020s)
Shader Model: Development of programmable
shaders enabling more realistic and complex
visual effects.
Gaming: Rise of powerful gaming engines (e.g.,
Unreal Engine, Unity).
VR and AR: Advancements in virtual reality
(Oculus Rift) and augmented reality.
Current Trends and 63
Future Directions

Ray Tracing: Real-time ray tracing becoming mainstream

(NVIDIA RTX, 2018).
AI in Graphics: Use of AI for enhancing graphics (NVIDIA
DLSS).
Metaverse: Increasing focus on creating immersive virtual
worlds.
Future Technologies: Continued advancements in
hardware and software pushing the boundaries of realism
and interactivity.
Introduction to 3D Graphics 64

3D graphics involve creating and

displaying three-dimensional objects on a
two-dimensional screen.
Nowadays 3D Computer graphics, or CG, are
everywhere. From video games to medical
applications.
Applications: Used in video games,
simulations, movies, virtual reality, and
architectural visualizations.
Basic Concepts and Terminologies65

Pixel:The smallest unit of a digital image,

representing a single point in a graphic.
Coordinate Systems:
Cartesian Coordinates: x, y, and z axes.
Vertices and Edges: Basic building blocks
of 3D models.
Polygons: Triangles and quadrilaterals
forming the surface of 3D models.
Modelling 66

The first step of the CGI designer’s work, in which

s/he creates the shape of the object.
For this purpose, a polygon mesh is used. The
designer changes the mesh until he gets the
desired size and shape of the object.
At this stage, the object looks like a geometric
figure with lots of faces.
 67

https://www.tinkercad.com/
68
69
Modelling Techniques 70

This
process includes defining the shape, structure,
and appearance of these objects.
1. Mesh (Polygon) Modeling: Creating complex shapes by
connecting vertices with edges and faces.
2. Subdivision Surfaces: Technique that iteratively refines a
mesh to produce a smooth surface.
3. NURBS (Non-Uniform Rational B-Splines): Smooth curved
surfaces defined by control points. – Mathematical
Model
71
Transformations 72

Translation:Moving objects in 3D space.

Rotation: Rotating objects around an axis.
Example: Rotating a 3D model in CAD software like SolidWorks.
Scaling: Increasing or decreasing the size of objects.

MatrixOperations: Use of transformation matrices to

perform these operations efficiently.
Rendering Techniques 73

Rendering process based on geometry, viewpoint, texture,

lighting, and shading information describing the virtual
scene that used to give the concept of an artist’s
impression of a scene.
Rendering Techniques 74

 Rasterization:Converting 3D models into a 2D image by projecting

vertices and filling in pixels.
 RayTracing: Simulating the path of light rays to create realistic
images with shadows and reflections.
 Example: Visual effects in movies like "Avengers: Endgame".
 Future Trend: Real-time ray tracing in games powered by NVIDIA RTX GPUs.
 Radiosity: Global illumination technique that simulates the diffuse
transfer of light. Example: Architectural visualization using software like Autodesk
Revit.
Lighting 75

Lighting Types:
1. Ambient Light: General illumination.

2. Point Light: Emits light from a single point.

3. Directional Light: Parallel rays from a distant source.

4. Spotlight: Focused beam of light.

Examples for all: Lighting techniques used in

game engines like Unreal Engine.
Shading 76

Shading in computer graphics refers to the techniques used

to simulate light and shadow on the surfaces of 3D objects to
create the appearance of depth, texture, and material
properties.
1. Flat Shading: Single color for each polygon. Creates a faceted
look, where individual polygons are distinguishable.
2. Gouraud Shading: Produces smoother shading than flat shading
but can miss highlights in the middle of large polygons.
3. Phong Shading: Smoother and more realistic shading with better
specular highlights than Gouraud shading.
Texturing 77

Texturing in computer graphics is the process of applying

images or patterns (textures) to 3D models to give them
surface details and visual complexity.
Applying 2D images to the surface of 3D models.
UV Mapping: Mapping 2D textures onto 3D surfaces using UV
coordinates.
Bump Mapping: Simulating surface detail without increasing
geometry.
Normal Mapping: More advanced bump mapping using normal
vectors.
Before and After 78
Advanced Techniques 79
 Shadow Mapping: Technique to create shadows in a scene.
 Example: Realistic shadows in games like "Cyberpunk 2077".
 Particle
Systems: Simulating fuzzy phenomena like fire, smoke, and
explosions.
 Example: Special effects in movies like "Avatar".
 Levelof Detail (LOD): Reducing complexity of distant objects to improve
performance.
 Example: Efficient rendering in open-world games like "Grand Theft Auto V".
 Physically-Based
Rendering (PBR): Simulating materials and lighting
based on physical properties.
 Example: Realistic materials in games like "Battlefield V".
 80

Why Computer Graphics ?

Whygeneratevisualinformation?
81
About30%ofbraindedicatedtovisualprocessing...

(Petar Milošević)
(Allan Ajifo)

...eyesarehighest-bandwidthportintothehead!
Movies
82

JurassicPark(1993) StanfordCS248,Winter2022
Computergames
83

Thisimageisrenderedinreal-timeonamodernGPU
Uncharted4(NaughtyDog,2016) StanfordCS248,Winter2022
 84

Screenshot:RedDeadRedemption StanfordCS248,Winter2022
Supercomputingforgames
85

NVIDIA Titan V
GPU (~ 15
TFLOPs fp32)

Incredible performance for deep learning, gaming, design,

and more. Create and program faster than ever.
Specializedprocessorsforperforminggraphicscomputations.
86
Augmented reality
87

MicrosoftHololensaugmentedreality headsetconcept
Illustration
88
 Digitalillustration
89

Digital illustration refers to the

creation of images using digital
tools and software, often for
artistic, commercial, or technical
MeikeHakkart
http://maquenda.deviantart.com/art/Lion-done-in-illustrator-327715059
purposes.
Graphicaluserinterfaces
90

IvanSutherland,“Sketchpad”(1963)
Moderngraphicaluser The visual elements through which users interact with
91
electronic devices, software applications, and operating
interfaces systems.

2D drawing and animation are ubiquitous in computing. Typography, icons,

images, transitions, transparency, … (all rendered at high frame rate for rich
experience)
Digitalphotography Digital photography refers to the process of capturing, creating, and
storing photographic images in digital format.
92

NASA|WalterIooss|SteveMcCurry
HaroldEdgerton|NASA|NationalGeographic
Ubiquitousimaging
This concept encompasses the integration of cameras and imaging sensors
in numerous devices and environments, enabling continuous or on-
demand visual data capture and analysis. 93

Cameraseverywhere
Computationalcameras Computational cameras leverage advanced
94
algorithms and software to enhance or extend the
capabilities of traditional imaging systems.
Panoramicstitching

DavidIliff

Portraitmode
(simulateeffectsoflargeaperturelens)

Highdynamicrange(HDR)photography
Imagingformapping
95

Imaging for mapping, also

known as geospatial imaging or
remote sensing, involves the
capture, analysis, and
interpretation of images to
create maps and gather
geographic information.

Maps,satelliteimagery,street-levelimaging,…
Computeraideddesign
96

SolidWorks SketchUp
Formechanical,architectural,electronic,optical,…
 97

Productdesignandvisualization

Ikea-75%ofcatalogisrenderedimagery(severalyearsago… likelyalotmorenow)
Architecturaldesign
98
Datavisualization
99

Tableau

Science,engineering,medicine,journalism,…
Simulation
100

Drivingsimulator da Vinci surgical

ToyotaHigashifujiTechnicalCenter robot
Intuitive
Surgical
Flightsimulator,drivingsimulator,surgicalsimulator,…
GraphicsusedfortrainingMLmodels
101
AIHabitat:
simulatorfortrainingAIagents

Carla:
autonomousdrivingsimulator
3Dfabrication
102
CG and You! 103

● You like physics and would like to see its

practical applications in generating amazing
imagery and effects.
● You like mathematics: computer graphics is
applied mathematics.
● You like programming: computer graphics is
exciting application that employs complex
architectures for modeling and rendering and in
return gives very gratifying results.
CG and You! 104

You like art and design: Computer graphics is not

only about tools which serve for simulating and
rendering 3D scenes - it is also how we use those
tools to create something that exists or never
existed
You like animated films or VFX (Visual Effects):
there is a lot of computer graphics there
combined with other disciplines to support stories
to remember
CG and You! 105

You like computer vision or image processing: graphics is

about creating and manipulating images
You like human-computer interaction: computer graphics
enables visual interfaces and interaction
You like computer games: amazing application of
computer graphics combined with different disciplines
You like visualization: Biology? Chemistry? Geology?
Astronomy?
Computer graphics is here for you!
106
Future Directions and Summary 107

Ray Tracing in Real-Time: Real-time ray tracing

becoming more common.
Example: NVIDIA RTX graphics cards enabling real-time
ray tracing in games.
Virtual
Reality (VR) and Augmented Reality (AR):
Immersive experiences requiring advanced 3D
graphics.
Example: VR experiences like "Half-Life: Alyx" and AR
applications like Pokémon GO.
Future Directions and Summary 108

AI in Graphics: Enhancing graphics through

machine learning.
Example: AI upscaling technologies like NVIDIA DLSS.
Metaverse: Building interconnected virtual worlds
requiring sophisticated 3D graphics techniques.
Example: Platforms like Meta's Horizon Worlds and
Roblox.
.
Summary and Conclusion 109

Evolution:Continuous advancements improving

realism and interactivity in 3D graphics.
Impact: Critical in various industries from
entertainment to scientific visualization.
Future: Emerging technologies promise even
greater capabilities and applications
Summary and Conclusion 110

Evolution: From simple line drawings to

photorealistic images and immersive
experiences.
Impact: Significant influence on entertainment,
education, science, and many other fields.
Future: Ongoing innovations promise even more
groundbreaking developments in computer
graphics.
111
112
113
114
 115

Chapter 2: Computer Graphics Hardware

COMPUTER GRAPHICS
COURSE NUMBER: COSC3072
PREREQUISITE: COMPUTER PROGRAMMING (COSC 1012)

Compiled by: Kidane W.

Introduction 116

 Computer graphics deals with creating and

manipulating visual content using computers. Hardware
plays a crucial role in this process, translating software
instructions into visual output on the display.
 Understanding the role of hardware in computer
graphics, its current state, limitations, and ongoing
advancements.
 Equipstudents with knowledge of key hardware
components and their impact on graphics performance
and development.
117
118
Graphics Processing Unit (GPU) 119

 Function: Specialized hardware for

rendering images, animations, and video.
 Executes complex mathematical calculations
rapidly.
 Handles tasks such as shading, texturing, and pixel
manipulation.
 Advances:
 Ray Tracing: Real-time ray tracing capabilities
(e.g., NVIDIA RTX series) for realistic lighting and
reflections.
 Higher Core Counts: More cores for parallel
processing (e.g., CUDA cores in NVIDIA GPUs,
Stream Processors in AMD GPUs).
 Faster Memory: GDDR6 and GDDR6X for higher
bandwidth and faster data transfer.
Graphics Processing Unit (GPU) 120

Examples:
NVIDIARTX 30 Series (e.g., RTX 3080, RTX 3090), AMD
Radeon RX 6000 Series (e.g., RX 6800, RX 6900 XT)
Limitations:
Power consumption and heat generation.
High cost of high-end models.
Size
and compatibility with other hardware
components.
Central Processing Unit (CPU) 121

 Function:
General-purpose processing, essential for overall
system performance.
 Coordinates tasks between system components.
 Performs complex calculations and logic operations.

 Advances:
 Increased Core Counts: More cores for multitasking and parallel
processing (e.g., AMD Ryzen Threadripper).
 Higher Clock Speeds: Faster execution of instructions.
 Advanced Multi-Threading: Technologies like Intel's Hyper-Threading
and AMD's Simultaneous Multi-Threading (SMT).
 Examples:Intel Core i9 (e.g., i9-11900K), AMD Ryzen 9 (e.g.,
Ryzen 9 5900X)
CPU Vs. GPU 122

CPU Graphics processing unit (GPU)

Generalized component that handles Specialized component that excels

Function
main processing functions of a server at parallel computing
Designed for serial instruction Designed for parallel instruction
Processing
processing processing
More cores than CPUs, but less
Design Fewer, more powerful cores
powerful than CPU cores
General purpose computing High-performance computing
Best suited for
applications applications
123
Memory (RAM) 124

 Function:
Temporary storage for data currently in use, essential for
smooth operation.
 Fast access to data for the CPU and GPU.
 Supports multitasking and large applications.
 Advances:
 DDR5Memory: Higher bandwidth and capacity compared to DDR4 (Double Data
Rate 4).
 Higher Capacities: Up to 128GB and beyond for demanding applications.
 Faster Data Transfer Rates: Improved performance for real-time applications.
Types of RAM in Graphics 125

 System RAM: This is the main memory used by the CPU. It

affects the overall performance of the system, including
applications related to graphics.

 VRAM (Video RAM): This is dedicated memory on the GPU

used to store image data and textures. Modern GPUs
come with their own VRAM, which significantly enhances
graphics performance.
Storage 126
 Types:
 Hard Disk Drives (HDD): Traditional magnetic storage, larger
capacities at lower cost.
 Solid State Drives (SSD): Faster data access, lower power
consumption, more durable.
 NVMe SSDs: Non-Volatile Memory Express, much faster than
SATA SSDs.
 Advances:
 NVMe SSDs offer high-speed data transfer, reduced load
times, and increased reliability.
 Improved durability and energy efficiency.
 Larger capacities and more compact form factors.
 Limitations:
 SSDs are more expensive than HDDs.
 Limited write cycles for SSDs.
 NVMe SSDs require compatible motherboards for optimal
performance.
Display Technologies 127

 Graphics display devices are essential components

in visualizing the output from a computer or other
digital devices. Here are the primary types of
graphics display devices:
 Cathode Ray Tube (CRT) Monitors
 Liquid Crystal Display (LCD) Monitors
 Light Emitting Diode (LED) Monitors
 Organic Light Emitting Diode (OLED) Displays
 Plasma Displays
 Digital Light Processing (DLP) Projectors
 Liquid Crystal on Silicon (LCoS) Displays
Cathode Ray Tube (CRT) Monitors 128

ACRT display is a type of display device that uses one or

more electron beams to produce images.
A CRT monitor is an analog display device that uses
electron beams to create images on a phosphorescent
screen.
 CRT technology was developed in the early 20th century
and became the dominant display technology for
televisions and computer monitors until the early 2000s.
Components of a CRT Monitor 129

 Electron Gun: Generates a stream of electrons.

 Electron Beams: Three electron guns (for red,
green, and blue) that fire electrons towards
the screen.
 Phosphor Coated Screen: The inside of the
screen is coated with phosphorescent
materials that emit light when struck by
electrons.
 Deflection System: Two sets of coils
(electromagnetic or electrostatic) act as a
deflection system, bending the electron beam
horizontally and vertically to scan across the
screen in a raster pattern.
Other Display Technologies 130

 Types:
 LCD (Liquid Crystal Display): Common, energy-efficient, wide range of
sizes.
 LED (Light Emitting Diode): Enhanced brightness and contrast, thinner
designs.
 OLED (Organic LED): Superior color accuracy, contrast, and viewing
angles.
 MicroLED: Emerging technology with potential for better brightness and
energy efficiency.
 Advances:
 Higher Resolutions: 4K, 8K for detailed visuals.
 Better Color Accuracy: Wider color gamuts, HDR (High Dynamic Range).
 Higher Refresh Rates: Up to 240Hz and beyond for smoother motion.
 131
OUTLINE
I. Introduction (1/2 page)
II. Types of Modern Display Technologies (1/2 page)
III. Comparative Analysis of Display Technologies (1 and 1/2 page)
IV. Future Trends in Display Technologies (1 page)
V. Practical Applications and Industry Impact (1 page)
VI. Conclusion (1/2 page)

Assignment 1: Write five pages report

about modern Computer Graphics
Display Technologies

DUE DATE: SEPTEMBER 30, 2024

Raster Display System 132

 A raster display system is a type of computer

graphics display system that draws images onto
the screen as a series of pixels arranged in a grid
(raster).
 Concept: Displays images as an array of pixels.
 Usedin most modern displays including CRT, LCD,
and OLED.
 Converts digital signals into visual images.
Components 133

 RasterScan Display: Uses electron beams to scan across

the screen row by row (from top to bottom) to create an
image.
 Frame Buffer: A dedicated area of memory that stores
pixel values corresponding to the image being displayed.
 Controller:
Manages the interaction between the CPU,
frame buffer, and display hardware.
Basic Operation 134

1. Pixel Grid: The screen is divided into a grid of pixels

(picture elements).
2. Scan Conversion: Rasterization and Determine which
pixels should be illuminated.
3. Frame Buffer: Stores pixel values for the entire screen.
4. Refresh Process: CRT monitors use electron beams to
scan across the screen. Number of times per second the
screen is redrawn (typically 60 Hz or higher).
Advantages of Raster Displays 135

Simple Hardware: Uses standard memory and

simple electronics.
Efficient for Static Images: Well-suited for
displaying images that do not change
frequently.
Supports Real-Time Rendering: Capable of
rendering images in real-time with appropriate
hardware.
Limitations of Raster Displays 136

Resolution Limitation: Limited by the number of

pixels on the screen.
Scaling Issues: Difficulty in scaling images without
losing quality.
Aliasing: Jagged edges due to discrete pixel
representation.
Input Devices 137

 Graphics Tablets: Wacom,

Huion for precise drawing and
design.
 3D
Mice: SpaceMouse for
navigation in 3D space.
 VR Controllers: HTC Vive,
Oculus Touch for immersive
interaction.
Virtual Reality (VR) Hardware 138

 Components:
 Headsets: Oculus Rift, HTC Vive, PlayStation VR.
 Motion Trackers: Track body movements for immersive experience.
 Haptic Feedback Devices: Enhance realism through touch.
 Advances:
 Higher resolution displays for clearer visuals.
 Improved tracking accuracy for better interaction.
 Reduced latency for more immersive experiences.
Augmented Reality (AR) 139
Hardware
 Components:
 AR Glasses: Microsoft HoloLens, Magic Leap.
 Handheld Devices: Smartphones, tablets with AR capabilities.
 Spatial Sensors: Cameras, depth sensors for environmental mapping.
 Advances:
 Betterintegration with mobile devices and everyday applications.
 Improved display technology for clearer and more vibrant visuals.
 Enhanced tracking and interaction capabilities.
 Limitations:
 Fieldof View: Limited compared to VR.
 Battery Life: Power consumption limits usage time.
 User Adoption: Still in early stages, with limited consumer uptake.
Hardware Accelerators 140

 Tensor Processing Units (TPU): Optimized for machine learning

tasks.
 Field Programmable Gate Arrays (FPGA): Customizable
hardware for specific tasks.
 Function: Specialized for tasks like AI, machine learning, and
real-time rendering.
 TPUsaccelerate neural network computations.
 FPGAs offer customizable performance for various applications.
 Limitations:
 Cost: Can be expensive to develop and implement.
 Accessibility: Often require specialized knowledge to use effectively.
 Integration: May be challenging to integrate with existing systems.
Future Directions in GPU 141
Technology
 Trends:
 Integration of AI: AI-driven graphics enhancements and optimizations.
 More Efficient Ray Tracing: Improved algorithms and hardware support.
 Increased Parallelism: More cores and better parallel processing capabilities.
 Examples:
 NVIDIA Hopper: Next-generation GPU architecture.
 AMD RDNA 3: Advancements in GPU efficiency and performance.
 Challenges:
 Keeping up with Moore's Law: Balancing performance gains with
manufacturing limits.
 Managing Power Consumption: Reducing energy use while increasing
performance.
 Compatibility and Integration: Ensuring new technologies work with existing
systems.
Quantum Computing and 142
Graphics
 Potential: Exponential speedup for certain tasks, new
algorithms for graphics.
 Quantum computers could revolutionize rendering and simulation.
 Potential for solving complex problems that are currently intractable.
 Current State: Experimental, not yet practical for mainstream
graphics.
 Early-stagedevelopment with limited availability.
 Research-focused, with ongoing exploration of applications.
 Challenges:
 Development Cost: High investment in research and development.
 Stability: Ensuring reliable and consistent performance.
 Integration: Adapting existing graphics workflows to quantum systems.
Edge Computing for Graphics 143

 Concept: Processing at the data source to reduce

latency and bandwidth usage.
 Bringscomputation closer to the user, reducing reliance on
centralized servers.
 Enhances real-time capabilities for graphics-intensive applications.
 Applications: AR/VR, real-time rendering, interactive
applications.
 Improved responsiveness for immersive experiences.
 Local processing for enhanced performance and reliability.
Introduction to the 3D Graphics 144
Pipeline
The 3D graphics pipeline refers
to the sequence of stages
involved in generating a 3D
image from geometric data
(vertices) to pixels on a 2D
screen.
Introduction to the 3D Graphics 145
Pipeline

 Stages:
 Vertex Processing: Transforming 3D coordinates to 2D screen coordinates.
 Clipping: Removing parts of objects outside the view frustum.
 Rasterization: Converting vector graphics to raster images.
 Fragment Processing: Determining the color and depth of each pixel.
 Advances:
 Hardware acceleration with modern GPUs.
 Parallel processing for real-time performance.
 Advanced shading techniques for realistic effects.
146
147
The Z Buffer for Hidden Surface 148
Removal
 Function: Manages depth information to determine visible surfaces.
 Each pixel stores depth value (Z-value).
 Compares depth values to resolve visibility.
 Components:
 Depth Buffer: Stores depth information for each pixel.
 Rendering Pipeline: Integrates Z-buffering in fragment processing.
 Advances:
 Higher precision depth buffers for detailed scenes.
 Optimizations for faster depth comparisons.
 Hybrid approaches combining Z-buffer with other techniques.
Summary 149

 Key Points: Importance of GPUs, ongoing advancements, limitations,

and future trends.
 GPUs as the cornerstone of modern graphics.
 Rapid advancements in processing power, memory, and storage.
 Emerging technologies like AI, VR, AR, and quantum computing shaping
the future.
 Implications: Continuous evolution in hardware drives innovations in
computer graphics.
 Ongoing need for research and development.
 Balancing performance, cost, and energy efficiency.
 Preparing for the integration of new technologies in graphics workflows.
 150

End of Chapter 2