book

Introduction to Computer Graphics

by Fabio Ganovelli, Massimiliano Corsini, Sumanta Pattanaik, Marco Di Benedetto

October 2014

Beginner

422 pages

10h 4m

English

Chapman and Hall/CRC

Read now

Unlock full access

Preliminaries
Dedication
Preface
Chapter 1: What Computer Graphics Is
1.1 Application Domains and Areas of Computer Graphics1.1.1 Application Domains1.1.2 Areas of Computer Graphics1.2 Color and Images1.2.1 The Human Visual System (HVS)1.2.2 Color Space1.2.2.1 CIE XYZ1.2.2.2 Device-Dependent and Device-Independent Color Space1.2.2.3 HSL and HSV1.2.2.4 CIELab1.2.3 Illuminant1.2.4 Gamma1.2.5 Image Representation1.2.5.1 Vector Images1.2.5.2 Raster Images1.3 Algorithms to Create a Raster Image from a 3D Scene1.3.1 Ray Tracing1.3.2 Rasterization-Based Pipeline1.3.3 Ray Tracing vs Rasterization-Based Pipeline1.3.3.1 Ray Tracing Is Better1.3.3.2 Rasterization Is BetterFigure 1.1Figure 1.2Figure 1.3Figure 1.4Figure 1.5Figure 1.6Figure 1.7Figure 1.8Figure 1.9Figure 1.10Figure 1.11Figure 1.12Listings 1.1Listings 1.2
Chapter 2: The First Steps
2.1 The Application Programming Interface2.2 The WebGL Rasterization-Based Pipeline2.3 Programming the Rendering Pipeline: Your First Rendering2.4 WebGL Supporting Libraries2.5 Meet NVMC2.5.1 The Framework2.5.2 The Class NVMC to Represent the World2.5.3 A Very Basic Client2.5.4 Code OrganizationFigure 2.1Figure 2.2Figure 2.3Figure 2.4Figure 2.5Figure 2.6Figure 2.7Listings 2.1Listings 2.2Listings 2.3Listings 2.4Listings 2.5Listings 2.6Listings 2.7Listings 2.8Listings 2.9Listings 2.10Listings 2.11Listings 2.12Listings 2.13Listings 2.14Listings 2.15
Chapter 3: How a 3D Model Is Represented
3.1 Introduction3.1.1 Digitalization of the Real World3.1.2 Modeling3.1.3 Procedural Modeling3.1.4 Simulation3.2 Polygon Meshes3.2.1 Fans and Strips3.2.2 Manifoldness3.2.3 Orientation3.2.4 Advantages and Disadvantages3.3 Implicit Surfaces3.3.1 Advantages and Disadvantages3.4 Parametric Surfaces3.4.1 Parametric Curve3.4.2 Bézier Curves3.4.2.1 Cubic Bézier Curve3.4.3 B-Spline Curves3.4.4 From Parametric Curves to Parametric Surfaces3.4.5 Bézier Patches3.4.6 NURBS Surfaces3.4.7 Advantages and Disadvantages3.5 Voxels3.5.1 Rendering Voxels3.5.2 Advantages and Disadvantages3.6 Constructive Solid Geometry (CSG)3.6.1 Advantages and Disadvantages3.7 Subdivision Surfaces3.7.1 Chaikin’s Algorithm3.7.2 The 4-Point Algorithm3.7.3 Subdivision Methods for Surfaces3.7.4 Classification3.7.4.1 Triangular or Quadrilateral3.7.4.2 Primal or Dual3.7.4.3 Approximation vs Interpolation3.7.4.4 Smoothness3.7.5 Subdivision Schemes3.7.5.1 Loop Scheme3.7.5.2 Modified Butterfly Scheme3.7.6 Advantages and Disadvantages3.8 Data Structures for Polygon Meshes3.8.1 Indexed Data Structure3.8.2 Winged-Edge3.8.3 Half-Edge3.9 The First Code: Making and Showing Simple Primitives3.9.1 The Cube3.9.2 Cone3.9.3 Cylinder3.10 Self-Exercises3.10.1 GeneralFigure 3.1Figure 3.2Figure 3.3Figure 3.4Figure 3.5Figure 3.6Figure 3.7Figure 3.8Figure 3.9Figure 3.10Figure 3.11Figure 3.12Figure 3.13Figure 3.14Figure 3.15Figure 3.16Figure 3.17Figure 3.18Figure 3.19Figure 3.20Figure 3.21Figure 3.22Figure 3.23Figure 3.24Figure 3.25Figure 3.26Figure 3.27Figure 3.28Listings 3.1Listings 3.2Listings 3.3
Chapter 4: Geometric Transformations
4.1 Geometric Entities4.2 Basic Geometric Transformations4.2.1 Translation4.2.2 Scaling4.2.3 Rotation4.2.4 Expressing Transformation with Matrix Notation4.3 Affine Transformations4.3.1 Composition of Geometric Transformations4.3.2 Rotation and Scaling about a Generic Point4.3.3 Shearing4.3.4 Inverse Transformations and Commutative Properties4.4 Frames4.4.1 General Frames and Affine Transformations4.4.2 Hierarchies of Frames4.4.3 The Third Dimension4.5 Rotations in Three Dimensions4.5.1 Axis–Angle Rotation4.5.1.1 Building Orthogonal 3D Frames from a Single Axis4.5.1.2 Axis–Angle Rotations without Building the 3DFrame4.5.2 Euler Angles Rotations4.5.3 Rotations with Quaternions4.6 Viewing Transformations4.6.1 Placing the View Reference Frame4.6.2 Projections4.6.2.1 Perspective Projection4.6.2.2 Perspective Division4.6.2.3 Orthographic Projection4.6.3 Viewing Volume4.6.3.1 Canonical Viewing Volume4.6.4 From Normalized Device Coordinates to Window Coordinates4.6.4.1 Preserving Aspect Ratio4.6.4.2 Depth Value4.6.5 Summing Up4.7 Transformations in the Pipeline4.8 Upgrade Your Client: Our First 3D Client4.8.1 Assembling the Tree and the Car4.8.2 Positioning the Trees and the Cars4.8.3 Viewing the Scene4.9 The Code4.10 Handling the Transformations Matrices with a Matrix Stack4.10.1 Upgrade Your Client: Add the View from above and behind4.11 Manipulating the View and the Objects4.11.1 Controlling the View with Keyboard and Mouse4.11.2 Upgrade Your Client: Add the Photographer View4.11.3 Manipulating the Scene with Keyboard and Mouse: the Virtual Trackball4.12 Upgrade Your Client: Create the Observer Camera4.13 Self-Exercises4.13.1 General4.13.2 Client RelatedFigure 4.1Figure 4.2Figure 4.3Figure 4.4Figure 4.5Figure 4.6Figure 4.7Figure 4.8Figure 4.9Figure 4.10Figure 4.11Figure 4.12Figure 4.13Figure 4.14Figure 4.15Figure 4.16Figure 4.17Figure 4.18Figure 4.19Figure 4.20Figure 4.21Figure 4.22Figure 4.23Figure 4.24Figure 4.25Figure 4.26Figure 4.27Figure 4.28Figure 4.29Figure 4.30Figure 4.31Figure 4.32Figure 4.33Listings 4.1Listings 4.2Listings 4.3Listings 4.4Listings 4.5Listings 4.6
Chapter 5: Turning Vertices into Pixels
5.1 Rasterization5.1.1 Lines5.1.2 Polygons (Triangles)5.1.2.1 General Polygons5.1.2.2 Triangles5.1.3 Attribute Interpolation: Barycentric Coordinates5.1.4 Concluding Remarks5.2 Hidden Surface Removal5.2.1 Depth Sort5.2.2 Scanline5.2.3 z-Buffer5.2.4 z-Buffer Precision and z-Fighting5.3 From Fragments to Pixels5.3.1 Discard Tests5.3.2 Blending5.3.2.1 Blending for Transparent Surfaces5.3.3 Aliasing and Antialiasing5.3.4 Upgrade Your Client: View from Driver Perspective5.4 Clipping5.4.1 Clipping Segments5.4.2 Clipping Polygons5.5 Culling5.5.1 Back-Face Culling5.5.2 Frustum Culling5.5.3 Occlusion CullingFigure 5.1Figure 5.2Figure 5.3Figure 5.4Figure 5.5Figure 5.6Figure 5.7Figure 5.8Figure 5.9Figure 5.10Figure 5.11Figure 5.12Figure 5.13Figure 5.14Figure 5.15Figure 5.16Figure 5.17Figure 5.18Figure 5.19Figure 5.20Figure 5.21Figure 5.22Figure 5.23Figure 5.24Listings 5.1Listings 5.2Listings 5.3Listings 5.4Listings 5.5
Chapter 6: Lighting and Shading
6.1 Light and Matter Interaction6.1.1 Ray Optics Basics6.1.1.1 Diffuse Reflection6.1.1.2 Specular Reflection6.1.1.3 Refraction6.2 Radiometry in a Nutshell6.3 Reflectance and BRDF6.4 The Rendering Equation6.5 Evaluate the Rendering Equation6.6 Computing the Surface Normal6.6.1 Crease Angle6.6.2 Transforming the Surface Normal6.7 Light Source Types6.7.1 Directional Lights6.7.2 Upgrade Your Client: Add the Sun6.7.2.1 Adding the Surface Normal6.7.2.2 Loading and Shading a 3D Model6.7.3 Point Lights6.7.4 Upgrade Your Client: Add the Street Lamps6.7.5 Spotlights6.7.6 Area Lights6.7.7 Upgrade Your Client: Add the Car’s Headlights and Lights in the Tunnel6.8 Phong Illumination Model6.8.1 Overview and Motivation6.8.2 Diffuse Component6.8.3 Specular Component6.8.4 Ambient Component6.8.5 The Complete Model6.9 Shading Techniques6.9.1 Flat and Gouraud Shading6.9.2 Phong Shading6.9.3 Upgrade Your Client: Use Phong Lighting6.10 Advanced Reflection Models6.10.1 Cook-Torrance Model6.10.2 Oren-Nayar Model6.10.3 Minnaert Model6.11 Self-Exercises6.11.1 General6.11.2 Client RelatedFigure 6.1Figure 6.2Figure 6.3Figure 6.4Figure 6.5Figure 6.6Figure 6.7Figure 6.8Figure 6.9Figure 6.10Figure 6.11Figure 6.12Figure 6.13Figure 6.14Figure 6.15Figure 6.16Figure 6.17Figure 6.18Figure 6.19Figure 6.20Figure 6.21Figure 6.22Figure 6.23Figure 6.24Listings 6.1Listings 6.2Listings 6.3Listings 6.4Listings 6.5Listings 6.6Listings 6.7Listings 6.8Listings 6.9Listings 6.10Listings 6.11Listings 6.12Listings 6.13
Chapter 7: Texturing
7.1 Introduction: Do We Need Texture Mapping?7.2 Basic Concepts7.2.1 Texturing in the Pipeline7.3 Texture Filtering: from per-Fragment Texture Coordinates to per-Fragment Color7.3.1 Magnification7.3.2 Minification with Mipmapping7.4 Perspective Correct Interpolation: From per-Vertex to per-Fragment Texture Coordinates7.5 Upgrade Your Client: Add Textures to the Terrain, Street and Building7.5.1 Accessing Textures from the Shader Program7.6 Upgrade Your Client: Add the Rear Mirror7.6.1 Rendering to Texture (RTT)7.7 Texture Coordinates Generation and Environment Mapping7.7.1 Sphere Mapping7.7.1.1 Computation of Texture Coordinates7.7.1.2 Limitations7.7.2 Cube Mapping7.7.3 Upgrade Your Client: Add a Skybox for the Horizon7.7.4 Upgrade Your Client: Add Reflections to the Car7.7.4.1 Computing the Cubemap on-the-fly for More Accurate Reflections7.7.5 Projective Texture Mapping7.8 Texture Mapping for Adding Detail to Geometry7.8.1 Displacement Mapping7.8.2 Normal Mapping7.8.2.1 Object Space Normal Mapping7.8.3 Upgrade Your Client: Add the Asphalt7.8.4 Tangent Space Normal Mapping7.8.4.1 Computing the Tangent Frame for Triangulated Meshes7.9 Notes on Mesh Parametrization7.9.1 Seams7.9.2 Quality of a Parametrization7.10 3D Textures and Their Use7.11 Self-Exercises7.11.1 General7.11.2 ClientFigure 7.1Figure 7.2Figure 7.3Figure 7.4Figure 7.5Figure 7.6Figure 7.7Figure 7.8Figure 7.9Figure 7.10Figure 7.11Figure 7.12Figure 7.13Figure 7.14Figure 7.15Figure 7.16Figure 7.17Figure 7.18Figure 7.19Figure 7.20Figure 7.21Figure 7.22Figure 7.23Figure 7.24Figure 7.25Figure 7.26Figure 7.27Figure 7.28Figure 7.29Listings 7.1Listings 7.2Listings 7.3Listings 7.4Listings 7.5Listings 7.6Listings 7.7Listings 7.8Listings 7.9Listings 7.10

