@thi.ng/webgl

v6.9.90

Published

2 days ago

WebGL & GLSL abstraction layer

Downloads

2,109

npm downloads

[!NOTE] This is one of 211 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

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

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

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.67 KB

Dependencies

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

Generated API docs

TODO

Authors

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
}

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme