WebGL and brightness/contrast/gamma

LMB · May 26, 2016 at 9:19 PM

Hi,

I have searched quite a long time, but feel myself getting more stupid by the minute.
I am trying to adjust HTML5-WebGL panos for brightness/contrast/gamma. I am perfectly able to achieve this on a new canvas (appendchild, or <canvas />), copying current pano, applying filters and showing them in the new canvas, but would like to apply those to the current pano of course.
Every time I think I am on the right track, with terms like 'pingpong rendering', 'swapping', even using three.js, I get lost again.
There are loads of examples out there, applying filters to a stored image or video, but how would I do this dynamically to the actual (pano)canvas?

I found the thread about WebGL createPostProcessingShader where Klaus mentions (and gives hints about) the upcoming sharpening filter, would that be the way to go? And is there a working example available?
WebGL createPostProcessingShader returns null

Thanks!

klaus.krpano · June 1, 2016 at 7:43 PM

Hi,

Quote from LMB

I found the thread about WebGL createPostProcessingShader where Klaus mentions (and gives hints about) the upcoming sharpening filter, would that be the way to go? And is there a working example available?
WebGL createPostProcessingShader returns null

Yes - you could use that example as base - look at the WebGL fragment shader code there - there you can easily change/process the color values.

E.g. add some uniforms for brightness, contrast, gamma (like the 'sharpen' uniform/variable in the examaple) and then use them with some formula for the calculation.

Here a quick basic shader for such (just ((color^gamma)-0.5)*contrast+brightness+0.5):

Code

"precision mediump float;"+
"uniform sampler2D sm;"+            // sm = the screen as input texture sampler
"uniform float brightness;"+        // a custom uniform
"uniform float contrast;"+          // a custom uniform
"uniform float gamma;"+             // a custom uniform
"varying vec2 tx;"+                 // tx = the texture coordinates (0.0,0.0 to 1.0,1.0)
"void main()"+
"{"+
    "vec4 color = texture2D(sm,vec2(tx.x, tx.y));"+
    "vec4 newcolor = vec4(0.0, 0.0, 0.0, 1.0);"+
    "newcolor.r = (pow(color.r,gamma) - 0.5)*contrast + brightness + 0.5;"+
    "newcolor.g = (pow(color.g,gamma) - 0.5)*contrast + brightness + 0.5;"+
    "newcolor.b = (pow(color.b,gamma) - 0.5)*contrast + brightness + 0.5;"+
    "gl_FragColor = newcolor;"+
"}";

Display More

Best regards,
Klaus

LMB · June 1, 2016 at 8:05 PM

Hi Klaus,
First of all a BIG thank you as usual!
And even more so, I just had the sharpening working this afternoon! I already new how to apply all kinds of additions to a copied new canvas, but now with your example it is totally complete. Thank you very much!

I added a slider to adjust values for sharpening, now I will add sliders to adjust Gamma, Brightness and Contrast. It's gonna be nice!

I was just researching how to properly refresh the pano dynamically after a change from the slider. With the sharpening demo, it refreshes dynamically to about 25% (so sharpening value increase from 0 to about 25%), after that it only refreshes the minute I rotate/move the pano. Could that be the size of the bufffer or something? (in that case I can just create smaller steps of course).

cheers!

klaus.krpano · June 1, 2016 at 8:07 PM

Call updatescreen() in your slider dragging action to refresh the krpano rendering.

LMB · June 1, 2016 at 8:12 PM

Bam! Sometimes life can be so simple!

Brilliant! I am so happy!

thanks once again!

Participate now!