11.6 - Procedural Texture Mapping¶

Overview¶

Image based texture mapping and procedural based texture mapping are both widely used. In fact, the two techniques are often used together to create more realistic surfaces.

Advantages to procedural texture mapping:

• Procedural texture mapping requires much less memory because there is no image to download or store in RAM or in the GPU’s memory.
• “Magnification” and “minification” are less of an issue. Procedural texture mapping typically calculates reasonable details at a wide range of scales.
• Procedural texture maps can generate a wide variety of patterns with small tweaks in their calculations. To get the same effect with image based texture mapping would require a separate image for each tweaked pattern.

Disadvantages to procedural texture mapping:

• Procedural texture maps are calculated at rendering time for each individual fragment. If the calculations are complex, rendering speeds become slower.
• The calculations required for procedural texture mapping can be complex and modifying the equations to achieve a specific effect can be difficult.
• Procedural texture mapping creates patterns. If a more structured design is needed, such as a road sign containing words, image based texture mapping is typically the better approach.

Procedural texture mapping converts input values into a color. The input values can be anything related to a triangle’s attributes, such as its location, orientation, diffuse color, etc.. That being said, we typically don’t want the surface properties of a model to change because of it’s location and/or orientation. For example, the wood grain on a model should not change as a piece of wood is moved in a scene; the wood grain should look the same from any position or angle. Using texture coordinates as the inputs for calculating a procedural texture map causes the generated pattern to be the same regardless of how the model is transformed in a scene. If the geometry of a model is used for procedural texture mapping, the geometry values should be used before any scene transformations are applied to them.

Procedural texture mapping is performed by fragment shader programs. There is no limit to the complexity of such programs, but added complexity means slower rendering. If you need to render various models with different procedural texture maps, it is more efficient to implement a separate shader program for each rendering. The alternative is to use an if statement in a single shader program to select the appropriate procedural texture map at rendering time, but this slows down all rendering.

Software Overview¶

The basic steps to create a procedural texture map are:

1. When building a model:
   1. If texture coordinates will be used, assign an appropriate (s,t) value to every vertex of a model.
      
      
2. JavaScript pre-processing for a canvas rendering, if texture coordinates will be used:
   1. Create a GPU buffer object and store the texture coordinates in the GPU.
   2. Get the location of an attribute variable that will hold the texture coordinates in a shader program.
      
      
3. JavaScript setup each time a model is rendered:
   1. Select the correct shader program with gl.useProgram().
   2. If texture coordinates will be used, attach an appropriate buffer object to the texture coordinates attribute variable.
      
      
4. Shader program:
   1. If texture coordinates will be used, in the vertex shader, create a varying variable that will interpolate the texture coordinates across the surface of a triangle. (Or interpolate some other property of the model across the face.)
   2. In the fragment shader, use the texture coordinates (or some other interpolated value) to calculate a color.

Texture coordinates were explained in the previous two lessons. The major discussion for this lesson is the calculations used for a procedural texture map. Equations for three different patterns are explained: gradients, checkerboards, and “Perlin Noise”. Then we discuss how to overlay these patterns at different scales to create more complex textures. Please spend significant time experimenting with each of the example WebGL programs so that you fully understand the concepts.

Texture Map Patterns¶

// Fragment shader

// By: Dr. Wayne Brown, Spring 2018

​

precision mediump int;

precision mediump float;

​

varying vec4 v_vertex_color;

varying vec2 v_Texture_coordinate;

​

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

​

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

// Calculate a color based on the texture coordinates

vec4 gradient(vec2 tex_coords) {

  float s = tex_coords[0];

  float t = tex_coords[1];

​

  return vec4(red * s, 1.0);

}

​

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

void main() {

  gl_FragColor = gradient(v_Texture_coordinate);

}

​

​

// Vertex Shader

precision mediump int;

precision mediump float;

​

// Scene transformation

uniform mat4 u_Clipping_transform; // Projection, camera, model transform

​

// Original model data

attribute vec3 a_Vertex;

attribute vec2 a_Texture_coordinate;

​

// Data (to be interpolated) that is passed on to the fragment shader

