10.6 - Texture Mapping Using Procedures¶

Gradient Experiments¶

The fragment shader in the demo program above uses the s component of the texture coordinates as a percentage of the face’s color. The face’s color is “hardcoded” as red in the fragment shader but the face’s color could have come from an attribute variable of the triangle. Note that the operation red * percent is a component by component multiply because red is a vector and s is a scalar (a single value). That is, the result of red * percent is a new vector (red[0]*percent, red[1]*percent, red[2]*percent).

Experiment by trying the following code modifications. Hit the “Re-start” button after each change to see the results. If you introduce errors in the fragment shader program, error messages will be displayed in the “Run Info” display area below the canvas window and in the JavaScript console window.

• Change the variable red to a different color.
• Use the t component of the texture coordinates. That is, percent = t;. Notice how the gradient now switches directions to move across the face instead of up the face.
• Use the s component of the texture coordinates, but reverse its direction. That is, percent = 1.0 - s;. Notice how the gradient now switches directions.
• Try percent = s + t;. This produces values between 0.0 and 2.0. All values greater than 1.0 are clamped to 1.0. This produces the saturated triangle that is a solid color. Every location on the face where the (s+t) is greater then 1.0 will get the full color.
• Try percent = (s+t)/2.0;. This scales the sum to always be between 0.0 and 1.0 and produces a nice gradient across the face.
• Try percent = (s+t)/3.0;. This scales the sum to always be between 0.0 and (2/3) and produces a nice gradient across the face, but the color never saturates to full color.
• Try percent = s * t;. This produces percentages between 0.0 and 1.0, but the values are not linear. Therefore the gradient only saturates the color in one corner.
• Try percent = sin(s);. Remember that the trig functions always use radians, so this is calculating the sine of angles between 0.0 and 1.0 radian (57.2958 degrees). The color never becomes saturated because the percentages are between 0.0 and 0.84.
• Try percent = sin(s * PI/2.0);. This calculates a percentage between 0.0 and 1.0 because the s component is scaled to values between 0.0 and pi/2 (90 degrees). PI is not a defined constant in the shader language, so you need to define it like this: float PI = 3.141592653589793;
• Try percent = sin(s * 2.0*PI);. This calculates percentages between 1.0 and -1.0 because it scales s to be angles between 0.0 and 360.0 degrees (2*PI). All values below 0.0 are clamped to 0.0, which produces the area that is solid black.
• Try percent = abs(sin(s * 2.0*PI));. This calculates percentages between 0.0 and 1.0 because of the abs() function which takes the absolute value of its argument. Notice the nice two “color bands”. What happens when 2.0*PI becomes 3.0*PI? What happens for n*PI?
• Try percent = sin(s * 2.0*PI) * sin(t * 2.0*PI);. This produces gradient circles. If you add the abs() function you will get uniform circles. If you change the 2.0 factor to other values, you get that many circles. Try removing the 2.0 factor.

All of the above experiments calculate a percentage value and then scale the base color by that percentage. You can make a gradient between two different colors by using the percentage, percent, and what’s left over, (1.0-percent), to scale two colors like this.

vec3 red = vec3(1.0, 0.0, 0.0);
vec3 blue = vec3(0.0, 0.0, 1.0);

percent = abs(sin(s * 2.0*PI));
return vec4( red * percent + blue * (1.0-percent), 1.0);

Please experiment with two color gradients.

Hopefully you get the idea of gradients! Think of the possibilities! The above experiments have not even come close to the possible variations.

You can “generalize” gradient texture maps by making parts of the calculations be uniform variables that are set at render time. For example, the function percent = abs(sin(s * n*PI)); produces “n” strips of color over a face. You could make n be a uniform variable, uniform float n;, and set its value in your JavaScript initialization code before you render.

Checkerboard Pattern¶

The following WebGL demo program creates a checkerboard pattern. Study the fragment shader program below and notice that the function called checkerboard calculates whether a texture coordinate is part of a “white” or “black” tile of the pattern. The function returns 0.0 or 1.0. The overlay function calculates a color using the percentage returned from checkerboard. The scale factor passed to the checkerboard function determines the number of tiles in the checkerboard pattern. Change the scale factor in line 29 several times to see the results.

// Fragment shader

// By: Dr. Wayne Brown, Spring 2016

