COMPUTER GRAPHICS

Course Material
_______________________________________________
UNIT TOPICS COVERED:
Topic 1: Displays
Topic 2: Programming Virtual Environments
Topic 3: Devices

Designed for Undergraduate Computer Science Students

1
Introduction to Computer Graphics
Computer Graphics is the field of study concerned with creating, manipulating, and
displaying visual content using computers. From the icons on your phone screen to
blockbuster animated movies, from medical imaging to video games — computer
graphics is everywhere in our daily lives.
This course material covers three foundational topics that every student of computer
graphics must understand:
• Displays – How images are shown on screens and the technology behind it
• Programming Virtual Environments – How we build 3D worlds and scenes in
software
• Devices – The hardware used to interact with and create computer graphics

Real-Life Connection: Think of your smartphone screen, your TV, a game console, and a
graphics tablet — by the end of this material, you will understand the technology behind all
of these.

2
TOPIC 1: Displays
A display (also called a monitor or screen) is an output device that visually presents
information. It is the primary way a computer communicates visual data to the user.
Understanding displays helps us understand how computer-generated images actually
reach our eyes.

1.1 What Is a Display?

A display converts electronic signals from a computer into light that forms visible
images. Every pixel (picture element) you see on a screen is the result of carefully
controlled light emission.

Everyday Example: The screen you are reading this on — whether a phone, laptop, or
monitor — is a display. Each tiny dot of color you see is called a pixel.

1.2 Key Display Concepts

1.2.1 Resolution
Resolution refers to the number of pixels a display can show, typically expressed as
width x height (e.g., 1920 x 1080). The higher the resolution, the sharper and more
detailed the image.

Resolution Name Pixel Count Common Usage

HD (720p) 1280 x 720 Basic TVs, older monitors
Full HD (1080p) 1920 x 1080 Most monitors and TVs
4K (UHD) 3840 x 2160 High-end TVs, professional monitors
8K 7680 x 4320 Ultra-premium displays

1.2.2 Refresh Rate

The refresh rate is how many times per second the display updates the image,
measured in Hertz (Hz). A standard monitor refreshes 60 times per second (60Hz).
Gaming monitors may go up to 144Hz or 240Hz, making motion appear smoother.

Analogy: Think of a flip-book animation. A refresh rate is like how fast you flip the pages —
the faster you flip, the smoother the animation looks.

1.2.3 Pixel and Color Depth

3
Each pixel on a screen can display a range of colors. Color depth (also called bit depth)
tells us how many colors a pixel can produce. A 24-bit display can show over 16 million
colors (8 bits each for Red, Green, and Blue).

1.2.4 Aspect Ratio

Aspect ratio is the ratio of width to height of the display. Common ratios include 16:9
(widescreen), 4:3 (older standard), and 21:9 (ultrawide). Aspect ratio affects how
content appears on screen.

1.3 Types of Display Technology

1.3.1 CRT – Cathode Ray Tube
CRT was the oldest and most common display technology before the 2000s. It works by
firing electrons from a 'gun' at a phosphor-coated screen. When electrons hit the
phosphor, it glows, creating the image.
• Advantages: Excellent color accuracy, fast response time, no strict viewing angle
limits
• Disadvantages: Very bulky and heavy, high power consumption, emits radiation
• Modern use: Mostly obsolete; used in retro/vintage computing setups

Did You Know?: Old television sets and early computer monitors were all CRT-based. The
bulge at the back of old TVs is the electron gun housing.

1.3.2 LCD – Liquid Crystal Display

LCD is the dominant display technology today. It uses a backlight (usually LED) that
shines through a layer of liquid crystals. The crystals can be aligned or twisted by
applying electric current, controlling how much light passes through. Color filters then
add color to each pixel.
• Advantages: Thin and lightweight, energy efficient, affordable
• Disadvantages: Limited viewing angles (in some types), slower response than
OLED
• Common in: Laptops, desktop monitors, TVs, smartphones

Subtypes of LCD: TN (Twisted Nematic) panels are fast but have poor color. IPS (In-Plane
Switching) panels have excellent color and wide viewing angles. VA (Vertical Alignment)
panels have the best contrast.

1.3.3 LED Display

