index.js

document.body.style.margin = 0;
document.body.style.padding = 0;

const width = window.innerWidth;
const height = window.innerHeight;

const canvas = document.body.appendChild(document.createElement('canvas'))
const fit = require('canvas-fit');
const bezier = require('bezier');
window.addEventListener('resize', fit(canvas), false)

const regl = require('regl')({
  canvas: canvas
});

const createFramebuffer = () => {
  return regl.framebuffer({
    color: regl.texture({
      width: width,
      height: height,
      min: 'linear',
      max: 'linear'
    }),
    depth: false
  });
}


const backbuffer = createFramebuffer();
const fbo1 = createFramebuffer();
const fbo2 = createFramebuffer();


const blurFrag = `
  precision mediump float;

  vec4 blur(sampler2D image, vec2 uv, vec2 resolution, vec2 d) {
    vec4 color = vec4(0.0);
    vec2 off1 = vec2(1.3846153846) * d;
    vec2 off2 = vec2(3.2307692308) * d;
    color += texture2D(image, uv) * 0.2270270270;
    color += texture2D(image, uv + (off1 / resolution)) * 0.3162162162;
    color += texture2D(image, uv - (off1 / resolution)) * 0.3162162162;
    color += texture2D(image, uv + (off2 / resolution)) * 0.0702702703;
    color += texture2D(image, uv - (off2 / resolution)) * 0.0702702703;
    return color;
  }

  uniform sampler2D fbo;
  uniform vec2 resolution;
  uniform vec2 direction;
  varying vec2 uv;

  void main() {
    gl_FragColor = blur(fbo, uv, resolution.xy, direction);
  }
`;

const blur = regl({
  frag: blurFrag,
  uniforms: {
    fbo: regl.prop('fbo'),
    resolution: regl.prop('resolution'),
    direction: regl.prop('direction')
  },

  vert: `
  precision mediump float;
  attribute vec2 position;
  varying vec2 uv;
  void main () {
    uv = position;
    gl_Position = vec4(1.0 - 2.0 * position, 0, 1);
  }`,

  attributes: {
    position: [
      -2, 0,
      0, -2,
      2, 2]
  },

  count: 3,
  // framebuffer: regl.prop('framebuffer')
});

const blend = regl({
  frag: `
    precision mediump float;
    uniform sampler2D backbuffer;
    uniform sampler2D blur;
    varying vec2 uv;

    void main() {
      vec4 bb = texture2D(backbuffer, uv);
      vec4 bl = texture2D(blur, uv);
      gl_FragColor = bl + bb;
    }

  `,
  uniforms: {
    backbuffer: regl.prop('backbuffer'),
    blur: regl.prop('blur')
  },

  vert: `
  precision mediump float;
  attribute vec2 position;
  varying vec2 uv;
  void main () {
    uv = position;
    gl_Position = vec4(1.0 - 2.0 * position, 0, 1);
  }`,

  attributes: {
    position: [
      -2, 0,
      0, -2,
      2, 2]
  },

  count: 3
});


const vert = `
  precision mediump float;
  attribute vec2 position;
  varying vec2 uv;

  void main() {
    gl_Position = vec4(position, 0, 1);
  }
`;
const lineFrag = `
  precision mediump float;
  uniform vec4 color;

  void main() {
    gl_FragColor = color;
  }
`;
const line = regl({
  vert: vert,
  frag: lineFrag,
  attributes: {
    position: regl.prop('position')
  },
  uniforms: {
    color: regl.prop('color')
  },
  count: regl.prop('count'),
  primitive: 'lines',
  lineWidth: 3,
  framebuffer: regl.prop('framebuffer')
});


regl.frame(({ time, viewportWidth, viewportHeight }) => {

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

  line({
    framebuffer: backbuffer,
    position: [[Math.cos(time), -1], [-1, 1]],
    color: [0.5, 0.7, 0.3, 0.9],
    count: 2
  });
  blur({
    fbo: backbuffer,
    direction: [0.0, 1.0],
    resolution: [viewportWidth, viewportHeight],
    framebuffer: fbo1
  });
  blur({
    fbo: fbo1,
    direction: [1.0, 0.0],
    resolution: [viewportWidth, viewportHeight],
    framebuffer: fbo2
  });
  blend({
    backbuffer: backbuffer,
    blur: fbo2
  });
})

package.json

{
  "name": "line-glow",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "budo index.js --live -o -- -t [ babelify --presets [ es2015 ]]"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bezier": "^0.1.0",
    "canvas-fit": "^1.5.0",
    "glsl-fast-gaussian-blur": "^1.0.2",
    "regl": "^1.1.1"
  },
  "devDependencies": {
    "babel-preset-es2015": "^6.14.0",
    "babelify": "^7.3.0",
    "budo": "^9.0.0",
    "glslify": "^5.1.0"
  }
}