Skip to content

Latest commit

 

History

History
 
 

webgl

README.md

@thi.ng/webgl

npm version npm downloads Mastodon Follow

Note

This is one of 199 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

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

Dependencies

Note: @thi.ng/api is in most cases a type-only import (not used at runtime)

Usage examples

23 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
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
}

License

© 2014 - 2024 Karsten Schmidt // Apache License 2.0