WebGL and brightness/contrast/gamma

  • 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!

  • Hi,

    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):

    Best regards,
    Klaus

  • 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!

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!