You are previewing Introduction to Computer Graphics.
O'Reilly logo
Introduction to Computer Graphics

Book Description

Teach Your Students How to Create a Graphics Application

Introduction to Computer Graphics: A Practical Learning Approach guides students in developing their own interactive graphics application. The authors show step by step how to implement computer graphics concepts and theory using the EnvyMyCar (NVMC) framework as a consistent example throughout the text. They use the WebGL graphics API to develop NVMC, a simple, interactive car racing game.

Each chapter focuses on a particular computer graphics aspect, such as 3D modeling and lighting. The authors help students understand how to handle 3D geometric transformations, texturing, complex lighting effects, and more. This practical approach leads students to draw the elements and effects needed to ultimately create a visually pleasing car racing game. The code is available at www.envymycarbook.com

Table of Contents

  1. Preliminaries
  2. Dedication
  3. Preface
  4. Chapter 1: What Computer Graphics Is
    1. 1.1 Application Domains and Areas of Computer Graphics
      1. 1.1.1 Application Domains
      2. 1.1.2 Areas of Computer Graphics
    2. 1.2 Color and Images
      1. 1.2.1 The Human Visual System (HVS)
      2. 1.2.2 Color Space
        1. 1.2.2.1 CIE XYZ
        2. 1.2.2.2 Device-Dependent and Device-Independent Color Space
        3. 1.2.2.3 HSL and HSV
        4. 1.2.2.4 CIELab
      3. 1.2.3 Illuminant
      4. 1.2.4 Gamma
      5. 1.2.5 Image Representation
        1. 1.2.5.1 Vector Images
        2. 1.2.5.2 Raster Images
    3. 1.3 Algorithms to Create a Raster Image from a 3D Scene
      1. 1.3.1 Ray Tracing
      2. 1.3.2 Rasterization-Based Pipeline
      3. 1.3.3 Ray Tracing vs Rasterization-Based Pipeline
        1. 1.3.3.1 Ray Tracing Is Better
        2. 1.3.3.2 Rasterization Is Better
      1. Figure 1.1
      2. Figure 1.2
      3. Figure 1.3
      4. Figure 1.4
      5. Figure 1.5
      6. Figure 1.6
      7. Figure 1.7
      8. Figure 1.8
      9. Figure 1.9
      10. Figure 1.10
      11. Figure 1.11
      12. Figure 1.12
      1. Listings 1.1
      2. Listings 1.2
  5. Chapter 2: The First Steps
    1. 2.1 The Application Programming Interface
    2. 2.2 The WebGL Rasterization-Based Pipeline
    3. 2.3 Programming the Rendering Pipeline: Your First Rendering
    4. 2.4 WebGL Supporting Libraries
    5. 2.5 Meet NVMC
      1. 2.5.1 The Framework
      2. 2.5.2 The Class NVMC to Represent the World
      3. 2.5.3 A Very Basic Client
      4. 2.5.4 Code Organization
      1. Figure 2.1
      2. Figure 2.2
      3. Figure 2.3
      4. Figure 2.4
      5. Figure 2.5
      6. Figure 2.6
      7. Figure 2.7
      1. Listings 2.1
      2. Listings 2.2
      3. Listings 2.3
      4. Listings 2.4
      5. Listings 2.5
      6. Listings 2.6
      7. Listings 2.7
      8. Listings 2.8
      9. Listings 2.9
      10. Listings 2.10
      11. Listings 2.11
      12. Listings 2.12
      13. Listings 2.13
      14. Listings 2.14
      15. Listings 2.15
  6. Chapter 3: How a 3D Model Is Represented
    1. 3.1 Introduction
      1. 3.1.1 Digitalization of the Real World
      2. 3.1.2 Modeling
      3. 3.1.3 Procedural Modeling
      4. 3.1.4 Simulation
    2. 3.2 Polygon Meshes
      1. 3.2.1 Fans and Strips
      2. 3.2.2 Manifoldness
      3. 3.2.3 Orientation
      4. 3.2.4 Advantages and Disadvantages
    3. 3.3 Implicit Surfaces
      1. 3.3.1 Advantages and Disadvantages
    4. 3.4 Parametric Surfaces
      1. 3.4.1 Parametric Curve
      2. 3.4.2 Bézier Curves
        1. 3.4.2.1 Cubic Bézier Curve
      3. 3.4.3 B-Spline Curves
      4. 3.4.4 From Parametric Curves to Parametric Surfaces
      5. 3.4.5 Bézier Patches
      6. 3.4.6 NURBS Surfaces
      7. 3.4.7 Advantages and Disadvantages
    5. 3.5 Voxels
      1. 3.5.1 Rendering Voxels
      2. 3.5.2 Advantages and Disadvantages
    6. 3.6 Constructive Solid Geometry (CSG)
      1. 3.6.1 Advantages and Disadvantages
    7. 3.7 Subdivision Surfaces
      1. 3.7.1 Chaikin’s Algorithm
      2. 3.7.2 The 4-Point Algorithm
      3. 3.7.3 Subdivision Methods for Surfaces
      4. 3.7.4 Classification
        1. 3.7.4.1 Triangular or Quadrilateral
        2. 3.7.4.2 Primal or Dual
        3. 3.7.4.3 Approximation vs Interpolation
        4. 3.7.4.4 Smoothness
      5. 3.7.5 Subdivision Schemes
        1. 3.7.5.1 Loop Scheme
        2. 3.7.5.2 Modified Butterfly Scheme
      6. 3.7.6 Advantages and Disadvantages
    8. 3.8 Data Structures for Polygon Meshes
      1. 3.8.1 Indexed Data Structure
      2. 3.8.2 Winged-Edge
      3. 3.8.3 Half-Edge
    9. 3.9 The First Code: Making and Showing Simple Primitives
      1. 3.9.1 The Cube
      2. 3.9.2 Cone
      3. 3.9.3 Cylinder
    10. 3.10 Self-Exercises
      1. 3.10.1 General
      1. Figure 3.1
      2. Figure 3.2
      3. Figure 3.3
      4. Figure 3.4
      5. Figure 3.5
      6. Figure 3.6
      7. Figure 3.7
      8. Figure 3.8
      9. Figure 3.9
      10. Figure 3.10
      11. Figure 3.11
      12. Figure 3.12
      13. Figure 3.13
      14. Figure 3.14
      15. Figure 3.15
      16. Figure 3.16
      17. Figure 3.17
      18. Figure 3.18
      19. Figure 3.19
      20. Figure 3.20
      21. Figure 3.21
      22. Figure 3.22
      23. Figure 3.23
      24. Figure 3.24
      25. Figure 3.25
      26. Figure 3.26
      27. Figure 3.27
      28. Figure 3.28
      1. Listings 3.1
      2. Listings 3.2
      3. Listings 3.3
  7. Chapter 4: Geometric Transformations
    1. 4.1 Geometric Entities
    2. 4.2 Basic Geometric Transformations
      1. 4.2.1 Translation
      2. 4.2.2 Scaling
      3. 4.2.3 Rotation
      4. 4.2.4 Expressing Transformation with Matrix Notation
    3. 4.3 Affine Transformations
      1. 4.3.1 Composition of Geometric Transformations
      2. 4.3.2 Rotation and Scaling about a Generic Point
      3. 4.3.3 Shearing
      4. 4.3.4 Inverse Transformations and Commutative Properties
    4. 4.4 Frames
      1. 4.4.1 General Frames and Affine Transformations
      2. 4.4.2 Hierarchies of Frames
      3. 4.4.3 The Third Dimension
    5. 4.5 Rotations in Three Dimensions
      1. 4.5.1 Axis–Angle Rotation
        1. 4.5.1.1 Building Orthogonal 3D Frames from a Single Axis
        2. 4.5.1.2 Axis–Angle Rotations without Building the 3DFrame
      2. 4.5.2 Euler Angles Rotations
      3. 4.5.3 Rotations with Quaternions
    6. 4.6 Viewing Transformations
      1. 4.6.1 Placing the View Reference Frame
      2. 4.6.2 Projections
        1. 4.6.2.1 Perspective Projection
        2. 4.6.2.2 Perspective Division
        3. 4.6.2.3 Orthographic Projection
      3. 4.6.3 Viewing Volume
        1. 4.6.3.1 Canonical Viewing Volume
      4. 4.6.4 From Normalized Device Coordinates to Window Coordinates
        1. 4.6.4.1 Preserving Aspect Ratio
        2. 4.6.4.2 Depth Value
      5. 4.6.5 Summing Up
    7. 4.7 Transformations in the Pipeline
    8. 4.8 Upgrade Your Client: Our First 3D Client
      1. 4.8.1 Assembling the Tree and the Car
      2. 4.8.2 Positioning the Trees and the Cars
      3. 4.8.3 Viewing the Scene
    9. 4.9 The Code
    10. 4.10 Handling the Transformations Matrices with a Matrix Stack
      1. 4.10.1 Upgrade Your Client: Add the View from above and behind
    11. 4.11 Manipulating the View and the Objects
      1. 4.11.1 Controlling the View with Keyboard and Mouse
      2. 4.11.2 Upgrade Your Client: Add the Photographer View
      3. 4.11.3 Manipulating the Scene with Keyboard and Mouse: the Virtual Trackball
    12. 4.12 Upgrade Your Client: Create the Observer Camera
    13. 4.13 Self-Exercises
      1. 4.13.1 General
      2. 4.13.2 Client Related
      1. Figure 4.1
      2. Figure 4.2
      3. Figure 4.3
      4. Figure 4.4
      5. Figure 4.5
      6. Figure 4.6
      7. Figure 4.7
      8. Figure 4.8
      9. Figure 4.9
      10. Figure 4.10
      11. Figure 4.11
      12. Figure 4.12
      13. Figure 4.13
      14. Figure 4.14
      15. Figure 4.15
      16. Figure 4.16
      17. Figure 4.17
      18. Figure 4.18
      19. Figure 4.19
      20. Figure 4.20
      21. Figure 4.21
      22. Figure 4.22
      23. Figure 4.23
      24. Figure 4.24
      25. Figure 4.25
      26. Figure 4.26
      27. Figure 4.27
      28. Figure 4.28
      29. Figure 4.29
      30. Figure 4.30
      31. Figure 4.31
      32. Figure 4.32
      33. Figure 4.33
      1. Listings 4.1
      2. Listings 4.2
      3. Listings 4.3
      4. Listings 4.4
      5. Listings 4.5
      6. Listings 4.6
  8. Chapter 5: Turning Vertices into Pixels
    1. 5.1 Rasterization
      1. 5.1.1 Lines
      2. 5.1.2 Polygons (Triangles)
        1. 5.1.2.1 General Polygons
        2. 5.1.2.2 Triangles
      3. 5.1.3 Attribute Interpolation: Barycentric Coordinates
      4. 5.1.4 Concluding Remarks
    2. 5.2 Hidden Surface Removal
      1. 5.2.1 Depth Sort
      2. 5.2.2 Scanline
      3. 5.2.3 z-Buffer
      4. 5.2.4 z-Buffer Precision and z-Fighting
    3. 5.3 From Fragments to Pixels
      1. 5.3.1 Discard Tests
      2. 5.3.2 Blending
        1. 5.3.2.1 Blending for Transparent Surfaces
      3. 5.3.3 Aliasing and Antialiasing
      4. 5.3.4 Upgrade Your Client: View from Driver Perspective
    4. 5.4 Clipping
      1. 5.4.1 Clipping Segments
      2. 5.4.2 Clipping Polygons
    5. 5.5 Culling
      1. 5.5.1 Back-Face Culling
      2. 5.5.2 Frustum Culling
      3. 5.5.3 Occlusion Culling
      1. Figure 5.1
      2. Figure 5.2
      3. Figure 5.3
      4. Figure 5.4
      5. Figure 5.5
      6. Figure 5.6
      7. Figure 5.7
      8. Figure 5.8
      9. Figure 5.9
      10. Figure 5.10
      11. Figure 5.11
      12. Figure 5.12
      13. Figure 5.13
      14. Figure 5.14
      15. Figure 5.15
      16. Figure 5.16
      17. Figure 5.17
      18. Figure 5.18
      19. Figure 5.19
      20. Figure 5.20
      21. Figure 5.21
      22. Figure 5.22
      23. Figure 5.23
      24. Figure 5.24
      1. Listings 5.1
      2. Listings 5.2
      3. Listings 5.3
      4. Listings 5.4
      5. Listings 5.5
  9. Chapter 6: Lighting and Shading
    1. 6.1 Light and Matter Interaction
      1. 6.1.1 Ray Optics Basics
        1. 6.1.1.1 Diffuse Reflection
        2. 6.1.1.2 Specular Reflection
        3. 6.1.1.3 Refraction
    2. 6.2 Radiometry in a Nutshell
    3. 6.3 Reflectance and BRDF
    4. 6.4 The Rendering Equation
    5. 6.5 Evaluate the Rendering Equation
    6. 6.6 Computing the Surface Normal
      1. 6.6.1 Crease Angle
      2. 6.6.2 Transforming the Surface Normal
    7. 6.7 Light Source Types
      1. 6.7.1 Directional Lights
      2. 6.7.2 Upgrade Your Client: Add the Sun
        1. 6.7.2.1 Adding the Surface Normal
        2. 6.7.2.2 Loading and Shading a 3D Model
      3. 6.7.3 Point Lights
      4. 6.7.4 Upgrade Your Client: Add the Street Lamps
      5. 6.7.5 Spotlights
      6. 6.7.6 Area Lights
      7. 6.7.7 Upgrade Your Client: Add the Car’s Headlights and Lights in the Tunnel
    8. 6.8 Phong Illumination Model
      1. 6.8.1 Overview and Motivation
      2. 6.8.2 Diffuse Component
      3. 6.8.3 Specular Component
      4. 6.8.4 Ambient Component
      5. 6.8.5 The Complete Model
    9. 6.9 Shading Techniques
      1. 6.9.1 Flat and Gouraud Shading
      2. 6.9.2 Phong Shading
      3. 6.9.3 Upgrade Your Client: Use Phong Lighting
    10. 6.10 Advanced Reflection Models
      1. 6.10.1 Cook-Torrance Model
      2. 6.10.2 Oren-Nayar Model
      3. 6.10.3 Minnaert Model
    11. 6.11 Self-Exercises
      1. 6.11.1 General
      2. 6.11.2 Client Related
      1. Figure 6.1
      2. Figure 6.2
      3. Figure 6.3
      4. Figure 6.4
      5. Figure 6.5
      6. Figure 6.6
      7. Figure 6.7
      8. Figure 6.8
      9. Figure 6.9
      10. Figure 6.10
      11. Figure 6.11
      12. Figure 6.12
      13. Figure 6.13
      14. Figure 6.14
      15. Figure 6.15
      16. Figure 6.16
      17. Figure 6.17
      18. Figure 6.18
      19. Figure 6.19
      20. Figure 6.20
      21. Figure 6.21
      22. Figure 6.22
      23. Figure 6.23
      24. Figure 6.24
      1. Listings 6.1
      2. Listings 6.2
      3. Listings 6.3
      4. Listings 6.4
      5. Listings 6.5
      6. Listings 6.6
      7. Listings 6.7
      8. Listings 6.8
      9. Listings 6.9
      10. Listings 6.10
      11. Listings 6.11
      12. Listings 6.12
      13. Listings 6.13
  10. Chapter 7: Texturing
    1. 7.1 Introduction: Do We Need Texture Mapping?
    2. 7.2 Basic Concepts
      1. 7.2.1 Texturing in the Pipeline
    3. 7.3 Texture Filtering: from per-Fragment Texture Coordinates to per-Fragment Color
      1. 7.3.1 Magnification
      2. 7.3.2 Minification with Mipmapping
    4. 7.4 Perspective Correct Interpolation: From per-Vertex to per-Fragment Texture Coordinates
    5. 7.5 Upgrade Your Client: Add Textures to the Terrain, Street and Building
      1. 7.5.1 Accessing Textures from the Shader Program
    6. 7.6 Upgrade Your Client: Add the Rear Mirror
      1. 7.6.1 Rendering to Texture (RTT)
    7. 7.7 Texture Coordinates Generation and Environment Mapping
      1. 7.7.1 Sphere Mapping
        1. 7.7.1.1 Computation of Texture Coordinates
        2. 7.7.1.2 Limitations
      2. 7.7.2 Cube Mapping
      3. 7.7.3 Upgrade Your Client: Add a Skybox for the Horizon
      4. 7.7.4 Upgrade Your Client: Add Reflections to the Car
        1. 7.7.4.1 Computing the Cubemap on-the-fly for More Accurate Reflections
      5. 7.7.5 Projective Texture Mapping
    8. 7.8 Texture Mapping for Adding Detail to Geometry
      1. 7.8.1 Displacement Mapping
      2. 7.8.2 Normal Mapping
        1. 7.8.2.1 Object Space Normal Mapping
      3. 7.8.3 Upgrade Your Client: Add the Asphalt
      4. 7.8.4 Tangent Space Normal Mapping
        1. 7.8.4.1 Computing the Tangent Frame for Triangulated Meshes
    9. 7.9 Notes on Mesh Parametrization
      1. 7.9.1 Seams
      2. 7.9.2 Quality of a Parametrization
    10. 7.10 3D Textures and Their Use
    11. 7.11 Self-Exercises
      1. 7.11.1 General
      2. 7.11.2 Client
      1. Figure 7.1
      2. Figure 7.2
      3. Figure 7.3
      4. Figure 7.4
      5. Figure 7.5
      6. Figure 7.6
      7. Figure 7.7
      8. Figure 7.8
      9. Figure 7.9
      10. Figure 7.10
      11. Figure 7.11
      12. Figure 7.12
      13. Figure 7.13
      14. Figure 7.14
      15. Figure 7.15
      16. Figure 7.16
      17. Figure 7.17
      18. Figure 7.18
      19. Figure 7.19
      20. Figure 7.20
      21. Figure 7.21
      22. Figure 7.22
      23. Figure 7.23
      24. Figure 7.24
      25. Figure 7.25
      26. Figure 7.26
      27. Figure 7.27
      28. Figure 7.28
      29. Figure 7.29
      1. Listings 7.1
      2. Listings 7.2
      3. Listings 7.3
      4. Listings 7.4
      5. Listings 7.5
      6. Listings 7.6
      7. Listings 7.7
      8. Listings 7.8
      9. Listings 7.9
      10. Listings 7.10
  11. Chapter 8: Shadows
    1. 8.1 The Shadow Phenomenon
    2. 8.2 Shadow Mapping
      1. 8.2.1 Modeling Light Sources
        1. 8.2.1.1 Directional Light
        2. 8.2.1.2 Point Light
        3. 8.2.1.3 Spotlights
    3. 8.3 Upgrade Your Client: Add Shadows
      1. 8.3.1 Encoding the Depth Value in an RGBA Texture
    4. 8.4 Shadow Mapping Artifacts and Limitations
      1. 8.4.1 Limited Numerical Precision: Surface Acne
        1. 8.4.1.1 Avoid Acne in Closed Objects
      2. 8.4.2 Limited Shadow Map Resolution: Aliasing
        1. 8.4.2.1 Percentage Closer Filtering (PCF)
    5. 8.5 Shadow Volumes
      1. 8.5.1 Constructing the Shadow Volumes
      2. 8.5.2 The Algorithm
    6. 8.6 Self-Exercises
      1. 8.6.1 General
      2. 8.6.2 Client Related
      1. Figure 8.1
      2. Figure 8.2
      3. Figure 8.3
      4. Figure 8.4
      5. Figure 8.5
      6. Figure 8.6
      7. Figure 8.7
      8. Figure 8.8
      9. Figure 8.9
      10. Figure 8.10
      1. Listings 8.1
      2. Listings 8.2
      3. Listings 8.3
      4. Listings 8.4
  12. Chapter 9: Image-Based Impostors
    1. 9.1 Sprites
    2. 9.2 Billboarding
      1. 9.2.1 Static Billboards
      2. 9.2.2 Screen-Aligned Billboards
      3. 9.2.3 Upgrade Your Client: Add Fixed-Screen Gadgets
      4. 9.2.4 Upgrade Your Client: Adding Lens Flare Effects
        1. 9.2.4.1 Occlusion Query
      5. 9.2.5 Axis-Aligned Billboards
        1. 9.2.5.1 Upgrade Your Client: Better Trees
      6. 9.2.6 On-the-fly Billboarding
      7. 9.2.7 Spherical Billboards
      8. 9.2.8 Billboard Cloud
        1. 9.2.8.1 Upgrade Your Client: Even Better Trees
    3. 9.3 Ray-Traced Impostors
    4. 9.4 Self-Exercises
      1. 9.4.1 General
      2. 9.4.2 Client Related
      1. Figure 9.1
      2. Figure 9.2
      3. Figure 9.3
      4. Figure 9.4
      5. Figure 9.5
      6. Figure 9.6
      7. Figure 9.7
      8. Figure 9.8
      9. Figure 9.9
      10. Figure 9.10
      11. Figure 9.11
      12. Figure 9.12
      1. Listings 9.1
      2. Listings 9.2
      3. Listings 9.3
      4. Listings 9.4
      5. Listings 9.5
      6. Listings 9.6
  13. Chapter 10: Advanced Techniques
    1. 10.1 Image Processing
      1. 10.1.1 Blurring
      2. 10.1.2 Upgrade Your Client: A Better Photographer with Depth of Field
        1. 10.1.2.1 Fullscreen Quad
      3. 10.1.3 Edge Detection
      4. 10.1.4 Upgrade Your Client: Toon Shading
      5. 10.1.5 Upgrade Your Client: A Better Photographer with Panning
        1. 10.1.5.1 The Velocity Buffer
      6. 10.1.6 Sharpen
    2. 10.2 Ambient Occlusion
      1. 10.2.1 Screen-Space Ambient Occlusion (SSAO)
    3. 10.3 Deferred Shading
    4. 10.4 Particle Systems
      1. 10.4.1 Animating a Particle System
      2. 10.4.2 Rendering a Particle System
    5. 10.5 Self-Exercises
      1. 10.5.1 General
      2. 10.5.2 Client Related
      1. Figure 10.1
      2. Figure 10.2
      3. Figure 10.3
      4. Figure 10.4
      5. Figure 10.5
      6. Figure 10.6
      7. Figure 10.7
      8. Figure 10.8
      9. Figure 10.9
      10. Figure 10.10
      11. Figure 10.11
      12. Figure 10.12
      13. Figure 10.13
      14. Figure 10.14
      15. Figure 10.15
      16. Figure 10.16
      17. Figure 10.17
      1. Listings 10.1
      2. Listings 10.2
      3. Listings 10.3
      4. Listings 10.4
      5. Listings 10.5
      6. Listings 10.6
      7. Listings 10.7
      8. Listings 10.8
  14. Chapter 11: Global Illumination
    1. 11.1 Ray Tracing
      1. 11.1.1 Ray-Algebraic Surface Intersection
        1. 11.1.1.1 Ray-Plane Intersection
        2. 11.1.1.2 Ray-Sphere Intersection
      2. 11.1.2 Ray-Parametric Surface Intersection
      3. 11.1.3 Ray-Scene Intersection
        1. 11.1.3.1 Ray-AABB Intersection
        2. 11.1.3.2 USS-Based Acceleration Scheme
        3. 11.1.3.3 USS Grid Traversal
        4. 11.1.3.4 BVH-Based Acceleration Scheme
      4. 11.1.4 Ray Tracing for Rendering
      5. 11.1.5 Classical Ray Tracing
      6. 11.1.6 Path Tracing
    2. 11.2 Multi-Pass Algorithms
      1. 11.2.1 Photon Tracing
      2. 11.2.2 Radiosity
      3. 11.2.3 Concept of Form Factor
      4. 11.2.4 Flux Transport Equation and Radiosity Transport Equation
        1. 11.2.4.1 Computation of Form Factor
      5. 11.2.5 Solution of Radiosity System
        1. 11.2.5.1 Rendering from Radiosity Solution
      1. Figure 11.1
      2. Figure 11.2
      3. Figure 11.3
      4. Figure 11.4
      5. Figure 11.5
      6. Figure 11.6
      1. Listings 11.1
      2. Listings 11.2
      3. Listings 11.3
      4. Listings 11.4
      5. Listings 11.5
      6. Listings 11.6
      7. Listings 11.7
      8. Listings 11.8
      9. Listings 11.9
      10. Listings 11.10
      11. Listings 11.11
      12. Listings 11.12
      13. Listings 11.13
      14. Listings 11.14
      15. Listings 11.15
      16. Listings 11.16
      17. Listings 11.17
      18. Listings 11.18
  15. Appendix A: NVMC Class
    1. A.1 Elements of the Scene
    2. A.2 Players
  16. Appendix B: Properties of Vector Products
    1. B.1 Dot Product
    2. B.2 Vector Product
      1. Figure B.1
      2. Figure B.2
  17. Bibliography