10.8 - Transformations on Texture Maps¶

Texture coordinates are often defined for a model and never modified. This allows for the surface properties of a model to remain static, even while the geometry of a model is being transformed in location, orientation, and scale. But there are times when you would like a texture to move across the surface of a face, such as a surface that represents water in an ocean. The water is constantly moving due to wind and other forces. So how can we move a texture map? It’s simple, we move the texture coordinates that defines its location.

This lesson introduces the basic ideas behind texture map transformations.

Overview¶

Transformations on 2D texture coordinates are basically the same transformations applied to 3D geometry. The only difference is that we are dealing with flat surfaces that have only 2 dimensions, which means we use a 3-by-3 transformation matrix (instead of a 4-by-4 transformation matrix). The following table lists the standard transformations and their associated matrices.

Transformation	Transform Matrix
Translate	1.0 0.0 0.0 0.0 1.0 0.0 tx ty 1.0
Rotate	cos(angle) sin(angle) 0.0 -sin(angle) cos(angle) 0.0 0.0 0.0 1.0
Scale	sx 0.0 0.0 0.0 sy 0.0 0.0 0.0 1.0

A “tileable” texture image (1)

We need a JavaScript library that can create 3-by-3 transformation matrices and perform math operations on them. The file Learn_webgl_matrix3.js in the demonstration program below contains the needed functionality. (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. All matrices in WebGL are stored as 1D arrays organized in column-major order.

If we are going to move a texture map around by changing its texture coordinates, it is preferred that we use a “tileable” image that can be repeated over a surface. We set the texture map mode to gl.REPEAT so that texture coordinates that are transformed outside the range 0.0 to 1.0 map to a valid location in the texture image. The 256x256 image to the right is a “tileable” image.

Experimentation¶

As you experiment with the demonstration program below, please note the following:

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 transformation.
In the vertex shader, when you multiply a (s,t) texture coordinate times a 3-by-3 transformation matrix you must change the (s,t) value to (s,t,1). The additional component of 1 is the “homogeneous coordinate” for 2D coordinates. Remember that the 1 in the third position implements the translation part of the transformation.
For a cube it is not possible to align the six sides of the cube in a way that does not produce visible “seams.” However, for more complex models you can typically get all the edges on one side of the model to align and then “hide” any seams that do not align on the back or bottom side of the model.

Show: Code Canvas Run Info

texture_transform_render.js
shader37.vert
shader30.frag

/**
 * TextureTransformImageRender.js, By Wayne Brown, Spring 2016
 *
 */

/**
 * The MIT License (MIT)
 *
 * Copyright (c) 2015 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";

// Global definitions used in this code:
var console, Learn_webgl_matrix, Learn_webgl_matrix3;

//-------------------------------------------------------------------------
// Build, create, copy and render 3D objects specific to a particular
// model definition and particular WebGL shaders.
//-------------------------------------------------------------------------
window.TextureTransformImageRender = function (learn, vshaders_dictionary,
                                fshaders_dictionary, models, controls) {

// Private variables
  var self = this;
  var canvas_id = learn.canvas_id;
  var out = learn.out;

var gl = null;
  var program = null;
  var cube;

var matrix = new window.Learn_webgl_matrix();
  var transform = matrix.create();
  var projection = matrix.createOrthographic(-2.0, 2.0, -2.0, 2.0, -4.0, 4.0);
  var rotate_x_matrix = matrix.create();
  var rotate_y_matrix = matrix.create();

// Public variables that will possibly be used or changed by event handlers.
  self.canvas = null;
  self.angle_x = 0.0;
  self.angle_y = 0.0;
  self.animate_active = false;

// Texture mapping transformations
  var mat3 = new window.Learn_webgl_matrix3();
  self.texture_dx = 0.0;
  self.texture_dy = 0.0;
  self.texture_sx = 1.0;
  self.texture_sy = 1.0;
  self.texture_angle = 0.0;
  var texture_transform = mat3.create();
  var texture_translate = mat3.create();
  var texture_scale = mat3.create();
  var texture_rotate = mat3.create();

//-----------------------------------------------------------------------
  self.render = function () {

// Clear the entire canvas window background with the clear color
    // out.display_info("Clearing the screen");
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

// Build individual transforms
    matrix.setIdentity(transform);
    matrix.rotate(rotate_x_matrix, self.angle_x, 1, 0, 0);
    matrix.rotate(rotate_y_matrix, self.angle_y, 0, 1, 0);

// Combine the transforms into a single transformation
    matrix.multiplySeries(transform, projection, rotate_x_matrix, rotate_y_matrix);

// Create the texture transform
    mat3.translate(texture_translate, self.texture_dx, self.texture_dy);
    mat3.rotate(texture_rotate, self.texture_angle);
    mat3.scale(texture_scale, self.texture_sx, self.texture_sy);
    mat3.multiplySeries(texture_transform, texture_translate, texture_rotate, texture_scale);

// Draw each model
    cube.render(transform, texture_transform);
  };

//-----------------------------------------------------------------------
  self.delete = function () {

// Clean up shader programs
    gl.deleteShader(program.vShader);
    gl.deleteShader(program.fShader);
    gl.deleteProgram(program);
    program = null;

// Delete each model's VOB
    cube.delete(gl);

// Remove all event handlers
    var id = '#' + canvas_id;
    $( id ).unbind( "mousedown", events.mouse_drag_started );
    $( id ).unbind( "mouseup", events.mouse_drag_ended );
    $( id ).unbind( "mousemove", events.mouse_dragged );
    events.removeAllEventHandlers();

// Disable any animation
    self.animate_active = false;
  };

//-----------------------------------------------------------------------
  // Object constructor. One-time initialization of the scene.

// Get the rendering context for the canvas
  self.canvas = learn.getCanvas(canvas_id);
  if (self.canvas) {
    gl = learn.getWebglContext(self.canvas);
  }
  if (!gl) {
    return;
  }

// Set up the rendering program and set the state of webgl
  program = learn.createProgram(gl, vshaders_dictionary.shader37, fshaders_dictionary.shader30);

gl.useProgram(program);

gl.enable(gl.DEPTH_TEST);

// Create Vertex Object Buffers for the models
  cube = new Learn_webgl_model_render_37(gl, program, models.cube, out);

// Set up callbacks for user and timer events
  var events;
  events = new TextureTransformImageEvents(self, controls);
  events.animate();

var id = '#' + canvas_id;
  $( id ).mousedown( events.mouse_drag_started );
  $( id ).mouseup( events.mouse_drag_ended );
  $( id ).mousemove( events.mouse_dragged );
};

An example of transforming texture coordinates to make a texture map "move."

Translate texture: (0.00, 0.00)	Scale texture: (1.0,1.0)	Rotate texture: 0.0 degrees
TX: -2.0 +2.0	SX: -5.0 +5.0	Angle: -180.0 +180.0
TY: -2.0 +2.0	SY: -5.0 +5.0

Animate Texture

Shader errors, Shader warnings, Javascript info

Open this webgl program in a new tab or window

Summary¶

Moving a texture map across the surface of a face is straightforward and uses the same transformation tools we have studied previously. In addition, the transformation is performed in the vertex shader 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 vector that extends the dimension of the vector. For computer graphics, a homogeneous coordinate allows translation to be included in a transformation matrix.

Next Section - 10.9 - Other Surface Manipulations