WebGL shader video processing

Developer
Thepheer
Size
9,532 Kb
Views
26,312
  1. WebGL shader video processing Previews
  2. WebGL shader video processing HTML Codes
  3. WebGL shader video processing CSS Codes
  4. WebGL shader video processing JS Codes

How do I make an webgl shader video processing?

You can drag & drop your own videos.. What is a webgl shader video processing? How do you make a webgl shader video processing? This script and codes were developed by Thepheer on 13 September 2022, Tuesday.

WebGL shader video processing Previews
IQ Test

WebGL shader video processing - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>WebGL shader video processing</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script type='json/dither.json'>
{ "bayer16": [ 0, 128, 32, 160, 8, 136, 40, 168, 2, 130, 34, 162, 10, 138, 42, 170, 192, 64, 224, 96, 200, 72, 232, 104, 194, 66, 226, 98, 202, 74, 234, 106, 48, 176, 16, 144, 56, 184, 24, 152, 50, 178, 18, 146, 58, 186, 26, 154, 240, 112, 208, 80, 248, 120, 216, 88, 242, 114, 210, 82, 250, 122, 218, 90, 12, 140, 44, 172, 4, 132, 36, 164, 14, 142, 46, 174, 6, 134, 38, 166, 204, 76, 236, 108, 196, 68, 228, 100, 206, 78, 238, 110, 198, 70, 230, 102, 60, 188, 28, 156, 52, 180, 20, 148, 62, 190, 30, 158, 54, 182, 22, 150, 252, 124, 220, 92, 244, 116, 212, 84, 254, 126, 222, 94, 246, 118, 214, 86, 3, 131, 35, 163, 11, 139, 43, 171, 1, 129, 33, 161, 9, 137, 41, 169, 195, 67, 227, 99, 203, 75, 235, 107, 193, 65, 225, 97, 201, 73, 233, 105, 51, 179, 19, 147, 59, 187, 27, 155, 49, 177, 17, 145, 57, 185, 25, 153, 243, 115, 211, 83, 251, 123, 219, 91, 241, 113, 209, 81, 249, 121, 217, 89, 15, 143, 47, 175, 7, 135, 39, 167, 13, 141, 45, 173, 5, 133, 37, 165, 207, 79, 239, 111, 199, 71, 231, 103, 205, 77, 237, 109, 197, 69, 229, 101, 63, 191, 31, 159, 55, 183, 23, 151, 61, 189, 29, 157, 53, 181, 21, 149, 255, 127, 223, 95, 247, 119, 215, 87, 253, 125, 221, 93, 245, 117, 213, 85 ]
}
</script>
<script type='json/cube.json'>
{ "indices": [ 0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9, 10, 8, 10, 11, 12, 13, 14, 12, 14, 15, 16, 17, 18, 16, 18, 19, 20, 21, 22, 20, 22, 23 ], "vertices": [ -1, -1, 1, 1, -1, 1, 1, 1, 1, -1, 1, 1, -1, -1, -1, -1, 1, -1, 1, 1, -1, 1, -1, -1, -1, 1, -1, -1, 1, 1, 1, 1, 1, 1, 1, -1, -1, -1, -1, 1, -1, -1, 1, -1, 1, -1, -1, 1, 1, -1, -1, 1, 1, -1, 1, 1, 1, 1, -1, 1, -1, -1, -1, -1, -1, 1, -1, 1, 1, -1, 1, -1 ], "normals": [ 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0 ], "texture": [ 0, 0, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 1, 1, 1, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1, 0, 1, 0, 0, 0, 0, 1, 0, 1, 1, 0, 1 ]
}
</script>
<script type='shaders/vertex.essl'>
attribute vec4 a_position;
attribute vec3 a_normal;
attribute vec2 a_texture;
uniform mat4 u_model, u_view, u_projection;
uniform vec2 u_size0;
varying vec2 v_texture;
varying vec3 v_light;
const vec4 LIGHT = vec4(0.00, 0.00, 5.00, 75.0);
const vec3 COLOR = vec3(0.50, 0.25, 1.00);
vec2 cover(vec2 v, vec2 r) { return 0.5 + (v - 0.5) * (r.x > r.y ? vec2(r.y / r.x, 1.0) : vec2(1.0, r.x / r.y));
}
vec3 light(vec4 p, vec3 n, vec4 l, vec3 c) { vec3 d = l.xyz - p.xyz; return l.w / pow(length(d), 2.0) * dot(n.xyz, normalize(d)) * c;
}
void main(void) { vec4 p = mat4(u_model) * a_position; vec3 n = mat3(u_model) * a_normal; v_light = light(p, n, LIGHT, COLOR); v_texture = cover(a_texture, u_size0); gl_Position = u_projection * u_view * p;
}
</script>
<script type='shaders/fragment.essl'>
#ifdef GL_FRAGMENT_PRECISION_HIGH precision highp float;
#else precision mediump float;
#endif
uniform sampler2D u_sampler0, u_sampler1;
uniform vec2 u_size1;
varying vec2 v_texture;
varying vec3 v_light;
float srgb2rgb(float c) { return c <= 0.04045 ? c / 12.92 : pow((c + 0.055) / 1.055, 2.4);
}
float rgb2srgb(float c) { return c <= 0.0031308 ? c * 12.92 : pow(c, 1.0/2.4) * 1.055 - 0.055;
}
vec3 srgb2rgb(vec3 c) { return vec3(srgb2rgb(c.r), srgb2rgb(c.g), srgb2rgb(c.b));
}
vec3 rgb2srgb(vec3 c) { return vec3(rgb2srgb(c.r), rgb2srgb(c.g), rgb2srgb(c.b));
}
vec3 grayscale(vec3 c) { const vec3 LUM = vec3(0.212655, 0.715158, 0.072187); return vec3(dot(c.rgb, LUM));
}
vec3 dither(vec3 c, float d, float b) { return rgb2srgb(vec3(floor(d + srgb2rgb(c)*b) / b));
}
void main(void) { vec4 d = texture2D(u_sampler1, gl_FragCoord.xy / u_size1); vec4 c = texture2D(u_sampler0, v_texture); gl_FragColor = vec4(dither(grayscale(c.rgb) * v_light, d.a, 1.0), c.a);
}
</script> <script src='https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.3.1/gl-matrix-min.js'></script> <script src="js/index.js"></script>
</body>
</html>

