Skip to content

Latest commit

 

History

History

webgl

README.md

webgl

npm version npm downloads Twitter Follow

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

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

Installation

yarn add @thi.ng/webgl

ES module import:

<script type="module" src="https://cdn.skypack.dev/@thi.ng/webgl"></script>

Skypack documentation

For Node.js REPL:

# with flag only for < v16
node --experimental-repl-await

> const webgl = await import("@thi.ng/webgl");

Package sizes (gzipped, pre-treeshake): ESM: 12.24 KB

Dependencies

Usage examples

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

API

Generated API docs

TODO

Authors

Maintainer

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
}

License

© 2014 - 2021 Karsten Schmidt // Apache Software License 2.0