1. Computer Graphics Foundations and Systems

Introduction and Context

Computer graphics is the study and practice of generating, manipulating, storing, transmitting, and displaying visual information using computers. It includes far more than drawing lines and images. A graphics system combines mathematical models, algorithms, hardware, software interfaces, human interaction, and perceptual principles to create visual representations of data or simulated environments.

Graphics has become a foundational technology in computer-aided design, scientific visualization, medical imaging, games, virtual and augmented reality, geographical information systems, simulation, digital media, education, and user-interface design. At postgraduate level, it is important to understand not only how an image is produced, but also why a particular representation, display technology, coordinate system, or graphics API is selected.

A useful distinction is between computer graphics and image processing. Computer graphics generally begins with objects, mathematical descriptions, or data and produces images. Image processing begins with an image and applies operations such as enhancement, restoration, segmentation, or compression. The two fields overlap substantially, especially in computer vision, visualization, and multimedia systems.

Learning Objectives

After completing this chapter, the learner should be able to:

1. Define computer graphics and distinguish related terminology.

2. Explain major historical developments in graphics systems.

3. Compare raster and vector representations.

4. Describe display technologies, color depth, and frame buffers.

5. Interpret common coordinate systems used in graphics pipelines.

6. Explain the role and design philosophy of graphics APIs.

7. Describe the architecture of an interactive graphics system.

8. Select suitable graphics representations and display technologies for practical applications.

9. Evaluate technical, usability, accessibility, and ethical issues in graphics systems.

The Scope and Vocabulary of Computer Graphics

A pixel, or picture element, is the smallest addressable sample in a raster image or display. A pixel has a position and one or more values describing color or intensity. Resolution refers to the number of addressable samples, commonly expressed as width by height, such as 1920 × 1080. Resolution is not the same as physical size: two screens may have the same resolution but different pixel densities.

DPI (dots per inch) is commonly used for physical printing, whereas PPI (pixels per inch) describes display or image sampling density. Aspect ratio is the ratio of width to height. If an image is displayed with an incorrect aspect ratio, circles may appear elliptical and geometric relationships may be distorted.

A graphics system may be described through several related activities:

• Modeling defines geometric objects, surfaces, materials, lights, or data.
• Rendering converts a scene or representation into an image.
• Display presents the image through a monitor, projector, head-mounted display, or printer.
• Interaction allows users or external devices to modify the scene or viewpoint.
• Animation produces a sequence of images whose changes create the perception of motion.
• Visualization maps abstract or measured data to visual forms that support interpretation.

The term rendering is broad. In a real-time application, rendering must meet a time constraint, often to preserve interactive responsiveness. In offline production rendering, visual quality may be prioritized over immediate response. This distinction affects algorithms, hardware, and system architecture.

A Brief Historical Development

Early computer displays were frequently based on vector or random-scan techniques. A cathode-ray tube beam was directed along the paths of lines to be displayed. Such systems were effective for line drawings but less suitable for filled regions and complex images. Interactive systems such as Sketchpad demonstrated that a computer could support direct manipulation of graphical objects and helped establish computer-aided design as a major application area.

The development of raster-scan displays changed the field. Instead of tracing only visible lines, the display scanned a rectangular grid of pixels, usually from top to bottom. Images could therefore contain filled areas, shaded surfaces, text, and photographs. The availability of semiconductor memory made it practical to store a complete image in a frame buffer and refresh the display repeatedly.

During the 1970s and 1980s, graphics workstations introduced specialized processors, window systems, geometric modeling tools, and increasingly capable display hardware. Standardized interfaces made it possible for applications to use graphics functions without depending entirely on a particular device. The growth of personal computers and graphical user interfaces then brought graphics into everyday computing.

The 1990s and 2000s saw rapid development in three-dimensional acceleration, texture mapping, programmable shading, and consumer graphics processing units (GPUs). GPUs evolved from fixed-function devices into highly parallel processors capable of general-purpose computation. Modern systems support real-time simulation, physically based rendering, immersive displays, machine-learning visualization, and large-scale scientific analysis.

