GLOBAL EDITION. Interactive Computer Graphics. A Top-Down Approach with WebGL SEVENTH EDITION. Edward Angel Dave Shreiner

Save this PDF as:

Size: px
Start display at page:

Download "GLOBAL EDITION. Interactive Computer Graphics. A Top-Down Approach with WebGL SEVENTH EDITION. Edward Angel Dave Shreiner"


1 GLOBAL EDITION Interactive Computer Graphics A Top-Down Approach with WebGL SEVENTH EDITION Edward Angel Dave Shreiner

2 This page is intentionally left blank.

3 Interactive Computer Graphics with WebGL, Global Edition Table of Contents Cover Dedication Contents Preface Chapter 1: Graphics Systems and Models 1.1 Applications of Computer Graphics Display of Information Design Simulation and Animation User Interfaces 1.2 A Graphics System Pixels and the Framebuffer The CPU and the GPU Output Devices Input Devices 1.3 Images: Physical and Synthetic Objects and Viewers Light and Images Imaging Models 1.4 Imaging Systems The Pinhole Camera The Human Visual System 1.5 The Synthetic-Camera Model 1.6 The Programmers Interface The Pen-Plotter Model Three-Dimensional APIs A Sequence of Images The ModelingRendering Paradigm 1.7 Graphics Architectures Display Processors Pipeline Architectures The Graphics Pipeline Vertex Processing Clipping and Primitive Assembly Rasterization Fragment Processing 1.8 Programmable Pipelines

4 1.9 Performance Characteristics 1.10 OpenGL Versions and WebGL Chapter 2: Graphics Programming 2.1 The Sierpinski Gasket 2.2 Programming Two-Dimensional Applications 2.3 The WebGL Application Programming Interface Graphics Functions The Graphics Pipeline and State Machines OpenGL and WebGL The WebGL Interface Coordinate Systems 2.4 Primitives and Attributes Polygon Basics Polygons in WebGL Approximating a Sphere Triangulation Text Curved Objects Attributes 2.5 Color RGB Color Indexed Color Setting of Color Attributes 2.6 Viewing The Orthographic View Two-Dimensional Viewing 2.7 Control Functions Interaction with the Window System Aspect Ratio and Viewports Application Organization 2.8 The Gasket Program Sending Data to the GPU Rendering the Points The Vertex Shader The Fragment Shader Combining the Parts The initshaders Function

5 2.8.7 The init Function Reading the Shaders from the Application 2.9 Polygons and Recursion 2.10 The Three-Dimensional Gasket Use of Three-Dimensional Points Naming Conventions Use of Polygons in Three Dimensions Hidden-Surface Removal Chapter 3: Interaction and Animation 3.1 Animation The Rotating Square The Display Process Double Buffering Using a Timer Using requestanimframe 3.2 Interaction 3.3 Input Devices 3.4 Physical Input Devices Keyboard Codes The Light Pen The Mouse and the Trackball Data Tablets,Touch Pads, and Touch Screens The Joystick Multidimensional Input Devices Logical Devices Input Modes 3.5 Clients and Servers 3.6 Programming Event-Driven Input Events and Event Listeners Adding a Button Menus Using Keycodes Sliders 3.7 Position Input 3.8 Window Events 3.9 Picking 3.10 Building Models Interactively

6 3.11 Design of Interactive Programs Chapter 4: Geometric Objects and Transformations 4.1 Scalars, Points, and Vectors Geometric Objects Coordinate-Free Geometry The Mathematical View: Vector and Affine Spaces The Computer Science View Geometric ADTs Lines Affine Sums Convexity Dot and Cross Products Planes 4.2 Three-Dimensional Primitives 4.3 Coordinate Systems and Frames Representations and N-Tuples Change of Coordinate Systems Example: Change of Representation Homogeneous Coordinates Example: Change in Frames Working with Representations 4.4 Frames in WebGL 4.5 Matrix and Vector Types Row versus Column Major Matrix Representations 4.6 Modeling a Colored Cube Modeling the Faces Inward- and Outward-Pointing Faces Data Structures for Object Representation The Colored Cube Color Interpolation Displaying the Cube Drawing with Elements 4.7 Affine Transformations 4.8 Translation, Rotation, and Scaling Translation Rotation Scaling

