Chapter 1: Introduction to Interactive Computer Graphics

Chapter objectives
By the end of this chapter, students should be able to:

Define computer graphics and distinguish static, dynamic, and interactive graphics.
Describe the major application areas of computer graphics with real examples.
Sketch and explain a high- level graphics pipeline from scene to pixels.
Explain the basic math concepts (points, vectors, coordinate spaces) used later.

Computer Graphics is the branch of Computer Science that deals with generating, manipulating,
and displaying visual content using computers. This chapter introduces the fundamental ideas,
history, applications, and the notion of interactivity that underpins modern OpenGL- based
systems.​

1.1 What Is Computer Graphics?

Definition
Computer Graphics is the science and art of creating, storing, manipulating, and displaying
visual content (images, animations, user interfaces) using computers.​

Key aspects:

 Modeling: Representing objects (2D, 3D) in a mathematical or data structure form.

 Rendering: Converting models into images (pixels) through algorithms.

 Interaction: Allowing users to control the content in real time (mouse, keyboard,
gamepad).

In the context of this course, “interactive computer graphics” means the image is not static; the
user can move the camera, change parameters, and the scene updates immediately, typically
driven by an OpenGL rendering loop.​

1.2 Core Concepts of Interactive Graphics

1.2.1 From Models to Pixels

A typical interactive graphics system follows this conceptual chain:

1. Application / Scene: Objects, lights, camera, user input.

2. Geometry: Vertices, edges, polygons describing object shapes.

3. Transformations: Mathematical operations that position and orient objects and camera.

4. Rasterization: Converting geometric primitives to pixels on a 2D display.

5. Fragment processing & shading: Computing final color for each pixel.

In modern OpenGL, most of these stages are programmable using shaders, while
the interactive part comes from repeatedly executing this pipeline every frame (e.g., 60 times per
second) and responding to input events.​
1.3 Historical Development of Computer Graphics

This section presents a short timeline of major milestones relevant to the evolution from static
images to real- time, interactive OpenGL- based graphics.​

1.3.1 History Timeline (Table)

Year/Period Milestone / Event Notes

1950s Early vector displays, Simple line drawings, no frame buffer.

oscilloscopes

1960s Ivan Sutherland’s Sketchpad First interactive graphical system, direct manipulation with a
light pen.​

1960s–70s Vector graphics terminals (DEC, Used in CAD and engineering; lines drawn directly on CRT.
others)

1970s Frame buffer displays Pixel- addressable displays enable raster graphics.

1970s–80s Gouraud & Phong shading models Foundations of modern lighting and shading.​

1980s Workstations (SGI) and early 3D Hardware acceleration for 3D graphics and window
APIs systems.

1992 OpenGL 1.0 released Portable 2D/3D rasterization API; de facto standard fo
years.​

Late 1990s Consumer GPUs (NVIDIA, ATI) Real- time 3D for games, interactive applications.

2000s Programmable pipeline (shaders) Vertex/fragment shaders give fine- grained control.​

2010s Modern OpenGL, Vulkan, DirectX Fully programmable, high- performance APIs.
11/12

2020s Real- time ray tracing on GPUs Hybrid rasterization + ray tracing in interactive applications.

Concept checkpoint – history

 Why was the transition from vector to raster displays important?

  How did frame buffers enable more complex shading and image processing?

1.4 Evolution of Graphics Systems

The evolution of computer graphics can be visualized as moving along several axes:

 From offline to real- time (hours per frame → milliseconds per frame).

 From fixed- function hardware to programmable pipelines.

 From line drawings to shaded, textured, lit 3D scenes.

1.4.1 Evolution Diagram: Hardware & APIs

1.4.2 Evolution Diagram: Software Abstraction

In this course, focus is at the API level (OpenGL) and its conceptual underpinnings: the pipeline,
buffers, transformations, and shading.​

1.5 Types of Computer Graphics

Computer graphics is often categorized along several dimensions.​

