I am trying to make an interesting effect using WebGL. In my fragment shader I have the following line which draws my texture in black and white:

gl_FragColor = vec4(vec3(color0.r+color0.g+color0.b)/3.0, color0.a);

Where color0 is the color of the texture. In the shader I also have a uniform vec2 u_mouse which is passed in from my javascript code as the mouse coordinates on the screen. Now what I want is to be able to move the mouse, and part of the image would colorize inside the given radius like in the picture:

My idea is to have a mask, which has a white circle on it, which will move with the mouse, but I have no idea how to do the image processing afterwards... I also would like for the animation no be smooth, like an interpolation between the mouse values.

Thanks!

I am trying to make an interesting effect using WebGL. In my fragment shader I have the following line which draws my texture in black and white:

gl_FragColor = vec4(vec3(color0.r+color0.g+color0.b)/3.0, color0.a);

Where color0 is the color of the texture. In the shader I also have a uniform vec2 u_mouse which is passed in from my javascript code as the mouse coordinates on the screen. Now what I want is to be able to move the mouse, and part of the image would colorize inside the given radius like in the picture:

My idea is to have a mask, which has a white circle on it, which will move with the mouse, but I have no idea how to do the image processing afterwards... I also would like for the animation no be smooth, like an interpolation between the mouse values.

Thanks!

• javascript
• position
• shader
• webgl
• mouse

2 Answers 2

You want to mix the black and white version with the color version

vec4 bw = vec4(vec3(color0.r + color0.g + color0.b) / 3., color.a);
gl_FragColor = mix(bw, color0, mixAmount);

Where mix is defined as

mix(a, b, l) = a + (b - a) * l

In other words, if mixAmount is 0 you'll get bw and if mixAmount is 1 you'll get color0. For values in between 0 and 1 you'll get a mix of the 2.

So now you just need some formula for setting mixAmount

As one example, assuming you pass in the mouse in canvas relative coordinates you could pute the distance from that coordinate

uniform vec2 mousePos;  // in pixels where 0,0 is bottom left

...

  float dist = distance(mousePos, gl_FragCoord.xy);

You could then use that to pute a mixAmount for example

uniform float mixRadius;

  float mixAmount = clamp(dist / mixRadius, 0., 1.);

And you'll get a fading circle with color in the center fading to black and white at the edge.

If you want a bigger area in the center to be color then maybe pass in a minRadius and maxRadius

uniform float minRadius;
uniform float maxRadius;

  float range = maxRadius - minRadius
  float mixAmount = clamp((dist - minRadius) / range, 0., 1.);

or something like that

Here's a working example

"use strict";
const vs = `
attribute vec4 position;
attribute vec2 texcoord;

uniform mat4 matrix;

varying vec2 v_texcoord;

void main() {
  gl_Position = matrix * position;
  v_texcoord = texcoord;
}
`;
const fs = `
precision mediump float;

varying vec2 v_texcoord;

uniform sampler2D tex;
uniform vec2 mousePos;
uniform float minRadius;
uniform float maxRadius;

void main() {
  vec4 color0 = texture2D(tex, v_texcoord);
  vec4 bw = vec4(vec3(color0.r + color0.g + color0.b) / 3., color0.a);
  
  float dist = distance(mousePos, gl_FragCoord.xy);
  float range = maxRadius - minRadius;
  float mixAmount = clamp((dist - minRadius) / range, 0., 1.);
  
  gl_FragColor = mix(color0, bw, mixAmount);
}
`;
const m4 = twgl.m4;
const gl = document.querySelector("canvas").getContext("webgl");
const info = document.querySelector("#info");

// piles shaders, link program, looks up locations
const programInfo = twgl.createProgramInfo(gl, [vs, fs]);

// calls gl.createBuffer, gl.bindBuffer, gl.bufferData for each array
const bufferInfo = twgl.primitives.createXYQuadBufferInfo(gl);