This history illustrates an important principle: progress in computer graphics has been driven by the interaction of algorithms, memory capacity, processing power, display technology, and application requirements. No single component explains the development of the field.

Raster and Vector Representations

Raster Graphics

A raster image represents a scene as a rectangular array of samples. Each sample stores color, intensity, transparency, or other information. Raster graphics are natural for photographs, scanned documents, video, painting, and rendered images. Their quality depends on resolution, sampling density, color representation, and filtering.

A major limitation is that raster images are resolution-dependent. Enlarging a small raster image requires interpolation and may produce blurred or block-like boundaries. At high magnification, individual pixels become visible. Raster data can also require substantial storage, although compression techniques reduce the cost.

Vector Graphics

A vector image represents shapes using mathematical descriptions such as points, line segments, curves, polygons, and text outlines. A circle may be stored through a center and radius rather than as a fixed collection of colored pixels. Vector representations are resolution-independent in the sense that the shapes can be rasterized at different output resolutions.

Vector graphics are well suited to logos, diagrams, maps, typography, engineering drawings, and user-interface icons. They support geometric transformations and can produce sharp boundaries at many scales. However, complex natural scenes are not always efficiently represented as vectors; a photograph would require an enormous collection of shapes or a different representation.

The distinction is not absolute. A vector scene must eventually be rasterized for display on a conventional screen, and a raster image may be embedded in a vector document. The choice concerns the most useful internal representation for editing, storage, transmission, and rendering.

Display Technologies and Image Formation

A display converts electrical or digital information into visible light. Traditional cathode-ray tube displays used an electron beam to excite phosphors. Although historically important, CRTs have largely been replaced by flat-panel technologies.

Liquid crystal displays use a backlight and liquid-crystal cells that modulate light. Light-emitting diode displays generally refer to LCD panels using LED backlighting, while organic light-emitting diode displays use emissive organic elements in which individual pixels produce light. OLED systems can provide high contrast and thin form factors, whereas LCD and OLED technologies involve different trade-offs concerning brightness, power, viewing angle, persistence, cost, and longevity.

Other display categories include projection systems, electronic paper, stereoscopic displays, and head-mounted displays. A head-mounted display must address not only resolution and brightness but also field of view, latency, tracking accuracy, binocular alignment, and motion comfort.

Important display characteristics include:

• Refresh rate: the number of times the display is updated per second.
• Response time: how quickly a pixel changes state.
• Latency: the delay between an input or scene change and the visible result.
• Contrast ratio: the relationship between the brightest and darkest reproducible levels.
• Viewing angle: the range over which image quality remains acceptable.
• Color gamut: the range of colors a device can reproduce.

A high refresh rate does not by itself guarantee a responsive system. Input processing, application computation, rendering, buffering, display scanning, and human perception all contribute to end-to-end latency.

Color Representation and Color Depth

A display commonly represents a color using red, green, and blue components. This is an additive model: combining the components at high intensity produces light close to white. In an 8-bit-per-channel RGB image, each channel has 256 possible values, producing 24 bits per pixel and theoretically 16,777,216 color combinations. An additional 8-bit alpha channel may represent opacity, making a 32-bit pixel format.

Color depth is the number of bits used to encode the color of a pixel. Greater depth permits more levels and reduces visible quantization, especially in smooth gradients. It does not automatically guarantee greater visual quality because quality also depends on calibration, gamut, source data, compression, viewing conditions, and the display itself.

Color models serve different purposes. RGB is convenient for display hardware. CMYK is associated with subtractive printing. HSV and HSL separate hue and lightness or saturation in ways that can be convenient for user interfaces and color selection, although they are not perceptually uniform. CIE-based spaces and perceptual models are useful when numerical differences should better reflect perceived differences.

Accessibility requires more than selecting attractive colors. Information should not depend solely on color, because users may have color-vision deficiencies or view the display under poor conditions. Sufficient contrast, labels, patterns, shape differences, and alternative encodings improve communication.