1.5.1 Static vs Dynamic vs Interactive

 Static graphics: Images do not change (e.g., printed plots, static diagrams).

 Dynamic graphics: Images change over time (animations, simulations).

 Interactive graphics: User input affects the graphics in real time (games, CAD,
visualization tools).
In this course, interactive graphics is the primary focus, typically implemented by a render loop
that continuously redraws the scene based on user input and time.

1.5.2 2D vs 3D Graphics

 2D graphics: Objects lie in a plane, coordinates typically x y . Examples: GUIs, charts,

2D games.

 3D graphics: Objects live in 3D space with coordinates x y z and need perspective,

lighting, and projection to be displayed on a 2D screen.​

1.6 Major Application Areas with Examples

Computer graphics is used in almost every industry. Below is a non- exhaustive list with concrete
examples.​

1.6.1 Entertainment and Games

 3D games (e.g., first- person shooters, racing games) using real- time rendering engines
built on OpenGL or similar APIs.

 Animated films and visual effects where offline rendering (ray tracing) is used for
photorealistic imagery.

OpenGL context: Many game engines (or older engines) use OpenGL as the rendering backend
on PC, mobile, or embedded systems.

1.6.2 User Interfaces and Desktop Systems

 Window systems (e.g., compositing desktops) use GPU acceleration for drawing
windows, transitions, and effects.

 Vector- based UI rendering (e.g., scalable icons, fonts) uses graphics primitives and
transforms.

OpenGL context: Toolkits may use OpenGL to draw widgets, text, and UI elements efficiently by
leveraging hardware acceleration.

1.6.3 Computer- Aided Design (CAD) and Engineering

  Architects and engineers use 3D CAD software to design buildings, cars, machines.

 Interactive 3D manipulation: rotate, zoom, slice models.

OpenGL context: CAD applications render accurate wireframe and shaded views of models
using OpenGL primitives, depth buffering, and transformations.

1.6.4 Scientific and Information Visualization

 Visualizing 3D datasets: medical scans, fluid simulations, climate data.

 Interactive charts, volume rendering, and 3D plots.

OpenGL context: Visualization tools map data values to visual attributes (color, size, position)
and use OpenGL for real- time exploration.

1.6.5 Virtual Reality (VR) and Augmented Reality (AR)

 VR headsets: immersive virtual environments at high frame rates.

 AR: overlaying virtual objects onto camera views.

OpenGL context: Rendering for each eye (stereo) with correct head- tracked camera positions,
using highly optimized OpenGL or similar APIs.

1.7 Components of an Interactive Graphics System

A basic interactive graphics application (e.g., using OpenGL) can be decomposed into several
components.​

1.7.1 Conceptual Architecture

  Application logic: Game rules, user interface, simulation.

 Graphics API (OpenGL): Platform- independent commands to specify geometry, send

data to GPU, and configure the pipeline.

 Driver & GPU: Executes transformations, rasterization, shading.

 Display: Shows the frame buffer output.

1.7.2 Real- Time Render Loop (Algorithm)

A typical interactive OpenGL program repeats the following loop each frame:

Algorithm 1.1: Basic Render Loop

1. Initialize OpenGL context (window, GL functions).

2. Load/define geometry (vertices, indices, textures).

3. While the application is running:

3.1. Process user input (keyboard, mouse, gamepad).
3.2. Update scene state (camera, object positions, animations).
3.3. Clear frame buffer (color and depth buffers).
3.4. Set camera and object transformations (model, view, projection matrices).
 3.5. Bind shaders, textures, and vertex arrays.
3.6. Issue draw calls (e.g., glDrawArrays, glDrawElements).
3.7. Swap buffers to display the rendered image.

This loop is the heart of interactivity: each iteration renders a new frame based on the latest state.

1.8 Basic Mathematics Behind Graphics

Even in an introductory chapter, it is important to remind students of the mathematical

foundations used throughout the course.​

1.8.1 Points and Vectors

 A point in 2D: P=(x,y).

 A point in 3D: P=(x,y,z).

 A vector represents direction and magnitude: v=(vx ,vy ,vz ).