varying vec2 v_Texture_coordinate;

​

void main() {

​

  // Pass the vertex's texture coordinate to the fragment shader.

  v_Texture_coordinate = a_Texture_coordinate;

​

  // Transform the location of the vertex for the graphics pipeline.

  gl_Position = u_Clipping_transform * vec4(a_Vertex, 1.0);

}

​

​

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);

// Fragment shader

// By: Dr. Wayne Brown, Spring 2018

​

precision mediump int;

precision mediump float;

​

// The scale factor for the checkerboard pattern.

uniform float u_Scale;

​

// The texture coordinates on a triangle

varying vec2 v_Texture_coordinate;

​

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

vec3 color2 = vec3(0.0, 0.0, 0.0);

​

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

// Calculate a checkerboard pattern based on the texture coordinates

vec4 checkerboard(vec2 tex_coords) {

  float s = tex_coords[0];

  float t = tex_coords[1];

​

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

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

  float percent = (isEven) ? 1.0 : 0.0;

​

  // Avoid if statements; use a calculation to get the desired color.

  vec3 color = color1 * percent + color2 * (1.0-percent);

​

  return vec4(color, 1.0);

}

​

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

void main() {

  gl_FragColor = checkerboard(v_Texture_coordinate);

}

​

​

// Vertex Shader

precision mediump int;

precision mediump float;

​

// Scene transformation

uniform mat4 u_Clipping_transform; // Projection, camera, model transform

​

// Original model data

attribute vec3 a_Vertex;

attribute vec2 a_Texture_coordinate;

​

// Data (to be interpolated) that is passed on to the fragment shader

varying vec2 v_Texture_coordinate;

​

void main() {

​

  // Pass the vertex's texture coordinate to the fragment shader.

  v_Texture_coordinate = a_Texture_coordinate;

​

  // Transform the location of the vertex for the graphics pipeline.

  gl_Position = u_Clipping_transform * vec4(a_Vertex, 1.0);

}

​

​

Perlin Noise Patterns (randomness with coherence)¶

Another technique for creating a pattern for a procedural texture map is to use randomness. However, a purely random function is not useful in CGI because, well, the values are random. Textures and patterns in nature have “coherence,” which means that color values in a pattern tend to be similar to their neighboring values. An algorithm called Perlin Noise was developed by Ken Perlin which captures the idea of randomness with the assumption that neighboring color values are somehow related. You can compare the top image to the right, which is totally random, with the image below it which was generated using “Perlin Noise”.

Implementing a pattern that is random but has coherence can be done in a variety of ways using array lookup tables, texture map images, and/or calculations. In the ideal case the method would be computationally efficient and use the least amount of memory. An overview of algorithms that calculate “Perlin noise” can be found at https://en.wikipedia.org/wiki/Perlin_noise#Procedural_coherent_noise. There are patent issues with some of the algorithms, so we will use the OpenSimplex noise algorithm found here.

Definitions of “random” and “noise”

Computer graphics (and computer science in general) borrows terms from other disciplines but does not always keep the meanings of those terms consistent with their original meaning. “Randomness is the lack of pattern or predictability in events.” [1] “Noise” is randomness in a communication signal. For CGI applications, neither definition is totally correct. For randomness, “pseudo-random” numbers are actually pulled from a sequence of known values. To get a different sequence of “pseudo-random” values you start pulling values from a different part of the sequence. We call the starting value for the sequence the “seed” value. For CGI, we might want a “random pattern” on various objects in a scene, but we want the same “random pattern” every time we render the scene. Therefore we need to “seed” a “Perlin Noise” function with the same seed each time it renders. The “seed” values that give the same pattern for repeated renderings are typically the texture coordinates of a model. If a new “random pattern” is needed then the texture coordinates can be translated, scaled, or rotated to provide a different “seed”.

Please study the fragment shader in the following WebGL program. Skip over the OpenSimplex “noise” generator code in lines 1-97 and concentrate on lines 99-109. Notice that it uses a percentage value returned from the simplexNoise2() function to create shades of gray by using the percentage value for each color component, i.e., (percent, percent, percent).

Re-start Show: Code   Canvas   Run Info Download Files Download Edited Files