The Frame Buffer and Display Pipeline

A frame buffer is a memory area containing the pixel values used to generate a displayed image. In a simple RGB system, each location corresponds to the color of a screen pixel. The display controller reads the buffer in a prescribed order and sends signals to the display device.

The memory required for an uncompressed frame buffer can be estimated as:

Memory = width × height × bits per pixel / 8.

For example, a 1920 × 1080 image with 32 bits per pixel requires approximately 8.29 MB of storage for one frame, ignoring alignment and additional buffers. Interactive systems may use a depth buffer, stencil buffer, accumulation data, and multiple color buffers in addition to the primary frame buffer.

Double buffering separates a visible front buffer from a back buffer being rendered. When rendering is complete, the buffers are exchanged. This prevents users from seeing partially updated images and reduces tearing. Tearing occurs when a display scan reads portions of two different frames. Synchronization techniques, including vertical synchronization and adaptive refresh mechanisms, help coordinate rendering with display timing, although they involve latency and performance trade-offs.

A depth buffer stores depth values used to decide which surfaces are visible at each pixel. A stencil buffer stores per-pixel control values that can restrict rendering operations. These buffers illustrate how a graphics system stores not only color but also intermediate information needed for visibility and compositing.

Coordinate Systems and Transformations

Graphics applications use several coordinate systems because different stages of representation have different purposes.

Object or model coordinates describe a geometric object relative to its own origin. World coordinates place multiple objects in a common scene. View or camera coordinates express the scene relative to the observer. Clip coordinates are produced after applying a projection transformation and are used for visibility decisions. Normalized device coordinates provide a standardized intermediate range. Finally, screen or window coordinates identify pixels or positions in the output viewport.

Transformations connect these systems. Translation changes position, rotation changes orientation, and scaling changes size. More general affine transformations combine these operations. Homogeneous coordinates represent three-dimensional points using four components and allow translations to be expressed through matrix multiplication. A typical transformation chain can be written conceptually as:

screen position = viewport transformation × projection transformation × view transformation × model transformation × object position.

The order matters because matrix multiplication is generally non-commutative. A rotation followed by a translation does not generally produce the same result as a translation followed by a rotation.

A parallel projection preserves parallel lines and is useful in engineering drawings and technical visualization. A perspective projection causes distant objects to appear smaller, better approximating human visual experience and camera imaging. Choosing a projection is therefore a representational decision, not merely a programming detail.

Coordinate conventions differ among systems. Some use a right-handed coordinate system and others a left-handed one; screen origins may appear at the lower-left or upper-left; and depth ranges may vary. Many graphics errors arise from inconsistent assumptions rather than incorrect mathematics.

Graphics APIs as Abstraction Layers

A graphics application rarely communicates directly with every display device. A graphics API provides standardized operations for defining geometry, transformations, textures, buffers, shaders, and rendering state. Examples include OpenGL, Vulkan, Direct3D, Metal, WebGPU, and higher-level frameworks built on them.

An API is not the same as a graphics library in the narrow sense. It also establishes an abstraction model and a contract between application software and implementation. A low-level API may expose explicit resource allocation, synchronization, command submission, and pipeline configuration. A higher-level framework may simplify development by managing these details.

Graphics APIs commonly provide:

• resource creation for buffers, textures, and render targets;
• commands for drawing primitives;
• transformation and camera support through application code or utility libraries;
• programmable shader stages;
• depth testing, blending, rasterization, and texture sampling;
• synchronization and presentation mechanisms;
• access to GPU computation in suitable APIs.

Portability, performance, debugging, driver support, memory management, and learning cost must be considered when selecting an API. A low-level API can provide control and predictable performance but places more responsibility on the developer. A high-level engine can accelerate production but may constrain specialized behavior or hide important costs.

Architecture of an Interactive Graphics System

An interactive graphics system contains a user, input devices, application logic, a scene or data model, a rendering subsystem, and an output device. The system operates as a feedback loop rather than a one-way image generator.

