How can we draw a non-power-of-two image anti-aliased so it is smooth?

Questions
1

When using LinearFilter or NearestFilter on a texture to avoid losing image data (because otherwise it will get shrunk to the nearest power of two), the image looks bad, like aliased. How can we anti-alias it without losing image data? Or is this not possible?

2

It’s not possible. Better texture filtering like LinearMipMapLinearFilter requires mipmaps and mipmapped non-power-of-2 textures are not supported in WebGL 1. I’m not sure if it’s possible with WebGL 2 though.

1 Like
3

Ah! From the spec:

Texture access works in the WebGL 2.0 API as in the OpenGL ES 3.0 API. In other words, unlike the WebGL 1.0 API, there are no special restrictions on non power of 2 textures. All mipmapping and all wrapping modes are supported for non-power-of-two images.

2 Likes
4

Thanks for the info!