const textureInfo = {
  width: 1,
  height: 1,
};
const texture = twgl.createTexture(gl, {
  src: "http://i.imgur./NzBzAdN.jpg",
  crossOrigin: '',
  flipY: true,
}, (err, tex, img) => {
  textureInfo.width = img.width;
  textureInfo.height = img.height;
  render();
});

const mousePos = [0, 0];

function render() {
  twgl.resizeCanvasToDisplaySize(gl.canvas);
  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
  
  gl.useProgram(programInfo.program);
  
  // calls gl.bindBuffer, gl.enableVertexAttribArray, gl.vertexAttribPointer
  twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
  
  // cover canvas with image  
  const canvasAspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
  const imageAspect = textureInfo.width / textureInfo.height;

  // this assumes we want to fill vertically
  let horizontalDrawAspect = imageAspect / canvasAspect;
  let verticalDrawAspect = 1;
  // does it fill horizontally?
  if (horizontalDrawAspect < 1) {
    // no it does not so scale so we fill horizontally and
    // adjust vertical to match
    verticalDrawAspect /= horizontalDrawAspect;
    horizontalDrawAspect = 1;
  }
  const mat = m4.scaling([horizontalDrawAspect, verticalDrawAspect, 1]);
  
  // calls gl.activeTexture, gl.bindTexture, gl.uniform
  twgl.setUniforms(programInfo, {
    minRadius: 25,
    maxRadius: 100,
    tex: texture,
    matrix: mat,
    mousePos: mousePos,
  });
  
  twgl.drawBufferInfo(gl, bufferInfo);
}
render();

gl.canvas.addEventListener('mousemove', e => {
  const canvas = e.target;
  const rect = canvas.getBoundingClientRect();

  const x = (e.clientX - rect.left) * canvas.width / rect.width;
  const y = (e.clientY - rect.top)  * canvas.height / rect.height;
  mousePos[0] = x;
  mousePos[1] = canvas.height - y - 1;
  
  render();
});

window.addEventListener('resize', render);

body { margin: 0; }
canvas { display: block; width: 100vw; height: 100vh; }

<canvas></canvas>  
<script src="https://twgljs/dist/3.x/twgl-full.min.js"></script>

Like you mentioned, you could also pass in a mask texture. This would allow you to easily make other shapes. Again, you just need a value for mixAmount

So, something like

uniform mat4 maskMatrix;

...

vec2 maskUV = (maskMatrix * vec4(v_texcoord, 0, 1)).xy;
float mixAmount = texture2D(mask, maskUV).a;

You can see how to set that matrix using 2d or 3d matrices by following these articles

"use strict";
const vs = `
attribute vec4 position;
attribute vec2 texcoord;

uniform mat4 matrix;

varying vec2 v_texcoord;

void main() {
  gl_Position = matrix * position;
  v_texcoord = texcoord;
}
`;
const fs = `
precision mediump float;

varying vec2 v_texcoord;

uniform sampler2D tex;
uniform mat4 maskMatrix;
uniform sampler2D maskTex;

void main() {
  vec4 color0 = texture2D(tex, v_texcoord);
  vec4 bw = vec4(vec3(color0.r + color0.g + color0.b) / 3., color0.a);

  vec2 maskUV = (maskMatrix * vec4(v_texcoord, 0, 1)).xy;
  float mixAmount = texture2D(maskTex, maskUV).a;
  
  gl_FragColor = mix(bw, color0, mixAmount);
}
`;
const m4 = twgl.m4;
const gl = document.querySelector("canvas").getContext("webgl");
const info = document.querySelector("#info");

// piles shaders, link program, looks up locations
const programInfo = twgl.createProgramInfo(gl, [vs, fs]);

// calls gl.createBuffer, gl.bindBuffer, gl.bufferData for each array
const bufferInfo = twgl.primitives.createXYQuadBufferInfo(gl);

const textureInfo = {
  width: 1,
  height: 1,
};
// calls gl.createTexture, gl.bindTexture, gl.texImage2D, gl.texParameteri
const texture = twgl.createTexture(gl, {
  src: "http://i.imgur./NzBzAdN.jpg",
  crossOrigin: '',
  flipY: true,
}, (err, tex, img) => {
  textureInfo.width = img.width;
  textureInfo.height = img.height;
  render();
});

