Category Archives: Filtering

Bilinear Interpolation

When sampling a texel from a texture that has been re-sized (which is nearly always the case in 3D rendering) you need to use some kind of filter to select what result you should get. Bilinear interpolation uses the four nearest neighbors to interpolate an average texel value.

Bilinear Interpolation

This is a built in filter in OpenGL and to activate it you set the following lines when setting up a texture:

// set the minification filter
// set the magnification filter

If you for some reason wants to do bilinear interpolation manually in a shader then the function to do so looks like the following in GLSL. Note that in vertex shaders you have to do manual bilinear interpolation between texture samples.

const float textureSize = 512.0; //size of the texture
const float texelSize = 1.0 / textureSize; //size of one texel 
vec4 texture2DBilinear( sampler2D textureSampler, vec2 uv )
    // in vertex shaders you should use texture2DLod instead of texture2D
    vec4 tl = texture2D(textureSampler, uv);
    vec4 tr = texture2D(textureSampler, uv + vec2(texelSize, 0));
    vec4 bl = texture2D(textureSampler, uv + vec2(0, texelSize));
    vec4 br = texture2D(textureSampler, uv + vec2(texelSize , texelSize));
    vec2 f = fract( uv.xy * textureSize ); // get the decimal part
    vec4 tA = mix( tl, tr, f.x ); // will interpolate the red dot in the image
    vec4 tB = mix( bl, br, f.x ); // will interpolate the blue dot in the image
    return mix( tA, tB, f.y ); // will interpolate the green dot in the image

Here’s a magnification of a texture using using three different types of filters. The texture is mapped on a sphere and the viewport has been zoomed in on a small part of it.

Nearest Neigbour  (OpenGL fixed function implementation)

Nearest Neigbor filter

Bilinear Interpolation (OpenGL fixed function implementation)

Bilinear Interpolation OpenGL

Bilinear Interpolation (GLSL implementation, the code above)

Bilinear Interpolation GLSL

Some information about OpenGL texture mapping and how to set the filtering properties:

Here’s some discussion why you should not always use bilinear interpolation:

Link to a bilinear interpolation function for DirectX:

Article on about bilinear filtering:

Multisampling (Supersampling)

Because every pixel is normally only sampled once they cannot get the correct output if the whole pixel isn’t covered by one triangle. This is beacuse the sample can only get it’s colour (and other properties) from one triangle. In the contour of a model this is very apparent and if no multisampling is enabled then the edges will be jagged and appear very annoing. This effect is called aliasing and to deal with it we would need unlimited with samples in the pixel and blend them together, but it’s not possible with the current hardware. Instead we have to accept only taking two, four or more samples and hope it’s enough. There are a lot of different methods to do multisampling and the table below show some of the most used ones and the result from using them on a filled triangle and a outlined triangle.

Supersampling Schemes

Image from the book Real-Time Rendering, used with permission.