Preface

Chapter 1:  Introduction

• Section 1.1  Painting and Drawing
• Section 1.2  Elements of 3D Graphics
• Section 1.3  Hardware and Software

Chapter 2:  Two-Dimensional Graphics

• Section 2.1  Pixels, Coordinates, and Colors
  • 2.1.1  Pixel Coordinates
  • 2.1.2  Real-number Coordinate Systems
  • 2.1.3  Aspect Ratio
  • 2.1.4  Color Models
• Section 2.2  Shapes
  • 2.2.1  Basic Shapes
  • 2.2.2  Stroke and Fill
  • 2.2.3  Polygons, Curves, and Paths
• Section 2.3  Transforms
  • 2.3.1  Viewing and Modeling
  • 2.3.2  Translation
  • 2.3.3  Rotation
  • 2.3.4  Combining Transformations
  • 2.3.5  Scaling
  • 2.3.6  Shear
  • 2.3.7  Window-to-Viewport
  • 2.3.8  Matrices and Vectors
• Section 2.4  Hierarchical Modeling
  • 2.4.1  Building Complex Objects
  • 2.4.2  Scene Graphs
  • 2.4.3  The Transform Stack
• Section 2.5  Java Graphics2D
  • 2.5.1  Graphics2D
  • 2.5.2  Shapes
  • 2.5.3  Stroke and Fill
  • 2.5.4  Transforms
  • 2.5.5  BufferedImage and Pixels
• Section 2.6  HTML Canvas Graphics
  • 2.6.1  The 2D Graphics Context
  • 2.6.2  Shapes
  • 2.6.3  Stroke and Fill
  • 2.6.4  Transforms
  • 2.6.5  Auxiliary Canvases
  • 2.6.6  Pixel Manipulation
  • 2.6.7  Images
• Section 2.7  SVG: A Scene Description Language
  • 2.7.1  SVG Document Structure
  • 2.7.2  Shapes, Styles, and Transforms
  • 2.7.3  Polygons and Paths
  • 2.7.4  Hierarchical Models
  • 2.7.5  Animation

Chapter 3:  OpenGL 1.1: Geometry

• Section 3.1  Shapes and Colors in OpenGL 1.1
  • 3.1.1  OpenGL Primitives
  • 3.1.2  OpenGL Color
  • 3.1.3  glColor and glVertex with Arrays
  • 3.1.4  The Depth Test
• Section 3.2  3D Coordinates and Transforms
  • 3.2.1  3D Coordinates
  • 3.2.2  Basic 3D Transforms
  • 3.2.3  Hierarchical Modeling
• Section 3.3  Projection and Viewing
  • 3.3.1  Many Coordinate Systems
  • 3.3.2  The Viewport Transformation
  • 3.3.3  The Projection Transformation
  • 3.3.4  The Modelview Transformation
  • 3.3.5  A Camera Abstraction
• Section 3.4  Polygonal Meshes and glDrawArrays
  • 3.4.1  Indexed Face Sets
  • 3.4.2  glDrawArrays and glDrawElements
  • 3.4.3  Data Buffers in Java
  • 3.4.4  Display Lists and VBOs
• Section 3.5  Some Linear Algebra
  • 3.5.1  Vectors and Vector Math
  • 3.5.2  Matrices and Transformations
  • 3.5.3  Homogeneous Coordinates
• Section 3.6  Using GLUT and JOGL
  • 3.6.1  Using GLUT
  • 3.6.2  Using JOGL
  • 3.6.3  About glsim.js

Chapter 4:  OpenGL 1.1: Light and Material

• Section 4.1  Introduction to Lighting
  • 4.1.1  Light and Material
  • 4.1.2  Light Properties
  • 4.1.3  Normal Vectors
  • 4.1.4  The OpenGL 1.1 Lighting Equation
• Section 4.2  Light and Material in OpenGL 1.1
  • 4.2.1  Working with Material
  • 4.2.2  Defining Normal Vectors
  • 4.2.3  Working with Lights
  • 4.2.4  Global Lighting Properties
• Section 4.3  Image Textures
  • 4.3.1  Texture Coordinates
  • 4.3.2  MipMaps and Filtering
  • 4.3.3  Texture Target and Texture Parameters
  • 4.3.4  Texture Transformation
  • 4.3.5  Loading a Texture from Memory
  • 4.3.6  Texture from Color Buffer
  • 4.3.7  Texture Objects
  • 4.3.8  Loading Textures in C
  • 4.3.9  Using Textures with JOGL
