10

When rendering textures that have an alpha-channel, a white border appears around the non-transparent part (the border seems to be the pixels that have an alpha > 0 and < 1):

enter image description here

The original texture is created in illustrator and exported as a png. here it is:

enter image description here

(well, seems stackoverflow altered the image, adjusting pixels that are not completely opaque/transparent, so here is a link)

it is probably the blending, though i dont know what is wrong with the setup:

gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

[Update]

Here is a rendered version, where i added a alpha-gradient to the left part of the texture (so it is getting from 0 opacity to 1 until the half)

enter image description here

this texture is the only texture rendered at this position. it seems to be whitest around a=0.5. really weird. the background is just a cleared color:

gl.clearColor(0.603, 0.76, 0.804, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// render objects here

the depth-function looks like:

gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);

any ideas? thanks a lot.

[Update 2]

Answering my own question: the effect occurs when the background-color of the canvas or the body of the html-page is white. I don't have an explanation, though.

genpfault
  • 51,148
  • 11
  • 85
  • 139
CodeSalad
  • 1,375
  • 2
  • 14
  • 22
  • Try it with a large section that has 0 < alpha < 1 and tell us if the whole region is white, or only a border of that! – Shahbaz Oct 12 '11 at 08:52
  • yes. i updated the post. there is a white region. the amount of white depends on the alpha. seems to be whitest around 0.5 – CodeSalad Oct 12 '11 at 18:29
  • The strange thing is that it's brighter than both the texture and the background! Do you have lighting enabled? – Shahbaz Oct 12 '11 at 22:19
  • no. i am not using any lighting. i also made a test: it looks the same in chrome and firefox. – CodeSalad Oct 13 '11 at 15:56
  • It is very odd. There most certainly is something you do that is affecting this but I'm not quite sure where to point the finger at. Could you post the code with which you draw the object? (I want to see the color you are using to draw). Also, how are you reading the image? Could you make sure the image is saved the way you want it and read correctly? In your image editing software, try overlaying this image with another and see if the alpha's are correct – Shahbaz Oct 13 '11 at 17:34
  • 2
    i now know the reason, though it is pretty strange. the effect happens, when the background color of the canvas / body of the html page is white! i just found out by incident. how could this be? – CodeSalad Oct 14 '11 at 16:04
  • You sure you first draw the background light blue color and then render the object? Although in that case it wouldn't have been this way either. Indeed, this is odd. – Shahbaz Oct 14 '11 at 19:50
  • it is. anyway. mystery solved. thanks a lot for your help! – CodeSalad Oct 15 '11 at 12:10
  • 1
    Just spent two days trying to track this down, sure enough it was the HTML background. How in the _world_ did you figure that out!?!?!? In any case, thanks so much. – Ipsquiggle Jan 18 '12 at 23:33

4 Answers4

4

Use premultiplied alpha and this problem will go away.

See: http://home.comcast.net/~tom_forsyth/blog.wiki.html#%5B%5BPremultiplied%20alpha%5D%5D

Justin Larrabee
  • 115
  • 3
  • The content behind that link has moved to http://eelpi.gotdns.org/blog.wiki.html but there's no way to URL-link to this particular premultiplied alpha page. Every blog post is stuffed onto a single page which is Web 1.0, not 2.0. Delorted. – Eric Leschinski Jan 04 '20 at 12:52
3

This is problem related to texturing linear interpolation. On borders, some interpolated pixels will take half white half green, and 0.5 alpha. You should modify your texture to extend your borders with one more green pixel, even if it is totally transparent.

neodelphi
  • 2,706
  • 1
  • 15
  • 22
2

What's your draw order? This looks like a depth buffering issue to me — you start with a white background, draw the thing with the border so that it's composited on the white, then draw the thing behind the thing with the border. Those areas where the border was blended with the original white background will have stored a value in the depth buffer equal to the depth of their plane, so when the object behind is subsequently drawn, its pixels are discarded in that area.

The general rule is to draw transparent objects after opaque objects, usually from back to front. If you're using additive blending then it's often good enough to disable the depth buffer after the opaque draw and draw them in any order.

Tommy
  • 99,986
  • 12
  • 185
  • 204
  • in the given screenshot, this is the only texture rendered above a cleared background (in some shade of blue). so this doesn't seem to be the exact problem, though it was a very good hint! i updated my question with a new screenshot. – CodeSalad Oct 12 '11 at 18:31
1

When setting the FragColor in the shader, try multiplying the image RGB with the image alpha.

user1113724
  • 11
  • 1
  • If the alpha is already a low value, should the color already be nearly invisible, instead of a white border? – David Guan Nov 08 '17 at 07:56