Alex Rivera | Logout

webgl: white border when using transparency (alpha)

Asked 2011-10-11T21:12:52.390
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.

Edit
Report

1 Answer

1

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

answered 2011-12-23T17:35:33.743

Your Answer