Chapter 8: Shadows
8.1 The Shadow Phenomenon8.2 Shadow Mapping8.2.1 Modeling Light Sources8.2.1.1 Directional Light8.2.1.2 Point Light8.2.1.3 Spotlights8.3 Upgrade Your Client: Add Shadows8.3.1 Encoding the Depth Value in an RGBA Texture8.4 Shadow Mapping Artifacts and Limitations8.4.1 Limited Numerical Precision: Surface Acne8.4.1.1 Avoid Acne in Closed Objects8.4.2 Limited Shadow Map Resolution: Aliasing8.4.2.1 Percentage Closer Filtering (PCF)8.5 Shadow Volumes8.5.1 Constructing the Shadow Volumes8.5.2 The Algorithm8.6 Self-Exercises8.6.1 General8.6.2 Client RelatedFigure 8.1Figure 8.2Figure 8.3Figure 8.4Figure 8.5Figure 8.6Figure 8.7Figure 8.8Figure 8.9Figure 8.10Listings 8.1Listings 8.2Listings 8.3Listings 8.4
Chapter 9: Image-Based Impostors
9.1 Sprites9.2 Billboarding9.2.1 Static Billboards9.2.2 Screen-Aligned Billboards9.2.3 Upgrade Your Client: Add Fixed-Screen Gadgets9.2.4 Upgrade Your Client: Adding Lens Flare Effects9.2.4.1 Occlusion Query9.2.5 Axis-Aligned Billboards9.2.5.1 Upgrade Your Client: Better Trees9.2.6 On-the-fly Billboarding9.2.7 Spherical Billboards9.2.8 Billboard Cloud9.2.8.1 Upgrade Your Client: Even Better Trees9.3 Ray-Traced Impostors9.4 Self-Exercises9.4.1 General9.4.2 Client RelatedFigure 9.1Figure 9.2Figure 9.3Figure 9.4Figure 9.5Figure 9.6Figure 9.7Figure 9.8Figure 9.9Figure 9.10Figure 9.11Figure 9.12Listings 9.1Listings 9.2Listings 9.3Listings 9.4Listings 9.5Listings 9.6
Chapter 10: Advanced Techniques
10.1 Image Processing10.1.1 Blurring10.1.2 Upgrade Your Client: A Better Photographer with Depth of Field10.1.2.1 Fullscreen Quad10.1.3 Edge Detection10.1.4 Upgrade Your Client: Toon Shading10.1.5 Upgrade Your Client: A Better Photographer with Panning10.1.5.1 The Velocity Buffer10.1.6 Sharpen10.2 Ambient Occlusion10.2.1 Screen-Space Ambient Occlusion (SSAO)10.3 Deferred Shading10.4 Particle Systems10.4.1 Animating a Particle System10.4.2 Rendering a Particle System10.5 Self-Exercises10.5.1 General10.5.2 Client RelatedFigure 10.1Figure 10.2Figure 10.3Figure 10.4Figure 10.5Figure 10.6Figure 10.7Figure 10.8Figure 10.9Figure 10.10Figure 10.11Figure 10.12Figure 10.13Figure 10.14Figure 10.15Figure 10.16Figure 10.17Listings 10.1Listings 10.2Listings 10.3Listings 10.4Listings 10.5Listings 10.6Listings 10.7Listings 10.8
Chapter 11: Global Illumination
11.1 Ray Tracing11.1.1 Ray-Algebraic Surface Intersection11.1.1.1 Ray-Plane Intersection11.1.1.2 Ray-Sphere Intersection11.1.2 Ray-Parametric Surface Intersection11.1.3 Ray-Scene Intersection11.1.3.1 Ray-AABB Intersection11.1.3.2 USS-Based Acceleration Scheme11.1.3.3 USS Grid Traversal11.1.3.4 BVH-Based Acceleration Scheme11.1.4 Ray Tracing for Rendering11.1.5 Classical Ray Tracing11.1.6 Path Tracing11.2 Multi-Pass Algorithms11.2.1 Photon Tracing11.2.2 Radiosity11.2.3 Concept of Form Factor11.2.4 Flux Transport Equation and Radiosity Transport Equation11.2.4.1 Computation of Form Factor11.2.5 Solution of Radiosity System11.2.5.1 Rendering from Radiosity SolutionFigure 11.1Figure 11.2Figure 11.3Figure 11.4Figure 11.5Figure 11.6Listings 11.1Listings 11.2Listings 11.3Listings 11.4Listings 11.5Listings 11.6Listings 11.7Listings 11.8Listings 11.9Listings 11.10Listings 11.11Listings 11.12Listings 11.13Listings 11.14Listings 11.15Listings 11.16Listings 11.17Listings 11.18
Appendix A: NVMC Class
A.1 Elements of the SceneA.2 Players
Appendix B: Properties of Vector Products
B.1 Dot ProductB.2 Vector ProductFigure B.1Figure B.2
Bibliography

Overview

This text shows step by step how to implement computer graphics concepts and theory with WebGL using the EnvyMyCar (NVMC) framework as a consistent example throughout the text. This practical approach leads readers to draw the elements and effects needed to ultimately create a visually pleasing car racing game. The book explains how to handle 3D geometric transformations, texturing, complex lighting effects, and more. The code is available online.

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 9781439852798

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills