last day (14 days later) » 

10:01 AM
5
Q: Alpha gradients not smooth in WebGL when using premultiplied alpha

Will CalderwoodI've got a LibGDX game with cartoon clouds with a smooth gradient. There are other examples of gradients in the game that have a similar issue, but the clouds are the most obvious example. They look fine in Android, on iOS and on the Desktop version of the game, but on the WebGL version the gradi...

 
@Isogen74 Yes, RGBA8 uncompressed.
 
are you sure the target alpha is 1 all the way? webgl will composite with the page background as premult alpha. To be sure just clear alpha to 1 before blit.
 
@starmole check this. I've changed render() to double check alpha is set to 1. The same problem still occurs.
 
hm. i was just guessing. :) what if you clear to 1,1,1 instead? Also: Is the background without the clouds already different? It looks a bit darker to me?
 
@starmole It doesn't matter what I clear to, same problem. I've tried black, white and red. The background in the sample images could be different as I just copied them off a screenshot, so they would have been at different positions. The test program has a plain background with the same issue.
 
10:01 AM
No idea then, sorry. Long shot: Is one buffer sRGB and the other not?
 
@starmole No. all the same format.
 
test?
 
test??
 
ah.
 
Do you have IntelliJ IDEA installed?
 
10:02 AM
try to make a shader that just writes alpha as red
hell no!
no blending
make sure the input data is the same
 
What are you thinking this will show?
 
make sure the input is the same
maybe the image loader is different
if the alpha input with no blending is the same
the problem is the target blending
if the input is different the problem is there
 
If I draw the premultiplied version with the blend function GL20.GL_SRC_ALPHA, GL20.GL_ONE_MINUS_SRC_ALPHA, then I get a slightly darker version of the image with smooth gradients. So I'm pretty sure the input is not the issue.
It's something to do with blending of alphas, but I can't work out what.
 
also get a good rgb+alpha test texture. it needs an rgb ramp, and an alpha ramp
premultiplied needs to blend one, one minus src
 
Good thinking. I'll create a new texture.
Yes, I know that's the blending function that should be used. I was just testing to check the image.
 
10:09 AM
thats the whole idea of premultiplied. the *src alpha is already done
regular blend is dest = src*src_alpha + dest*(1-src_alpha)
to save one multiply people started storing src as src*src_alpha
so the blend becomes src*1 + dest*(1-src_alpha)
as an exercise you can put in alpha=.5 or .25 and see how it ends up wrong
 
I'm just setting up a different texture to play with. I'll be back with you shortly.
Are you a webgl person?
 
I am just bored and drunk, thus helpful :)
 
I'm guessing you're not in the UK if you're drunk at this time?! :-)
 
us, san francisco
i should sleep soon. :) but maybe i can help.
 
10:32 AM
When you say I should write red instead of alpha, are you thinking I should just set r=a and a=1 in the fragment shader?
vec4 c = v_color * texture2D(u_texture, v_texCoords);
gl_FragColor = vec4(c.a, c.g, c.b, 1.0);
Writing the alpha as red I get a smooth gradient
 
yep
 
So doing this gl_FragColor = vec4(c.a, 0.0, 0.0, 1.0);
 
then compare that to the desktop version
is it the exact same?
next do only r g b without alpha. is it the exact same?
 
Desktop is also smooth red.
Doing gl_FragColor = vec4(c.a, c.g, c.b, 1.0); I get stripes again.
 
smooth yes, but is it the same gradient?
stripes?
 
10:39 AM
Yes, looks exactly the same
 
if you do (c.rc.a, c.gc.a, c.b*c.a, 1) on desktop is it the same?
 
That's the cloud with
gl_FragColor = vec4(c.a, c.g, c.b, 1.0);
With (c.rc.a, c.gc.a, c.b*c.a, 1) it looks smooth
although darker as we're multiplying by a
 
lets step back
the goal is to match desktop to web, right?
 
Correct.
 
so we need to find the minimum case where they are different
 
10:44 AM
One thing that's confusing me now is why gl_FragColor = vec4(c.r, c.g, c.b, 1.0); is not smooth.
That would suggest it's not alpha related.
 
yes! if doing only rgb is different already...
 
Ok, so doing gl_FragColor = vec4(c.r, 0.0, 0.0, 1.0); is not smooth, but doing gl_FragColor = vec4(c.a, 0.0, 0.0, 1.0); is smooth.
So it looks like the alpha channel is fine but the colour channels are not
 
so maybe the file is loaded differently?
is web cr the same as desktop cr*ca?
 
Maybe. As I understand it it's just downloaded as is from the webserver.
 
as a png? probably loaded as premultiplied.
and the dektop png is not
 
10:51 AM
My texture packer premultiplies. Are you suggesting the webgl is premultiplying my premultiplied png?
 
might be!
 
Easy to test. I'll use a non premultiplied texture
 
you also should get a baseline with a texture that has no alpha at all... just to be sure
 
It's totally wrong if I don't premultiply my png, so webgl isn't doing it again.
 
how do you create teh png?
 
10:57 AM
Photoshop
then Texture Packer
 
a baseline no alpha image is fine?
 
I'm just testing that
 
i feel like i might just be too drunk... if you blend premult (1,1-a) on webgl and non premult (a,1-a) on desktop do things look right?
 
I'll just test the no alpha version first
looks fine with no alpha
So, the colour channels are causing the stripes, not the alpha channel. But an image with no alpha draws perfectly.
So there's some kind of alpha colour channel processing going on that's causing the issue.
 
well if the color is premultiplied, like c.r*c.a it will loose bits
 
11:08 AM
That doesn't explain why that would draw perfectly on the desktop version and not the webgl version though
 
if you just run webgl as premultiplied
and dektop as not
is it the same?
 
No, desktop always draws correctly.
 
that is not possible
 
If I don't use premultiplication then webgl looks ok.
 
if you run desktop with (1,1-a) and (a,1-a)
it will be different
 
11:10 AM
as in the blending function?
 
yes
try both on desktop
take a screenshot of each. they must be different.
 
Both are smooth. One fades faster than the other
 
exactly
now which one matches the webgl?
 
Desktop versions at the top. Web at the bottom. (1,1-a) and (a,1-a) left and right
 
they look the same!
to drunk me
 
11:20 AM
the ones on the left don't
the bottom one does not have a smooth gradient
 
check in photoshop maybe
 
The (a,1-a) look the same
 
yes
 
The bottom left gradient goes stripy as it fades out
 
the bottom left
where does the gray come from?
 
11:22 AM
That's a white gradient that fades up from the bottom. My screen isn'y big enough to show it all.
 
that makes no sense
 
Which bit makes no sense?
 
i can see things being different between ra and ra*a
the grey on the bottom left
 
The r and g are also not smooth.
 
at least the right side looks good
 
11:27 AM
Unfortunately that's not what I need. :-)
I could switch everything to non-premult but then I get issues with artefacts around the borders
 
yes. why the fuck is the bottom left different to the top left?
 
That's exactly what I've been wondering for the last week or so.
 
the green side is fine
 
That might depend on your monitor. Doesn't look fine on mine.
 
the red is not quite squared...
there is no blending, right?
where does the grey come from then?
 
11:31 AM
I'll send over a new image
 
do you have some mad browser? does it look the same in ff?
 
I've tried in Chrome and IE and it looks the same
Take a look at the clouds here in whatever browser you're using wordbuzzhtml5.appspot.com/canvas/
 
that image top and bottom look the same
 
Might be your monitor? Def not the same on mine.
 
left right are different
 
11:37 AM
 
but top/bottom is the same
 
That's zoomed with higher contrast
 
still the same colors?
 
Same colours. That's just a section of the image I sent you before.
 
i can see the banding
 
11:40 AM
a section of bottom left zoomed and increased contract
 
that is just the browser
 
contrast*
 
but the gradient is the same
 
Yes, it's the banding I want to get rid of.
 
it might be os specific
some crazy 16 bit -> 32 bit
just use flash :)
 
11:44 AM
Unfortunately LibGDX doesn't build for flash.
 
do you have the gradient test online?
 
Not the test. Just the game itself.
 
fun game btw!
very well done!
 
I'm glad you like it. I just wish I could make it look nice in a browser.
 
looks great here
 
11:47 AM
apart from the clouds I assume?
 
i didn't even see them
 
On the main menu screen they drift across. And on the game screen there are a couple of static clouds
 
are you sure you can not fix them by just changing the blend mode?
 
If I repack all my textures and change the blend mode I can fix that issue, but then get other artefacts around the edges.
They are less noticable, but they also appear on the Android & iOS versions, so I don't want to go that route.
I need to get this resolved as I don't want Phil Anderson to get the bounty as he hasn't answered the question. :-)
 
this can not be that hard
 
11:51 AM
That's what I though.
 
i am missing something obvious
 
Install intellij, clone the project and take a look
 
way too drunk for that :)
 
You should probably go to bed. :-)
I'm hoping you've not got work tomorrow.
 
i do
but not much to do
i am even unable to get the game on my windows pc now
 
11:58 AM
error?
 
sorry for not being more helpful!
at least i tried!
 
You've tried harder than anyone else, it's most appreciated.
 
i still think it is a simple issue. just missing something
i gotta sleep now. good night!
 
g'night
 

last day (14 days later) »