Nutty Professor Movie
    TypeScript icon, indicating that this package has built-in type declarations

    6.1.12 • Public • Published


    npm version npm downloads Twitter Follow

    This project is part of the monorepo.


    WebGL & GLSL abstraction layer.

    Largely declarative WebGL 1.0 / 2.0 abstraction layer, partially ported & updated from Clojure/ClojureScript versions of


    • Extensive set of WebGL related types & interfaces
    • Declarative shader definition
      • option to fully define shaders in TypeScript and transpile to GLSL (via
      • 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

    Support packages

    Related packages

    • - Entity Component System based around typed arrays & sparse sets
    • - Functional, polymorphic API for 2D geometry types & SVG generation
    • - Immediate mode GUI with flexible state handling & data only shape output
    • - Matrix & quaternion operations for 2D/3D geometry processing
    • - DSL to define shader code in TypeScript and cross-compile to GLSL, JS and other targets
    • - SOA & AOS memory mapped structured views with optional & extensible serialization
    • - Optimized 2d/3d/4d and arbitrary length vector operations
    • - Data structures for managing & working with strided, memory mapped vectors


    yarn add

    ES module import:

    <script type="module" src=""></script>

    Skypack documentation

    For Node.js REPL:

    # with flag only for < v16
    node --experimental-repl-await
    > const webgl = await import("");

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


    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


    Generated API docs





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

      title = "",
      author = "Karsten Schmidt and others",
      note = "",
      year = 2014


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


    npm i

    DownloadsWeekly Downloads






    Unpacked Size

    188 kB

    Total Files


    Last publish