Black outline in Sprites using transparent PNGs as Textures

When using a transparent PNG as a Texture of a Sprite, when the Sprite scales in size it seems to appear a weird black outline like the above:

(See the black pixels around the triangle)

Any clue on how to avoid this?

I obviously could use very big PNGs, but that’s not an option as I am using lots of them and the loading time wouldn’t be acceptable.

So any recommendation will be very appreciated! 😃

Thanks in advance.

[mrdoob]

Nope, I was just trying to explain more in details for the future reference of what’s actually going on (distinction between different behaviors for different filters is IMHO important).

Indeed!

But I am generating thousands of this images dynamically in canvas (they all look different). And I can’t manage to think of an easy (and not performance intensive) solution to “expand the colors” in code.

I see. Well, I’m of course missing context on what you’re actually doing, but you can try this:

For every image you draw the shapes a bit bigger. And then you draw the shapes again in the normal size in a temporal canvas. Then you do this:

// this allows you to only affect the alpha channel on the next operations
context.globalCompositeOperation = "destination-in";
context.drawImage( temp_canvas, 0, 0 );

That way you’ll be adding extra color padding to your color channels while the alpha channel will have the size you need.

I’m not sure it works for what you’re trying to do, but it’s a technique that can be pretty handy when used well 😃

[mrdoob]

After playing with your example a bit I think difference comes because one image has baked black transparent background while the other one has baked white transparent background.

I don’t think it’s that. The image seems fine:

http://twitpic.com/95amq5/full

I have the feeling it has something to do with premultiplication. Or maybe the blend operation…