WebGL shader video processing - Script Codes CSS Codes

body { background: #000; overflow: hidden;
}
canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
video { position: absolute; top: 50%; left: 50%;
}
[data-error]::after { display: block; content: attr(data-error); position: absolute; top: 0; left: 0; margin: 1em; padding: .75em 1em; white-space: pre-wrap; font: .8em 'Consolas', monospace; background: rgba(0, 0, 0, 0.25); color: rgba(255, 255, 255, 0.75);
}

WebGL shader video processing - Script Codes JS Codes

(function() { 'use strict'; var $, canvas, gl, video, hasProp = {}.hasOwnProperty; Math.TAU = Math.PI * 2; Math.RAD = Math.PI / 180; Math.DEG = 180 / Math.PI; video = document.createElement('video'); canvas = document.createElement('canvas'); gl = canvas.getContext('webgl'); new Promise(function(done) { return window.addEventListener('load', done); }).then(function() { document.body.appendChild(canvas); video.autoplay = video.loop = true; video.crossOrigin = 'anonymous'; video.volume = 0.1; video.src = 'https://dl.dropboxusercontent.com/u/3116587' + '/video/Aye%20Aye%20%28Original%20Mix%29%20-%20Pogo.webm'; if (!gl) { throw new Error('WebGL is not supported'); } if (!gl.getExtension('OES_texture_float')) { throw new Error('Float textures are not supported'); } gl.clearColor(0, 0, 0, 0); gl.enable(gl.DEPTH_TEST); return $.loadFiles('json/dither.json', 'json/cube.json', 'shaders/vertex.essl', 'shaders/fragment.essl'); }).then(function(arg) { var blank, cube, dither, fragment, matrix, name, program, render, u_model, u_projection, u_view, u_viewport, vertex; dither = arg[0], cube = arg[1], vertex = arg[2], fragment = arg[3]; program = $.makeProgram(gl, vertex, fragment); $.makeTexture(gl, program, 0); $.makeTexture(gl, program, 1); $.makeBuffers(gl, program, new Uint16Array(cube.indices), 'a_position', 3, new Float32Array(cube.vertices), 'a_normal', 3, new Float32Array(cube.normals), 'a_texture', 2, new Float32Array(cube.texture)); u_model = gl.getUniformLocation(program, 'u_model'); u_view = gl.getUniformLocation(program, 'u_view'); u_projection = gl.getUniformLocation(program, 'u_projection'); u_viewport = gl.getUniformLocation(program, 'u_viewport'); blank = (function() { var c; c = document.createElement('canvas').getContext('2d'); c.canvas.width = c.canvas.height = 1; c.fillStyle = '#FFF'; c.fillRect(0, 0, 1, 1); return c.canvas; })(); for (name in dither) { if (!hasProp.call(dither, name)) continue; matrix = dither[name]; dither[name] = $.makeDitherMatrix(matrix); } return (render = function(T) { var H, W, model, projection, view; requestAnimationFrame(render); W = canvas.clientWidth; H = canvas.clientHeight; if (W !== canvas.width || H !== canvas.height) { gl.viewport(0, 0, canvas.width = W, canvas.height = H); } $.fillTexture(gl, program, 0, video.duration ? video : blank); $.fillTexture(gl, program, 1, dither.bayer16, gl.ALPHA); model = mat4.create(); mat4.rotateX(model, model, T / 5e3); mat4.rotateY(model, model, T / 6e3); mat4.rotateZ(model, model, T / 7e3); view = mat4.create(); mat4.lookAt(view, [0, 0, 5], [0, 0, 0], [0, 1, 0]); projection = mat4.create(); mat4.perspective(projection, 45 * Math.RAD, W / H, 1e-3, 1e3); mat4.scale(projection, projection, [1, -1, 1]); gl.uniformMatrix4fv(u_model, false, model); gl.uniformMatrix4fv(u_view, false, view); gl.uniformMatrix4fv(u_projection, false, projection); gl.uniform2f(u_viewport, W, H); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); return gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0); })(0); })["catch"](function(e) { var resize; resize = function() { var h, s, w; w = video.videoWidth; h = video.videoHeight; s = Math.max(window.innerWidth / w, window.innerHeight / h); video.style.width = (w *= s) + "px"; video.style.height = (h *= s) + "px"; video.style.marginLeft = (w / -2) + "px"; return video.style.marginTop = (h / -2) + "px"; }; video.addEventListener('canplay', resize); window.addEventListener('resize', resize); document.body.dataset.error = e.message; document.body.replaceChild(video, canvas); return canvas = gl = null; }).then(function() { var target; target = canvas || video; target.addEventListener('wheel', function(e) { var base, delta, vol; if (delta = e.deltaY ? e.deltaY < 0 ? 1 : -1 : 0) { vol = video.volume; base = 1e3; vol = Math.log(vol * base) / Math.log(base); vol = Math.pow(base, vol + delta * 0.025) / base; vol = Math.min(Math.max(0, vol), 1); video.volume = vol; return e.preventDefault(); } }); target.addEventListener('mousedown', function(e) { if (e.button === 0) { if (video.paused) { video.play(); } else { video.pause(); } return e.preventDefault(); } }); target.addEventListener('drop', function(e) { var file; if (file = e.dataTransfer.files[0]) { URL.revokeObjectURL(video.src); video.src = URL.createObjectURL(file); return e.preventDefault(); } }); return target.addEventListener('dragover', function(e) { return e.preventDefault(); }); }); $ = { loadFiles: function(url) { if (arguments.length > 1) { return Promise.all(Array.prototype.map.call(arguments, function(x) { return $.loadFiles(x); })); } return new Promise(function(done, fail) { var e; if (e = document.querySelector("[type='" + url + "']")) { return done(e.textContent); } else { return fail(new Error(url + " not found")); } }).then(function(x) { if (/json$/i.test(url)) { return JSON.parse(x); } else { return x; } }); }, makeDitherMatrix: function(matrix) { var m; m = 1 + matrix.reduce(function(a, b) { return Math.max(a, b); }); return new Float32Array(matrix.map(function(x) { return (0.5 + x) / m; })); }, makeShader: function(gl, type, source) { var shader; shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { throw new Error(gl.getShaderInfoLog(shader)); } return shader; }, makeProgram: function(gl, vshader, fshader) { var program; program = gl.createProgram(); gl.attachShader(program, $.makeShader(gl, gl.VERTEX_SHADER, vshader)); gl.attachShader(program, $.makeShader(gl, gl.FRAGMENT_SHADER, fshader)); gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { throw new Error(gl.getProgramInfoLog(program)); } gl.useProgram(program); return program; }, makeBuffer: function(gl, type, data) { var buffer; buffer = gl.createBuffer(); gl.bindBuffer(type, buffer); gl.bufferData(type, data, gl.STATIC_DRAW); return buffer; }, makeBuffers: function(gl, program, indices) { var data, i, j, location, name, ref, ref1, size; for (i = j = 3, ref = arguments.length; j < ref; i = j += 3) { ref1 = Array.prototype.slice.call(arguments, i, i + 3), name = ref1[0], size = ref1[1], data = ref1[2]; $.makeBuffer(gl, gl.ARRAY_BUFFER, data); location = gl.getAttribLocation(program, name); gl.enableVertexAttribArray(location); gl.vertexAttribPointer(location, size, gl.FLOAT, false, 0, 0); } if (indices) { return $.makeBuffer(gl, gl.ELEMENT_ARRAY_BUFFER, indices); } }, makeTexture: function(gl, program, id) { var texture; texture = gl.createTexture(); gl.uniform1i(gl.getUniformLocation(program, 'u_sampler' + id), id); gl.activeTexture(gl.TEXTURE0 + id); gl.bindTexture(gl.TEXTURE_2D, texture); return texture; }, fillTexture: function(gl, program, id, source, type, width, height) { var h, w; if (type == null) { type = gl.RGBA; } gl.activeTexture(gl.TEXTURE0 + id); if (!width && source.length && type === gl.ALPHA) { width = height = Math.sqrt(source.length); } gl.uniform2f(gl.getUniformLocation(program, 'u_size' + id), w = width || source.width || source.videoWidth, h = height || source.height || source.videoHeight || w); if (w & w - 1 || h & h - 1) { 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); } if (width) { gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); return gl.texImage2D(gl.TEXTURE_2D, 0, type, w, h, 0, type, (Object.prototype.toString.call(source).slice(8, 13) === 'Float' ? gl.FLOAT : gl.UNSIGNED_BYTE), source); } else { gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); return gl.texImage2D(gl.TEXTURE_2D, 0, type, type, gl.UNSIGNED_BYTE, source); } } };
}).call(this);
WebGL shader video processing - Script Codes
WebGL shader video processing - Script Codes
Home Page Home
Developer Thepheer
Username thepheer
Uploaded September 13, 2022
Rating 3
Size 9,532 Kb
Views 26,312
Do you need developer help for WebGL shader video processing?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Thepheer (thepheer) Script Codes
Name
Radix Converter
Color Wheel
Cylinder
Filters
A Pen by thepheer
Fluid Cube
Magnetic Field
Strange Attactor
SVG Animation
Braille
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!