​

precision mediump int;

precision mediump float;

​

varying vec4 v_vertex_color;

varying vec2 v_Texture_coordinate;

​

//-------------------------------------------------

// Calculate a pattern based on the texture coordinates

float checkerboard(vec2 tex_coords, float scale) {

  float s = tex_coords[0];

  float t = tex_coords[1];

​

  float sum = floor(s * scale) + floor(t * scale);

  bool isEven = mod(sum,2.0)==0.0;

  float percent = (isEven) ? 1.0 : 0.0;

​

  return percent;

}

​

//-------------------------------------------------

// Calculate a color based on a pattern defined

// by the texture coordinates

vec4 overlay(vec2 tex_coords) {

  vec3 red = vec3(1.0, 0.0, 0.0);

​

  float percent = checkerboard(tex_coords, 3.0);

​

  return vec4(red * percent, 1.0);

}

​

//-------------------------------------------------

void main() {

  gl_FragColor = overlay(v_Texture_coordinate);

}

​

​

We want to create a pattern that is a combination of this pattern at different scales. There are many ways the patterns can be combined and we will examine just a few of them. To make sure the idea is clear, modify the fragment shader to calculate the checkerboard pattern twice and then take 50% of each calculation. (Hint: Use copy/paste to avoid typing errors.)

float percent = 0.5 * checkerboard(tex_coords, 2.0) +
                0.5 * checkerboard(tex_coords, 3.0);

Try that again using 3 different scales:

float percent = 0.33 * checkerboard(tex_coords, 2.0) +
                0.33 * checkerboard(tex_coords, 3.7) +
                0.33 * checkerboard(tex_coords, 7.0);

Hopefully you see the pattern. We can write a loop to create this sum of patterns like this. Note that loops in WebGL GLSL must have a constant for their loop control variable. That is why n is declared as a const (constant) value.

// Set the number of patterns to overlay
const int n = 5;

// Set the starting scale of the pattern
float scale = 2.0;

float percent = 0.0;
for (int j=0; j<n; j++) {
  percent += (1.0/float(n)) * checkerboard(tex_coords, scale);

  // Increase the scale of the pattern
  scale *= 2.0;
}

Notice that there are three “parameters” in this code: n is the number of patterns to overlay, scale is controlling the scale of each pattern, and the (1.0/float(n)) fraction is taking an equal percentage of each pattern. That gives us many options for controlling this texture map. Experiment with various ways to modify the scales, such as:

• scale += 1.0; (values will be 2, 3, 4, 5, etc.)

• scale += 2.0; (values will be 2, 4, 6, 8, etc.)

• scale += 2.5; (values will be 2, 4.5, 7, 9.5, etc.)

• scale *= 2.0; (values will be 2, 4, 8, 16, etc.)

• scale *= 3.0; (values will be 2, 6, 24, 72, etc)

• scale = table[j];, where

  float table[5];
  table[0] = 2.0;
  table[1] = 3.7;
  table[2] = 4.1;
  table[3] = 8.3;
  table[4] = 12.7;
  

Also experiment with different values for n.

Now we have the most complex part of this idea, the combination part. There are many ways to combine the different scaled patterns. Here are some combination techniques to try:

• Alternately add or subtract the values at each scale. This can be done by flipping a sign value inside the loop like this:

  const int n = 5;
  float scale = 2.0;
  float percent = 0.0;
  float sign = 1.0;
  for (int j=0; j<n; j++) {
    percent += sign * checkerboard(tex_coords, scale);
    scale *= 2.0;
    sign = -sign;
  }
  

