Nutty Professor Movie

    @thi.ng/webgl
    TypeScript icon, indicating that this package has built-in type declarations

    6.1.12 • Public • Published

    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.23 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 - 2022 Karsten Schmidt // Apache Software License 2.0

    Install

    npm i @thi.ng/webgl

    DownloadsWeekly Downloads

    162

    Version

    6.1.12

    License

    Apache-2.0

    Unpacked Size

    188 kB

    Total Files

    77

    Last publish

    Collaborators

    • thi.ng