I am building a HTML/JS page that plays a video. I would like to enhance the video (sharpen it, or more) via drawing the video to a canvas and applying a shader to it. Right now I have followed this example. I have it working and can see the video drawn to the canvas with the custom color effect as defined in the x-shader/x-fragment script. Example output:
My question: How can I go about updating the WebGL shader code to sharpen/enhance the video? My initial thought was to find a well-known algorithm and use that. HERE I found a gsls shader file for implementing the FSR algorithm. Can someone help me adapt this code to work in my x-shader/x-fragment script? Or is this a completely different language that would be a complex/impossible task to do here? My hope was that I could easily port this shader file to my shader script, but I may be mistaken there as they seem to be completely different languages?
Existing shader script that changes color:
<script id="shader-fs" type="x-shader/x-fragment">
//# these two vars will access
varying mediump vec2 vDirection;
uniform sampler2D uSampler;
void main(void)
{
//# get current video pixel's color (no FOR-loops needed like in JS Canvas)
gl_FragColor = texture2D(uSampler, vec2(vDirection.x * 0.5 + 0.5, vDirection.y * 0.5 + 0.5));
//# example of basic colour effect
gl_FragColor.r = ( gl_FragColor.r * 1.15 );
gl_FragColor.g = ( gl_FragColor.g * 0.8 );
gl_FragColor.b = ( gl_FragColor.b * 0.45 );
}
</script>
Want: To update that shader script to 'enhance' the video, ideally with a well-known shader algorithm (something like these)
