WebGL Textures & Vertices

Beginner's Guide

Page Seventy Six

Magnification Filter Details

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

This section explains how to apply a magnification 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. This section focuses on magnification filters.

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 when the display area for the texture is larger than the texture itself.

For the first parameter, Number target, apply 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 magnification filter, assign TEXTURE_MAG_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_MAG_FILTER, 
 gl.NEAREST
);

Listing 77: WebGL API Method texParameteri() For TEXTURE_MAG_FILTER

Minification and Magnification Filter Summary

Minification and magnification filters determine how the renderer selects pixels from a texture when the render area and texture resolution differ. We demonstrated how to assign minification and magnification filters for a texture.

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.

For non mipmapped filters two options exist for minification and magnification. 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. See the setMinMagFilters(WebGLContext) method for details in context.

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