Webgl sprite rendering, alpha blending white edges

Jung Ervin 0
Viewed 43

I have a sprite with alpha channel (first image, it has texture padding, to prevent texture bleeding, thats why it's "thicker"). The second picture is what I see when I render the sprite. The strange thing is the alpha blending works, because the light blue inside the circle is alpha blue, I see it is working. And the orange parts has also alpha colors at the edges (because of anti aliasing).

But how that white edge possible around the blue circle? The blue circle has alpha, I see it is working. I can't comprehend if the alpha blending working (for the alpha blue pixels), how that white edge around the blue circle is possible (that's the alpha orange pixels)?

How can I prevent rendering the white edges around the sprite's blue circle?

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

If I render the sprite to a HTML canvas works as expected, has alpha blending, no white edges around the circle.

The attached images has no alpha channel, but it's there in my app.

My sprite Rendered sprite

webgl javascript
1 Answers

I found the solution.. It seems if I not turning off the alpha at the getContext, alpha not working properly.

    const gl = canvas.getContext("webgl2", {
        alpha: false,
    });

Then I realized this way only works for NEAREST texture filtering, to work for LINEAR filtering and for MIPMAPs you also need:

gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
Jung Ervin0
Related