This module can be used to create gradient color palettes. These can be used to colorize noise functions and procedurally generate textures in shaders. Below is an example of such a procedural texture.
More examples can be found in the provided demo
To create a gradient palette, you basically give the API a sequential list of colors. The API will then create a palette, by linearly interpolating between these colors. It is very easy to create a palette:
var simple = [ [0.0, [1.0,0.0,0.0]], [0.5, [0.0,0.0,0.0]], [1.0, [0.0,0.0,1.0]], ]; simplePaletteTexture = createGradientPalette(gl,simple);
above, we create a palette where we first interpolate from red to black, and then from black to red. To be more specific,
0.5 we interpolate between the RGB colors
[0.0,0.0,0.0], and from
1.0 we interpolate from
[0.0,0.0,1.0]. The palette we just have created will
look like this:
in the upper parts of the image, we can see the palette, and below, we see what happens if we use the palette to colorize a noise function.
It is easy to use the created palette in a shader.
createGradientPalette will return the created palette as a
gl-texture2d), and this texture can be sent to a shader by doing
sphereShader.uniforms.uPalette = simplePaletteTexture.bind()
now we can use it to colorize a noise function by sampling from it, based on the noise value:
float t = noise(vPosition); vec3 tex = texture2D(uPalette, vec2(t, 0.0) ).xyz;
and that results in the textured sphere seen above.
By specifying more colors, we can create more advanced textures. For instance, the palette
var fireball = [ [0.0, [0.4,0.4,0.4]], [0.55, [0.0,0.0,0.0]], [0.60, [1.0,0.0, 0.0]], [0.70, [1.0,1.0, 0.0]], [1.0, [0.4,0.4, 0.0]] ];
function createGradientPalette(gl, gradientList[, opts])
Creates a gradient palette, and returns the created palette stored as a
gl-texture2d, with a default size of
glyour WebGL context.
gradientListthe list of colors to use when creating the palette. See the previous section for more details.
optsoptional arguments objects. Can currently only contain the property
opts.size, which specifies the width of the created palette texture. Defaults to
paletteDrawer = new PaletteDrawer(gl, position, size)
Creates a palette drawer, that can be used for drawing a palette texture on the screen. Useful for visualising a palette.
glyour WebGL context.
positionthe pixel position where your palette drawer will be drawn. Stored as an array
sizethe pixel size of your palette drawer. Stored as an array
paletteDrawer.draw(paletteTexture, canvasWidth, canvasHeight)
Draws a palette texture as a simple quad.
paletteTexturethe palette texture to draw.
canvasWidththe width of the canvas.
canvasHeightthe height of the canvas.