• About
  • Features
• Status
• Support packages
• Related packages
• Installation
• Dependencies
• Usage examples
• API
• Authors
• License

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

STABLE - used in production

Search or submit any issues for this package

• @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, support for memory mapping/layouts
• @thi.ng/vector-pools - Data structures for managing & working with strided, memory mapped vectors

yarn add @thi.ng/webgl

ESM import:

import * as gl from "@thi.ng/webgl";

Browser ESM import:

<script type="module" src="https://esm.run/@thi.ng/webgl"></script>

JSDelivr documentation

Package sizes (brotli'd, pre-treeshake): ESM: 11.64 KB

• @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)

22 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
	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

Generated API docs

TODO

• Karsten Schmidt (Main author)
• @nkint
• @stwind

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
}

© 2014 - 2024 Karsten Schmidt // Apache License 2.0