WebGL Textures & Vertices: Beginner's Guide (2015)

WebGL API uniformi(WebGLUniformLocation, Number)

Step 1 method setImage() calls the WebGL method uniformi(WebGLUniformLocation, Number) which assigns a texture unit to a sampler uniform in the shader. sampler2D provides access to texture data within the shader. The following listing associates the sampler2D in the shader with the entity's texture unit number. If the entity's WebGLTexture has fully initialized, then the shader may process the texture after the following call. However GLEntityactivates the texture unit, then assigns texture data and settings afterward. Either way the specified sampler processes our texture. The online example Change Textures, calls uniformi() to quickly change the texture on display.

gl.uniform1i

(

entity.uSampler,

entity.idx

);

Listing 69: WebGL API uniform1i(WebGLUniformLocation, Number)

WebGL API createTexture()

Step 2 WebGL method createTexture() receives no parameters and returns an empty WebGLTexture reference. The following line demonstrates assigning a new WebGLTexture to a GLEntity.texture property.

entity.texture = gl.createTexture();

WebGL API activeTexture(Number)

Step 3 call the WebGL method activeTexture(Number) to activate a texture unit. Specify texture units with numbers. After activating a texture unit, subsequent texture settings apply to the active texture. In other words, call activeTexture(Number) before assigning image data, filter and wrapping modes. Specify the number as an offset from the WebGL constant TEXTURE0. For example activeTexture(gl.TEXTURE0 + 2) enables texture unit 2.

The GLEntity method setActiveTexture(entity,gl) activates a texture by number. The WebGL constant TEXTURE0 references the location of the first texture. TEXTURE1 references the location of the second texture. However, TEXTURE0 + 1 also references the second texture. We simply use the GLEntity.idx property to activate the correct texture for each GLEntity. The following listing demonstrates activating a texture by number.

gl.activeTexture

(

gl.TEXTURE0 + entity.idx

);

Listing 70: WebGL API activeTexture(Number)

WebGL API bindTexture(Number, WebGLTexture)

Step 4 the WebGL method bindTexture(Number, WebGLTexture) assigns the current texture to a target. Only two options exist for targets. Use either TEXTURE_2D or TEXTURE_CUBE_MAP. The book's examples only cover TEXTURE_2D. However our book WebGL Skybox uses TEXTURE_CUBE_MAP to generate a 3 dimensional environment. The following listing assigns TEXTURE_2D to a GLEntity.texture property.

gl.bindTexture

(

gl.TEXTURE_2D,

entity.texture

);

Listing 71: WebGL API bindTexture(Number, WebGLTexture)

WebGL API pixelStorei(Number, boolean)

Step 5 the WebGL method pixelStorei(Number, boolean) instructs the processor regarding how to store pixel data. Method pixelStorei(Number, boolean) explains how to arrange the data. The first parameter is a WebGL constant.UNPACK_FLIP_Y_WEBGL maps the top most part of an image to T = 1.0. In other words the values along the Y axis of an image reverse. The second parameter must equal true to flip the data. The following listing demonstrates use of pixelStorei(Number, boolean) to reverse values along the vertical axis.

gl.pixelStorei

(

gl.UNPACK_FLIP_Y_WEBGL,

true

);

Listing 72: WebGL API pixelStorei(Number, boolean)

WebGL API texImage2D() for Image Files

Step 6 the WebGL method texImage2D() assigns a number of properties to the current active texture. Method texImage2D() includes a number of parameters, and at least one overload. The section titled WebGL API texImage2D() for Procedural Textures demonstrates how to use the overloaded version of texImage2D() for JavaScript generated image data.

The following listing demonstrates calling texImage2D() to prepare a WebGLTexture from downloaded Image data. We discuss each parameter after the listing.

gl.texImage2D(

gl.TEXTURE_2D,

gl.RGBA,

gl.UNSIGNED_BYTE,

entity.img

);

Listing 73: WebGL API texImage2D() for Image Files

Pass the WebGL constant TEXTURE_2D as the first parameter for flat graphical images. Use TEXTURE_CUBE_MAP<side> to display six images mapped to six sides of a cube. Look online or read our book titled WebGL Skybox for details regarding cube maps.

The second parameter 0 represents the level of detail for this texture. In this book we're using only the first mipmap level 0.

