11.8 - Transformations on Texture Maps — Learn Computer Graphics using WebGL

Overview¶

Transformations on 2D texture coordinates are identical to the transformations applied to 3D geometry – with the exception that there are only 2 dimensions, (s,t), to modify. Therefore a texture coordinate transformation matrix is 3-by-3 (instead of 4-by-4). The following table lists the standard transformations and their associated matrices.

Transformation	Transformation Matrix
Translate	1 0 0 0 1 0 tx ty 1 *s t 1
Rotate	cos(angle) sin(angle) 0 -sin(angle) cos(angle) 0 0 0 1 *s t 1
Scale	sx 0 0 0 sy 0 0 0 1 *s t 1

For this textbook, mathematical operations on 3-by-3 matrices are implemented in a JavaScript class called GlMatrix3x3 which is in a file called _static/learn_webgl/glmatrix3x3.js. (Use the Chrome “development tools” to view or save a copy.)

In the GLSL language a mat3 data type holds a 3-by-3 matrix transformation which is a 1D Float32Array array organized in column-major order.

Remember that texture coordinates are percentage values in the range [0.0,1.0]. If a texture coordinate transformation causes the coordinate values to go outside the bounds [0.0,1.0] the “wrapping mode” for the texture determines how the texture coordinate is interpreted. From lesson 11.4, the “wrapping modes” are: gl.REPEAT, gl.CLAMP_TO_EDGE, and gl.MIRRORED_REPEAT. The easiest way to deal with transformed texture coordinates is to allow them to be in any range while using a “tileable” image with the “wrapping modes” set to gl.REPEAT.

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);

A “tileable” texture image [1]

The 256x256 image to the right is a “tileable” image – meaning its left and right edges (and top and bottom edges) can meet with no discernible seam.

An Example¶

The WebGL program below allows the image texture map on a plane to be translated, rotated, and scaled. All of these transformations are performed by a single 3-by-3 transformation matrix. Consider the following before experimenting with the program.

The texture coordinates for a model are stored in a buffer object in the GPU’s memory and that data never changes. Each time the model is rendered, a texture map transformation matrix is set to a uniform variable in the shader program. Each texture coordinate of the model is multiplied by this 3-by-3 transform in the vertex shader. The data is static; what is changing is the texture transformation matrix.
In the vertex shader, when you multiply a (s,t) texture coordinate by a 3-by-3 transformation matrix you must change the (s,t) value to (s,t,1). The 3rd component, 1, is the “homogeneous coordinate” for 2D coordinates. The value of 1 allows for translation. If the texture coordinate is set to (s,t,0), it could be scaled and rotated, but not translated.
For this program the “animate” checkbox animates the texture map, not the model’s geometry.

Show: Code Canvas Run Info

render_transform_texture.js
transform_texture.vert
transform_texture.frag

/**
 * render_lighting_per_vertex.js, By Wayne Brown, Fall 2017
 */

/**
 * The MIT License (MIT)
 *
 * Copyright (c) 2017 C. Wayne Brown
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.

* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

"use strict";

/**------------------------------------------------------------------------
 * A class that can create buffer objects for a model, render the model,
 * and delete the model.
 * @param gl {WebGLRenderingContext} WebGL context
 * @param program {object} compiled shader program
 * @param model_buffers {GpuModelArrays} GPU object buffers that hold the model data
 * @param out - an object that can display messages to the web page
 * @constructor
 */
window.RenderTransformTexture = function (gl, program, model_buffers, out) {

let self = this;

// To delete this rendering context, call the model_buffers delete function.
  self.delete = model_buffers.delete;

let my_texture_object = null;

/**----------------------------------------------------------------------
   * Create and initialize a texture object
   * @param my_image {Image} A JavaScript Image object that contains the
   *                         texture map image.
   * @returns {WebGLTexture} A "texture object"
   * @private
   */
  function _createTexture(my_image) {

// Create a new "texture object".
    let texture_object = gl.createTexture();

// Make the "texture object" be the active texture object. Only the
    // active object can be modified or used. This also declares that the
    // texture object will hold a texture of type gl.TEXTURE_2D. The type
    // of the texture, gl.TEXTURE_2D, can't be changed after this
    // initialization.
    gl.bindTexture(gl.TEXTURE_2D, texture_object);

// Set parameters of the texture object.
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

// Tell gl to flip the orientation of the image on the Y axis. Most
    // images have their origin in the upper-left corner. WebGL expects
    // the origin of an image to be in the lower-left corner.
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);

// Store in the image in the GPU's texture object.
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE,
      my_image);

return texture_object;
  }

