# gfxfundamentals/webgl-fundamentals

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/gfxfundamentals-webgl-fundamentals).**

_How this analysis was created: the description and tags below were written by an AI model that read this project's README and public documentation pages; stars, license and language come straight from the GitHub API. The model does not read the source code._

5,004 stars · 687 forks · HTML · NOASSERTION

## Links

- GitHub: https://github.com/gfxfundamentals/webgl-fundamentals
- Homepage: http://webglfundamentals.org
- awesome-repositories: https://awesome-repositories.com/repository/gfxfundamentals-webgl-fundamentals.md

## Topics

`3d` `3d-math` `glsl` `glsl-shaders` `math` `shaders` `webgl`

## Description

webgl-fundamentals is a comprehensive educational resource and graphics tutorial for learning hardware-accelerated 2D and 3D rendering using the WebGL API. It serves as a structured 3D graphics curriculum and GPU programming reference, guiding users through the graphics pipeline from basic geometry to advanced rendering techniques.

The project provides detailed guides on GLSL shader development, including the creation of vertex and fragment shaders. It specifically focuses on the implementation of real-time lighting models—such as directional, point, and spot lighting—and the application of shadow mapping and texture mapping workflows.

The resource covers a broad surface of computer graphics capabilities, including 3D spatial mathematics, camera system implementation for perspective and orthographic views, and the use of matrix transformations. It also includes instructions for performing general-purpose GPU computing (GPGPU) and optimizing rendering performance through indexed vertices.

## Tags

### Part of an Awesome List

