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 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  Scene, Renderer, Camera
  • 5.1.2  THREE.Object3D
  • 5.1.3  Object, Geometry, Material
  • 5.1.4  Lights
  • 5.1.5  A Modeling Example
• Section 5.2  Building Objects
  • 5.2.1  Indexed Face Sets
  • 5.2.2  Curves and Surfaces
  • 5.2.3  Textures
  • 5.2.4  Transforms
  • 5.2.5  Loading JSON Models
• Section 5.3  Other Features
  • 5.3.1  Anaglyph Stereo
  • 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
• 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
• 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  Deferred Shading

Chapter 8:  Beyond Realtime 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

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

Appendix B:  Blender: A 3D Modeling Program

• Section B.1  Blender Basics
  • B.1.1  The 3D View
  • B.1.2  Adding and Transforming Objects
  • 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
  • B.2.6  More on Light and Material
• 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  Particle Systems
  • B.3.5  Rendering an Animation

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

James Foster, January 2022