New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

@thi.ng/webgl

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@thi.ng/webgl

WebGL & GLSL abstraction layer

6.9.34
Source
npm

Version published: 3 weeks ago

Maintainers: 1

Created: 6 years ago

Source

npm downloads

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

@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

23 projects in this repo's /examples directory are using this package:

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

Keywords

FAQs

What is @thi.ng/webgl?

Is @thi.ng/webgl well maintained?

Package last updated on 23 Jan 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install