• noise.frag
• noise.vert

// Fragment shader // By: Dr. Wayne Brown, Spring 2018 precision mediump int; precision mediump float; varying vec2 v_Texture_coordinate; //========================================================================= // OpenSimplex algorithm - a type of "Perlin Noise" // Source: http://www.geeks3d.com/20110317/shader-library-simplex-noise-glsl-opengl/ #define NORMALIZE_GRADIENTS #undef USE_CIRCLE float permute(float x0,vec3 p) { float x1 = mod(x0 * p.y, p.x); return floor( mod( (x1 + p.z) *x0, p.x )); } vec2 permute(vec2 x0,vec3 p) { vec2 x1 = mod(x0 * p.y, p.x); return floor( mod( (x1 + p.z) *x0, p.x )); } vec3 permute(vec3 x0,vec3 p) { vec3 x1 = mod(x0 * p.y, p.x); return floor( mod( (x1 + p.z) *x0, p.x )); } vec4 permute(vec4 x0,vec3 p) { vec4 x1 = mod(x0 * p.y, p.x); return floor( mod( (x1 + p.z) *x0, p.x )); } uniform vec4 pParam; // Example constant with a 289 element permutation //const vec4 pParam = vec4( 17.0*17.0, 34.0, 1.0, 7.0); float taylorInvSqrt(float r) { return ( 0.83666002653408 + 0.7*0.85373472095314 - 0.85373472095314 * r ); } float simplexNoise2(vec2 v) { const vec2 C = vec2(0.211324865405187134, // (3.0-sqrt(3.0))/6.; 0.366025403784438597); // 0.5*(sqrt(3.0)-1.); const vec3 D = vec3( 0., 0.5, 2.0) * 3.14159265358979312; // First corner vec2 i = floor(v + dot(v, C.yy) ); vec2 x0 = v - i + dot(i, C.xx); // Other corners vec2 i1 = (x0.x > x0.y) ? vec2(1.,0.) : vec2(0.,1.) ; // x0 = x0 - 0. + 0. * C vec2 x1 = x0 - i1 + 1. * C.xx ; vec2 x2 = x0 - 1. + 2. * C.xx ; // Permutations i = mod(i, pParam.x); vec3 p = permute( permute( i.y + vec3(0., i1.y, 1. ), pParam.xyz) + i.x + vec3(0., i1.x, 1. ), pParam.xyz); #ifndef USE_CIRCLE // ( N points uniformly over a line, mapped onto a diamond.) vec3 x = fract(p / pParam.w) ; vec3 h = 0.5 - abs(x) ; vec3 sx = vec3(lessThan(x,D.xxx)) *2. -1.; vec3 sh = vec3(lessThan(h,D.xxx)); vec3 a0 = x + sx*sh; vec2 p0 = vec2(a0.x,h.x); vec2 p1 = vec2(a0.y,h.y); vec2 p2 = vec2(a0.z,h.z); #ifdef NORMALIZE_GRADIENTS p0 *= taylorInvSqrt(dot(p0,p0)); p1 *= taylorInvSqrt(dot(p1,p1)); p2 *= taylorInvSqrt(dot(p2,p2)); #endif vec3 g = 2.0 * vec3( dot(p0, x0), dot(p1, x1), dot(p2, x2) ); #else // N points around a unit circle. vec3 phi = D.z * mod(p,pParam.w) /pParam.w ; vec4 a0 = sin(phi.xxyy+D.xyxy); vec2 a1 = sin(phi.zz +D.xy); vec3 g = vec3( dot(a0.xy, x0), dot(a0.zw, x1), dot(a1.xy, x2) ); #endif // mix vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x1,x1), dot(x2,x2)), 0.); m = m*m ; return 1.66666* 70.*dot(m*m, g); } // End of OpenSimplex algorithm //========================================================================= void main(void) { // Get the pattern value float percent = simplexNoise2(v_Texture_coordinate); // percent is in the range [-1,+1]; map it to range [0,1] percent = (percent + 1.0) * 0.5; // Set the pixels color as a grayscale amount gl_FragColor = vec4(percent, percent, percent, 1.0); }

