Bilinear filtering

From Wikipedia, the free encyclopedia

A zoomed small portion of a bitmap, using nearest-neighbor filtering (left), bilinear filtering (center), and bicubic filtering (right).
A zoomed small portion of a bitmap, using nearest-neighbor filtering (left), bilinear filtering (center), and bicubic filtering (right).

Bilinear filtering is a texture filtering method used to smooth textures when displayed larger or smaller than they actually are.

Most of the time, when drawing a textured shape on the screen, the texture is not displayed exactly as it is stored, without any distortion. Because of this, most pixels will end up needing to use a point on the texture that's 'between' texels, assuming the texels are points (as opposed to, say, squares) in the middle (or on the upper left corner, or anywhere else; it doesn't matter, as long as it's consistent) of their respective 'cells'. Bilinear filtering uses these points to perform bilinear interpolation between the four texels nearest to the point that the pixel represents (in the middle or upper left of the pixel, usually).

Contents

[edit] The formula

In these equations, uk and vk are the texture coordinates and yk is the color value at point k. Values without a subscript refer to the pixel point; values with subscripts 0, 1, 2, and 3 refer to the texel points, starting at the top left, reading right then down, that immediately surround the pixel point. So y0 is the color of the texel at texture coordinate (u0, v0). These are linear interpolation equations. We'd start with the bilinear equation, but since this is a special case with some elegant results, it is easier to start from linear interpolation.

y_a = y_0 + \frac{y_1-y_0}{u_1-u_0}(u-u_0) \,\!
y_b = y_2 + \frac{y_3-y_2}{u_3-u_2}(u-u_2) \,\!
y = y_a + \frac{y_b-y_a}{v_2-v_0}(v-v_0) \,\!

Assuming that the texture is a square bitmap,

v_1 = v_0 \,\!
v_2 = v_3 \,\!
u_1 = u_3 \,\!
u_2 = u_0 \,\!
v_3 - v_0 = u_3 - u_0 = w \,\!

Are all true. Further, define

U = \frac{u - u_0}{w} \,\!
V = \frac{v - v_0}{w} \,\!

With these we can simplify the interpolation equations:

y_a = y_0 + (y_1-y_0)U \,\!
y_b = y_2 + (y_3-y_2)U \,\!
y = y_a + (y_b-y_a)V \,\!

And combine them:

y = y_0 + (y_1 - y_0)U + (y_2 - y_0)V + (y_3 - y_2 - y_1 + y_0)UV \,\!

Or, alternatively:

y = y_0(1 - U)(1 - V) + y_1 U (1 - V) + y_2 (1 - U) V + y_3 U V \,\!

Which is rather convenient. However, if the image is merely scaled (and not rotated, sheared, put into perspective, or any other manipulation), it can be considerably faster to use the separate equations and store yb (and sometimes ya, if we are increasing the scale) for use in subsequent rows.

[edit] Sample code

This code assumes that the texture is square (an extremely common occurrence), that no mipmapping comes into play, and that there is only one channel of data (not so common. Nearly all textures are in color so they have red, green, and blue channels, and many have an alpha transparency channel, so we must make three or four calculations of y, one for each channel).

double getBilinearFilteredPixelColor(Texture tex, double u, double v) {
   u *= tex.size;
   v *= tex.size;
   int x = floor(u);
   int y = floor(v);
   double u_ratio = u - x;
   double v_ratio = v - y;
   double u_opposite = 1 - u_ratio;
   double v_opposite = 1 - v_ratio;
   double result = (tex[x][y]   * u_opposite  + tex[x+1][y]   * u_ratio) * v_opposite + 
                   (tex[x][y+1] * u_opposite  + tex[x+1][y+1] * u_ratio) * v_ratio;
   return result;
 }

[edit] Limitations

Bilinear filtering is rather accurate until the scaling of the texture gets below half or above double the original size of the texture - that is, if the texture was 256 pixels in each direction, scaling it to below 128 or above 512 pixels can make the texture look bad, because of missing pixels or too much smoothness. Often, mipmapping is used to provide a scaled-down version of the texture for better performance; however, the transition between two differently-sized mipmaps on a texture in perspective using bilinear filtering can be very abrupt. Trilinear filtering, though somewhat more complex, can make this transition smooth throughout.

For a quick demonstration of how a texel can be missing from a filtered texture, here's a list of numbers representing the centers of boxes from an 8-texel-wide texture, intermingled with the numbers from the centers of boxes from a 3-texel-wide texture (in blue). The red numbers represent texels that would not be used in calculating the 3-texel texture at all.

0.0625, 0.1667, 0.1875, 0.3125, 0.4375, 0.5000, 0.5625, 0.6875, 0.8125, 0.8333, 0.9375

[edit] Special cases

Textures aren't infinite, in general, and sometimes one ends up with a pixel coordinate that lies outside the grid of texel coordinates. There are a few ways to handle this:

  • Wrap the texture, so that the last texel in a row also comes right before the first, and the last texel in a column also comes right above the first. This works best when the texture is being tiled.
  • Make the area outside the texture all one color. This may be of use for a texture designed to be laid over a solid background or to be transparent.
  • Repeat the edge texels out to infinity. This works best if the texture is not designed to be repeated.

[edit] See also