You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

1

Thursday, May 26th 2016, 9:19pm

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!

2

Wednesday, June 1st 2016, 7:43pm

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

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
"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;"+
"}";


Best regards,
Klaus

3

Wednesday, June 1st 2016, 8:05pm

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!

4

Wednesday, June 1st 2016, 8:07pm

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

5

Wednesday, June 1st 2016, 8:12pm

Bam! Sometimes life can be so simple! :-)

Brilliant! I am so happy!

thanks once again!

Similar threads