WebGL Textures & Vertices

Beginner's Guide

Page Seventy Four

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). Method setWrapToEdges(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 texParameteri() entries in this book for examples which apply 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.

Plans are in place to post Seven Thunder Software's official free e-book, WebGL Skybox version here. Until then, see WebGL Skybox Examples online and take a look at the source code.

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.

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