7 4.9 Transformations in Homogeneous Coordinates Translation Scaling Rotation Shear 4.10 Concatenation of Transformations Rotation About a Fixed Point General Rotation The Instance Transformation Rotation About an Arbitrary Axis 4.11 Transformation Matrices in WebGL Current Transformation Matrices Basic Matrix Functions Rotation, Translation, and Scaling Rotation About a Fixed Point Order of Transformations 4.12 Spinning of the Cube Uniform Matrices 4.13 Interfaces to Three-Dimensional Applications Using Areas of the Screen A Virtual Trackball Smooth Rotations Incremental Rotation 4.14 Quaternions Complex Numbers and Quaternions Quaternions and Rotation Quaternions and Gimbal Lock Chapter 5: Viewing 5.1 Classical and Computer Viewing Classical Viewing Orthographic Projections Axonometric Projections Oblique Projections Perspective Viewing 5.2 Viewing with a Computer 5.3 Positioning of the Camera Positioning of the Camera Frame

8 5.3.2 Two Viewing APIs The Look-At Function Other Viewing APIs 5.4 Parallel Projections Orthogonal Projections Parallel Viewing with WebGL Projection Normalization Orthogonal Projection Matrices Oblique Projections An Interactive Viewer 5.5 Perspective Projections Simple Perspective Projections 5.6 Perspective Projections with WebGL Perspective Functions 5.7 Perspective Projection Matrices Perspective Normalization WebGL Perspective Transformations Perspective Example 5.8 Hidden-Surface Removal Culling 5.9 Displaying Meshes Displaying Meshes as Surfaces Polygon Offset Walking through a Scene 5.10 Projections and Shadows Projected Shadows 5.11 Shadow Maps Chapter 6: Lighting and Shading 6.1 Light and Matter 6.2 Light Sources Color Sources Ambient Light Point Sources Spotlights Distant Light Sources 6.3 The Phong Reflection Model Ambient Reflection

9 6.3.2 Diffuse Reflection Specular Reflection The Modified Phong Model 6.4 Computation of Vectors Normal Vectors Angle of Reflection 6.5 Polygonal Shading Flat Shading Smooth and Gouraud Shading Phong Shading 6.6 Approximation of a Sphere by Recursive Subdivision 6.7 Specifying Lighting Parameters Light Sources Materials 6.8 Implementing a Lighting Model Applying the Lighting Model in the Application Efficiency Lighting in the Vertex Shader 6.9 Shading of the Sphere Model 6.10 Per-Fragment Lighting 6.11 Nonphotorealistic Shading 6.12 Global Illumination Chapter 7: Discrete Techniques 7.1 Buffers 7.2 Digital Images 7.3 Mapping Methods 7.4 Two-Dimensional Texture Mapping 7.5 Texture Mapping in WebGL Texture Objects The Texture Image Array Texture Coordinates and Samplers Texture Sampling Working with Texture Coordinates Multitexturing 7.6 Texture Generation 7.7 Environment Maps

10 7.8 Reflection Map Example 7.9 Bump Mapping Finding Bump Maps Bump Map Example 7.10 Blending Techniques Opacity and Blending Image Blending Blending in WebGL Antialiasing Revisited Back-to-Front and Front-to-Back Rendering Scene Antialiasing and Multisampling Image Processing Other Multipass Methods 7.11 GPGPU 7.12 Framebuffer Objects 7.13 Buffer Ping-Ponging 7.14 Picking Chapter 8: From Geometry To Pixels 8.1 Basic Implementation Strategies 8.2 Four Major Tasks Modeling Geometry Processing Rasterization Fragment Processing 8.3 Clipping 8.4 Line-Segment Clipping Cohen-Sutherland Clipping Liang-Barsky Clipping 8.5 Polygon Clipping 8.6 Clipping of Other Primitives Bounding Boxes and Volumes Curves, Surfaces, and Text Clipping in the Framebuffer 8.7 Clipping in Three Dimensions 8.8 Rasterization 8.9 Bresenhams Algorithm