The user provides input through a keyboard, mouse, touch surface, game controller, stylus, camera, motion tracker, or voice interface. An event-handling layer interprets these inputs. The application updates the model, camera, or interaction state. The rendering subsystem transforms the updated representation into an image. The display presents the result, which affects the user’s next action.

A typical pipeline includes the following conceptual stages:

1. Input acquisition: capture events and device measurements.

2. Application update: modify scene state, simulation variables, or user-interface state.

3. Geometry processing: transform vertices and prepare primitives.

4. Clipping and rasterization: determine visible portions and convert primitives into fragments.

5. Fragment processing: apply textures, lighting, blending, and depth tests.

6. Buffer operations and presentation: combine results and present a completed frame.

Modern GPUs execute many operations in parallel. The CPU commonly manages application logic, resource preparation, and command submission, while the GPU performs large-scale geometric and per-pixel work. This division is not fixed; modern architectures support increasingly flexible cooperation between CPU, GPU, and specialized accelerators.

Interactive quality involves more than frame rate. The system must provide stable timing, accurate input interpretation, predictable behavior, visual clarity, and acceptable latency. A visually complex application that responds slowly may be less effective than a simpler application with immediate feedback.

Applications and Professional Decisions

In computer-aided engineering, vector and parametric models preserve geometric precision and support measurement, simulation, and manufacturing workflows. In medical visualization, raster slices, volumetric data, transfer functions, segmentation, and interaction techniques must be combined while respecting clinical interpretation and privacy. In geographic information systems, coordinate reference systems and map projections are central because visual position must correspond meaningfully to locations on Earth.

Games and simulations require a balance among visual fidelity, frame time, memory, interaction, and hardware diversity. Scientific visualization requires appropriate mappings from data to color, shape, opacity, and spatial position; a visually impressive image can still misrepresent data if the scale or color map is poorly chosen. User-interface design emphasizes legibility, feedback, consistency, accessibility, and low cognitive load.

Professional decisions should therefore begin with requirements: data type, output medium, interaction needs, acceptable latency, target hardware, precision, security, accessibility, and maintenance. Selecting a representation or API solely because it is popular can create avoidable technical debt.

Illustrative Case Study: A Real-Time Urban Traffic Visualizer

Background

A city transportation laboratory plans an interactive system showing traffic flow, incidents, road capacity, and predicted congestion. Analysts will use large wall displays, while mobile users will access a simplified view.

Situation and Problem

The source data arrives from sensors and public reports. The system must update frequently, support zooming and filtering, distinguish traffic states clearly, and remain usable for people with color-vision deficiencies. The team initially proposes a photorealistic three-dimensional city model for every user.

Analysis

The primary task is analytical rather than visual entertainment. A detailed model may consume excessive memory and rendering time without improving traffic interpretation. Road networks are naturally represented as vector geometry, while satellite imagery and elevation data are raster layers. Different display sizes and network conditions require multiple levels of detail.

Approach and Solution

The team uses vector road segments with attributes for speed, capacity, and incidents. Raster imagery is loaded as an optional background layer. A projected coordinate system appropriate to the service region is selected, and transformations convert geographic data into a common world coordinate system. A GPU-based renderer draws road segments with width and patterns representing capacity and incident status. Color is supplemented by labels and line patterns. A double-buffered presentation path prevents partial updates. The mobile client receives simplified geometry and lower-resolution imagery, while the wall display receives richer data.

Outcome

The resulting system provides faster interaction and clearer analytical cues than the original photorealistic proposal. Users can inspect individual roads, compare time intervals, and identify incidents without relying on color alone. The architecture also permits future addition of predictive layers without redesigning the entire display system.

Learning Points

The case demonstrates that graphics design must follow the user’s task. Raster and vector data can coexist; coordinate-system consistency is essential; display and interaction constraints influence representation; and accessibility is a systems requirement rather than a final cosmetic adjustment.

Challenges, Risks, and Common Mistakes