- [Graphics Pipeline Implementation](https://awesome-repositories.com/f/awesome-lists/devtools/canvas-and-webgl-graphics/webgl-rendering-pipelines/graphics-pipeline-implementation.md) — Guides users through building a complete graphics pipeline using GLSL shaders and WebGL state management. ([source](http://webglfundamentals.org/))
- [Pixel-Level Image Manipulation](https://awesome-repositories.com/f/awesome-lists/media/pixel-level-image-manipulation.md) — Performs direct pixel-level manipulation of image buffers via GPU shaders for real-time processing. ([source](https://webglfundamentals.org/))

### Education & Learning Resources

- [Computer Graphics](https://awesome-repositories.com/f/education-learning-resources/educational-resources/systems-applied-computing/scientific-and-specialized-computing/computer-graphics.md) — Offers comprehensive educational content on rendering, geometry, and visual computing techniques.
- [GLSL Reference Guides](https://awesome-repositories.com/f/education-learning-resources/glsl-reference-guides.md) — Provides a technical reference guide for writing vertex and fragment shaders using the GLSL language.
- [GPGPU Implementation Guides](https://awesome-repositories.com/f/education-learning-resources/gpgpu-implementation-guides.md) — Offers practical implementation guides for performing general-purpose computing (GPGPU) on graphics hardware. ([source](http://webglfundamentals.org/))

### Graphics & Multimedia

- [2D and 3D Graphics Rendering](https://awesome-repositories.com/f/graphics-multimedia/2d-and-3d-graphics-rendering.md) — Provides a complete curriculum for rendering geometric shapes, meshes, and images in 2D and 3D using WebGL. ([source](http://webglfundamentals.org/webgl/lessons/webgl-2d-vs-3d-library.html))
- [Programmable Pipelines](https://awesome-repositories.com/f/graphics-multimedia/media-production-suites/visual-effects/visual-effect-shaders/glsl-shader-workflows/programmable-pipelines.md) — Implements programmable vertex and fragment shader pipelines to transform geometry and calculate pixel colors on the GPU.
- [3D Camera Projection Systems](https://awesome-repositories.com/f/graphics-multimedia/3d-camera-projection-systems.md) — Implements camera projection systems to control how 3D scenes are projected via perspective and orthographic views. ([source](http://webglfundamentals.org/))
- [3D Lighting and Shadows](https://awesome-repositories.com/f/graphics-multimedia/3d-lighting-and-shadows.md) — Implements a comprehensive system for directional, point, and spot lighting along with shadow mapping for 3D realism. ([source](http://webglfundamentals.org/))
- [3D Object Transform Management](https://awesome-repositories.com/f/graphics-multimedia/3d-object-transform-management.md) — Provides tools for applying translation, scaling, and rotation to position and orient 3D objects. ([source](http://webglfundamentals.org/webgl/lessons/webgl-3d-orthographic.html))
- [Object Transforms](https://awesome-repositories.com/f/graphics-multimedia/3d-scene-descriptions/scene-theme-transformers/object-transforms.md) — Provides matrix-based workflows for moving, rotating, and scaling 3D objects within a virtual scene. ([source](https://webglfundamentals.org/webgl/lessons/ja))
- [3D Spatial Mathematics](https://awesome-repositories.com/f/graphics-multimedia/3d-spatial-mathematics.md) — Teaches the use of 4x4 matrices for translation, rotation, scaling, and perspective projection to position objects in 3D space. ([source](http://webglfundamentals.org/))
- [Camera Systems](https://awesome-repositories.com/f/graphics-multimedia/camera-systems.md) — Implements virtual camera systems to manage viewpoints and perspective projections for 3D scenes.
- [Camera Perspective Configurations](https://awesome-repositories.com/f/graphics-multimedia/camera-systems/camera-perspective-configurations.md) — Provides implementation details for both orthographic and perspective projection configurations to simulate 3D space. ([source](https://webglfundamentals.org/))
- [Depth Buffers](https://awesome-repositories.com/f/graphics-multimedia/depth-buffers.md) — Implements a Z-buffer to manage pixel visibility and ensure correct object occlusion in 3D scenes.
- [Vertex Attribute Definition](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/3d-math-and-geometry-toolkits/geometry-primitives/node-based-procedural-geometry/vertex-attribute-definition.md) — Defines how the GPU interprets vertex attribute buffers for coordinates, colors, and normals. ([source](http://webglfundamentals.org/webgl/lessons/webgl-3d-orthographic.html))
- [3D Lighting Models](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/lighting-systems/3d-lighting-models.md) — Implements point light sources that calculate intensity based on the distance and direction from a 3D coordinate. ([source](http://webglfundamentals.org/webgl/lessons/webgl-3d-lighting-point.html))
- [Light Source Functions](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/lighting-systems/3d-lighting-models/light-source-functions.md) — Implements cone-shaped spot lighting by calculating the angle between light direction and surface points. ([source](http://webglfundamentals.org/webgl/lessons/webgl-3d-lighting-spot.html))
- [Affine Matrix Transformations](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/coordinate-viewport-transformations/matrix-transformation-engines/affine-matrix-transformations.md) — Uses 4x4 affine matrices to handle translation, rotation, and scaling for 2D and 3D coordinate mapping. ([source](http://webglfundamentals.org/webgl/lessons/webgl-2d-matrices.html))
- [3D Graphics Pipelines](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/systems/3d-graphics-pipelines.md) — Provides a structured curriculum on implementing 3D graphics pipelines, including geometry processing and lighting.
- [Shadow Mapping](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/tile-map-renderers/shadow-mapping.md) — Teaches how to implement 3D shadow mapping by comparing fragment depth against light-space depth maps. ([source](https://webglfundamentals.org/webgl/lessons/ja))
- [Real-Time Lighting Models](https://awesome-repositories.com/f/graphics-multimedia/indirect-lighting-simulation/light-transport-simulations/real-time-lighting-models.md) — Implements real-time shaders for directional, point, and spot lighting to create visual depth.
- [Shader Programming](https://awesome-repositories.com/f/graphics-multimedia/media-production-suites/visual-effects/visual-effect-shaders/glsl-shader-workflows/shader-programming.md) — Provides detailed guides on writing GLSL vertex and fragment shaders to process pixels and geometry on the GPU.
- [Surface Normal Computations](https://awesome-repositories.com/f/graphics-multimedia/surface-normal-computations.md) — Provides instructions for calculating vertex and face normals to enable accurate lighting and shading in 3D scenes. ([source](http://webglfundamentals.org/webgl/lessons/webgl-3d-lighting-directional.html))
- [Normal Vector Transformations](https://awesome-repositories.com/f/graphics-multimedia/surface-normal-computations/normal-vector-transformations.md) — Explains how to transform surface normals using inverse-transpose matrices to ensure lighting remains accurate during non-uniform scaling. ([source](http://webglfundamentals.org/webgl/lessons/webgl-3d-lighting-directional.html))
- [Texture Projection Mapping](https://awesome-repositories.com/f/graphics-multimedia/texture-projection-mapping.md) — Implements real-time texture projection onto 3D surfaces using planar, perspective, and cubemap mapping. ([source](https://webglfundamentals.org/))
- [Vertex and Index Buffer Rendering](https://awesome-repositories.com/f/graphics-multimedia/textured-mesh-rendering/vertex-and-index-buffer-rendering.md) — Implements the use of vertex and index buffers to stream geometric data to the GPU for hardware-accelerated rendering.
- [WebGL Rendering](https://awesome-repositories.com/f/graphics-multimedia/webgl-rendering.md) — Provides a comprehensive guide to using the WebGL API for hardware-accelerated 2D and 3D graphics rendering.
- [2D Scaling Operations](https://awesome-repositories.com/f/graphics-multimedia/2d-vector-geometries/2d-scaling-operations.md) — Demonstrates how to resize or flip 2D shapes by applying scale factors to their vertex positions. ([source](http://webglfundamentals.org/webgl/lessons/webgl-2d-scale.html))
- [Geometry Translation](https://awesome-repositories.com/f/graphics-multimedia/2d-vector-geometries/geometry-translation.md) — Explains how to translate 2D geometry by offsetting vertex coordinates to shift positions on a canvas. ([source](http://webglfundamentals.org/webgl/lessons/webgl-2d-translation.html))
- [3D Geometry Generators](https://awesome-repositories.com/f/graphics-multimedia/3d-geometry-generators.md) — Generates 3D objects by rotating a 2D silhouette curve around a central axis. ([source](http://webglfundamentals.org/webgl/lessons/webgl-3d-geometry-lathe.html))
- [Target-Based Object Orientation](https://awesome-repositories.com/f/graphics-multimedia/camera-systems/camera-interaction-controllers/camera-animations/ray-traced-object-animations/target-based-object-orientation.md) — Computes matrices that position and rotate 3D objects to face a specific target coordinate. ([source](http://webglfundamentals.org/webgl/lessons/webgl-3d-camera.html))
- [GPU Hardware Acceleration](https://awesome-repositories.com/f/graphics-multimedia/gpu-hardware-acceleration.md) — Explains how to interface with graphics processing units for hardware-accelerated rendering and computations.
- [Orthographic Projections](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/3d-math-and-geometry-toolkits/geometry-primitives/coordinate-mapping/3d-geometry-utilities/orthographic-projections.md) — Transforms 3D coordinates into clip space using matrices to project objects without perspective distortion. ([source](http://webglfundamentals.org/webgl/lessons/webgl-3d-orthographic.html))
- [Matrix Transformation Engines](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/coordinate-viewport-transformations/matrix-transformation-engines.md) — Uses 4x4 homogeneous matrices to manage nested transformation histories for positioning and projecting 3D geometry. ([source](http://webglfundamentals.org/webgl/lessons/webgl-2d-matrix-stack.html))
- [2D Image Transformations](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/coordinate-viewport-transformations/matrix-transformation-engines/2d-image-transformations.md) — Ships examples of rendering 2D images onto the screen using unit quads and matrix transformations. ([source](http://webglfundamentals.org/webgl/lessons/webgl-2d-drawimage.html))
- [Transformation Stacks](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/coordinate-viewport-transformations/matrix-transformation-engines/affine-matrix-transformations/transformation-stacks.md) — Tracks a history of transformation matrices to enable complex nesting of operations and restoration of previous states.
- [Simplified Graphics API Wrappers](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/systems/3d-graphics-pipelines/geometry-instancing/complex-geometry-rendering/simplified-graphics-api-wrappers.md) — Implements high-level wrappers to reduce the verbose WebGL API calls required for buffers, shaders, and textures. ([source](http://webglfundamentals.org/docs/))
- [Graphics Texture Loading](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/systems/3d-graphics-pipelines/texture-mapping-pipelines/specialized-texture-imports/graphics-texture-loading.md) — Provides utilities for loading image files and cubemaps to be used as surface textures on 3D models. ([source](http://webglfundamentals.org/))
- [Multi-Texture Blending](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/systems/3d-graphics-pipelines/texture-mapping-pipelines/specialized-texture-imports/graphics-texture-loading/multi-texture-blending.md) — Demonstrates how to blend multiple image sources in a shader by assigning each to a unique texture unit. ([source](http://webglfundamentals.org/webgl/lessons/webgl-2-textures.html))
- [Texture Unit Sampling](https://awesome-repositories.com/f/graphics-multimedia/layer-based-animations/texture-sampling/texture-unit-sampling.md) — Assigns images to hardware texture units for simultaneous sampling and blending within a single GLSL shader.
- [Primitive Shape Generation](https://awesome-repositories.com/f/graphics-multimedia/primitive-shape-generation.md) — Procedurally generates vertex data for standard geometric primitives like spheres, cubes, and cones. ([source](http://webglfundamentals.org/docs/))
- [Real-Time Image Filtering](https://awesome-repositories.com/f/graphics-multimedia/real-time-image-filtering.md) — Uses fragment shaders to manipulate pixel data in real-time for creating visual effects and image filters. ([source](http://webglfundamentals.org/))

### Scientific & Mathematical Computing

- [Geometric Calculations](https://awesome-repositories.com/f/scientific-mathematical-computing/2d-geometric-modeling/geometric-calculations.md) — Provides comprehensive guides on performing the geometric calculations necessary for 2D and 3D spatial transformations. ([source](http://webglfundamentals.org/docs/))
- [GPU-Accelerated Computation](https://awesome-repositories.com/f/scientific-mathematical-computing/gpu-accelerated-computation.md) — Demonstrates how to offload non-graphical mathematical computations to the GPU for high-performance processing. ([source](https://webglfundamentals.org/))

### User Interface & Experience

- [Spatial Transformations](https://awesome-repositories.com/f/user-interface-experience/grid-layout-engines/2d-and-3d-element-transformations/spatial-transformations.md) — Uses 4x4 matrices to perform translation, rotation, scaling, and projection for positioning objects in 3D space.
- [Texture Mapping](https://awesome-repositories.com/f/user-interface-experience/texture-mapping.md) — Maps image and data textures to 3D geometry using normalized coordinates and advanced projection techniques. ([source](http://webglfundamentals.org/))
- [View Matrix Calculators](https://awesome-repositories.com/f/user-interface-experience/view-matrix-calculators.md) — Provides utilities for calculating camera view matrices based on position and orientation to transform the scene. ([source](http://webglfundamentals.org/webgl/lessons/webgl-3d-camera.html))
- [Rendering Throughput Optimizers](https://awesome-repositories.com/f/user-interface-experience/performance-optimizers/graphics-performance-optimizations/rendering-throughput-optimizers.md) — Optimizes rendering throughput using techniques like indexed vertices and instanced drawing to maximize frame rates. ([source](http://webglfundamentals.org/))

### Artificial Intelligence & ML

- [Geometric Normal Transformations](https://awesome-repositories.com/f/artificial-intelligence-ml/batch-normalization/geometric-normal-transformations.md) — Adjusts surface normal vectors using inverse transpose matrices to maintain perpendicularity during non-uniform scaling.