4
LED displays are technically a type of LCD — the term 'LED' refers to the backlighting
method (Light Emitting Diode instead of fluorescent). However, some modern displays
use mini-LEDs or micro-LEDs directly as pixels, offering much better brightness and
contrast.

1.3.4 OLED – Organic Light Emitting Diode

In OLED displays, each pixel produces its own light. There is no backlight. When a pixel
needs to be black, it simply turns off completely, resulting in perfect blacks and infinite
contrast ratio.
• Advantages: Perfect blacks, vibrant colors, ultra-thin form factor, flexible (can be
bent)
• Disadvantages: More expensive, risk of burn-in (permanent image retention)
• Common in: Premium smartphones, high-end TVs, smartwatches

1.3.5 Plasma Displays

Plasma displays use small cells of ionized gas (plasma) to produce light. They were
popular for large-screen TVs in the 2000s but have been largely replaced by LED and
OLED technology.

1.3.6 Projectors and Virtual/Augmented Reality Displays

Projectors create large images by projecting light onto a surface. In VR (Virtual Reality)
headsets like Meta Quest or PlayStation VR, small high-resolution screens are placed in
front of the eyes, creating an immersive 3D experience. AR (Augmented Reality)
devices overlay graphics on the real world.

1.4 How Raster Displays Work

Most modern displays are raster displays, meaning the image is made of a grid of
pixels. The computer stores the image in a frame buffer — a section of memory where
each location stores the color of a specific pixel.
The display controller reads the frame buffer and sends the pixel colors to the screen
row by row, from top to bottom. This process repeats at the refresh rate (e.g., 60 times
per second).

Analogy: Imagine a giant grid of tiny colored light bulbs. The frame buffer is like a blueprint
that tells each bulb what color to glow. The display controller is the electrician who reads the
blueprint and turns on the bulbs accordingly.

5
1.5 Vector Displays (Historical)
Unlike raster displays, early vector displays drew images as lines and curves by moving
an electron beam directly to specific coordinates. These were used in early arcade
games (like Asteroids) and CAD systems. They offered sharp lines but couldn't display
complex filled images easily.

1.6 Summary Table: Display Technologies

Technology How It Works Strengths Weaknesses Examples

CRT Electron beam Accurate Bulky, heavy Old TVs, vintage
+ phosphor color, fast monitors
LCD Backlight + Thin, Limited Laptops, monitors
liquid crystals affordable contrast
LED LCD with LED Bright, efficient Not true Most modern TVs
backlight blacks
OLED Self-emitting Perfect blacks, Expensive, iPhones, OLED TVs
pixels vibrant burn-in
Plasma Ionized gas Wide viewing Heavy, Older large TVs
cells angle outdated

1.7 Review Questions – Displays

1. What does 'resolution' mean in the context of displays? Give an example.
2. Compare CRT and OLED displays. What is the main difference in how they
produce light?
3. Explain what a frame buffer is and its role in raster displays.
4. Why do gaming monitors benefit from a higher refresh rate?
5. What is the difference between an LCD and an OLED display?

6
TOPIC 2: Programming Virtual Environments
A virtual environment in computer graphics refers to a computer-generated 3D (or 2D)
space that can simulate real or imagined worlds. Programming virtual environments is
the process of writing software that builds, manages, and renders these spaces. This is
the core of video game development, flight simulators, architectural visualization, and
virtual reality.

2.1 What Is a Virtual Environment?

A virtual environment is a simulated digital space made up of objects, lighting, textures,
and cameras. Unlike a photograph, it is interactive and dynamic — things can move,
change, and respond to user input.

Real-Life Example: When you play a video game, you are inside a virtual environment.
The buildings, characters, and sky are all programmed objects placed in a 3D coordinate
space.

2.2 Coordinate Systems

Everything in a virtual environment is positioned using a coordinate system. In 3D
graphics, we use X, Y, and Z axes:
• X-axis: Left and right
• Y-axis: Up and down
• Z-axis: Forward and backward (depth)
Every object in the scene has a position (x, y, z), a rotation (how it is turned), and a
scale (how big it is). Together, these form what is called a Transform.

Analogy: Think of it like giving an address in 3D space. Instead of a street and city, you use
X, Y, and Z coordinates to say exactly where something is located in the virtual world.

