Smooth/ antialiase image edges


sometimes when add png with transparent background in the wade editor, it will show some white lines on the edges of transparency.

Is these any way to smooth edges or put antialiase?

1 Comment

Hi Janne

If you want to send me an image where this happens, I can have a look directly. But without seeing the image, I can still try to guess what the reason may be :)

I think this may happen for a number of reasons, but probably the most common is some artefact that appears when an image is resized.

Wade uses WebGL version 1.0 for rendering (for compatibility reasons). This version of WebGL only supports mip-chains for power-of-two textures. In other words, when the size of an image is a power of 2 (in both dimensions), it creates smaller versions of that image (resized with bilinear filtering, so with nice and smooth edges). It then uses the most appropriate size depending on how big your image is on the screen.

Unfortunately, for non-power-of-2 textures, this is not supported by WebGL 1.0. As a result, when resized, non-power-of-2 textures will effectively use a "nearest-neighbor" algorithm, and will appear to have no antialias.

If that is your situation, resizing your texture so it is a power of 2 will give you better-looking results.

However this may also be due to something else. Another thing you could try, if this is only a problem with the borders of the image, is to change the UV Min and UV Max properties of your sprites. By default these range from 0 to 1, on both X and Y. You may want to add a pixel in either direction, so for example if your image is 200x150, you could set:

UV Min: {x: 0 + 1/200, y: 0 + 1/150}
UV Max: {x: 1 - 1/200, y: 1 - 1/150}

Note that you can use those expressions (like 1 - 1/150) directly in the Wade editor, it will do the calculation for you.

Post a reply
Add Attachment
Submit Reply
Login to Reply