// we could load a mask from an image but let's just make one from a canvas
// We'll use the letter F
const maskWidth = 128;
const maskHeight = 128;
const ctx = document.createElement("canvas").getContext("2d");
ctx.canvas.width = maskWidth;
ctx.canvas.height = maskHeight;
ctx.font = "bold 120px sans-serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";

ctx.strokeStyle = "white";
ctx.strokeRect(2, 2, 124, 124);

ctx.translate(64, 64);
ctx.fillStyle = "white";
ctx.fillText("F", 0, 0);

// calls gl.createTexture, gl.bindTexture, gl.texImage2D, gl.texParameteri
const maskTexture = twgl.createTexture(gl, {
  src: ctx.canvas,
  minMag: gl.LINEAR,
  wrap: gl.CLAMP_TO_EDGE,
  flipY: true,
});


const mousePos = [0, 0];

function render() {
  twgl.resizeCanvasToDisplaySize(gl.canvas);
  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
  
  gl.useProgram(programInfo.program);
  
  // calls gl.bindBuffer, gl.enableVertexAttribArray, gl.vertexAttribPointer
  twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
  
  // cover canvas with image  
  const canvasAspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
  const imageAspect = textureInfo.width / textureInfo.height;

  // this assumes we want to fill vertically
  let horizontalDrawAspect = imageAspect / canvasAspect;
  let verticalDrawAspect = 1;
  // does it fill horizontally?
  if (horizontalDrawAspect < 1) {
    // no it does not so scale so we fill horizontally and
    // adjust vertical to match
    verticalDrawAspect /= horizontalDrawAspect;
    horizontalDrawAspect = 1;
  }
  const mat = m4.scaling([horizontalDrawAspect, verticalDrawAspect, 1]);
  
  // Our texcoord represent a unit square from 0,0 to 1,1. We want that center
  // centered around the mouse move scale by 2 and subtract 1
  
  // pute how large the image is (note it's larger than the canvas
  // because we puted a `cover` style above)
  const imageDisplayWidth = gl.canvas.width * horizontalDrawAspect;
  const imageDisplayHeight = gl.canvas.height * verticalDrawAspect;
  
  // pute how many pixels off the screen it is
  const xOff = gl.canvas.width * (horizontalDrawAspect - 1) / 2;
  const yOff = gl.canvas.height * (verticalDrawAspect - 1) / 2;

  // decide a size to draw the mask in pixel
  const maskDrawWidth = maskWidth;
  const maskDrawHeight = maskHeight;

  let maskMat = m4.identity();
  // translate the UV coords so they are centered
  maskMat = m4.translate(maskMat, [.5, .5, 0]);
  // scale the uvCoords to the mask
  maskMat = m4.scale(maskMat, [
    1 / (maskDrawWidth / imageDisplayWidth), 
    1 / (maskDrawHeight/ imageDisplayHeight), 
    1,
  ]);
  // move the UV coords so the origin is at th emouse
  maskMat = m4.translate(maskMat, [
    -(mousePos[0] + xOff) / imageDisplayWidth,
    -(mousePos[1] + yOff) / imageDisplayHeight, 
    0,
  ]);

  // calls gl.activeTexture, gl.bindTexture, gl.uniform
  twgl.setUniforms(programInfo, {
    tex: texture,
    matrix: mat,
    maskTex: maskTexture,
    maskMatrix: maskMat,
  });
  
  twgl.drawBufferInfo(gl, bufferInfo);
}
render();

gl.canvas.addEventListener('mousemove', e => {
  const canvas = e.target;
  const rect = canvas.getBoundingClientRect();

  const x = (e.clientX - rect.left) * canvas.width / rect.width;
  const y = (e.clientY - rect.top)  * canvas.height / rect.height;
  mousePos[0] = x;
  mousePos[1] = canvas.height - y - 1;
  
  render();
});

