Computer Science Computer Graphics and Visualization WebGL and Computer Graphics
WebGL and Computer Graphics
WebGL (Web Graphics Library) is a low-level JavaScript API that brings the power of hardware-accelerated computer graphics to the web browser without the need for plug-ins. By providing a direct interface to a computer's Graphics Processing Unit (GPU) based on the OpenGL ES standard, WebGL enables developers to create and render complex, interactive 2D and 3D graphics, data visualizations, and games directly within an HTML canvas element. This technology effectively bridges the gap between high-performance, native graphics applications and the universal accessibility of the web, allowing for rich, visually compelling experiences to run on any compatible device.
1.1.
The Digital Image
1.1.1.
Pixels and Resolution
1.1.1.1. Definition of a Pixel
1.1.1.2. Pixel Components and Structure
1.1.1.3. Image Resolution and Aspect Ratio
1.1.1.4. Display Resolution vs. Image Resolution
1.1.1.5. Pixel Density and DPI
1.1.2.
Color Models
1.1.2.1.1. Red, Green, Blue Components
1.1.2.1.2. Additive Color Mixing
1.1.2.1.3. RGB Value Ranges
1.1.2.2.1. Alpha Channel and Transparency
1.1.2.2.2. Premultiplied Alpha
1.1.2.3.2. Saturation Component
1.1.2.3.3. Value Component
1.1.2.4.2. Saturation Component
1.1.2.4.3. Lightness Component
1.1.2.5. Color Model Conversions
1.1.2.5.1. RGB to HSV Conversion
1.1.2.5.2. RGB to HSL Conversion
1.1.2.5.3. HSV to RGB Conversion
1.1.3.
Color Depth and Image Representation
1.1.3.1. Bit Depth Concepts
1.1.3.1.1. 8-bit Color Depth
1.1.3.1.2. 16-bit Color Depth
1.1.3.1.3. 24-bit Color Depth
1.1.3.1.4. 32-bit Color Depth
1.1.3.2. Color Representation Methods
1.1.3.2.3. High Dynamic Range
1.1.3.3. Bitmap Image Structure
1.1.3.3.1. Pixel Array Organization
1.2.
Coordinate Systems
1.2.1.
2D Coordinate Systems
1.2.1.1. Cartesian Coordinates
1.2.1.2. Screen Coordinate System
1.2.1.2.1. Origin Location
1.2.1.2.2. Y-axis Direction
1.2.1.2.3. Pixel Coordinates
1.2.2.
3D Coordinate Systems
1.2.2.1. Cartesian 3D Coordinates
1.2.2.1.1. X, Y, and Z Axes
1.2.2.1.2. Right-hand Rule
1.2.2.2. Coordinate System Handedness
1.2.2.2.1. Right-handed Systems
1.2.2.2.2. Left-handed Systems
1.2.2.2.3. Conversion Between Systems
1.2.3.
Coordinate Space Transformations
1.2.3.1.1. Global Coordinate System
1.2.3.2.1. Display Coordinates
1.2.3.3. Normalized Device Coordinates
1.2.3.3.1. NDC Range and Properties
1.2.3.4. Viewport Transformation
1.2.3.4.1. Mapping NDC to Screen
1.3.
Geometric Primitives
1.3.1.
Points
1.3.1.1. 2D Point Representation
1.3.1.2. 3D Point Representation
1.3.1.3. Point Size and Rendering
1.3.2.
Lines
1.3.2.1.1. Start and End Points
1.3.2.2.1. Connected Line Segments
1.3.2.3.1. Parametric Form
1.3.2.3.2. Slope-Intercept Form
1.3.3.
Triangles
1.3.3.1. Triangle Representation
1.3.3.2. Triangle Properties
1.3.3.2.1. Area Calculation
1.3.4.
Polygons
1.3.4.1. Polygon Definition
1.3.4.2.1. Convex Polygons
1.3.4.2.2. Concave Polygons
1.3.4.3. Polygon Winding Order
1.3.4.3.1. Clockwise Winding
1.3.4.3.2. Counter-clockwise Winding
1.4.
Rendering Approaches
1.4.1.
Rasterization
1.4.1.1. Rasterization Process
1.4.1.3. Fragment Generation
1.4.1.4. Advantages of Rasterization
1.4.1.5. Limitations of Rasterization
1.4.2.
Ray Tracing
1.4.2.1. Ray Tracing Process
1.4.2.2. Ray-Object Intersection
1.4.2.3. Recursive Ray Tracing
1.4.2.4. Advantages of Ray Tracing
1.4.2.5. Limitations of Ray Tracing
1.5.
Graphics Pipeline Overview
1.5.1.
Pipeline Stages
1.5.1.1. Application Stage
1.5.1.2. Geometry Processing Stage
1.5.1.3. Rasterization Stage
1.5.1.4. Pixel Processing Stage
1.5.3.
Geometry Processing Stage
1.5.3.1. Vertex Processing
1.5.3.2. Primitive Assembly
1.5.4.
Rasterization Stage
1.5.4.2. Fragment Generation
1.5.5.
Pixel Processing Stage
1.5.5.2. Per-fragment Operations
1.5.5.3. Framebuffer Output