\( \def\sc#1{\dosc#1\csod} \def\dosc#1#2\csod{{\rm #1{\small #2}}} \newcommand{\dee}{\mathrm{d}} \newcommand{\Dee}{\mathrm{D}} \newcommand{\In}{\mathrm{in}} \newcommand{\Out}{\mathrm{out}} \newcommand{\pdf}{\mathrm{pdf}} \newcommand{\Cov}{\mathrm{Cov}} \newcommand{\Var}{\mathrm{Var}} \newcommand{\ve}[1]{\mathbf{#1}} \newcommand{\mrm}[1]{\mathrm{#1}} \newcommand{\ves}[1]{\boldsymbol{#1}} \newcommand{\etal}{{et~al.}} \newcommand{\sphere}{\mathbb{S}^2} \newcommand{\modeint}{\mathcal{M}} \newcommand{\azimint}{\mathcal{N}} \newcommand{\ra}{\rightarrow} \newcommand{\mcal}[1]{\mathcal{#1}} \newcommand{\X}{\mathcal{X}} \newcommand{\Y}{\mathcal{Y}} \newcommand{\Z}{\mathcal{Z}} \newcommand{\x}{\mathbf{x}} \newcommand{\y}{\mathbf{y}} \newcommand{\z}{\mathbf{z}} \newcommand{\tr}{\mathrm{tr}} \newcommand{\sgn}{\mathrm{sgn}} \newcommand{\diag}{\mathrm{diag}} \newcommand{\Real}{\mathbb{R}} \newcommand{\sseq}{\subseteq} \newcommand{\ov}[1]{\overline{#1}} \DeclareMathOperator*{\argmax}{arg\,max} \DeclareMathOperator*{\argmin}{arg\,min} \)

CG Book

This is the draft of a book on real-time computer graphics by Pramook Khungurn.

Chapter 1: Introduction

Application of 3D computer graphics
An overview of the book's content

Chapter 2: Images and their representations
- Images
- Colors
- Color spaces: linear, gamma, and sRGB
- Color arithmetic
- Transparency
Chapter 3: Spaces, points, and vectors
- Basic geometric concepts
- Angles
- Trigonometric functions
- Vectors
- Vector arithmetic
- Point arithmetic
- Using point and vector arithmetic to define shapes
Chapter 4: Coordinate systems
- Cartesian coordinate system
- Vector arithematic in a Cartesian coordiate system
- Homogeneous coordinates
- Affine coordinate system
- Other coordinate systems
Chapter 5: Modeling with meshes
- Vertices
- Point clouds
- Privitives
- Meshes
- Surface modeling with triangle meshes
Chapter 6: Normal vectors
- Face normals
- Surface normals
- Vertex normals
Chapter 7: The graphics pipeline, OpenGL, and WebGL
- Rendering algorithms
- The graphics pipeline
  - Vertex processing
  - Primitive assembly
  - Rasterization
  - Fragment processing
  - Raster operation
- OpenGL and WebGL
  - Programs and shaders
  - Vertex shaders
  - Fragment shaders
Chapter 8: WebGL basics
- Program 1: Your first WebGL program
- Program 2: Displaying information about the OpenGL context
- Program 3: Clearing the screen
- Program 4: Continuous updates
- Program 5: Setting the viewport
Chapter 9: Drawing primitives
- Program 1: Creating a GLSL program
- Program 2: Displaying point primitives
- Program 3: Displaying line primitives
- Program 4: Displaying triangle primitives
- Program 5: Using an array index buffer
Chapter 10: A primer on GLSL programming
- The GLSL Programming Language
  - Similarity to Javascript
  - GLSL is statically typed
  - Scalar types
  - Vector Types
    - Vector constructors
    - Accessing vector components
    - Swizzling
    - Vector arithmetic
  - Arrays
  - Structs
  - GLSL variable semantics
  - Control statements
  - Functions
    - Function declaration
    - Functions that do not return a value
    - Parameter passing semantics
Chapter 11: Vertex shaders
- Program 1: Displaying a sine wave
- Program 2: Displaying a 2D parametric curve (the Cardioid)
- Program 3: Displaying a circle
Chapter 12: Uniform variables
- Program 1: Basic usage of uniform variables
- Program 2: Using a uniform variable to create a moving square
- Program 3: Using uniform variables to animate a boucing ball
- Program 4: Using struct to animate multiple balls
Chapter 13: Fragment shaders
- Program 1: Color spaces
- Program 2: Varying variables
- Program 3: The full screen quad
- Program 4: Visualizing 2D functions
Chapter XXX: Abstracting OpenGL
- Program 1: Abstracting GLSL programs
- Program 2: Abstrating colored meshes
Chapter XXX: 2D transformations
- General 2d transformations
- Scaling
- Rotation
- Linear transformations
- Translation
- Affine transformations
- Matrix representation of affine transformations
- How to read an affine transformation's matrix
Chapter XXX: Transformation and scene modeling
- Interpretations of a sequence of transformations
- Hierarchical modeling
- Program 1: Example of hierarchical modeling
Chapter XXX: User interaction
- Program 1: Processing keyboard events
- Program 2: Breakout #1
- Program 3: Processing mouse events
- Program 4: Breakout #2
Chapter XXX: Hidden surface removal
- OpenGL's depth buffer
- Program 1: Using the depth buffer
Chapther 17: Texture mapping
- Program 1: Using a texture
- Program 2: Texture parameters
- Program 3: Abstracting the texture units
Chapter XXX: Introduction to signal processing
- Sampling and reconstruction
- Aliasing
- Convolution
- Impulses and impulse trains
- Sampling as a convolution with impulse train
- Reconstruction kernel
- Reconstruction as a convolution with a kernel
- Fourier analysis and the frequency domain
- Convolution as multiplication in the frequency doamin
- The frequency domain and aliasing
- The sampling theorem
- How to deal with aliasing
Chapter XXX: Mipmapping
- The theory of mipmapping
- Program 1: Using mipmapping
Chapter XXX: Blending
- Blending in OpenGL
- Program 1: Using blending
- Program 2: Dealing with transparency in textures
Chapter XXX: Frame buffer objects (FBO)
- Program 1: Using an FBO
- Double buffering
- Image processing with OpenGL
- Program 2: sRGBへの変換
- Program 3: Gaussian blur
Chapter XXX: 3D transformations
- 3D homogeneous coordinates
- 3D translation
- 3D scaling
- 3D rotation
Chapter XXX: Projection
- Perspective divide
- Orthographic projection
- Perspective projection
Chapter XXX: 3D rendering
- Program 1: Displaying a simple 3D shape
- Program 2: Orthographic projection demo
- Program 3: Perspective projection demo
- Program 4: LookAt transformation
- Program 5: Controlling the camera with mouse
- Program 6: Reading glTF model and display its wireframe
- Program 7: Depth buffer and FBO
Chapter XXX: Shading
- Normal vectors and transformations
- Light sources
  - Directional light sources
  - Point light sources
- Phong shading model
- Porgram 1: Implementing the Phong shading model
- Cel shading
- Program 2: Implementing cel shading
Chapter XXX: Normal mapping
- The theory of normal mapping
- Tangent spaces
- How to compute tangent spaces of meshes
- Program 1: Implementing normal mapping
Chapter XXX: Physically-based shading
- Radiometric quantities
  - Flax
  - Irradiance
  - Radiance
- Bidirectional reflectance distribution functions (BRDF)
- Rendering equation
- Shading with directional and point light
- Well-known BRDFs
  - Lambertian BRDF
  - Program 1: Implementing the Lambertian BRDF
  - Dielectric BRDF
  - Program 2: Implementing the dielectric BRDF
  - Metalic BRDF
  - Program 3: Implementing the metalic BRDF
- glTF's metalic-roughness material
- Program 4: Implementing the metalic-roughness material
Character XXX: Character modeling
- Skeleton
- Forward kinematics
- Program 1: Visualing the skeleton of a glTF character model
Chapter XXX: Skinning
- Linear blend skinning
- Program 1: Implementing linear blend skinning
Chapter XXX: Animation
- What is a pose?
- Animation as a sequence of pose
- Keyframes and interpolations
- Representing rotations
  - Rotation matrices
  - Euler angles
  - Quaternions
    - Quaternion arithematic
    - Uniform quaternions
    - Quaternion interpolations
Chapter XXX: Animating a glTF character
Chapter XXX: Conclusion and where to go from here

Appendix

Appendix A: Development environment
- Setting up Node.js
- How to run a sample code

Last updated: 2023/10/01

CG Book

Contents

Appendix