window.addEventListener('resize', render);

body { margin: 0; }
canvas { display: block; width: 100vw; height: 100vh; }

<canvas></canvas>  
<script src="https://twgljs/dist/3.x/twgl-full.min.js"></script>

Note I used a F with a frame to clearly show the mask. Also note that you must keep the edges of the mask 0 because the edge pixel will be repeated past the border of the mask. Either that or you need to modify the shader to use 0 when the texture coordinates used with the mask are < 0 or > 1.

I also used a matrix to manipulate the UV coords. Because it's a matrix it's easy to scale, offset, and/or rotate the mask without having to change the shader.

As for animating it's not clear what kind of animation you want. If you want something where the color fades out over time you can use a techinque like the one in this answer. You'd draw the mask in another pair of textures. You use that pair of textures as your mixAmount mask. You fade those textures back to 0 by drawing one into the other subtracting a certain amount each frame

gl_FragColor = texture2D(mixTexture, uv).rgba - vec4(0.01);

for example.

You need a fragment shader, which colors the image depending on a distance. A black and white color is usually created with the formula gray = 0.2126 * red + 0.7152 * green + 0.0722 * blue (On the web there are different luminance formulas and explanations: Luma (video), Seven grayscale conversion algorithms.) Depending on the distance, you interpolate between the original color and the black and white color.

For this you need different uniform variables:

uniform vec2 u_mouse;
uniform vec2 u_maxDistance;

These are the center point of the area to be colored (u_mouse) and the maximum radius of the area to be colored (u_maxDistance).

The distance between the current fragment and the center point of the image can be calculated with length:

vec2 fragmentPos = ...;
float distance   = length( fragmentPos - u_mouse );

The mixing ratio is calculated by dividing the distance distance and the maximum distance u_maxDistance:

float mixK = distance / u_maxDistance;

You can also experiment with a nonlinear mixing ratio:

float mixK = pow( distance / u_maxDistance, 2.0 );

We interpolate between the colors with the function mix:

vec3 texColor   = ...;
vec3 grayColor  = vec3( 0.2126 * texColor.r + 0.7152 * texColor.g + 0.0722 * texColor.b );
vec3 finalColor = mix( texColor, grayColor, clamp( mixK, 0.0, 1.0 ) );

If you want to light up the affected area you have to multiply the color with a value greater than 1.0:

vec3 finalColor = mix( texColor * 1.2, grayColor, clamp( mixK, 0.0, 1.0 ) );

The final vertex shader and fragment shader:

Vertex Shader

precision mediump float;

attribute vec2 inPos;
varying   vec2 vertPos;

void main()
{
    vertPos     = inPos;
    gl_Position = vec4( inPos, 0.0, 1.0 );
}

Fragment Shader

precision mediump float;

varying vec2      vertPos;
uniform sampler2D u_texture;
uniform vec2      u_mouse;
uniform float     u_maxDistance;

void main()
{
    float distance  = length( vertPos - u_mouse);
    float mixK      = pow( distance / u_maxDistance, 2.0 ); 
    vec2 texCoord   = vertPos * 0.5 + 0.5;
    vec3 texColor   = texture2D( u_texture, texCoord.st ).rgb;
    vec3 grayColor  = vec3( 0.2126 * texColor.r + 0.7152 * texColor.g + 0.0722 * texColor.b );
    vec3 finalColor = mix( texColor * 1.2, grayColor, clamp( mixK, 0.0, 1.0 ) ); 
    gl_FragColor    = vec4( finalColor.rgb, 1.0 );
}

Mask

If you want a mask for the affected area you need a mask texture with one channel. The channel indicates how much the area is affected. You further have to calculate the texture coordinates for the mask in relation to the mouse position and the size of the effected area.

vec2 maskTexCoord = 0.5 + 0.5 * (vertPos - u_mouse) / u_maxDistance; 
float mask        = texture2D( u_maskTexture, maskTexCoord ).x;
vec3 finalColor   = mix( grayColor, texColor * u_lightup, mask );

