Game Development Reference
In-Depth Information
Understanding the filtering methods
Now let's understand how mipmap sets are used in filtering methods available in the
WebGL API.
Nearest-neighbor interpolation
Nearest-neighbor interpolation is the fastest and simplest filtering method. It simply
uses the color of the texel closest to the pixel center for the pixel color. While being
fast, it results in a large number of artifacts. Its usage is shown as follows:
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER,
gl.NEAREST);
Linear interpolation
In the linear interpolation method, the four nearest texels to the pixel center are
sampled and their colors are combined by the weighted average of their distance.
This removes the blockiness seen during magnification. There is a smooth gradient of
color change from one texel to the next. It is also called bilinear filtering. Its usage is
shown as follows:
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
Nearest-neighbor with mipmapping
In the nearest-neighbor with mipmapping algorithm, the nearest mipmap level is
first chosen, then the nearest texel center is used to get the pixel color. This reduces
the aliasing and shimmering significantly but does not help with blockiness. Its
usage is shown as follows:
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER,
gl.NEAREST_MIPMAP_NEAREST);
Bilinear filtering with mipmapping
In bilinear filtering, the four nearest texels to the pixel center are sampled at the
closest mipmap level. The colors of the texels are combined by weighted average of
their distance. This removes the blockiness seen during magnification. So, instead
of an abrupt color change, there is now a smooth gradient of color change from one
texel to the next. Its usage is shown as follows:
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER,
gl.LINEAR_MIPMAP_NEAREST);
