OpenGL ES high-quality 2D scaling

Question

Let's say I'm making a 2D game and I want to implement a zoom in/out feature. Normally this is as simple as modifying the projection matrix to get more or less of the world to show. However, this results in quite blurry resizing, and I suspect the culprit is the GL_LINEAR parameter you supply to glTexParameteri as explained here.

I've done my fair share of video resizing and I know much better algorithms exist such as bicubic filtering, lanczos, spline, etc, however the only one OpenGL offers is (tri?)linear. What would be the best way of improving 2d scaling? I suppose this would involve shaders but I'm not familiar with the approach. Any reference to working code would be a nice plus.

Answer 1

To sample a texture in a fragment shader you use texture2D(tex,pt). So to gather the adjacent pixels in order to do your own interpolation you need to compute what the points to sample are. To do this, you need to know the size of the texture; then the width and height of an individual texel is 1.0/width and 1.0/height respectively.

vec2 texSz = vec2(1.0,1.0)/textureSize;
for(int i=-2; i<=2; i++) {
    for(int j=-2; j<=2; j++) {
        vec3 texel = texture2D(texSampler,texCoord+vec2(texSz.x*j,texSz.y*i));
         ....

This CodeProject article is excellent, with GLSL for a variety of interpolation functions.

Answer 2

It really depends on what you're doing.

If you're zooming out an image, it may be beneficial to invest time into learning about shaders so you can implement a better filtering algorithm in a pixel shader.

However, if you're making a game with dynamic elements (objects flying around, particle effects going off) then it's really more of an art question.

A common approach is mipmapping, where you make multiple versions of textures, each scaled down to half the previous level. This helps tremendously with oversampling.

The other approach is dynamic level-of-detail. For example, in our 3D space RTS, we had three versions of every spaceship:

• High detail - Model used for close-ups. This had a limit of about 2500 triangles.
• Low detail - Model used when zoomed out. The limit here was about 500 triangles.
• Icon - When the model is so small that it's only the size of a few pixels, it gets replaced by an iconic representation.

For your game, you could do the same. It really depends on the type of game and how important zooming is to the gameplay what the best solution is for your situation.