To avoid that the mask repeats, you have to implement a rangecheck:

vec2 rangeTest    = step( vec2(0.0), maskTexCoord ) * step( maskTexCoord, vec2(1.0) );   
mask             *= rangeTest.x * rangeTest.y; 

See the following example, where the implementation for a circular area and mask is mixed:

(function loadscene() {    

var canvas, gl, prog, bufObj = {}, textureObj, maskTextureObj;
       
function render(deltaMS){

    var maxDist = document.getElementById( "maxDist" ).value / 100;
    var exponent = document.getElementById( "exponent" ).value / 100;
    var lightup = document.getElementById( "lightup" ).value / 100;

    gl.viewport( 0, 0, vp_size[0], vp_size[1] );
    gl.enable( gl.DEPTH_TEST );
    gl.clearColor( 0.0, 0.0, 0.0, 1.0 );
    gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT );
    var texUnit = 0;
    gl.activeTexture( gl.TEXTURE0 + texUnit );
    gl.bindTexture( gl.TEXTURE_2D, textureObj );
    var maskTexUnit = 1;
    gl.activeTexture( gl.TEXTURE0 + maskTexUnit );
    gl.bindTexture( gl.TEXTURE_2D, maskTextureObj );
    ShProg.Use( progDraw );
    var pos = [ 2.0, 2.0 ];
    if (mousePos[0] > 0 && mousePos[1] > 0 )
        pos = [2.0 * mousePos[0] / vp_size[0] - 1.0, 1.0 - 2.0 * mousePos[1] / vp_size[1]];
    ShProg.SetF2( progDraw, "u_vpsize", vp_size );
    ShProg.SetF2( progDraw, "u_mouse", pos );
    ShProg.SetF1( progDraw, "u_maxDistance", maxDist );
    ShProg.SetF1( progDraw, "u_exponent", exponent );
    ShProg.SetF1( progDraw, "u_lightup", lightup );
    ShProg.SetI1( progDraw, "u_texture", texUnit );
    ShProg.SetI1( progDraw, "u_maskTexture", maskTexUnit );
    gl.enableVertexAttribArray( progDraw.inPos );
    gl.bindBuffer( gl.ARRAY_BUFFER, bufObj.pos );
    gl.vertexAttribPointer( progDraw.inPos, 2, gl.FLOAT, false, 0, 0 ); 
    gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, bufObj.inx );
    gl.drawElements( gl.TRIANGLES, bufObj.inx.len, gl.UNSIGNED_SHORT, 0 );
    gl.disableVertexAttribArray( progDraw.pos );

    requestAnimationFrame(render);
}  

function initScene() {

    canvas = document.getElementById( "scene-canvas");
    gl = canvas.getContext( "experimental-webgl" );
    if ( !gl )
      return;

    textureObj = Texture.LoadTexture2D( "https://raw.githubusercontent./Rabbid76/graphics-snippets/master/resource/texture/supermario.jpg", true );  
    maskTextureObj = Texture.LoadTexture2D( "https://raw.githubusercontent./Rabbid76/graphics-snippets/master/resource/texture/bat.png", true );  

    
    progDraw = ShProg.Create( 
      [ { source : "draw-shader-vs", stage : gl.VERTEX_SHADER },
        { source : "draw-shader-fs", stage : gl.FRAGMENT_SHADER }
      ] );
    progDraw.inPos = gl.getAttribLocation( progDraw.progObj, "inPos" );
    if ( progDraw.progObj == 0 )
        return;

    var pos = [ -1, -1, 1, -1, 1, 1, -1, 1 ];
    var inx = [ 0, 1, 2, 0, 2, 3 ];
    bufObj.pos = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER, bufObj.pos );
    gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( pos ), gl.STATIC_DRAW );
    bufObj.inx = gl.createBuffer();
    bufObj.inx.len = inx.length;
    gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, bufObj.inx );
    gl.bufferData( gl.ELEMENT_ARRAY_BUFFER, new Uint16Array( inx ), gl.STATIC_DRAW );

    window.onresize = resize;
    resize();
    requestAnimationFrame(render);
}