The third, and fourth parameters represent the the internal format and the pixel source data format. Both parameters must match. RGBA represents four channels including red, green, blue, and alpha. JPG image files can use RGBwithout alpha transparency. However, RGBA works for JPG files as well.

The fifth parameter indicates the type of data which represents each color channel. UNSIGNED_BYTE applies to images composed of channels with values in the range {0..255}. In other words red, green, and blue components can't exceed 255 in value, neither can any component contain a negative value.

The last parameter is the Image we downloaded.

Clamp Textures Edge to Edge

Step 7 assign wrapping modes with WebGL method texParameteri(). Every project provided with the book except Display Repeating Graphic, use the GLEntity method setWrapToEdges(WebGLContext). MethodsetWrapToEdges(WebGLContext) calls the WebGL method texParameteri(target, wrap mode, repeat type), twice with different parameters. The parameters assigned within setWrapToEdges(WebGLContext) cause WebGL to stretch the active texture from edge to edge both horizontally and vertically. Additionally clamping minimizes artifacts where texture edges might bleed into each other.

WebGL API Method texParameteri(target, Number wrap mode, CLAMP_TO_EDGE)

This section explains how to clamp a texture to the edges of a polygon. The WebGL API method texParameteri(target, wrap mode, repeat type) assigns criteria for the currently 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) may assign a number of different settings, based on values passed through the parameter list. This section focuses on assigning a texture to stretch from edge to edge across a surface. In other words we demonstrate just one type of wrapping mode. The wrapping mode instructs the renderer how to cover a polygon with a texture. See other entries in the table of contents beginning with WebGL API Method texParameteri, for examples of different settings.

The first parameter Number target is a WebGL constant. Only two options exist for the target. Use either TEXTURE_2D or TEXTURE_CUBE_MAP. This book applies 2D textures. Therefore pass the WebGL constant TEXTURE_2D as the first parameter. WebGL skyboxes use TEXTURE_CUBE_MAP. Look online or read our book titled WebGL Skybox, for details regarding cube maps.

To wrap a texture from edge to edge, we need to assign values for the horizontal and vertical dimensions of a texture. The first call to texParameteri(target, wrap mode, repeat type) assigns wrapping along the horizontal axis. Pass the WebGL constant TEXTURE_WRAP_S as the second parameter to stretch along the horizontal axis.

Assign CLAMP_TO_EDGE which clamps texture coordinates. Clamping restricts texel values to either 0 or 1. CLAMP_TO_EDGE minimizes artifacts. In other words you're less likely to see textures blend along the edges. Textures blend when the renderer sends modified texels to the fragment shader, with fractional values along the edges.

The following listing demonstrates calling texParameteri(target, wrap mode, repeat type) to stretch the currently active texture along the horizontal axis.

gl.texParameteri

(

gl.TEXTURE_2D,

gl.TEXTURE_WRAP_S,

gl.CLAMP_TO_EDGE

);

Listing 74: WebGL API texParameteri() Wrap Horizontal Axis

The second call to texParameteri(target, wrap mode, repeat type) stretches the texture along the vertical axis. The following listing demonstrates calling texParameteri(target, wrap mode, repeat type) to stretch the currently active texture along the vertical axis. Pass the WebGL constant TEXTURE_WRAP_T as the second parameter to stretch along the vertical axis.

gl.texParameteri

(

gl.TEXTURE_2D,

gl.TEXTURE_WRAP_T,

gl.CLAMP_TO_EDGE

);

Listing 75: WebGL API texParameteri() Wrap Vertical Axis

Clamp Textures Edge to Edge Summary

We demonstrated how method setWrapToEdges(WebGLContext) calls the WebGL API method texParameteri(target, wrap mode, repeat type), twice with different parameters. The parameters assigned within setWrapToEdges(WebGLContext) cause WebGL to stretch the active texture from edge to edge horizontally and vertically. Additionally clamping minimizes artifacts where texture edges might bleed into each other. Follow the link to the book's source code to see the setWrapToEdges(WebGLContext) method.

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.

The second book in this series Online 3D Media with WebGL covers mipmapping. This book covers non mipmapped filters. 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. See other entries in the table of contents beginning with WebGL API Method texParameteri, for examples of different texture settings.

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 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. See other entries in the table of contents which begin with WebGL API Method texParameteri, for examples of different texture settings.

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.

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 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.