111

 

1

// Fragment shader

2

// By: Dr. Wayne Brown, Spring 2018

3

​

4

precision mediump int;

5

precision mediump float;

6

​

7

varying vec2 v_Texture_coordinate;

8

​

9

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

10

// OpenSimplex algorithm - a type of "Perlin Noise"

11

// Source: http://www.geeks3d.com/20110317/shader-library-simplex-noise-glsl-opengl/

12

​

13

#define NORMALIZE_GRADIENTS

14

#undef  USE_CIRCLE

15

​

16

float permute(float x0,vec3 p) {

17

  float x1 = mod(x0 * p.y, p.x);

18

  return floor(  mod( (x1 + p.z) *x0, p.x ));

19

}

20

vec2 permute(vec2 x0,vec3 p) {

21

  vec2 x1 = mod(x0 * p.y, p.x);

22

  return floor(  mod( (x1 + p.z) *x0, p.x ));

23

}

24

vec3 permute(vec3 x0,vec3 p) {

25

  vec3 x1 = mod(x0 * p.y, p.x);

26

  return floor(  mod( (x1 + p.z) *x0, p.x ));

27

}

28

vec4 permute(vec4 x0,vec3 p) {

29

  vec4 x1 = mod(x0 * p.y, p.x);

30

  return floor(  mod( (x1 + p.z) *x0, p.x ));

31

}

32

​

33

uniform vec4 pParam;

34

// Example constant with a 289 element permutation

35

//const vec4 pParam = vec4( 17.0*17.0, 34.0, 1.0, 7.0);

36

​

37

float taylorInvSqrt(float r)

38

{

39

  return ( 0.83666002653408 + 0.7*0.85373472095314 - 0.85373472095314 * r );

40

}

41

​

42

float simplexNoise2(vec2 v)

43