function resize() {
    //vp_size = [gl.drawingBufferWidth, gl.drawingBufferHeight];
    vp_size = [window.innerWidth, window.innerHeight]
    //vp_size = [256, 256]
    canvas.width = vp_size[0];
    canvas.height = vp_size[1];
}

var mousePos = [-1, -1];
(function() {
    document.onmousemove = handleMouseMove;
    function handleMouseMove(event) {
        var dot, eventDoc, doc, body, pageX, pageY;

        event = event || window.event; // IE-ism

        if (event.pageX == null && event.clientX != null) {
            eventDoc = (event.target && event.target.ownerDocument) || document;
            doc = eventDoc.documentElement;
            body = eventDoc.body;

            event.pageX = event.clientX +
              (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
              (doc && doc.clientLeft || body && body.clientLeft || 0);
            event.pageY = event.clientY +
              (doc && doc.scrollTop  || body && body.scrollTop  || 0) -
              (doc && doc.clientTop  || body && body.clientTop  || 0 );
        }

        var x = event.pageX - canvas.offsetLeft;
        var y = event.pageY - canvas.offsetTop;
        mousePos = [-1, -1];
        if ( x >= 0 && x < canvas.width && y >= 0 && y < canvas.height ) {
            mousePos = [x, y]; 
        }
    }
})();

var ShProg = {
Create: function (shaderList) {
    var shaderObjs = [];
    for (var i_sh = 0; i_sh < shaderList.length; ++i_sh) {
        var shderObj = this.Compile(shaderList[i_sh].source, shaderList[i_sh].stage);
        if (shderObj) shaderObjs.push(shderObj);
    }
    var prog = {}
    prog.progObj = this.Link(shaderObjs)
    if (prog.progObj) {
        prog.attrInx = {};
        var noOfAttributes = gl.getProgramParameter(prog.progObj, gl.ACTIVE_ATTRIBUTES);
        for (var i_n = 0; i_n < noOfAttributes; ++i_n) {
            var name = gl.getActiveAttrib(prog.progObj, i_n).name;
            prog.attrInx[name] = gl.getAttribLocation(prog.progObj, name);
        }
        prog.uniLoc = {};
        var noOfUniforms = gl.getProgramParameter(prog.progObj, gl.ACTIVE_UNIFORMS);
        for (var i_n = 0; i_n < noOfUniforms; ++i_n) {
            var name = gl.getActiveUniform(prog.progObj, i_n).name;
            prog.uniLoc[name] = gl.getUniformLocation(prog.progObj, name);
        }
    }
    return prog;
},
AttrI: function (prog, name) { return prog.attrInx[name]; },
UniformL: function (prog, name) { return prog.uniLoc[name]; },
Use: function (prog) { gl.useProgram(prog.progObj); },
SetI1: function (prog, name, val) { if (prog.uniLoc[name]) gl.uniform1i(prog.uniLoc[name], val); },
SetF1: function (prog, name, val) { if (prog.uniLoc[name]) gl.uniform1f(prog.uniLoc[name], val); },
SetF2: function (prog, name, arr) { if (prog.uniLoc[name]) gl.uniform2fv(prog.uniLoc[name], arr); },
SetF3: function (prog, name, arr) { if (prog.uniLoc[name]) gl.uniform3fv(prog.uniLoc[name], arr); },
SetF4: function (prog, name, arr) { if (prog.uniLoc[name]) gl.uniform4fv(prog.uniLoc[name], arr); },
SetM33: function (prog, name, mat) { if (prog.uniLoc[name]) gl.uniformMatrix3fv(prog.uniLoc[name], false, mat); },
SetM44: function (prog, name, mat) { if (prog.uniLoc[name]) gl.uniformMatrix4fv(prog.uniLoc[name], false, mat); },
Compile: function (source, shaderStage) {
    var shaderScript = document.getElementById(source);
    if (shaderScript)
        source = shaderScript.text;
    var shaderObj = gl.createShader(shaderStage);
    gl.shaderSource(shaderObj, source);
    gl.pileShader(shaderObj);
    var status = gl.getShaderParameter(shaderObj, gl.COMPILE_STATUS);
    if (!status) alert(gl.getShaderInfoLog(shaderObj));
    return status ? shaderObj : null;
},
Link: function (shaderObjs) {
    var prog = gl.createProgram();
    for (var i_sh = 0; i_sh < shaderObjs.length; ++i_sh)
        gl.attachShader(prog, shaderObjs[i_sh]);
    gl.linkProgram(prog);
    status = gl.getProgramParameter(prog, gl.LINK_STATUS);
    if ( !status ) alert(gl.getProgramInfoLog(prog));
    return status ? prog : null;
} };

var Texture = {};
Texture.HandleLoadedTexture2D = function( image, texture, flipY ) {
    gl.activeTexture( gl.TEXTURE0 );
    gl.bindTexture( gl.TEXTURE_2D, texture );
    gl.pixelStorei( gl.UNPACK_FLIP_Y_WEBGL, flipY != undefined && flipY == true );
    gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image );
    gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR );
    gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR );
    gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT );
  	gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT );
    gl.bindTexture( gl.TEXTURE_2D, null );
    return texture;
}
Texture.LoadTexture2D = function( name, flip ) {
    var texture = gl.createTexture();
    texture.image = new Image();
    texture.image.setAttribute('crossorigin', 'anonymous');
    texture.image.onload = function () {
        Texture.HandleLoadedTexture2D( texture.image, texture, flip )
    }
    texture.image.src = name;
    return texture;
}

