regl

What is regl?

regl is a functional abstraction for WebGL that simplifies the process of creating and managing WebGL contexts and rendering pipelines. It provides a declarative API for defining shaders, buffers, and other WebGL resources, making it easier to build complex graphics applications.

What are regl's main functionalities?

Creating a WebGL Context

This code initializes a new regl instance, which sets up a WebGL context and prepares it for rendering.

const regl = require('regl')();

Drawing a Simple Triangle

This code defines a simple triangle using regl. It specifies the vertex and fragment shaders, the vertex positions, and the draw call. The triangle is drawn in each frame.

const drawTriangle = regl({
  frag: `
  precision mediump float;
  void main () {
    gl_FragColor = vec4(1, 0, 0, 1);
  }
  `,
  vert: `
  precision mediump float;
  attribute vec2 position;
  void main () {
    gl_Position = vec4(position, 0, 1);
  }
  `,
  attributes: {
    position: [
      [-1, 0],
      [0, -1],
      [1, 1]
    ]
  },
  count: 3
});

regl.frame(() => {
  regl.clear({
    color: [0, 0, 0, 1],
    depth: 1
  });
  drawTriangle();
});

Managing Buffers

This code demonstrates how to create and use a buffer in regl. The buffer stores vertex positions, which are then used in the draw call.

const positionBuffer = regl.buffer([
  [-1, 0],
  [0, -1],
  [1, 1]
]);

const drawWithBuffer = regl({
  frag: `
  precision mediump float;
  void main () {
    gl_FragColor = vec4(0, 1, 0, 1);
  }
  `,
  vert: `
  precision mediump float;
  attribute vec2 position;
  void main () {
    gl_Position = vec4(position, 0, 1);
  }
  `,
  attributes: {
    position: positionBuffer
  },
  count: 3
});

regl.frame(() => {
  regl.clear({
    color: [0, 0, 0, 1],
    depth: 1
  });
  drawWithBuffer();
});

Using Uniforms

This code shows how to use uniforms in regl. The uniform 'color' is passed to the fragment shader, allowing dynamic control over the color of the rendered triangle.

const drawWithUniforms = regl({
  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);
  }
  `,
  attributes: {
    position: [
      [-1, 0],
      [0, -1],
      [1, 1]
    ]
  },
  uniforms: {
    color: [0, 0, 1, 1]
  },
  count: 3
});

regl.frame(() => {
  regl.clear({
    color: [0, 0, 0, 1],
    depth: 1
  });
  drawWithUniforms();
});

Other packages similar to regl

three

Three.js is a popular JavaScript library for creating 3D graphics in the browser. It provides a higher-level abstraction compared to regl, making it easier to create complex 3D scenes with less code. However, it may not offer the same level of control and performance optimization as regl.

pixi

PixiJS is a 2D rendering engine that uses WebGL for high-performance graphics. It is designed for creating interactive graphics and games, offering a simpler API compared to regl. While it is more focused on 2D graphics, it can also handle some 3D rendering tasks.

babylonjs

Babylon.js is a powerful, open-source 3D engine that provides a comprehensive set of features for creating 3D applications. It offers a higher-level API than regl, making it easier to get started with 3D graphics, but it may not provide the same fine-grained control over WebGL resources.

README

regl

This repo is an attempt at building some new functional abstractions for working with WebGL. It is still pretty experimental right now, so expect things to change a lot in the near future. If you want to know more about why I am writing this thing, take a look at the rationale.

Some sketches

In regl, you write functions which transform data into sequences of WebGL draw calls. These functions are then partially evaluated at run time into optimized JavaScript code. Here is a sketch of how this might look:

// NOTE: This doesn't work yet, it is just for illustration

const regl = require('regl')()

// This creates a new partially evaluated draw call.  We flag the dynamic
// parts of the draw call using the special `regl.dynamic` variable
const draw = regl({
  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);
    }`,

  attributes: {
    position: regl.buffer(new Float32Array([-2, -2, 4, -2, 4,  4]))
  },

  uniforms: {
    // This makes the color uniform dynamic
    color: regl.dynamic
  },

  count: 3
}).draw

function render() {  
  // clear contents of the drawing buffer
  regl.clear({
    color: [0, 0, 0, 0],
    depth: 1
  })

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

  // schedule next render event
  requestAnimationFrame(render)
}
render()

API (WORK IN PROGRESS)

Constructors

var regl = require('regl')([options])

var regl = require('regl')(element, [options])

var regl = require('regl')(canvas, [options])

var regl = require('regl')(gl, [options])

Resources

Resource constructors

regl.buffer(options)

regl.texture(options)

regl.fbo(options)

Resource methods

resource(options)

Updates a resource

resource.destroy()

Destroy resource

Rendering

regl(options)

Clean up

regl.destroy()

Errors

var REGLError = require('regl/error')

License

(c) 2016 MIT License

Supported by the Freeman Lab and the Howard Hughes Medical Institute

Changelog

0.0.0

• First published to npm