regl + canvas sketch + hot reloading

about.md

canvas-sketch + regl + hot reloading

To quick start:

# move to an empty folder
mkdir my-folder && cd my-folder

# paste regl.js file
pbpaste > regl.js

# auto-install & run
npx canvas-sketch-cli regl.js --open --hot

To re-run without installing each time, install it once like so:

npm i canvas-sketch-cli --save-dev
npx canvas-sketch regl.js --hot

regl.js

const canvasSketch = require('canvas-sketch');
const createRegl = require('regl');

const settings = {
  // Make the loop animated
  animate: true,
  // Get a WebGL canvas rather than 2D
  context: 'webgl',
  // Turn on MSAA
  attributes: { antialias: true }
};

const sketch = ({ gl }) => {
  // Setup REGL with our canvas context
  const regl = createRegl({ gl });

  // Regl GL draw commands
  // ...

  // Return the renderer function
  return {
    render ({ time }) {
      // Update regl sizes
      regl.poll();

      // Clear back buffer
      regl.clear({
        color: [ 0, 0, 0, 1 ]
      });

      // Draw meshes to scene
      // ...
    },
    unload () {
      // Unload sketch for hot reloading
      regl.destroy();
    }
  }
};

canvasSketch(sketch, settings);