One frequent mistake is confusing resolution with image quality. Increasing resolution cannot recover detail that was never captured. Another is ignoring color management, causing colors to vary across displays or between screen and print. Developers also commonly mix coordinate conventions, apply transformations in the wrong order, or neglect depth precision.

Performance problems may result from excessive data transfer between CPU and GPU, unnecessary state changes, overdraw, inefficient memory layouts, or poorly selected levels of detail. In interactive applications, optimizing only average frame rate can conceal severe timing variation and input latency.

Graphics systems also face security risks. Maliciously crafted media, untrusted shaders, driver vulnerabilities, and excessive resource requests can affect availability or system integrity. Data visualizations introduce epistemic risks: misleading scales, truncated axes, inappropriate projections, and nonuniform color maps can cause incorrect conclusions.

Ethical, Professional, and Emerging Considerations

Graphics professionals are responsible for accurate representation, accessible design, protection of personal data, and honest communication of uncertainty. Medical, geographic, financial, and scientific visualizations can influence high-impact decisions. A visualization should distinguish measured values from estimates and avoid visual techniques that exaggerate differences.

Current development is shaped by real-time ray tracing, neural rendering, cloud and remote rendering, immersive and spatial computing, physically based materials, GPU acceleration for machine learning, and web-oriented graphics APIs. These technologies expand capability but introduce costs involving energy use, hardware requirements, privacy, interoperability, and reproducibility. Artificial intelligence can assist with scene generation, denoising, upscaling, and content creation, but generated visual content requires validation, provenance, and attention to bias.

Best practice is to maintain a clear separation among data, scene representation, rendering policy, and user-interface logic; document coordinate conventions and color assumptions; test on representative devices; measure latency as well as throughput; provide accessible alternatives; validate visualizations against the underlying data; and select APIs according to requirements rather than fashion.

Chapter Summary

Computer graphics is a systems discipline concerned with representing, processing, displaying, and interacting with visual information. Its foundations include raster and vector representations, display technologies, color depth, frame buffers, coordinate systems, transformations, graphics APIs, and interactive rendering pipelines. Raster images are effective for sampled visual data, whereas vector representations preserve geometric structure and scalability. Displays differ in refresh rate, latency, contrast, gamut, and physical technology. Frame buffers and associated depth and stencil buffers support image presentation and visibility operations.

Graphics applications move information through object, world, view, projection, normalized, and screen coordinate systems. APIs abstract hardware while exposing different levels of control. An interactive graphics system forms a feedback loop involving input, application state, rendering, and display. Effective professional practice requires attention to performance, accessibility, data accuracy, security, ethics, and emerging technologies.

Key Terms

Pixel: The smallest addressable sample in a raster image or display.

Resolution: The number of addressable samples, usually expressed as width by height.

Raster graphics: Images represented as a rectangular array of samples.

Vector graphics: Images represented through mathematical geometric descriptions.

Rendering: The process of generating an image from a scene, model, or data representation.

Frame buffer: Memory containing pixel data for a displayed or rendered image.

Color depth: The number of bits used to encode a pixel’s color information.

Alpha channel: A component commonly representing opacity or transparency.

Refresh rate: The number of display updates per second.

Latency: The delay between an action or state change and its visible result.

Double buffering: Use of separate visible and rendering buffers to improve presentation.

Depth buffer: Per-pixel storage used to determine surface visibility.

Coordinate system: A defined reference framework for locating points.

Projection: A transformation that maps three-dimensional positions to a viewable representation.

Graphics API: A software interface for controlling graphics resources and rendering operations.

Rasterization: Conversion of geometric primitives into fragments or pixels.

Shader: A programmable operation executed during a graphics-processing stage.

GPU: A massively parallel processor specialized for graphics and related computation.

Color gamut: The range of colors reproducible by a device or color system.

Visualization: The representation of data in visual form to support understanding or analysis.

Review Questions

Short Answer Questions

1. Distinguish computer graphics from image processing.

