Skip to content

Instantly share code, notes, and snippets.

@subzey

subzey/index.html

Created August 21, 2016 21:55
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save subzey/773e75f78b2e8680fb7464f9ebfb54d3 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save subzey/773e75f78b2e8680fb7464f9ebfb54d3 to your computer and use it in GitHub Desktop.
Download ZIP
glitchy
Raw
index.html
<title>Glitchy test</title>
<body style=height:100%;margin:0;overflow:hidden bgcolor=0>
<canvas id=a style=display:block;margin:auto>
<script>
var b = document.body;
// Initing the webgl
var gl = a.getContext('webgl');
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LESS);
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
// gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
function createProgram(vertexShaderSource, fragmentShaderSource) {
// Verbose as hell
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader)
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader)
var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
console.log(gl.getShaderInfoLog(vertexShader));
console.log(gl.getShaderInfoLog(fragmentShader));
return shaderProgram;
}
// Aspect ratio stuff
var viewportChanged = 1;
window.onresize = function(){
viewportChanged = 1
};
// { SCENE //////
var drawScene = (function(){
// Init
var program = createProgram(`
precision lowp float;
attribute vec4 p; // position
void main() {
gl_Position = vec4(
p.x,
p.y * 16.0 / 9.0,
p.z,
p.w
);
}
`,`
precision lowp float;
void main() {
gl_FragColor = vec4(1., 1., 1., 1.);
}
`);
var buffer = gl.createBuffer();
gl.useProgram(program);
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
var attribLocation;
// gl.vertexAttribPointer(index, size, type, normalized, stride, offset)
var vertices = new Float32Array(6 * 3);
return function(){
var now = Date.now() / 1000;
var count = Math.floor(now / 5 % 3) + 3;
gl.useProgram(program);
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.vertexAttribPointer(
attribLocation = gl.getAttribLocation(program, 'p'),
3, gl.FLOAT, false, // vec3, unpacked into vec4
0, 0
);
gl.enableVertexAttribArray(attribLocation);
var ptr = 0;
for (var i = 0; i < count; i++) {
var angle = i / count * 2 * Math.PI + now;
vertices[ptr++] = Math.sin(angle) * .5;
vertices[ptr++] = Math.cos(angle) * .5;
vertices[ptr++] = 0;
}
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.DYNAMIC_DRAW)
gl.drawArrays(gl.TRIANGLE_FAN, 0, count);
}
})();
// SCENE } //////
// { BACKDROP //////
var bgImage = new Image();
bgImage.crossOrigin = 'anonymous';
bgImage.src = 'https://upload.wikimedia.org/wikipedia/commons/d/d0/D%C3%BClmen%2C_Wildpark_--_2014_--_3808_color_balanced.jpg';
var bgTexture = gl.createTexture();
bgImage.onload = function(){
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
gl.bindTexture(gl.TEXTURE_2D, bgTexture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, bgImage);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.bindTexture(gl.TEXTURE_2D, null)
};
var drawBackdrop = (function(){
// Init
var program = createProgram(`
precision lowp float;
varying vec2 t; // texture position
attribute vec2 p; // position
void main() {
gl_Position = vec4(p, 0.0, 1.0);
t = (p + 1.0) / 2.0;
}
`,`
precision lowp float;
varying vec2 t; // texture position
uniform sampler2D s;
void main(void) {
gl_FragColor = mix(texture2D(s, t), vec4(.55, .6, .5, 1.0), .5);
}
`);
var buffer = gl.createBuffer();
gl.useProgram(program);
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
var attribLocation;
gl.bufferData(gl.ARRAY_BUFFER, Float32Array.from([
-3, 1,
1, 1,
1, -3
]), gl.STATIC_DRAW)
return function(){
gl.useProgram(program);
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
// gl.vertexAttribPointer(index, size, type, normalized, stride, offset)
gl.vertexAttribPointer(
attribLocation = gl.getAttribLocation(program, 'p'),
2, gl.FLOAT, false, // vec2
0, 0
);
gl.enableVertexAttribArray(gl.getAttribLocation(program, 'p'));
gl.activeTexture(gl.TEXTURE1);
gl.bindTexture(gl.TEXTURE_2D, bgTexture);
gl.uniform1i(gl.getUniformLocation(program, 's'), 1);
gl.drawArrays(gl.TRIANGLES, 0, 3);
}
})();
// BACKDROP } //////
// { OVERLAY //////
var drawOverlay = (function(){
// Init
var program = createProgram(`
precision lowp float;
varying vec2 t; // texture position
attribute vec2 p; // position
void main() {
gl_Position = vec4(p, 0.0, 1.0);
t = (p + 1.0) / 2.0;
}
`,`
precision lowp float;
varying vec2 t; // texture position
uniform sampler2D s;
uniform float now;
void main(void) {
float xs = clamp(sin(t.y * 15.0 + sin(now) * 20.0) * 4.0 - 3.0, 0.0, 1.0);
vec4 clr = vec4(
texture2D(s, vec2(t.x - xs * .05, t.y)).r,
texture2D(s, vec2(t.x - xs * .06, t.y)).g,
texture2D(s, vec2(t.x - xs * .065, t.y)).b,
1.0
);
float st = mod(cos(gl_FragCoord.x * .1 + now * 1000.0), cos(gl_FragCoord.y - now * 170.0));
gl_FragColor = mix(clr, vec4(st, st, st, 1.0), xs * t.x * .3);
}
`);
var buffer = gl.createBuffer();
gl.useProgram(program);
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
var attribLocation;
gl.bufferData(gl.ARRAY_BUFFER, Float32Array.from([
-3, 1,
1, 1,
1, -3
]), gl.STATIC_DRAW)
return function(){
gl.useProgram(program);
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
// gl.vertexAttribPointer(index, size, type, normalized, stride, offset)
gl.vertexAttribPointer(
attribLocation = gl.getAttribLocation(program, 'p'),
2, gl.FLOAT, false, // vec2
0, 0
);
gl.enableVertexAttribArray(gl.getAttribLocation(program, 'p'));
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, fbTexture);
gl.uniform1i(gl.getUniformLocation(program, 's'), 0);
gl.uniform1f(gl.getUniformLocation(program, 'now'), (Date.now() % 5e4) / 5e4 * 2 * Math.PI);
gl.drawArrays(gl.TRIANGLES, 0, 3);
}
})();
// OVERLAY } //////
var fbTexture = gl.createTexture();
var framebuffer = gl.createFramebuffer();
!function frame(){
// Correct the ratio et cetera
if (viewportChanged) {
var ratio = 16 / 9;
a.width = Math.min(b.clientWidth, b.clientHeight * ratio);
a.height = a.width / ratio;
gl.viewport(0, 0, a.width, a.height);
gl.bindTexture(gl.TEXTURE_2D, fbTexture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, a.width, a.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, fbTexture, 0);
}
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
gl.clear(gl.COLOR_BUFFER_BIT);
drawBackdrop();
drawScene();
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
drawOverlay();
requestAnimationFrame(frame);
}();
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment