WebGL Textures & Vertices

Beginner's Guide

Page Seventy Five

Minification and Magnification Filters

Step 8 assign minification and magnification filters with WebGL method texParameteri(). Every project calls the GLEntity method setMinMagFilters(WebGLContext). Minification and magnification filters determine how the renderer selects pixels from a texture when the render area and texture resolution differ. This section demonstrates how to assign minification and magnification filters for a texture with WebGL method texParameteri().

Minification filters determine how to select pixels from a texture when the render area's resolution is smaller than the texture's resolution. In other words instruct WebGL how to display the texture at a reduced size.

Magnification filters determine how to select pixels from a texture when the render area's resolution is larger than the texture's resolution. In other words instruct WebGL how to display the texture at an increased size.

Mipmapping

This book covers non mipmapped filters. The WebGL Texture Mipmap Options project includes a drop down list with different filter settings. Notice the difference in smoothness on distant images, between drop down menu options gl.NEAREST and gl.LINEAR_MIPMAP_LINEAR.

Two minification and magnification options exist for non mipmapped filters. The WebGL constants NEAREST and LINEAR determine which algorithm to employ when displaying minified or magnified textures.

The LINEAR option blends between the four closest pixels. In other words the renderer selects four pixels surrounding the current texel, blends the colors, then displays the blended color. The LINEAR setting requires the most processing instructions. In other words LINEAR may take longer to display than NEAREST.

The NEAREST option simply displays the closest pixel to the current texel. The NEAREST setting generally processes fastest. This book uses the NEAREST setting. However feel free to change the setting and see the difference between LINEAR and NEAREST settings.

WebGL API Method texParameteri(target, TEXTURE_MIN_FILTER, repeat type)

This section explains how to apply a minification filter. The WebGL API method texParameteri(target, wrap mode, repeat type) assigns criteria for the current active texture. In other words texParameteri(target, wrap mode, repeat type) tells WebGL how to display a texture. Method texParameteri(target, wrap mode, repeat type) includes a number of settings. We focus on minification filters in this section.

Minification filters determine how to select pixels from a texture when the render area's resolution is smaller than the texture's resolution. In other words instruct WebGL how to display the texture at a reduced size.

The first parameter Number target is a WebGL constant. Only two options exist for the target. They are TEXTURE_2D and TEXTURE_CUBE_MAP. We're using 2D textures with this book. So pass the WebGL constant TEXTURE_2D as the first parameter.

To set a minification filter, assign TEXTURE_MIN_FILTER to the second parameter. Assign the WebGL constant NEAREST to the third parameter. The NEAREST algorithm instructs the renderer to sample texels from the closest pixel.

gl.texParameteri
(
 gl.TEXTURE_2D, 
 gl.TEXTURE_MIN_FILTER, 
 gl.NEAREST
);

Listing 76: WebGL API Method texParameteri() For TEXTURE_MIN_FILTER

WebGL Beginner's Guide Introduction WebGL Beginner's Guide
Copyright © 2015 Seven Thunder Software. All Rights Reserved.