/**----------------------------------------------------------------------
   * Render the model under the specified transformation.
   * @param geometry_transform  {GlMatrix4x4} A 4x4 transformation matrix.
   * @paran texture_transform {GlMatrix3x3} A 3x3 transformation matrix.
   */
  self.render = function (geometry_transform, texture_transform) {

gl.useProgram(program);

// Set the transform for all the faces, lines, and points
    gl.uniformMatrix4fv(program.u_Clipping_transform, false, geometry_transform);
    gl.uniformMatrix3fv(program.u_Texture_transform, false, texture_transform);

// The shader program used by this render require a color and normal
    // vector for each vertex, which points and lines do not define.
    // Therefore this shader program can't render any points or lines in this model.

if (model_buffers.triangles !== null && model_buffers.triangles.number > 0) {

let vertices = model_buffers.triangles.vertices;
      let texture_coordinates = model_buffers.triangles.textures;

// Activate the model's triangle vertex object buffer (VOB)
      gl.bindBuffer(gl.ARRAY_BUFFER, vertices.id);

// Bind the vertices VOB to the 'a_Vertex' shader variable
      gl.vertexAttribPointer(program.a_Vertex, 3, gl.FLOAT, false, 0, 0);
      gl.enableVertexAttribArray(program.a_Vertex);

// Activate the model's triangle color object buffer (VOB)
      gl.bindBuffer(gl.ARRAY_BUFFER, texture_coordinates.id);

// Bind the vertices VOB to the 'a_Vertex' shader variable
      gl.vertexAttribPointer(program.a_Texture_coordinate, 2, gl.FLOAT, false, 0, 0);
      gl.enableVertexAttribArray(program.a_Texture_coordinate);

// Make the "texture unit" 0 be the active texture unit.
      gl.activeTexture(gl.TEXTURE0);

// Make the texture_object be the active texture. This binds the
      // texture_object to "texture unit" 0.
      gl.bindTexture(gl.TEXTURE_2D, my_texture_object);

// Tell the shader program to use "texture unit" 0
      gl.uniform1i(program.u_Sampler, 0);

// Draw all of the triangles
      gl.drawArrays(gl.TRIANGLES, 0, model_buffers.triangles.number * 3);
    }
  };

//-----------------------------------------------------------------------
  // One-time pre-processing tasks:

// Get the location of the shader program's uniforms and attributes
  program.u_Clipping_transform = gl.getUniformLocation(program, "u_Clipping_transform");
  program.u_Texture_transform = gl.getUniformLocation(program, "u_Texture_transform");

program.a_Vertex             = gl.getAttribLocation(program, 'a_Vertex');
  program.a_Texture_coordinate = gl.getAttribLocation(program, 'a_Texture_coordinate');

my_texture_object = _createTexture(model_buffers.triangles.material.color_map);
};

Transformations on a Texture Map

tx = 0.00	-4.0 4.0
ty = 0.00	-4.0 4.0

sx = 0.00	-4.0 4.0
sy = 0.00	-4.0 4.0
Scale both axes

angle = 0

-360.0 +360.0

Animate

Show: Process information Warnings Errors

Open this webgl program in a new tab or window

Summary¶

Transforming a texture map is identical to transforming a 3D model, with the except that transforming a 2D texture map is done in 2D space.

Transformations on a texture map are performed in the vertex shader (not per fragment) so the impact on rendering speed is very minimal.

Glossary¶

texture map transformation: Change the location of texture coordinates at render-time using a 3-by-3 transformation matrix that contains translation, rotation, and scaling.
tileable texture map image: An image that can be placed in tiles over a plane and the seams between individual tiles is not discernible.
homogeneous coordinate: An additional component to a point that extends the dimension of the point. For computer graphics, a homogeneous coordinate allows translation to be included in a transformation matrix.

Self Assessment¶

Q-265: What does scaling a texture map do?

It multiplies the texture coordinates, (s,t), by a scale factor.
Correct.
It changes the size of the texture map image.
Incorrect. The size of a texture map image is constant.
It adds an offset to the location of the texture coordinates, (s,t).
Incorrect. Addition performs translation, not scaling.
It increases or decreases the intensity of the color retrieved from a texture map image.
Incorrect.

Q-266: What is the size of a texture map transformation matrix?

3 rows, 3 columns.
Correct. The 3rd row and column allow for translation.
4 rows, 4 columns.
Incorrect. A 4-by-4 matrix could be used, but require unnecessary calculations.
2 rows, 2 columns. (Because there is only two values to transform: (s,t))
Incorrect. A 2-by-2 would only allow for scaling and rotation.
2 rows, 3 columns
Incorrect. A 2-by-3 matrix does not have an inverse, which is sometimes needed to undo transformations.

Q-267: Texture coordinates, (s,t), must be changed to which of the following forms before being transformed by a transformation matrix?

(s,t,1)
Correct. The 1 in the 3rd position allows for translation.
(s,t,0)
Incorrect. The 0 in the 3rd position would cause the texture coordinate to act like a vector, not a location.
(s,t) (the form does not need to change)
Incorrect. A 2-component location can’t be multiplied by a 3-by-3 matrix.
(s,t,0,1)
Incorrect.

[1]	The original source for this image, http://www.rendertextures.com/seamless-water-13/, no longer exists.

11.8 - Transformations on Texture Maps¶