{

44

  const vec2 C = vec2(0.211324865405187134, // (3.0-sqrt(3.0))/6.;

45

                      0.366025403784438597); // 0.5*(sqrt(3.0)-1.);

46

  const vec3 D = vec3( 0., 0.5, 2.0) * 3.14159265358979312;

// Vertex Shader precision mediump int; precision mediump float; // Scene transformation uniform mat4 u_Clipping_transform; // Projection, camera, model transform // Manipulation of the texture coordinates uniform vec2 u_Translate_texture; uniform float u_Scale_texure; // Original model data attribute vec3 a_Vertex; attribute vec2 a_Texture_coordinate; // Data (to be interpolated) that is passed on to the fragment shader varying vec2 v_Texture_coordinate; void main() { // Pass the vertex's texture coordinate to the fragment shader, // but scale and translate them first. v_Texture_coordinate = (a_Texture_coordinate * u_Scale_texure) + u_Translate_texture; // Transform the location of the vertex for the graphics pipeline. gl_Position = u_Clipping_transform * vec4(a_Vertex, 1.0); }

29

 

1

// Vertex Shader

2

precision mediump int;

3

precision mediump float;

4

​

5

// Scene transformation

6

uniform mat4 u_Clipping_transform; // Projection, camera, model transform

7

​

8

// Manipulation of the texture coordinates

9

uniform vec2 u_Translate_texture;

10

uniform float u_Scale_texure;

11

​

12

// Original model data

13

attribute vec3 a_Vertex;

14

attribute vec2 a_Texture_coordinate;

15

​

16

// Data (to be interpolated) that is passed on to the fragment shader

17

varying vec2 v_Texture_coordinate;

18

​

19

void main() {

20

​

21

  // Pass the vertex's texture coordinate to the fragment shader,

22

  // but scale and translate them first.

23

  v_Texture_coordinate = (a_Texture_coordinate * u_Scale_texure) + u_Translate_texture;

24

​

25

  // Transform the location of the vertex for the graphics pipeline.

26

  gl_Position = u_Clipping_transform * vec4(a_Vertex, 1.0);

27

}

28

​

29

​

../_static/11_noise/noise.html

Experiment with "Noise" Texture Maps

Please use a browser that supports "canvas"

• Texture Coordinates
• Noise parameters

translate (0.00, 0.00)	scale 1.00
X -10.0 10.0	0.1 30.0
Y -10.0 10.0

Noise parameters: 289.0, 34.0, 1.0, 7.0

0.0 512.0

0.0 512.0

0.0 512.0

0.0 512.0

Animate

Show: Process information    Warnings    Errors

Downloaded shader '../_static/11_noise/noise.frag', 1 of 3

Downloaded shader '../_static/11_noise/noise.vert', 2 of 3

Downloaded model '../_static/models/textured_cube.obj', 3 of 3

Adding download of material file: textured_cube.mtl

Downloaded materials file '../_static/models/textured_cube.mtl', 4 of 4

All files have been retrieved! Starting rendering.

Created model: textured_cube

Open this webgl program in a new tab or window

“Perlin Noise” experiments¶

• Make the percentage change a color value. For example:

  vec3 color = vec3(1.0, 0.0, 0.0);
  gl_FragColor = vec4(color * percent, 1.0);
  

• Make the percentage vary between two different colors. For example:

  vec3 color1 = vec3(1.0, 0.0, 0.0);
  vec3 color2 = vec3(0.0, 1.0, 0.0);
  gl_FragColor = vec4(color1 * percent + color2 * (1.0-percent), 1.0);
  

“OpenSimplex Noise” parameters

There a four parameters that modify the “noise pattern” create by the simplexNoise2 function. The number of possible variations is basically infinite. When you find a pattern that meets your needs, the parameters would typically be hard-coded into a fragment shader.

Overlaid Patterns¶

Complex patterns can be created by combining the patterns we have discussed (gradients, checkerboards, and “Perlin Noise”) at different scales. This will make more sense by working though some examples. Suppose we have the following three functions:

gradient(tex_coords, scale, color)
checkerboard(tex_coords, scale, color)
simplexNoise2(tex_coords, scale, color)

Let’s assume each function returns a color value that can be combined using a “weighted sum”. If the scale factors for each pattern are varied, interesting texture patterns can be created. For example, this takes an equal percentage of three separate patterns:

float percent = 0.33 * gradient(tex_coords, 10.0, color1) +
                0.33 * checkerboard(tex_coords, 4.0, color2) +
                0.33 * simplexNoise2(tex_coords, 1.5, color3);

while the next example has a dominate “noise” pattern:

float percent = 0.20 * gradient(tex_coords, 10.0, color1) +
                0.20 * checkerboard(tex_coords, 4.0, color2) +
                0.60 * simplexNoise2(tex_coords, 1.5, color3);

In addition, the same pattern can be used at different scales, such as:

float percent = 0.33 * simplexNoise2(tex_coords, 10.0, color1) +
                0.33 * simplexNoise2(tex_coords, 4.0,  color2) +
                0.33 * simplexNoise2(tex_coords, 1.5,  color3);

The possibilities are endless.

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

vec3 color = vec3(0.0, 0.0, 0.0);  // start with no color
for (int j=0; j<n; j++) {
  color = color + amount[j] * pattern(tex_coords, scale[j], color[j]);
}

Summary¶

Three basic patterns were discussed for the calculation of a texture map. In addition, the patterns were combined (i.e., overlaid) in interesting ways. This lesson hopefully gave you a foundation on which to build, but we only “scratched the surface” on what is possible (pun intended).

Glossary¶

procedural texture mapping

Calculate a color for a fragment based on some input values. The input values are often texture coordinates.

image based texture mapping

Get a color for a fragment from a 2D image based on texture coordinates, (s,t).

gradient pattern

In mathematics, a gradient is an increase or decrease in the magnitude of a property. In computer graphics, a gradient pattern increases or decreases the color values across the surface of a face.

checkerboard pattern

A series of alternating colored tiles arrange symmetrically on a 2D grid.

“Perlin Noise”

A pattern that is random but that also has coherence (neighboring fragments have similar colors.)

overlaid patterns

Given some patterns that can be created at various scales, combine multiple instances of the patterns at different scales to create a texture map.

Self Assessment¶

For more study¶

http://www.upvector.com/?section=Tutorials&subsection=Intro%20to%20Procedural%20Textures