Instantly share code, notes, and snippets.

Embed
What would you like to do?
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
});
})
{
"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"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment