How to achieve brightness + contrast in WebGL?
<p>I am trying to apply window level similar to <a href="https://rawgit.com/chafey/cornerstone/master/example/windowlevel/index.html" rel="nofollow">this example</a> ,drag your mouse over the image to see the brightness + contrast effect.</p>

<p>But I want to achieve the same using WebGL ,as GPU will process them more faster than CPU.</p>

<p>Here's what I have done:</p>

<p>Vertex Shader:</p>

<pre><code>attribute vec3 attrVertexPos;
attribute vec2 attrTextureCoord;

varying highp vec2 vTextureCoord;

void main(void) {
    gl_Position = vec4(attrVertexPos, 0.81);
    vTextureCoord = attrTextureCoord;
}
</code></pre>

<p>Fragment Shader:</p>

<pre><code>#ifdef GL_ES
    precision highp float;
#endif

varying highp vec2 vTextureCoord;

uniform sampler2D uImage;
uniform float brightnessFactor;
uniform float contrastFactor;

void main(void) {
    gl_FragColor = texture2D(uImage, vTextureCoord) *(brightnessFactor/contrastFactor);
}
</code></pre>

<p>But it doesn't work as expected according the link given above.</p>

<p>Here's the Javascript code:</p>

<pre><code>var isMouseDown = false;

document.getElementById('canvas').onmousedown = function() { isMouseDown = true  };
document.getElementById('canvas').onmouseup   = function() { isMouseDown = false };
document.getElementById('canvas').onmousemove = function(e) {
    if (isMouseDown) {
        var intWidth = $('canvas').innerWidth();
        var intHeight = $('canvas').innerHeight();
        var x = (e.clientX/intWidth)*100;
        var y = (e.clientY/intHeight)*100;

        console.log(x/10 + ' :: ' + y/10);

        brightnessVal = x/10;
        gl.uniform1f(gl.getUniformLocation(program, "contrastFactor"), brightnessVal);
        contrastVal = y/10;
        gl.uniform1f(gl.getUniformLocation(program, "brightnessFactor"), contrastVal);
    }
};
</code></pre>