Game Development Reference
In-Depth Information
Trilinear filtering
Trilinear filtering is a solution to a common problem seen in bilinearly filtered
mipmapped images. A very noticeable change is observed in quality when the
WebGL renderer switches from one mipmap level to the next. Trilinear filtering
first does a texture lookup and then applies either bilinear or nearest filtering on the
two closest mipmap levels. It then linearly interpolates the resulting values. This
results in a smooth degradation of the texture quality as the distance from the viewer
increases rather than a series of sudden drops.
When two mipmaps are selected and we want to apply the nearest-neighbor
algorithm, we use the following code snippet:
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER,
gl.NEAREST_MIPMAP_LINEAR);
When two mipmaps are selected and we want to apply the bilinear algorithm, we
use the following code:
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER,
gl.LINEAR_MIPMAP_LINEAR);
Mipmapping and its corresponding filtering modes can only be
applied to POT (power of two) images, that is, images that have
a height and width in the power of two (64 × 64, 256 × 128, and
so on). We can apply only the nearest and linear filtering modes
to non-POT images.
Applying filtering modes
To apply filtering modes to our texture, we will add three dropdowns:
•
Distance
: This drop-down will help us move the object closer or farther from
the viewer
•
Magnification Filtering
: This drop-down holds the magnification
filtering modes
•
Minification Filtering
: This drop-down holds the minification filtering modes
Open the
04-ApplyingFilteringModes.html
file in your editor. We have changed
the code to add the drop-downs, as shown in the following code snippet:
<div>
<label>Minification Filter</label>
<select id = "minificationFilter">
<option value = "NEAREST">NEAREST</option>
<option value = "LINEAR">LINEAR</option>
