regl

regl is a fast functional reactive abstraction for WebGL.

Example

In regl, there are two fundamental abstractions, resources and commands:

• A resource is a handle to a GPU resident object, like a texture, FBO or buffer.
• A command is a complete representation of the WebGL state required to perform some draw call.

To define a command you specify a mixture of static and dynamic data for the object. Once this is done, regl takes this description and then compiles it into optimized JavaScript code. For example, here is a simple regl program to draw a colored triangle:

// Calling the regl module with no arguments creates a full screen canvas and
// WebGL context, and then uses this context to initialize a new REGL instance
const regl = require('regl')()

// Calling regl() creates a new partially evaluated draw command
const drawTriangle = regl({

  // Shaders in regl are just strings.  You can use glslify or whatever you want
  // to define them.  No need to manually create shader objects.
  frag: `
    precision mediump float;
    uniform vec4 color;
    void main() {
      gl_FragColor = color;
    }`,

  vert: `
    precision mediump float;
    attribute vec2 position;
    void main() {
      gl_Position = vec4(position, 0, 1);
    }`,

  // Here we define the vertex attributes for the above shader
  attributes: {
    // regl.buffer creates a new array buffer object
    position: regl.buffer([
      [-2, -2],   // no need to flatten nested arrays, regl automatically
      [4, -2],    // unrolls them into a typedarray (default Float32)
      [4,  4]
    ]))
    // regl automatically infers sane defaults for the vertex attribute pointers
  },

  uniforms: {
    // This defines the color of the triangle to be a dynamic variable
    color: regl.prop('color')
  },

  // This tells regl the number of vertices to draw in this command
  count: 3
})

// regl.frame() wraps requestAnimationFrame and also handles viewport changes
regl.frame(() => {
  // clear contents of the drawing buffer
  regl.clear({
    color: [0, 0, 0, 0],
    depth: 1
  })

  // draw a triangle using the command defined above
  drawTriangle({
    color: [
      Math.cos(Date.now() * 0.001),
      Math.sin(Date.now() * 0.0008),
      Math.cos(Date.now() * 0.003),
      1
    ]
  })
})

See this example live

More examples

Check out the gallery.

Setup

regl has no dependencies, so setting it up is pretty easy

Live editing

To try out regl right away, you can use the live editor in the gallery.

npm

The easiest way to use regl in a project is via npm. Once you have node set up, you can install and use regl in your project using the following command:

npm i -S regl

For more info on how to use npm, check out the official docs.

Standalone script tag

You can also use regl as a standalone script if you are really stubborn. The most recent versions can be found under the releases tab. To do this, add the following script tag to your HTML:

<script src="[some cdn tbd]/regl.min.js"></script>

Why use regl?

regl is basically all of WebGL without all of the shared state. You can do anything you could in regular WebGL with little overhead and way less debugging.

Comparisons

TODO implement spinning textured cube in each of the following frameworks

• vs WebGL
• vs gl-* modules from stack.gl
• gl-react
• vs TWGL
• vs THREE.js

Benchmarks

You can run benchmarks locally using npm run bench or check them out here:

• Interactive benchmarks

API

• Initialization * As a fullscreen canvas * From a container div * From a canvas * From a WebGL context
  • Initialization options
• Commands
  • Executing commands
    • One-shot rendering
    • Batch rendering
    • Scoped commands
  • Inputs
    • Context
    • Props
    • this
  • Parameters
    • Shaders
    • Uniforms
    • Attributes
    • Drawing
    • Render target
    • Depth buffer
    • Blending
    • Stencil
    • Polygon offset
    • Culling
    • Front face
    • Dithering
    • Line width
    • Color mask
    • Sample coverage
    • Scissor
    • Viewport
• Resources
  • Buffers
    • Constructor
    • Update
    • Destroy
  • Elements
    • Constructor
    • Update
    • Destroy
  • Textures
    • Constructor
    • Update
    • Destroy
  • Cube maps
    • Constructor
    • Update
    • Destroy
  • Render buffers
    • Constructor
    • Update
    • Destroy
  • Frame buffers
    • Constructor
    • Update
    • Destroy
  • Cubic frame buffers
    • Constructor
    • Update
    • Destroy
• Other features
  • Clear the draw buffer
  • Reading pixels
  • Per-frame callbacks
  • Device capabilities and limits
  • Performance metrics
  • Clean up
  • Context loss
  • Unsafe escape hatch
• Tips
  • Reuse resources (buffers, elements, textures, etc.)
  • Preallocate memory
  • Debug vs release
  • Context loss mitigation

Development

The latest changes in regl can be found in the CHANGELOG.

For info on how to build and test headless, see the contributing guide here

License

All code (c) 2016 MIT License

Development supported by the Freeman Lab and the Howard Hughes Medical Institute (@freeman-lab on GitHub)

Asset licenses

Many examples use creative commons or public domain artwork for illustrative purposes. These assets are not included in any of the redistributable packages of regl.

• Test video (doggie-chromakey.ogv) by L0ckergn0me, used under creative commons license
• Cube maps (posx.jpeg, negx.jpeg, posy.jpeg, negy.jpeg, posz.jpeg, negz.jpeg) by Humus, used under creative commons 3 license
• Environment map of Oregon (ogd-oregon-360.jpg) due to Max Ogden (@maxogd on GitHub)
• DDS test images (alpine_cliff_a, alpine_cliff_a_norm, alpine_cliff_a_spec) taken from the CC0 license 0-AD texture pack by Wildfire games
• Tile set for tile mapping demo (tiles.png) from CC0 licensed cobblestone paths pack