2.3 The Scene Graph

A scene graph is a data structure used to organize all the objects in a virtual
environment. It is a hierarchical tree where parent objects affect their children. For
example, a car (parent) contains wheels (children) — when the car moves, all wheels
move with it.
Scene graphs make it easy to manage complex scenes with many objects. Most
modern game engines (Unity, Unreal, Godot) use scene graphs.

7
2.4 The Rendering Pipeline
The rendering pipeline is the step-by-step process that transforms 3D scene data into a
2D image displayed on screen. Understanding this pipeline is fundamental to graphics
programming.

Stage What Happens Simple Explanation

1. Application Game logic, physics, The game engine prepares the scene
input
2. Geometry Vertices processed, Objects are positioned in 3D space
transformed
3. 3D triangles converted Like projecting a 3D shape onto a flat screen
Rasterization to 2D pixels
4. Colors and textures Each pixel gets its final color
Fragment/Pixel applied
5. Output Final image sent to The image is ready to display
frame buffer

2.5 Key Components of a Virtual Environment

2.5.1 Meshes and Geometry
All 3D objects in a virtual environment are made of meshes — collections of triangles
(or polygons) that define the shape of an object. A simple cube has 6 faces, each made
of 2 triangles = 12 triangles total. A detailed character model can have hundreds of
thousands of triangles.
• Vertex: A single point in 3D space
• Edge: A line connecting two vertices
• Face/Polygon: A flat surface bounded by edges (usually triangles)

2.5.2 Textures and Materials

A texture is a 2D image that is 'wrapped' around a 3D mesh to give it surface detail (like
color, roughness, or bumps). A material defines how an object interacts with light — is it
shiny like metal, rough like wood, or transparent like glass?

Analogy: A mesh is like a plain white sculpture. A texture is like the paint or wallpaper you
apply to it. A material tells you whether the surface looks wet, dusty, reflective, or matte.

2.5.3 Lighting

8
Lighting in virtual environments mimics how real-world light behaves. Without light,
objects appear flat and unrealistic. Common light types in 3D graphics include:
• Point Light: Like a light bulb — emits light in all directions from one point
• Directional Light: Like the sun — parallel rays from a fixed direction, no specific
position
• Spot Light: Like a flashlight or stage spotlight — a cone of light in one direction
• Ambient Light: Background light that softly illuminates everything uniformly

2.5.4 Cameras
A camera in a virtual environment defines the viewpoint from which the scene is
rendered. Just like a physical camera, it has properties like field of view (how wide the
view is), near/far clipping planes (what range of distances is visible), and
position/rotation.
• Perspective Camera: Objects farther away appear smaller — mimics human
vision (used in games/film)
• Orthographic Camera: No perspective distortion — used in architectural drawings
and 2D games

2.5.5 Shaders
Shaders are small programs that run on the GPU (Graphics Processing Unit) and
determine the final appearance of surfaces. They calculate how light interacts with
materials, produce special effects like water reflections, fire, and shadows.
• Vertex Shader: Processes each vertex (position) of a mesh
• Fragment Shader (Pixel Shader): Determines the color of each pixel

Real-Life Example: The glowing neon effects in cyberpunk-style games, the water
reflections in ocean games, the cel-shaded cartoon look in games like Zelda: Breath of the
Wild — all of these are achieved through custom shaders.

2.6 Transformations in 3D Space

To move and manipulate objects in a virtual environment, we apply mathematical
transformations:
• Translation: Moving an object from one position to another
• Rotation: Turning an object around an axis
• Scaling: Making an object larger or smaller
These transformations are represented using matrices (4x4 matrices in 3D graphics).
The combined result is called the Model Matrix for each object.

9
 Analogy: Think of transformations like instructions to a delivery robot: 'Go 5 steps forward
(translation), turn 90 degrees right (rotation), then become twice as large (scaling).'

2.7 Projection: From 3D to 2D

Since screens are flat (2D), we must project our 3D scene onto a 2D surface. This is
done using a projection matrix. The most common type is perspective projection, which
makes far objects appear smaller — just like in real life.
The full transformation pipeline for each vertex is:
Object Space → World Space → Camera Space → Clip Space → Screen Space

