@thi.ng/webgl
v6.9.95TypeScript
WebGL & GLSL abstraction layer
137/weekUpdated yesterdayApache-2.0Unpacked: 158.1 KB
Published by Karsten Schmidt
npm install @thi.ng/webgl!@thi.ng/webgl
!npm downloads
> [!NOTE]
> This is one of 214 standalone projects, maintained as part
> of the @thi.ng/umbrella monorepo
> and anti-framework.
>
> 🚀 Please help me to work full-time on these projects by sponsoring me on
> GitHub. Thank you! ❤️
- About
- Features
- Status
- Support packages
- Related packages
- Installation
- Dependencies
- Usage examples
- API
- Authors
- License
About
WebGL & GLSL abstraction layer.
Largely declarative WebGL 1.0 / 2.0 abstraction layer, partially ported
& updated from Clojure/ClojureScript versions of
thi.ng/geom.
$3
- Extensive set of WebGL related types & interfaces
- Declarative shader definition
- option to fully define shaders in TypeScript and transpile to GLSL (via
@thi.ng/shader-ast)
- attribute, varying, uniform & output type declarations via a simple config object
- GLSL code generation of data type declarations
- automatic support for GLSL ES 1.0 & 3.0
- optional layout attrib layout support for GLES 3 (WebGL2)
- automatic & typed uniform setters
- pre-declared desired GL draw state flags / settings
- customizable shader presets
- Declarative geometry, attribute & index buffer specs
- Declarative instancing (always available in WebGL2, or via ANGLE ext in WebGL1)
- Texture wrapper, declarative config
- Comprehensive texture format info (channels, strides, renderable, filterable etc.)
- FBO support with multiple attachments & render buffers
- Multi-pass shader pipeline (e.g. for GPGPU tasks)
- Pixel reading from main color buffer and textures
- Geometry & texture generators
- WebGL extension helpers & semi-automatic extension enabling
- WebGL canvas creation / setup
Status
STABLE - used in production
Search or submit any issues for this package
Support packages
- @thi.ng/webgl-msdf - Multi-channel SDF font rendering & basic text layout for WebGL
- @thi.ng/webgl-shadertoy - Basic WebGL scaffolding for running interactive fragment shaders via @thi.ng/shader-ast
Related packages
- @thi.ng/ecs - Entity Component System based around typed arrays & sparse sets
- @thi.ng/geom - Functional, polymorphic API for 2D geometry types & SVG generation
- @thi.ng/imgui - Immediate mode GUI with flexible state handling & data only shape output
- @thi.ng/matrices - Matrix & quaternion operations for 2D/3D geometry processing
- @thi.ng/shader-ast - DSL to define shader code in TypeScript and cross-compile to GLSL, JS and other targets
- @thi.ng/soa - SOA & AOS memory mapped structured views with optional & extensible serialization
- @thi.ng/vectors - Optimized 2d/3d/4d and arbitrary length vector operations, support for memory mapping/layouts
- @thi.ng/vector-pools - Data structures for managing & working with strided, memory mapped vectors
- @thi.ng/wasm-api-webgl - WebGL bridge API for hybrid TypeScript & WASM (Zig) applications
Installation
``bash`
yarn add @thi.ng/webgl
ESM import:
`ts`
import * as gl from "@thi.ng/webgl";
Browser ESM import:
`html`
Package sizes (brotli'd, pre-treeshake): ESM: 11.69 KB
Dependencies
- @thi.ng/api
- @thi.ng/canvas
- @thi.ng/checks
- @thi.ng/equiv
- @thi.ng/errors
- @thi.ng/logger
- @thi.ng/matrices
- @thi.ng/memoize
- @thi.ng/object-utils
- @thi.ng/pixel
- @thi.ng/shader-ast
- @thi.ng/shader-ast-glsl
- @thi.ng/shader-ast-stdlib
- @thi.ng/transducers
- @thi.ng/vector-pools
- @thi.ng/vectors
Note: @thi.ng/api is in _most_ cases a type-only import (not used at runtime)
Usage examples
24 projects in this repo's
/examples
directory are using this package:
| Screenshot | Description | Live demo | Source |
|:------------------------------------------------------------------------------------------------------------------------------|:------------------------------------------------------------------------------|:-------------------------------------------------------------|:------------------------------------------------------------------------------------------|
| 
| Augmenting thi.ng/geom shapes for WebGL, using instancing & attribute buffers | Demo | Source |
| 
| Converting thi.ng/geom shape types for WebGL | Demo | Source |
| | GPU-based data reduction using thi.ng/shader-ast & WebGL multi-pass pipeline | Demo | Source |
| 
| Shader-AST meta-programming techniques for animated function plots | Demo | Source |
| 
| Evolutionary shader generation using genetic programming | Demo | Source |
| 
| HOF shader procedural noise function composition | Demo | Source |
| 
| WebGL & JS canvas2D raymarch shader cross-compilation | Demo | Source |
| 
| WebGL & JS canvas 2D SDF | Demo | Source |
| 
| WebGL & Canvas2D textured tunnel shader | Demo | Source |
| 
| Minimal shader graph developed during livestream #2 | Demo | Source |
| 
| Entity Component System w/ 100k 3D particles | Demo | Source |
| 
| 3D arcball controller to rotate the camera view of a colored cube | Demo | Source |
| 
| rdom & WebGL-based image channel editor | Demo | Source |
| | WebGL multi-colored cube mesh | Demo | Source |
| 
| WebGL cube maps with async texture loading | Demo | Source |
| 
| Drawing to floating point offscreen / multi-pass shader pipeline | Demo | Source |
| 
| Game of Life implemented as WebGL2 multi-pass shader pipeline | Demo | Source |
| 
| WebGL instancing, animated grid | Demo | Source |
| 
| WebGL MSDF text rendering & particle system | Demo | Source |
| | Minimal multi-pass / GPGPU example | Demo | Source |
| 
| Shadertoy-like WebGL setup | Demo | Source |
| 
| WebGL screenspace ambient occlusion | Demo | Source |
| 
| Interactively drawing to & reading from a WebGL offscreen render texture | Demo | Source |
| 
| Basic Zig/WebAssembly WebGL demo | Demo | Source |
API
TODO
Authors
- Karsten Schmidt (Main author)
- @nkint
- @stwind
If this project contributes to an academic publication, please cite it as:
`bibtex``
@misc{thing-webgl,
title = "@thi.ng/webgl",
author = "Karsten Schmidt and others",
note = "https://thi.ng/webgl",
year = 2014
}
License
© 2014 - 2026 Karsten Schmidt // Apache License 2.0