Exhibit 1 Texture Parameters

What to Display

Texture Texture Coordinates (fractional part only)

Filtering Parameters

gl.TEXTURE_MAG_FILTER

LINEAR NEAREST

gl.TEXTURE_MIN_FILTER

LINEAR NEAREST NEAREST_MIPMAP_NEAREST LINEAR_MIPMAP_NEAREST NEAREST_MIPMAP_LINEAR LINEAR_MIPMAP_LINEAR

Wrapping Parameters

gl.TEXTURE_WRAP_S	REPEAT CLAMP_TO_EDGE MIRRORED_REPEAT
$s$ of left edge		$s$ of right edge
gl.TEXTURE_WRAP_T	REPEAT CLAMP_TO_EDGE MIRRORED_REPEAT
$t$ of bottom edge		$t$ of top edge

What We Did

• After binding a texture to the TEXTURE_2D target, you can specify how pixel values are fetched from the texture.
• Specification is done by the gl.texParameteri, whose documentation can be found here.
  • We are using this version of the function: void gl.texParameteri(GLenum target, GLenum pname, GLint param);
  • target, again, specifies the texture system. In our case, it's always gl.TEXTURE_2D
  • pname is where you put a WebGL constant that specifies the name of the parameters you would like to set.
  • param is the actual parameter value, and it is usally another WebGL constant.
• In this exhibit, we are interested in two set of parameters: filtering parameters and wrapping parameters.
• A filtering parameter specifies how texture values are averaged together when the texture is displayed on a shape whose resolution does not match the texture resolution.
  • gl.TEXTURE_MAG_FILTER specifies what to do when surface resolution is larger than texture resolution.
  • gl.TEXTURE_MIN_FILTER specifies what to do when surface resolution is smaller than texture resolution.
• A mipmap can be used when minification happens, so we have parameter values that specify how to use the mipmap.
  • Simply call gl.generateMipmap(gl.TEXTURE_2D) after uploading image data.
  • Then you can use the mipmap options in the minification filter.
• Note that not all options are available unless your image's width and height are powers of 2.
  • According to documentation at Mozilla:

    But, if you must have a non power-of-two (NPOT) texture, WebGL does include limited native support. [...] The catch: these textures cannot be used with mipmapping and they must not "repeat" (tile or wrap).

  • Sidenote: WebGL 2 does not have these restrictions.
• A wrapping parameter specifies how to fetch texture values when the texture coordinate is out of the default $[0,1]$ range.
  • Because texture coordinates have two components (called $s$ and $t$ instead of $u$ and $v$), we have parameters that allow us to control each component separately.