In a color texture, the color is a function of the texture coordinates. For an image texture, the coordinates are used to pick out a point in an image. For a procedural texture, the color function is computed as a mathematical function of the coordinates. A 2D procedural texture, like an image texture, computes color as a function of two variables. For a 3D texture, the color is a function of three variables. This demo lets you texture various objects with a variety of procedural textures. Two of the textures are 2D textures; these use ordinary 2D texture coordinates that are provided as the value of a vertex attribute. The other seven textures are 3D. The 3D textures use object coordinates as the texture coordinates. A scaling texture transformation is applied to the texture coordinates to modify the size of the texture on the surface. (In all cases, for a scaling factor of 1.0, the visual features in the texture have about the same size as the objects that are being textures, so some scaling is necessary to get a good view of the texture.)
The first two textures are two-color checkerboard patterns. For the 2D versions, a planar checkerboard pattern is stretched over the surface using 2D texture coordinates, and the effect is the same as an image texture using an image of a checkerboard. For the 3D texture, the effect is the same as carving the object out of a solid block that is colored with a checkerboard pattern. The difference is not apparent for the cube, but it is clear for the sphere and other curved surfaces.
The next two textures use Perlin noise (named after Ken Perlin, who invented it in 1983). A Perlin noise function produces values in the range 0 to 1 that have fluctuations at a variety of frequencies. For the Perlin textures, the color of a pixel is based on a Perlin noise function. For a mottled blue/white texture, for example, the color components could be (n,n,1), where n is the value of the noise function. (In fact, the Perlin textures in the demo use 0.75+0.25*n instead of n, to reduce the contrast.) Perlin noise functions of two and three variables were copied from https://github.com/ashima/webgl-noise; they are distributed under the "MIT" open-source license. The are used in the fragment shader.
The last five textures are 3D, although similar 2D textures would be possible.
The next two textures ("Sine Function" and "Marble (Soft)") are identical except that noise is added in the second. The idea is to start with a periodic function that has values between 0 and 1. (The actual function used here is (1.0+sin(t))/2.0 where t is (v.x+2.0*v.y+v.z)*2.0) and v is a vec3 containing the scaled 3D texture coordinates. The coefficients of v.x, v.y, and v.z in the formula for t determine the size and orientation of the bands of color in the texture.) For the "Marble" texture, some noise is added by adding a noise function to t before feeding it into the sin function. The noise takes the form a*noise(b*v), where noise() is a Perlin noise function and a and b are constants. The values of a and b determine the size and intensity of the perturbations that are introduced into the color bands. For the soft marble texture, both a and b are 1.
The "Marble (sharp)" texture uses the same basic technique as the soft marble, but with a = 1.5. Furthermore, to sharpen the contrast, the basic periodic function is abs(sin(t)) instead of (1.0+sin(t))/2.0
The final pair of textures use another periodic function: the "triangular wave function" t−floor(t). The two textures use this function without noise in the first and with noise added in the second. With less noise, the triangluar function can be used as a basis for textures that simulate wood.
Many variations are possible! You might want to try experimenting with the source code for the main() routine in the demo's fragment shader.