Key Point: This is exactly how your eyes work: the 3D world around you is projected onto
the 2D surface of your retina. Computer graphics mimics this biological process
mathematically.

2.8 Popular Graphics APIs and Engines

A Graphics API (Application Programming Interface) allows programmers to give
instructions to the GPU. Common APIs include:
• OpenGL: A widely-used, cross-platform API for rendering 2D and 3D graphics.
Great for learning.
• DirectX (Direct3D): Microsoft's graphics API, used heavily in Windows games.
• Vulkan: A modern, low-level, high-performance graphics API.
• Metal: Apple's graphics API for iOS and macOS.
• WebGL: OpenGL for web browsers — allows 3D graphics in web pages.

Popular game engines that simplify virtual environment programming:

• Unity: Widely used for 2D and 3D game development, beginner-friendly
• Unreal Engine: Industry-standard for AAA games and film visual effects
• Godot: Open-source, lightweight, excellent for learning
• Blender (BGE): Free 3D creation suite with real-time rendering capabilities

2.9 Basic OpenGL Example (Conceptual)

Here is a conceptual walkthrough of what programming a simple virtual environment in
OpenGL looks like:
Step 1: Create a window and OpenGL context
Step 2: Define geometry (vertices of triangles)
Step 3: Upload geometry to GPU memory (VAO/VBO)
Step 4: Write vertex and fragment shaders (GLSL)

10
Step 5: In the render loop — clear screen, draw, swap buffers

Study Note: GLSL (OpenGL Shading Language) is the language used to write shaders. It
looks similar to C. Most beginner courses start with OpenGL because it teaches the
underlying concepts that all modern engines use.

2.10 Physics and Collision in Virtual Environments

A virtual environment often needs to simulate physical behavior — gravity, collisions,
rigid body dynamics. This is handled by a physics engine, which runs alongside the
graphics engine.
• Collision Detection: Determines when two objects touch or intersect
• Rigid Body Physics: Objects that don't deform (bouncing balls, falling boxes)
• Soft Body Physics: Objects that deform (cloth simulation, jelly)
• Particle Systems: Many small objects simulated together (fire, smoke, rain,
explosions)

2.11 Review Questions – Programming Virtual Environments

6. What is a coordinate system and why is it important in virtual environments?
7. Describe the five stages of the rendering pipeline in your own words.
8. What is the difference between a mesh and a texture?
9. Name three types of lights used in 3D graphics and explain each one.
10. What is a shader and what are the two most common types?
11. Why do we need to project a 3D scene onto a 2D screen? What type of
projection mimics human vision?

11
TOPIC 3: Devices
In computer graphics, 'devices' refers to both the hardware that generates and displays
graphics (output devices) and the hardware that allows users to interact with graphic
systems (input devices). Understanding these devices helps us design better interactive
experiences.

3.1 Categories of Devices

Devices in computer graphics fall into two main categories:
• Input Devices: Allow users to provide data or commands to a computer graphics
system
• Output Devices: Display or produce the results of computer graphics processing

3.2 Output Devices

3.2.1 Monitors and Displays
As discussed in Topic 1, monitors are the primary output devices for computer graphics.
They range from standard desktop monitors to high-resolution curved displays and VR
headsets.

3.2.2 Printers
Printers produce physical (hardcopy) output of graphics. Types relevant to computer
graphics include:
• Inkjet Printers: Spray tiny droplets of ink. Used for photo printing and general
documents. Consumer-level quality.
• Laser Printers: Use a laser beam and toner (powder). Faster for text-heavy
documents.
• Wide-Format/Plotter Printers: Print on large paper rolls. Used in architecture,
engineering, and map printing.
• 3D Printers: A revolutionary output device that produces three-dimensional
physical objects from digital 3D models, layer by layer.

3.2.3 Projectors
Projectors enlarge and project images onto surfaces (screens, walls). Types include:
• DLP (Digital Light Processing): Uses tiny mirrors. Sharp images, good for
presentations.
• LCD Projectors: Use liquid crystal panels. Good color reproduction.
• Laser Projectors: Use lasers instead of a lamp. Very bright, long lifespan.

12
3.2.4 VR/AR Headsets
These wearable output devices immerse users in virtual or augmented environments.
Examples: Meta Quest, HTC Vive, Microsoft HoloLens, Apple Vision Pro. They contain
two small high-resolution displays, one per eye, to create stereoscopic 3D vision.