• Section 4.4  Lights, Camera, Action
  • 4.4.1  Attribute Stack
  • 4.4.2  Moving Camera
  • 4.4.3  Moving Light

Chapter 5:  Three.js: A 3D Scene Graph API

• Section 5.1  Three.js Basics
  • 5.1.1  About JavaScript Modules
  • 5.1.2  Scene, Renderer, Camera
  • 5.1.3  THREE.Object3D
  • 5.1.4  Object, Geometry, Material
  • 5.1.5  Lights
  • 5.1.6  A Modeling Example
• Section 5.2  Building Objects
  • 5.2.1  Polygonal Meshes and IFSs
  • 5.2.2  Curves and Surfaces
  • 5.2.3  Textures
  • 5.2.4  Transforms
  • 5.2.5  Loading Models
• Section 5.3  Other Features
  • 5.3.1  Instanced Meshes
  • 5.3.2  User Input
  • 5.3.3  Shadows
  • 5.3.4  Cubemap Textures and Skyboxes
  • 5.3.5  Reflection and Refraction

Chapter 6:  Introduction to WebGL

• Section 6.1  The Programmable Pipeline
  • 6.1.1  The WebGL Graphics Context
  • 6.1.2  The Shader Program
  • 6.1.3  Data Flow in the Pipeline
  • 6.1.4  Values for Uniform Variables
  • 6.1.5  Values for Attributes
  • 6.1.6  Drawing a Primitive
  • 6.1.7  WebGL 2.0: Vertex Array Objects
  • 6.1.8  WebGL 2.0: Instanced Drawing
• Section 6.2  First Examples
  • 6.2.1  WebGL Context Options
  • 6.2.2  A Bit of GLSL
  • 6.2.3  The RGB Triangle in WebGL
  • 6.2.4  Shape Stamper
  • 6.2.5  The POINTS Primitive
  • 6.2.6  WebGL Error Handling
• Section 6.3  GLSL
  • 6.3.1  Basic Types
  • 6.3.2  Data Structures
  • 6.3.3  Qualifiers
  • 6.3.4  Expressions
  • 6.3.5  Function Definitions
  • 6.3.6  Control Structures
  • 6.3.7  Limits
• Section 6.4  Image Textures
  • 6.4.1  Texture Units and Texture Objects
  • 6.4.2  Working with Images
  • 6.4.3  More Ways to Make Textures
  • 6.4.4  Cubemap Textures
  • 6.4.5  A Computational Example
  • 6.4.6  Textures in WebGL 2.0
• Section 6.5  Implementing 2D Transforms
  • 6.5.1  Transforms in GLSL
  • 6.5.2  Transforms in JavaScript

Chapter 7:  3D Graphics with WebGL

• Section 7.1  Transformations in 3D
  • 7.1.1  About Shader Scripts
  • 7.1.2  Introducing glMatrix
  • 7.1.3  Transforming Coordinates
  • 7.1.4  Transforming Normals
  • 7.1.5  Rotation by Mouse
• Section 7.2  Lighting and Material
  • 7.2.1  Minimal Lighting
  • 7.2.2  Specular Reflection and Phong Shading
  • 7.2.3  Adding Complexity
  • 7.2.4  Two-sided Lighting
  • 7.2.5  Moving Lights
  • 7.2.6  Spotlights
  • 7.2.7  Light Attenuation
  • 7.2.8  Diskworld 2
• Section 7.3  Textures
  • 7.3.1  Texture Transforms with glMatrix
  • 7.3.2  Generated Texture Coordinates
  • 7.3.3  Procedural Textures
  • 7.3.4  Bumpmaps
  • 7.3.5  Environment Mapping
• Section 7.4  Framebuffers
  • 7.4.1  Framebuffer Operations
  • 7.4.2  Render To Texture
  • 7.4.3  Renderbuffers
  • 7.4.4  Dynamic Cubemap Textures
• Section 7.5  WebGL Extensions
  • 7.5.1  Anisotropic Filtering
  • 7.5.2  Floating-Point Colors
  • 7.5.3  Instanced Drawing in WebGL 1.0
  • 7.5.4  Deferred Shading
  • 7.5.5  Multiple Draw Buffers in WebGL 2.0

