@thi.ng/webgl

npm downloads

This project is part of the @thi.ng/umbrella monorepo.

About
Installation
Dependencies
Usage examples
API
Authors
- Maintainer
- Contributors
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.

Features

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

BETA - possibly breaking changes forthcoming

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

@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

Installation

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.79 KB / CJS: 12.00 KB / UMD: 11.79 KB

Dependencies

Usage examples

Several demos in this repo's /examples directory are using this package.

A selection:

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

API

Generated API docs

TODO

Authors

Maintainer

Karsten Schmidt (@postspectacular)

Contributors

If this project contributes to an academic publication, please cite it as:

@misc{thing-webgl,
  title = "@thi.ng/webgl",
  author = "Karsten Schmidt and others",
  note = "https://thi.ng/webgl",
  year = 2014
}