3.3 Input Devices

3.3.1 Mouse
The standard pointing device for desktop computers. A computer graphics application
registers mouse position, movement, clicks, and scrolling. In graphics software (like
Photoshop or CAD programs), the mouse is the primary tool for creating and editing
visual content.

3.3.2 Keyboard
While not strictly a graphics device, the keyboard is essential for triggering actions,
entering parameters, shortcuts, and navigation commands in graphics applications. 3D
software uses keyboard shortcuts extensively (e.g., pressing 'G' to grab/move an object
in Blender).

3.3.3 Graphics Tablet (Digitizer)

A graphics tablet is a flat input device with a special stylus (pen). The user draws
directly on the tablet surface, and the computer captures precise position, pressure, and
tilt data. This is far more natural for artists than using a mouse.
• Pressure Sensitivity: The harder you press, the thicker the brush stroke (just like
a real pen)
• Tilt Detection: Some tablets detect the angle of the stylus for realistic shading
• Popular Brands: Wacom Intuos, Wacom Cintiq (with built-in screen), Huion, XP-
Pen
Real-Life Use: Professional digital artists, animators, and architects use graphics tablets
daily. The Cintiq series lets you draw directly on the screen — like paper but digital.

3.3.4 Touchscreen
Touchscreens allow users to interact directly with the display surface. They combine
input and output into one device. Used in tablets, smartphones, and interactive kiosks.
• Capacitive Touchscreens: Detect electrical changes from a finger (most
smartphones). Accurate and responsive.

13
 • Resistive Touchscreens: Detect physical pressure. Can be used with any object
(finger or stylus). Used in ATMs, industrial screens.

3.3.5 Scanners
Scanners convert physical (paper) images or objects into digital form. Flatbed scanners
are the most common type for graphics work — useful for digitizing hand-drawn artwork
or photos for editing.

3.3.6 Digital Cameras

Digital cameras and smartphone cameras are increasingly important input devices for
computer graphics. They capture photographs and videos that can be used as textures,
reference images, or source material in graphics projects. Some workflows use
photogrammetry — taking hundreds of photos to reconstruct a 3D model.

