This project is part of the @thi.ng/umbrella monorepo.
WebGL & GLSL abstraction layer.
Largely declarative WebGL 1.0 / 2.0 abstraction layer, partially ported & updated from Clojure/ClojureScript versions of thi.ng/geom.
- 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
BETA - possibly breaking changes forthcoming
- @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
- @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
- @thi.ng/vector-pools - Data structures for managing & working with strided, memory mapped vectors
yarn add @thi.ng/webgl// ES module
<script type="module" src="https://unpkg.com/@thi.ng/webgl?module" crossorigin></script>
// UMD
<script src="https://unpkg.com/@thi.ng/webgl/lib/index.umd.js" crossorigin></script>Package sizes (gzipped, pre-treeshake): ESM: 11.52 KB / CJS: 11.69 KB / UMD: 11.52 KB
- @thi.ng/adapt-dpi
- @thi.ng/api
- @thi.ng/associative
- @thi.ng/checks
- @thi.ng/equiv
- @thi.ng/errors
- @thi.ng/matrices
- @thi.ng/memoize
- @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
Several demos in this repo's /examples directory are using this package.
A selection:
| Screenshot | Description | Live 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 |
 |
WebGL multi-colored cube mesh | Demo | Source |
 |
WebGL cube maps with async texture loading | 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 |
TODO
- Karsten Schmidt (@postspectacular)
© 2014 - 2020 Karsten Schmidt // Apache Software License 2.0