regl is a fast, functional WebGL framework that simplifies graphics programming by abstracting the WebGL API into "resources" and "commands." It emphasizes a data-flow approach, minimizing shared state to optimize performance. Instead of direct WebGL calls, developers define declarative commands describing the entire state for a draw call, which regl then compiles into optimized JavaScript. The current stable version is 2.1.1, last published a year ago as of November 2024. regl does not adhere to a strict release cadence, with updates occurring as needed for fixes and features. Its key differentiators include its functional paradigm, automatic state batching for performance, and a minimalistic API compared to raw WebGL, which appeals to users looking for a less verbose and more declarative approach to real-time graphics while maintaining high performance and stability.
npm install reglVerified import paths — ran on the pinned version, not inferred.
This example initializes a full-screen WebGL context with regl and draws a single animating triangle, demonstrating core concepts like defining commands with shaders, attributes, and uniforms.
During development, ensure you compile or bundle with a debug flag (e.g., `--debug` for Browserify) to keep error messages and enable source maps. This helps catch issues faster.
Implement a `webglcontextlost` event listener to call `event.preventDefault()` and a `webglcontextrestored` listener to systematically recreate and re-upload all necessary `regl` resources and re-evaluate commands.
Call the `.destroy()` method on `regl` resources (e.g., `regl.buffer(...).destroy()`, `regl.texture(...).destroy()`) once they are out of scope or no longer actively used, to free up GPU memory. Manage the lifecycle of these objects carefully.
If migrating from very old `regl` code or referencing outdated examples, be aware that dynamic functions now expect `(context, props)` as their argument signature. Adjust function definitions accordingly.
Review the `frag` and `vert` shader strings for syntax errors, missing semicolons, incorrect variable declarations, or unsupported features. Check WebGL context version compatibility for specific GLSL features.
Reload the browser tab or restart the browser. For programmatic handling, implement the context loss and restoration listeners described in the warnings.
Ensure you call the imported `regl` factory function, typically as `const regl = require('regl')();` or `import createREGL from 'regl'; const regl = createREGL();`.No dependency data recorded yet.