How to use regl - 10 common examples

_onContextCreate = gl => {
    const regl = REGL({ gl });

    const pointBuffer = regl.buffer(
      Array(NUM_POINTS)
        .fill()
        .map(() => {
          const color = hsv2rgb(Math.random() * 360, 0.6, 1);
          return [
            // freq
            Math.random() * 10,
            Math.random() * 10,
            Math.random() * 10,
            Math.random() * 10,
            // phase
            2.0 * Math.PI * Math.random(),
            2.0 * Math.PI * Math.random(),
            2.0 * Math.PI * Math.random(),

export default function time(scene, reglContext) {
  Object.freeze(scene)  // Mutation of the scene would be a bug!

  const regl = reglInit(reglContext)

  const frag = `
    precision mediump float;
    uniform vec3 color;
    void main () {
      gl_FragColor = vec4(color, 1);
    }
  `

  function Mesh({id, positions, cells, mat: {color}, subsurf}) {
    this.id = id
    if (subsurf) {
      let {positions: subsurfPositions, cells: subsurfCells} = catmullClark(positions, cells, subsurf, true)
      this.verts = regl.buffer(subsurfPositions)
      this.cells = regl.elements(subsurfCells)
    } else {

};

const mapElement = (buffer, elementIndex, stride, map) => {
  for (let i = 0, il = buffer.length / stride; i < il; i++) {
    const index = elementIndex + i * stride;
    buffer[index] = map(buffer[index], index, i);
  }
  return buffer;
};

//------------------------------------------------------------------------------
// Init
//------------------------------------------------------------------------------

const canvas = document.getElementById("canvas");
const regl = createRegl(canvas);
const camera = createCamera(canvas);
const makeProjection = (viewportWidth, viewportHeight) =>
  mat4.perspective([], Math.PI / 2, viewportWidth / viewportHeight, 0.01, 1000);

//------------------------------------------------------------------------------
// Line creation
//------------------------------------------------------------------------------

// prettier-ignore
const lineSimple = createLine(regl, {
  width: 100,
  color: [0.75, 0.75, 0.75, 1],
  is2d: true,
  points: [
    -0.9, +0.9,
    +0.9, +0.9,

_onContextCreate = gl => {
    const regl = REGL({ gl });

    const color = this.props.color || [1, 0, 0];

    const command = regl({
      frag: `
  precision highp float;
  void main () {
    gl_FragColor = vec4(${color[0]}, ${color[1]}, ${color[2]}, 1);
  }`,
      vert: `
  precision highp float;
  attribute vec2 position;
  void main () {
    gl_Position = vec4(position, 0, 1);
  }`,
      attributes: {

_onContextCreate = gl => {
    const regl = REGL({ gl });

    const pixels = regl.texture();

    const drawFeedback = regl({
      frag: `
      precision mediump float;
      uniform sampler2D texture;
      uniform vec2 mouse;
      uniform float t;
      varying vec2 uv;
      void main () {
        float dist = length(gl_FragCoord.xy - mouse);
        gl_FragColor = vec4(0.98 * texture2D(texture,
                                             uv + cos(t) * vec2(0.5 - uv.y, uv.x - 0.5) - sin(2.0 * t) * (uv - 0.5)).rgb, 1) +
                       exp(-0.01 * dist) * vec4(
                         1.0 + cos(2.0 * t),

_onContextCreate = gl => {
    const regl = REGL({ gl });

    const makeModelCommand = model =>
      regl({
        vert: `
  precision highp float;
  attribute vec3 position, normal;
  uniform mat4 model, view, projection;
  varying vec3 fragNormal, fragPosition;
  uniform vec3 offset;
  void main() {
    fragNormal = normal;
    fragPosition = position + offset;
    gl_Position = projection * view * model * vec4(position + offset, 1);
  }`,
        frag: `
  precision highp float;

componentDidMount(){
    const canvasRef = this.props.canvas || this.canvasRef;
    const gl = canvasRef.getContext("webgl", {
      alpha: false,
      antialias: false,
      stencil: false,
      preserveDrawingBuffer: false
    });

    const regl = reglInit({ gl });
    regl.cache = {};
    this.regl = regl;

    if(this.props.onReglInit &&
       typeof this.props.onReglInit === 'function'){
      this.props.onReglInit(regl);
    }

    this.rootNode = ReglRenderer.createContainer(new ReglRootNode(regl, this.context));

    this.regl.clear({
      color: this.props.color || [0, 0, 0, 1],
      depth: this.props.depth || 1
    });

    ReglRenderer.updateContainer(this.props.children, this.rootNode, this);

onContextCreate = gl => {
    const regl = REGL(gl);
    const rngl = gl.getExtension("RN");
    const clear = this.props.clearCommand(regl, rngl);
    const draw = this.props.drawCommand(regl, rngl);

    this.setState({
      frame: props => {
        clear(props);
        draw(props);
        gl.endFrameEXP();
      }
    });
  };

onContextCreate = gl => {
    const regl = REGL(gl);
    const rngl = gl.getExtension("RN");

    this.setState({
      frame: props => {

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

        if (this.props.children)
          this.props.children.forEach(entity => entity.renderer(regl)(entity));

        gl.endFrameEXP();
      }
    });

onContextCreate = gl => {
    const regl = REGL(gl);
    const rngl = gl.getExtension("RN");
    const clear = this.props.clearCommand(regl, rngl);
    const draw = this.props.drawCommand(regl, rngl);

    this.setState({
      frame: props => {
        clear(props);
        draw(props);
        gl.endFrameEXP();
      }
    });
  };