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!