Introduction to Computer Graphics

About this book

David J. Eck’s Introduction to Computer Graphics connects visual ideas with programs. This guide follows the linked Version 1.4 PDF, August 2023, through nine chapters on 2D graphics, legacy OpenGL, Three.js, WebGL, advanced rendering, and WebGPU. The lasting concepts are geometry, coordinate systems, transformations, visibility, lighting, and the graphics pipeline. API examples belong to the source version. Use the text to understand architecture and consult current documentation when transferring its code into a contemporary project.

Chapter-by-chapter summaries

1. Introduction

Raster painting and structured drawing use different representations, while a 3D scene requires geometry, materials, lighting, and a camera. Hardware and software divide the rendering work, with GPUs supporting extensive parallel numerical processing. Describe a simple scene without naming an API. Separate its geometry from its appearance and the viewing choices that produce an image. This separation helps explain why the same scene can be represented in several graphics systems without changing its underlying conceptual structure.

2. Two-dimensional graphics

Pixels, coordinates, aspect ratio, colour, strokes, fills, and paths establish the drawing vocabulary. Transformations map model coordinates into views, while hierarchies allow complex objects to inherit local transformations. Rotation and translation generally do not commute. Java Graphics2D, Canvas, and SVG express related concepts differently. Build the same articulated figure in two systems and explain where its model is stored. Restore drawing state carefully so one object’s transformation does not affect later objects unintentionally.

3. OpenGL 1.1: geometry

Legacy OpenGL makes vertices, primitives, transformations, projection, and depth testing accessible. Its conceptual role remains useful even when a modern project uses shaders. Track a point through model, view, projection, and viewport coordinates. Meshes represent surfaces independently of their eventual shading. Compare overlapping objects with and without depth testing. Diagnose missing geometry by checking coordinates, camera direction, clipping, and drawing parameters systematically rather than changing unrelated settings until an image appears.

4. OpenGL 1.1: light and material

Normals, lights, materials, and viewing direction determine approximate surface illumination. Ambient, diffuse, and specular terms serve different roles and do not constitute a complete physical account of light. Texture coordinates associate image information with surfaces. Change a normal without moving its vertex and explain the illumination change. Compare material colour with a texture contribution. Understanding these interactions produces more reliable control than adjusting many parameters simultaneously until the result looks acceptable.

5. Three.js: a 3D scene graph API

Three.js organizes objects, geometry, materials, cameras, lights, and parent-child relationships. It reduces low-level setup without removing coordinate and rendering questions. Hierarchical transformations support articulated models, and animation updates state over frames. Document which coordinates are local and which are global in a small scene. Library conventions can change between versions, so distinguish the durable scene-graph model from source-era syntax. Explain what the library automates before relying on it to hide an unfamiliar stage of rendering.

6. Introduction to WebGL

Buffers, shaders, attributes, uniforms, and draw calls expose programmable graphics. Vertex shaders process geometry; fragment shaders determine contributions after rasterization. Per-vertex data differs from values shared across a draw. Start with a minimal shape and introduce one changing parameter at a time. For a blank image, inspect shader compilation, linking, bindings, and draw counts. Making each pipeline stage observable turns debugging into a reasoned investigation rather than a search through a large opaque example.

7. 3D graphics with WebGL

Matrices, geometry, lighting, and textures combine in an explicit programmable pipeline. Positions, normals, and lights must use compatible coordinate spaces. Normals may need a different transformation from positions, especially under scaling. Diagram where each quantity is computed and consumed. Add a camera and light to a basic mesh, then vary one transform to test your understanding. This chapter reveals which operations a higher-level scene library performs on the programmer’s behalf.

8. Beyond basic 3D graphics

The chapter introduces ray tracing and path tracing as routes to higher-quality rendering beyond the basic real-time pipeline. Ray tracing follows rays through scene intersections to determine visibility and model effects such as reflection and refraction. Path tracing uses sampled light paths to approximate a broader range of illumination, with sampling noise and computing time becoming important trade-offs. Compare the frame budget of an interactive scene with the much longer computation available for an offline image. Geometry, materials, textures, and lights still define the scene; the rendering method changes how their interactions are evaluated. The source presents these techniques conceptually rather than as a full implementation.

9. Introduction to WebGPU

WebGPU organizes GPU work through explicit resources, pipelines, shader programs, and command submission, including computation beyond drawing. Compare its setup and submission model with a WebGL draw. Resource formats and pipeline compatibility are meaningful constraints rather than disposable boilerplate. Because this chapter belongs to the 2023 source, verify current implementation details before deployment. The important reading goal is an architectural understanding of what must be prepared, how commands are encoded, and when the GPU executes them.

Study instructions

1. Keep a coordinate-space diagram beside each 3D example, including normals, lights, and camera transforms.
2. Implement one hierarchical scene in 2D and then 3D, explaining the representation change.
3. Change one rendering parameter at a time and predict the visible result before running it.
4. Document source-version code separately from updated API implementations.

Questions for reflection

• Why does transformation order matter?
• Which information belongs in attributes rather than uniforms?
• How can different pipeline failures produce the same blank image?

Sources and coverage

This original reading guide covers the linked edition’s main chapters, or the principal sections of its two-chapter calculus text. Consult the source for full arguments, cases, worked examples, exercises, illustrations, and references. Coverage follows Version 1.4, August 2023; the homepage may advertise later versions. Read the source edition.