3.3.7 3D Scanners
3D scanners capture the shape of real-world objects and create digital 3D models. They
use structured light, laser beams, or time-of-flight sensors to measure depth. Used in:
• Medical imaging (MRI, CT scan outputs)
• Archaeology and heritage preservation
• Game and film production (scanning actors' faces)
• Industrial manufacturing quality control

3.3.8 Motion Capture Devices

Motion capture (mocap) systems record the movement of people or objects and
translate that movement into digital animation data. Actors wear special suits with
markers or sensors, and cameras or sensors track their every movement.

Real-Life Example: The fluid movement of characters in games like FIFA, and the
performance of Gollum in The Lord of the Rings films, were all created using motion capture
technology.

3.3.9 VR Controllers and Tracking Devices

VR systems use specialized hand controllers, body trackers, and room-scale tracking
sensors (like Valve Index base stations) to capture user position and movement in 3D
space. These are essential input devices for immersive virtual environments.

3.3.10 Joysticks and Game Controllers

14
Used primarily for gaming and flight/driving simulation software. They provide analog
input (varying degrees of movement) which allows precise control in 3D environments.
Flight simulators use joysticks, throttles, and rudder pedals to simulate real aircraft
controls.

3.3.11 Eye Tracking Devices

Eye trackers monitor where the user is looking on screen. Used in:
• VR headsets to render detail only where the user looks (foveated rendering)
• Accessibility tools for users who cannot use hands
• Usability and UX research

3.4 The GPU – The Heart of Computer Graphics

The Graphics Processing Unit (GPU) is the most important piece of hardware
specifically designed for computer graphics. Unlike the CPU (Central Processing Unit)
which has a few powerful cores, the GPU has thousands of smaller cores designed to
perform many calculations simultaneously — perfect for processing millions of pixels at
once.

Feature CPU GPU

Core count 4–64 cores (powerful) Thousands of cores (simpler)
Best for General-purpose tasks Parallel graphics processing
Example Intel Core i9, AMD Ryzen NVIDIA RTX 4090, AMD RX
7900
Role in graphics Runs game logic, physics Renders pixels, shaders

Important Concept: Modern GPUs are programmable. This is what allows us to write
custom shaders. When you write a shader program, it runs on the GPU — on thousands of
cores simultaneously — processing all pixels or vertices at once.

3.5 Graphics Memory (VRAM)

VRAM (Video RAM) is dedicated memory on the GPU used to store textures, frame
buffers, and geometry data. The more VRAM a GPU has, the more complex scenes it
can render. A GPU with 8GB VRAM can handle much larger textures and more
complex scenes than one with 4GB VRAM.

15
3.6 Haptic Devices
Haptic devices provide tactile (touch) feedback to the user. In computer graphics and
virtual environments, they make the experience more immersive by simulating the
sensation of touching objects. Examples include:
• Vibrating game controllers (the rumble when you crash in a racing game)
• Force feedback joysticks for flight simulators
• Haptic gloves for VR applications
• Medical simulation devices used in surgical training

3.7 Summary: Devices in Computer Graphics

Device Type Function Example Use

Monitor/Display Output Shows rendered Viewing 3D models
images
Printer/Plotter Output Physical Printing architectural plans
hardcopy output
3D Printer Output Creates physical Product prototyping
3D objects
VR Headset Input + Immersive 3D VR gaming, training
Output viewing
Mouse Input Point and click Photo editing
interaction
Graphics Tablet Input Precise stylus Digital illustration
drawing
Touchscreen Input + Direct touch Smartphone apps
Output interaction
3D Scanner Input Digitizes real 3D Game asset creation
objects
Motion Capture Input Records body Game animation
movement
GPU Processing Renders graphics All real-time graphics
Haptic Device Input + Touch feedback VR simulations
Output

3.8 Review Questions – Devices

16
12. What is the difference between an input device and an output device? Give two
examples of each.
13. Why is a graphics tablet preferred over a mouse for digital art creation?
14. Explain what VRAM is and why it matters for computer graphics.
15. Compare the CPU and GPU. Why is the GPU better suited for rendering
graphics?
16. What is motion capture and where is it used?
17. Describe a haptic device and give one real-world example of its use.

17
Course Summary and Connections
These three topics — Displays, Programming Virtual Environments, and Devices — are
deeply interconnected. Understanding how they relate to each other gives a complete
picture of how computer graphics systems work.

Topic Key Concepts How It Connects

Displays Pixels, resolution, refresh The display is where virtual environments
rate, LCD, OLED, CRT, are seen; the frame buffer bridges GPU
raster, frame buffer output to screen
Virtual Scene graph, rendering Virtual environments are rendered by the
Environments pipeline, shaders, cameras, GPU and output to displays; input devices
lighting, transformations control the camera and objects
Devices GPU, graphics tablet, VR Devices are the hardware that runs,
headset, 3D scanner, motion inputs into, and outputs the virtual
capture, haptics environment

The Complete Graphics Pipeline (End-to-End)

Here is how all three topics come together in a complete computer graphics system:
18. A user uses input devices (mouse, keyboard, graphics tablet, motion capture) to
interact with or build a virtual environment.
19. The virtual environment (scene graph, meshes, textures, lights, cameras) is
processed by graphics programming code.
20. The GPU executes shaders and the rendering pipeline to produce pixel color
data.
21. The pixel data is written to the frame buffer.
22. The display (LCD, OLED, VR headset) reads the frame buffer and shows the
final image at the set refresh rate.

Big Picture: Computer graphics is the science and art of turning mathematical data into
visual experiences. Every image you've ever seen on a screen — from the first pixel art
games to today's photorealistic movies — is the result of these exact processes working
together.

Recommended Further Study

• OpenGL Tutorial: [Link] — Free, comprehensive beginner OpenGL
guide
• [Link]: [Link] — JavaScript 3D graphics library for the web
• Unity Learn: [Link] — Free interactive game development tutorials

18
• Blender: [Link] — Free 3D creation suite; great for learning 3D concepts
• Book: 'Computer Graphics: Principles and Practice' by Hughes et al.
• Book: 'Real-Time Rendering' by Akenine-Möller et al.

— End of Course Material —

19