Chapter 8:  Beyond Basic 3D Graphics

• Section 8.1  Ray Tracing
  • 8.1.1  Ray Casting
  • 8.1.2  Recursive Ray Tracing
  • 8.1.3  Limitations of Ray Tracing
• Section 8.2  Path Tracing
  • 8.2.1  BSDF's
  • 8.2.2  The Path Tracing Algorithm

Chapter 9:  Introduction to WebGPU

• Section 9.1  WebGPU Basics
  • 9.1.1  Adapter, Device, and Canvas
  • 9.1.2  Shader Module
  • 9.1.3  Render Pipeline
  • 9.1.4  Buffers
  • 9.1.5  Drawing
  • 9.1.6  Multiple Vertex Inputs
  • 9.1.7  Auto Bind Group Layout
• Section 9.2  Instances and Indices
  • 9.2.1  Instanced Drawing
  • 9.2.2  Indexed Drawing
  • 9.2.3  Drawing Multiple Primitives
  • 9.2.4  Using Indices in Shaders
  • 9.2.5  Multisampling
• Section 9.3  WGSL
  • 9.3.1  Address Spaces and Alignment
  • 9.3.2  Data Types
  • 9.3.3  Declarations and Annotations
  • 9.3.4  Expressions and Built-in Functions
  • 9.3.5  Statements and Control
  • 9.3.6  Function Definitions
• Section 9.4  3D Graphics With WebGPU
  • 9.4.1  The Depth Test
  • 9.4.2  Coordinate Systems
  • 9.4.3  Into 3D
  • 9.4.4  wgpu-matrix
  • 9.4.5  Diskworld Yet Again
• Section 9.5  Textures
  • 9.5.1  Texture Coordinates
  • 9.5.2  Textures and Samplers
  • 9.5.3  Mipmaps
  • 9.5.4  Cubemap Textures
  • 9.5.5  Texture Formats
• Section 9.6  Compute Shaders
  • 9.6.1  Workgroups and Dispatches
  • 9.6.2  Compute Shaders
  • 9.6.3  A Simulation
  • 9.6.4  Retrieving Output
• Section 9.7  Some Details
  • 9.7.1  Lost Device
  • 9.7.2  Error Handling
  • 9.7.3  Limits and Features
  • 9.7.4  Render Pass Options
  • 9.7.5  Render Pipeline Options

Appendix A:  Programming Languages

• Section A.1  The Java Programming Language
  • A.1.1  Basic Language Structure
  • A.1.2  Objects and Data Structures
  • A.1.3  Windows and Events
• Section A.2  The C Programming Language
  • A.2.1  Language Basics
  • A.2.2  Pointers and Arrays
  • A.2.3  Data Structures
• Section A.3  The JavaScript Programming Language
  • A.3.1  The Core Language
  • A.3.2  Arrays and Objects
  • A.3.3  JavaScript on Web Pages
  • A.3.4  Interacting with the Page
• Section A.4  JavaScript Promises and Async Functions
  • A.4.1  Async Functions and await
  • A.4.2  Using Promises Directly

Appendix B:  Blender: A 3D Modeling Program

• Section B.1  Blender Basics
  • B.1.1  The 3D View
  • B.1.2  Adding Objects to the Scene
  • B.1.3  Edit Mode
  • B.1.4  Light, Material, and Texture
  • B.1.5  Saving Your Work
  • B.1.6  More Features
• Section B.2  Blender Modeling
  • B.2.1  Text
  • B.2.2  Curves
  • B.2.3  Proportional Editing
  • B.2.4  Extruding Meshes
  • B.2.5  Mesh Modifiers
• Section B.3  Blender Animation
  • B.3.1  Keyframe Animation and F-Curves
  • B.3.2  Tracking
  • B.3.3  Path Animation
  • B.3.4  Rendering an Animation
• Section B.4  More on Light and Material
  • B.4.1  Lighting
  • B.4.2  Eevee versus Cycles
  • B.4.3  The Shader Editor

Appendix C:  Gimp and Inkscape for 2D Graphics

• Section C.1  Gimp: A 2D Painting Program
  • C.1.1  Painting Tools
  • C.1.2  Selections and Paths
  • C.1.3  Layers
• Section C.2  Inkscape: A 2D Drawing Program

Appendix D: Source Code for Sample Programs

Appendix E: Glossary

David Eck, August 2023