Operations:

 Vector addition: a+b=(ax +bx ,ay +by ,az+bz).

 Scalar multiplication: kv=(kvx ,kvy ,kvz).

 Dot product: a⋅b=ax bx +ay by +az bz .

 Cross product: a×b yields a vector orthogonal to both a and b.

These concepts are fundamental for later topics such as lighting, normals, and camera orientation.

1.8.2 Coordinate Systems (Preview)

Graphics uses different coordinate spaces:

 Object (model) space: Coordinates defined in the object’s local frame.

 World space: All objects positioned into a single global frame.

 View (camera) space: Coordinates relative to the camera.

 Clip / NDC / Window space: Intermediate transformations leading to screen coordinates.

Detailed derivations of the transformations between these spaces will be developed in later
chapters.

1.9 Key Definitions and Terminology

 Pixel: The smallest addressable element on a raster display, representing a color at a

discrete location.

 Resolution: Number of pixels horizontally × vertically, e.g., 1920×1080.

 Frame buffer: Memory region containing the color values to be displayed; can also
include depth and stencil buffers.

 Primitive: Basic geometric entity such as points, lines, triangles used by OpenGL to
construct scenes.​

 Rasterization: Process of converting geometric primitives into fragments (potential pixels)

on a discrete grid (the screen).

 Fragment: A candidate pixel with associated attributes (color, depth, texture coordinates)
produced during rasterization.

 Shader: A small program running on the GPU that controls a specific pipeline stage
(vertex shader, fragment shader, etc.).​

1.10 Typical Interactive OpenGL Example

To connect theory and practice, consider a simple example: drawing a rotating colored triangle
controlled by the user.

1.10.1 Conceptual Steps

1. Define geometry: Three vertices with positions and colors.

2. Create buffers: Upload vertex data to GPU buffers (VBOs).

3. Compile shaders: Vertex shader transforms positions; fragment shader computes final
color.

4. Render loop:
  Clear screen.

 Compute rotation angle based on time.

 Update transformation matrix.

 Draw the triangle.

 Swap buffers.

5. Input handling: Allow the user to change rotation speed or color via keyboard.

In later chapters, this kind of example will be written in actual OpenGL code, but here the goal is
to understand the conceptual structure of an interactive graphics program.

1.11 Common Conceptual Checkpoints / Exam- Style Questions

Students should be able to answer questions like:

1. Definitions & concepts

 Define “interactive computer graphics”.

 Distinguish between static, dynamic, and interactive graphics.

 Explain the difference between modeling and rendering.

2. History & evolution

 Describe two important milestones in the history of computer graphics and their
impact.

 Why was the introduction of frame buffers a significant step?

3. Pipeline & components

 Draw and label a simplified graphics pipeline showing stages from application to
display.

 Explain the role of rasterization in the pipeline.

 What is a frame buffer and what information does it typically hold?

 4. OpenGL context

 Briefly describe the relationship between the application, OpenGL, GPU, and
display.

 What is a “render loop” and why is it essential for interactivity?

5. Mathematics & coordinates (intro level)

 Write the formula for the dot product of two 3D vectors and interpret its
geometric meaning.

 Explain the difference between a point and a vector in 3D graphics.

End- of- chapter questions

1. Define “interactive computer graphics” and contrast it with static graphics.

2. List at least four application areas of computer graphics and give one concrete example
for each.

3. Draw a block diagram of a simple graphics pipeline and explain the role of each block.

4. Distinguish between 2D and 3D graphics, giving one example use case for each.

5. Explain the difference between a point and a vector in 3D and why vectors are important
in graphics.

Concise summary

This chapter introduces what computer graphics is, where it is used, and how an interactive
system conceptually turns 3D scenes into pixels on a display. By mastering definitions, pipeline
stages, and basic math, students can answer questions about types of graphics, application areas,
and the overall flow of data in a graphics system, directly meeting the introductory course
objectives.