initScene();

})();

#gui { position : absolute; top : 0; left : 0; }

<script id="draw-shader-vs" type="x-shader/x-vertex">
precision mediump float;

attribute vec2 inPos;
varying   vec2 vertPos;

void main()
{
    vertPos     = inPos;
    gl_Position = vec4( inPos, 0.0, 1.0 );
}
</script>

<script id="draw-shader-fs" type="x-shader/x-fragment">
precision mediump float;

varying vec2      vertPos;
uniform sampler2D u_texture;
uniform sampler2D u_maskTexture;
uniform vec2      u_vpsize;
uniform vec2      u_mouse;
uniform float     u_maxDistance;
uniform float     u_exponent;
uniform float     u_lightup;

void main()
{
    float aspect       = u_vpsize[0]/u_vpsize[1];
    vec2  distVec      = (vertPos - u_mouse) * vec2(max(1.0,aspect), max(1.0,1.0/aspect));
    float distance     = length(distVec);
    float mixK         = pow( distance / u_maxDistance, u_exponent ); 
    vec2  texCoord     = vertPos * 0.5 + 0.5;
    vec3  texColor     = texture2D( u_texture, texCoord.st ).rgb;
    vec3  grayColor    = vec3( 0.2126 * texColor.r + 0.7152 * texColor.g + 0.0722 * texColor.b );
    vec2  maskTexCoord = 0.5 + 0.5 * distVec / u_maxDistance; 
    float mask         = texture2D( u_maskTexture, maskTexCoord ).a;
    vec3  finalColor   = mix( grayColor, texColor * u_lightup, ( 1.0 - clamp( mixK, 0.0, 1.0 ) ) * mask );
    gl_FragColor       = vec4( finalColor.rgb, 1.0 );
}
</script>

<form id="gui" name="inputs">
<table>
    <tr> <td> <font color= #CCF>max. distance</font> </td> 
            <td> <input type="range" id="maxDist" min="1" max="100" value="33"/></td> </tr>
    <tr> <td> <font color= #CCF>exponent</font> </td> 
            <td> <input type="range" id="exponent" min="1" max="300" value="100"/></td> </tr>
    <tr> <td> <font color= #CCF>light up</font> </td> 
            <td> <input type="range" id="lightup" min="50" max="200" value="150"/></td> </tr>
</table>
</form>

<canvas id="scene-canvas" style="border: none"></canvas>