11 8.10 Polygon Rasterization InsideOutside Testing WebGL and Concave Polygons Fill and Sort Flood Fill Singularities 8.11 Hidden-Surface Removal Object-Space and Image-Space Approaches Sorting and Hidden-Surface Removal Scan Line Algorithms Back-Face Removal The z-buffer Algorithm Scan Conversion with the z-buffer Depth Sort and the Painters Algorithm 8.12 Antialiasing 8.13 Display Considerations Color Systems The Color Matrix Gamma Correction Dithering and Halftoning Chapter 9: Modeling and Hierarchy 9.1 Symbols and Instances 9.2 Hierarchical Models 9.3 A Robot Arm 9.4 Trees and Traversal A Stack-Based Traversal 9.5 Use of Tree Data Structures 9.6 Animation 9.7 Graphical Objects Methods, Attributes, and Messages A Cube Object Objects and Hierarchy Geometric and Nongeometric Objects 9.8 Scene Graphs 9.9 Implementing Scene Graphs 9.10 Other Tree Structures CSG Trees

12 BSP Trees Quadtrees and Octrees Chapter 10: Procedural Methods 10.1 Algorithmic Models 10.2 Physically Based Models and Particle Systems 10.3 Newtonian Particles Independent Particles Spring Forces Attractive and Repulsive Forces 10.4 Solving Particle Systems 10.5 Constraints Collisions Soft Constraints 10.6 A Simple Particle System Displaying the Particles Updating Particle Positions Collisions Forces Flocking 10.7 Agent-Based Models 10.8 Language-Based Models 10.9 Recursive Methods and Fractals Rulers and Length Fractal Dimension Midpoint Division and Brownian Motion Fractal Mountains The Mandelbrot Set Mandelbrot Fragment Shader Procedural Noise Chapter 11: Curves and Surfaces 11.1 Representation of Curves and Surfaces Explicit Representation Implicit Representations

13 Parametric Form Parametric Polynomial Curves Parametric Polynomial Surfaces 11.2 Design Criteria 11.3 Parametric Cubic Polynomial Curves 11.4 Interpolation Blending Functions The Cubic Interpolating Patch 11.5 Hermite Curves and Surfaces The Hermite Form Geometric and Parametric Continuity 11.6 Be zier Curves and Surfaces Be zier Curves Be zier Surface Patches 11.7 Cubic B-Splines The Cubic B-Spline Curve B-Splines and Basis Spline Surfaces 11.8 General B-Splines Recursively Defined B-Splines Uniform Splines Nonuniform B-Splines NURBS Catmull-Rom Splines 11.9 Rendering Curves and Surfaces Polynomial Evaluation Methods Recursive Subdivision of Be zier Polynomials Rendering Other Polynomial Curves by Subdivision Subdivision of Be zier Surfaces The Utah Teapot Algebraic Surfaces Quadrics Rendering of Surfaces by Ray Casting Subdivision Curves and Surfaces Mesh Subdivision Mesh Generation from Data Height Fields Revisited Delaunay Triangulation Point Clouds Graphics API support for Curves and Surfaces

14 Tessellation Shading Geometry Shading Chapter 12: Advanced Rendering 12.1 Going Beyond Pipeline Rendering 12.2 Ray Tracing 12.3 Building a Simple Ray Tracer Recursive Ray Tracing Calculating Intersections Ray-Tracing Variations 12.4 The Rendering Equation 12.5 Radiosity The Radiosity Equation Solving the Radiosity Equation Computing Form Factors Carrying Out Radiosity 12.6 Global Illumination and Path Tracing 12.7 RenderMan 12.8 Parallel Rendering Sort-Middle Rendering Sort-Last Rendering Sort-First Rendering 12.9 Hardware GPU Implementations Implicit Functions and Contour Maps Marching Squares Marching Triangles Volume Rendering Volumetric Data Sets Visualization of Implicit Functions Isosurfaces and Marching Cubes Marching Tetrahedra Mesh Simplification Direct Volume Rendering Assignment of Color and Opacity Splatting Volume Ray Tracing Texture Mapping of Volumes Image-Based Rendering

15 A Simple Example Appendix Appendix A: Initializing Shaders A.1 Shaders in the HTML file A.2 Reading Shaders from Source Files Appendix B: Spaces B.1 Scalars B.2 Vector Spaces B.3 Affine Spaces B.4 Euclidean Spaces B.5 Projections B.6 Gram-Schmidt Orthogonalization Appendix C: Matrices C.1 Definitions C.2 Matrix Operations C.3 Row and Column Matrices C.4 Rank C.5 Change of Representation C.6 The Cross Product C.7 Eigenvalues and Eigenvectors C.8 Vector and Matrix Objects Appendix D: Sampling and Aliasing D.1 Sampling Theory D.2 Reconstruction D.3 Quantization References WebGL Index Subject Index