glsl-gradient-palette
v1.0.0
Published
Module for creating gradient palettes for usage in glsl.
Downloads
961
Maintainers
Readme
glsl-gradient-palette
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
Usage
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]],
];
var opts = {size:1024};
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,
From 0.0
to 0.5
we interpolate between the RGB colors [1.0,0.0,0.0]
and [0.0,0.0,0.0]
, and from
0.5
to 1.0
we interpolate from [0.0,0.0,0.0]
to [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
texture(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]]
];
results in
API
function createGradientPalette(gl, gradientList[, opts])
Creates a gradient palette, and returns the created palette stored as a gl-texture2d
, with a default size of
1024x1
.
gl
your WebGL context.gradientList
the list of colors to use when creating the palette. See the previous section for more details.opts
optional arguments objects. Can currently only contains the propertyopts.size
, which specifies the width of the created palette texture. Defaults to1024
.
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.
gl
your WebGL context.position
the pixel position where your palette drawer will be drawn. Stored as an array[x,y]
.size
the pixel size of your palette drawer. Stored as an array[x_size,y_size]
.
paletteDrawer.draw(paletteTexture, canvasWidth, canvasHeight)
Draws a palette texture as a simple quad.
paletteTexture
the palette texture to draw.canvasWidth
the width of the canvas.canvasHeight
the height of the canvas.