{"library":"regl","title":"regl: Fast Functional WebGL Framework","description":"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.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install regl"],"cli":null},"imports":["import createREGL from 'regl';\nconst regl = createREGL();","const regl = require('regl')();","import type { REGL, Buffer, Texture } from 'regl';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"const regl = require('regl')();\n\nconst drawTriangle = regl({\n  frag: `\n    precision mediump float;\n    uniform vec4 color;\n    void main() {\n      gl_FragColor = color;\n    }`,\n\n  vert: `\n    precision mediump float;\n    attribute vec2 position;\n    void main() {\n      gl_Position = vec4(position, 0, 1);\n    }`,\n\n  attributes: {\n    position: regl.buffer([\n      [-2, -2],\n      [4, -2],\n      [4, 4]\n    ])\n  },\n\n  uniforms: {\n    color: regl.prop('color')\n  },\n  count: 3\n});\n\nregl.frame(({time}) => {\n  regl.clear({\n    color: [0, 0, 0, 0],\n    depth: 1\n  });\n\n  drawTriangle({\n    color: [\n      Math.cos(time * 0.001),\n      Math.sin(time * 0.0008),\n      Math.cos(time * 0.003),\n      1\n    ]\n  });\n});","lang":"javascript","description":"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}