2. What is the function of a frame buffer?

3. Define color depth and explain its effect on gradients.

4. Why are vector graphics suitable for logos and engineering drawings?

5. What is the purpose of a depth buffer?

Long Answer Questions

1. Explain the historical transition from random-scan displays to modern GPU-based raster systems.

2. Compare raster and vector graphics with respect to representation, scalability, storage, and applications.

3. Explain the major characteristics of modern display technologies and their effect on interactive graphics.

4. Describe the coordinate transformations from object space to screen space.

5. Explain the architecture and operation of an interactive graphics system.

Analytical / Application Questions

1. A museum must display high-resolution photographs and scalable explanatory diagrams on both a large screen and a mobile device. Recommend representations and justify your decision.

2. A visualization appears correct on one monitor but has poor contrast and misleading colors on another. Analyze possible causes and propose a professional testing strategy.

3. An immersive application has a high average frame rate but users report discomfort and delayed responses. Identify likely system factors and recommend measurements or improvements.

22. Multiple Choice Questions with Answers

Question 1

A photograph is enlarged substantially and its edges become block-like. Which explanation is most appropriate?

A. The image is a raster representation whose samples are resolution-dependent

B. The image is a vector representation with too many control points

C. The frame buffer has increased the color gamut

D. The display is using a parallel projection

Correct Answer: A. The image is a raster representation whose samples are resolution-dependent

Question 2

Why is double buffering used in an interactive graphics system?

A. To increase the number of colors in each pixel

B. To prevent partially rendered frames from being displayed

C. To convert vector data into geographic coordinates

D. To eliminate the need for a depth buffer

Correct Answer: B. To prevent partially rendered frames from being displayed

Question 3

A 1920 × 1080 frame uses 32 bits per pixel. Approximately how much memory is needed for one uncompressed frame?

A. 0.26 MB

B. 2.07 MB

C. 8.29 MB

D. 33.18 MB

Correct Answer: C. 8.29 MB

Question 4

Which coordinate system normally places several independently modeled objects into one common scene?

A. Object coordinates

B. World coordinates

C. Screen coordinates

D. Clip coordinates

Correct Answer: B. World coordinates

Question 5

Which statement best describes a perspective projection?

A. It preserves the apparent size of all objects regardless of distance

B. It causes distant objects to appear smaller

C. It can represent only two-dimensional line drawings

D. It removes the need for coordinate transformations

Correct Answer: B. It causes distant objects to appear smaller

Question 6

A road-traffic visualization uses red and green alone to communicate status. What is the principal design concern?

A. The frame buffer cannot store RGB values

B. Color depth is necessarily limited to two bits

C. Some users may not distinguish the statuses, so redundant cues are needed

D. Vector geometry cannot be displayed using colors

Correct Answer: C. Some users may not distinguish the statuses, so redundant cues are needed

Question 7

Which component primarily determines whether a rendered fragment is hidden behind another surface?

A. Alpha channel

B. Depth buffer

C. Color gamut

D. Viewport transform

Correct Answer: B. Depth buffer

Question 8

What is a major trade-off of a low-level graphics API?

A. It always produces lower image quality than a high-level API

B. It provides more control but increases developer responsibility

C. It cannot use GPU hardware

D. It supports only vector graphics

Correct Answer: B. It provides more control but increases developer responsibility

Question 9

A system has a high average frame rate but noticeable input delay. Which conclusion is most justified?

A. Average frame rate alone does not measure end-to-end latency

B. The display must have infinite color depth

C. The application cannot be interactive

D. The scene must be represented entirely as vectors

Correct Answer: A. Average frame rate alone does not measure end-to-end latency

Question 10

Which choice best supports accurate scientific visualization?

A. Use dramatic colors even when they distort numerical differences

B. Hide uncertainty to make the image easier to interpret

C. Validate visual mappings and distinguish measured values from estimates

D. Use the highest possible resolution regardless of task

Correct Answer: C. Validate visual mappings and distinguish measured values from estimates