Toggle navigation
Sign Up
Log In
Explore
Works
Folders
Tools
Collections
Artists
Groups
Groups
Topics
Tasks
Tasks
Jobs
Teams
Jobs
Recommendation
More Effects...
JS
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } { // main loop var run = function run() { requestAnimationFrame(run); // draw image ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight); // webgl postprocessing postprocessor.render(); // pointer easing pointer.cx += (pointer.x - pointer.cx) * 0.1; pointer.cy += (pointer.y - pointer.cy) * 0.1; }; // init /////////////////////////////////////////////////////////// // postprocessing class var WebGLPostprocessor = function () { function WebGLPostprocessor(canvas, pointer, fragment) { var _this = this; _classCallCheck(this, WebGLPostprocessor); this.source = canvas; this.pointer = pointer; this.canvas = document.createElement('canvas'); this.canvas.style.pointerEvents = "none"; var gl = this.canvas.getContext("webgl"); if (!gl) gl = this.canvas.getContext("experimental-webgl"); if (!gl) return false; document.body.appendChild(this.canvas); this.gl = gl; // compile vertex shader var vertexShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vertexShader, "\n\t\t\t\tattribute vec2 aPosition;\n\t\t\t\tattribute vec2 aTexCoord;\n\t\t\t\tuniform vec2 uResolution;\n\t\t\t\tvarying vec2 vTexCoord;\n\t\t\t\tvoid main() {\n\t\t\t\t\tgl_Position = vec4(((aPosition / uResolution * 2.0) - 1.0) * vec2(1, -1), 0, 1);\n\t\t\t\t\tvTexCoord = aTexCoord;\n\t\t\t\t}\n\t\t\t"); gl.compileShader(vertexShader); // compile fragment shader var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fragmentShader, fragment); gl.compileShader(fragmentShader); // attach shader programs var program = gl.createProgram(); gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { alert("Unable to initialise shaders!"); } gl.useProgram(program); var aPosition = gl.getAttribLocation(program, "aPosition"); var aTexCoord = gl.getAttribLocation(program, "aTexCoord"); var texCoordBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1]), gl.STATIC_DRAW); gl.enableVertexAttribArray(aTexCoord); gl.vertexAttribPointer(aTexCoord, 2, gl.FLOAT, false, 0, 0); var texture = gl.createTexture(); gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); gl.bindTexture(gl.TEXTURE_2D, texture); 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.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this.source); this.uResolution = gl.getUniformLocation(program, "uResolution"); this.uPointer = gl.getUniformLocation(program, "uPointer"); this.uTime = gl.getUniformLocation(program, "uTime"); this.buffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); gl.enableVertexAttribArray(aPosition); gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0); window.addEventListener('resize', function (_) { return _this.resize(); }, false); this.resize(); } _createClass(WebGLPostprocessor, [{ key: "resize", value: function resize() { this.width = this.canvas.width = this.source.offsetWidth; this.height = this.canvas.height = this.source.offsetHeight; this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffer); this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array([0, 0, this.width, 0, 0, this.height, 0, this.height, this.width, 0, this.width, this.height]), this.gl.STATIC_DRAW); this.gl.uniform2f(this.uResolution, this.width, this.height); this.gl.viewport(0, 0, this.width, this.height); } }, { key: "render", value: function render() { if (!this.gl) return; this.gl.uniform2f(this.uPointer, this.pointer.cx, this.height - this.pointer.cy); this.gl.uniform1f(this.uTime, performance.now() / 1000); this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.gl.RGBA, this.gl.UNSIGNED_BYTE, this.source); this.gl.drawArrays(this.gl.TRIANGLES, 0, 6); } }]); return WebGLPostprocessor; }(); /////////////////////////////////////////////////////////// // init canvas var canvas = document.querySelector('canvas'); var ctx = canvas.getContext('2d'); var canvasWidth = canvas.width = canvas.offsetWidth; var canvasHeight = canvas.height = canvas.offsetHeight; // setup pointer var pointer = { x: canvasWidth * 0.5, y: canvasHeight * 0.5, cx: 0, cy: 0, move: function move(e) { var touchMode = e.targetTouches; var p = null; if (touchMode) { e.preventDefault(); p = touchMode[0]; } else p = e; this.x = p.clientX; this.y = p.clientY; } }; window.addEventListener('mousemove', function (e) { return pointer.move(e); }, false); canvas.addEventListener('touchmove', function (e) { return pointer.move(e); }, false);var img = new Image(); img.src = document.getElementById("source").src; // shader adapted from: http://www.geeks3d.com/20140204/glsl-volumetric-light-post-processing-filter-for-webcam-video/ var postprocessor = new WebGLPostprocessor(canvas, pointer, "\n\t\tprecision highp float;\n\t\tuniform sampler2D uImage;\n\t\tuniform vec2 uResolution;\n\t\tuniform vec2 uPointer;\n\t\tvec2 pos = (uPointer / uResolution);\n\t\t#define T texture2D(uImage, pos + (p.xy *= 0.98))\n\t\tvec3 res = vec3(uResolution, 1.0);\n\t\tvoid main() {\n\t\t\tvec3 p = gl_FragCoord.xyz / res - vec3(pos, 1.0);\n\t\t\tvec3 o = T.rgb;\n\t\t\tfloat m;\n\t\t\tfor (float i = 0.0; i < 40.0; i++) {\n\t\t\t\tm = 0.5 - length(T.rgb);\n\t\t\t\tif (m > 0.0) {\n\t\t\t\t\tp.z += (m * m) * exp(-i * 0.1);\n\t\t\t\t}\n\t\t\t}\n\t\t\tgl_FragColor = vec4(o.x * o.x + p.z, o.y * o.y + p.z * 0.75, 1.2 * o.z * o.z + p.z * 0.45, 1.0);\n\t\t}\n\t"); run(); }
CSS
html, body { position:absolute; margin:0; padding:0; width:100%; height:100%; overflow: hidden; } canvas { position:absolute; width:100%; height:100%; background:#000; pointer-events: auto; } #source { display: none; }
HTML
Join Effecthub.com
Working with Global Gaming Artists and Developers!
Login
Sign Up
Or Login with Your Email Address:
Email
Password
Remember
Or Sign Up with Your Email Address:
Your Email
This field must contain a valid email
Set Password
Password should be at least 1 character
Stay informed via email