• Instead of using an equal percentage of each scaled texture, use a weighted percentage that treats some of the patterns as more important. The following code uses percentages of (1/2), (1/4), (1/8), etc. using the formula 1.0/pow(2,j+1). (If you wanted to treat the smaller scales as more important, you could reverse the percentages, 1.0/pow(2,n-j)

  const int n = 5;
  float scale = 2.0;
  float percent = 0.0;
  for (int j=0; j<n; j++) {
    percent += (1.0/pow(2.0,float(j+1))) * checkerboard(tex_coords, scale);
    scale *= 2.0;
  }
  

Circular Gradient¶

Let’s combine the overlays of a “circular gradient” pattern at different scales. Experiment with the various “parameters” to an overlay using this new basis:

• n, the number of patterns to overlay,
• scale, the various scales of the basic pattern, and
• (1.0/float(n)), the combination technique.

// Fragment shader

// By: Dr. Wayne Brown, Spring 2016

​

precision mediump int;

precision mediump float;

​

varying vec4 v_vertex_color;

varying vec2 v_Texture_coordinate;

​

float PI = 3.141592653589793;

​

//-------------------------------------------------

// Calculate a pattern based on the texture coordinates

float circular_gradient(vec2 tex_coords, float scale) {

  float s = tex_coords[0];

  float t = tex_coords[1];

​

  float percent = abs(sin(s * scale*PI)) * abs(sin(t * scale*PI));

  return percent;

}

​

//-------------------------------------------------

// Calculate a color based on a pattern defined

// by the texture coordinates

vec4 overlay(vec2 tex_coords) {

  vec3 red = vec3(1.0, 0.0, 0.0);

​

  const int n = 1;

  float scale = 1.0;

  float percent = 0.0;

  for (int j=0; j<n; j++) {

    percent += (1.0/float(n)) * circular_gradient(tex_coords, scale);

    scale *= 2.0;

  }

​

  return vec4(red * percent, 1.0);

}

​

//-------------------------------------------------

void main() {

  gl_FragColor = overlay(v_Texture_coordinate);

}

​

​

Other basic patterns could be used in place of the checkerboard or circular_gradient functions. Feel free to experiment by modifying or replacing those functions.

Perlin Noise¶

Ashima’s pnoise() function implements Perlin noise. This function requires an extra parameter which is a vector of 2 “perturbation” factors. The following WebGL demo program allows you to vary these two factors to investigate the possibilities of Perlin noise.

//=========================================================================

// Source: https://raw.githubusercontent.com/ashima/webgl-noise/master/src/classicnoise2D.glsl

//

// GLSL textureless classic 2D noise "cnoise",

// with an RSL-style periodic variant "pnoise".

// Author:  Stefan Gustavson (stefan.gustavson@liu.se)

// Version: 2011-08-22

//

// Many thanks to Ian McEwan of Ashima Arts for the

// ideas for permutation and gradient selection.

//

// Copyright (c) 2011 Stefan Gustavson. All rights reserved.

// Distributed under the MIT license. See LICENSE file.

// https://github.com/ashima/webgl-noise

//

​

precision mediump int;

precision mediump float;

​

vec4 mod289(vec4 x)

{

  return x - floor(x * (1.0 / 289.0)) * 289.0;

}

​

vec4 permute(vec4 x)

{

  return mod289(((x*34.0)+1.0)*x);

}

​

vec4 taylorInvSqrt(vec4 r)

{

  return 1.79284291400159 - 0.85373472095314 * r;

}

​

vec2 fade(vec2 t) {

  return t*t*t*(t*(t*6.0-15.0)+10.0);

}

​

// Classic Perlin noise

float cnoise(vec2 P)

{

  vec4 Pi = floor(P.xyxy) + vec4(0.0, 0.0, 1.0, 1.0);

  vec4 Pf = fract(P.xyxy) - vec4(0.0, 0.0, 1.0, 1.0);

  Pi = mod289(Pi); // To avoid truncation effects in permutation

  vec4 ix = Pi.xzxz;

  vec4 iy = Pi.yyww;

  vec4 fx = Pf.xzxz;

  vec4 fy = Pf.yyww;

​

  vec4 i = permute(permute(ix) + iy);

​

  vec4 gx = fract(i * (1.0 / 41.0)) * 2.0 - 1.0 ;

  vec4 gy = abs(gx) - 0.5 ;

  vec4 tx = floor(gx + 0.5);

  gx = gx - tx;

​

  vec2 g00 = vec2(gx.x,gy.x);

  vec2 g10 = vec2(gx.y,gy.y);

  vec2 g01 = vec2(gx.z,gy.z);

  vec2 g11 = vec2(gx.w,gy.w);

​

  vec4 norm = taylorInvSqrt(vec4(dot(g00, g00), dot(g01, g01), dot(g10, g10), dot(g11, g11)));

  g00 *= norm.x;

  g01 *= norm.y;

  g10 *= norm.z;

  g11 *= norm.w;

​

  float n00 = dot(g00, vec2(fx.x, fy.x));

  float n10 = dot(g10, vec2(fx.y, fy.y));

  float n01 = dot(g01, vec2(fx.z, fy.z));

  float n11 = dot(g11, vec2(fx.w, fy.w));

​

  vec2 fade_xy = fade(Pf.xy);

  vec2 n_x = mix(vec2(n00, n01), vec2(n10, n11), fade_xy.x);

  float n_xy = mix(n_x.x, n_x.y, fade_xy.y);

  return 2.3 * n_xy;

}

​

// Classic Perlin noise, periodic variant

float pnoise(vec2 P, vec2 rep)

{

  vec4 Pi = floor(P.xyxy) + vec4(0.0, 0.0, 1.0, 1.0);

  vec4 Pf = fract(P.xyxy) - vec4(0.0, 0.0, 1.0, 1.0);

  Pi = mod(Pi, rep.xyxy); // To create noise with explicit period

  Pi = mod289(Pi);        // To avoid truncation effects in permutation

  vec4 ix = Pi.xzxz;

  vec4 iy = Pi.yyww;

  vec4 fx = Pf.xzxz;

  vec4 fy = Pf.yyww;

​

  vec4 i = permute(permute(ix) + iy);

​

  vec4 gx = fract(i * (1.0 / 41.0)) * 2.0 - 1.0 ;

  vec4 gy = abs(gx) - 0.5 ;

  vec4 tx = floor(gx + 0.5);

  gx = gx - tx;

​

  vec2 g00 = vec2(gx.x,gy.x);

  vec2 g10 = vec2(gx.y,gy.y);

  vec2 g01 = vec2(gx.z,gy.z);

  vec2 g11 = vec2(gx.w,gy.w);

​

  vec4 norm = taylorInvSqrt(vec4(dot(g00, g00), dot(g01, g01), dot(g10, g10), dot(g11, g11)));

  g00 *= norm.x;

  g01 *= norm.y;

  g10 *= norm.z;

  g11 *= norm.w;

​

  float n00 = dot(g00, vec2(fx.x, fy.x));

  float n10 = dot(g10, vec2(fx.y, fy.y));

  float n01 = dot(g01, vec2(fx.z, fy.z));

  float n11 = dot(g11, vec2(fx.w, fy.w));

​

  vec2 fade_xy = fade(Pf.xy);

  vec2 n_x = mix(vec2(n00, n01), vec2(n10, n11), fade_xy.x);

  float n_xy = mix(n_x.x, n_x.y, fade_xy.y);

  return 2.3 * n_xy;

}

​

//=========================================================================

// Fragment shader

// By: Dr. Wayne Brown, Spring 2016

​

uniform float u_Scale;

uniform float u_S_factor;

uniform float u_T_factor;

​

varying vec4 v_vertex_color;

varying vec2 v_Texture_coordinate;

​

//-------------------------------------------------

// Calculate a color based on a pattern defined

// by the texture coordinates

vec4 noise(vec2 tex_coords) {

​

  float percent = (1.0 + pnoise(u_Scale * tex_coords, vec2(u_S_factor, u_T_factor))) / 2.0;

​

  return vec4(percent, percent, percent, 1.0);

}

​

//-------------------------------------------------

void main() {

  gl_FragColor = noise(v_Texture_coordinate);

}

​

Note that you can better visualize the changes to the Perlin noise function if you increase the scale of the pattern. The sliders that control the s and t factors can be changed in fine detailed using your keyboard arrow keys (after you move a specific slider and make it the active slider.)

As you experiment with the s and t factors notice that:

• The pattern will morph for small changes in the factors, but then jump from one pattern to a different pattern. The factors do no change the pattern smoothly at all scales.
• You get different patterns if you could take the abs() of the pnoise() function (instead of adding 1.0 and dividing by 2.0).
• Selecting the s and t factors for a desired visual effect is more of an “art” than a “science.”

Other Noise Functions¶

Other noise functions you might like to investigate at some future time include:

• OpenSimplex noise: https://en.wikipedia.org/wiki/OpenSimplex_noise
• Wavelet noise: http://graphics.pixar.com/library/WaveletNoise/paper.pdf
• Value noise: https://en.wikipedia.org/wiki/Value_noise
• Worley noise: https://en.wikipedia.org/wiki/Worley_noise