Custom GLSL Shader
glsl() — Custom Fragment ShaderWrite any GLSL fragment shader. Time, resolution and texture uniforms are injected automatically.
const frag = `
precision mediump float;
uniform float u_time;
uniform vec2 u_resolution;
varying vec2 v_texCoord;
void main() {
vec2 uv = v_texCoord;
gl_FragColor = vec4(
sin(uv.x*6.+u_time),
sin(uv.y*6.+u_time+2.),
cos(uv.x*uv.y*10.+u_time),
1.0
);
}`;
glsh.glsl('#wrap-glsl', frag);
Image Effects — effects() with imgsrc()
hueRotates the hue angle over time. Accepts a base
angle offset in radians.glsh.imgsrc('photo.jpg', (err, img) => {
glsh.effects('#wrap-hue', 'hue', {
texture: img,
angle: 1.2
});
});
saturationScales color saturation.
amount of 0 = greyscale, 1 = original, 2 = vivid.glsh.effects(canvas, 'saturation', {
texture: img,
amount: 2.5
});
rgbSplitSeparates R/G/B channels by
amount (0–0.05 typical).glsh.effects(el, 'rgbSplit', {
texture: img,
amount: 0.015
});
glitchRandom scanline and channel displacement.
intensity controls frequency.glsh.effects(el, 'glitch', {
texture: img,
intensity: 0.08
});
bloomAdds a luminance-based glow.
threshold clips low brightness, intensity scales glow.glsh.effects(el, 'bloom', {
texture: img,
threshold: 0.6,
intensity: 2.0
});
GaussBlurGaussian blur kernel.
radius multiplies the pixel offset (1–10 recommended).glsh.effects(el, 'GaussBlur', {
texture: img,
radius: 3.0
});
waveSinusoidal UV displacement.
amplitude controls depth, frequency controls density.glsh.effects(el, 'wave', {
texture: img,
amplitude: 0.04,
frequency: 12.0
});
rippleDistortRadial ripple from center.
strength is displacement magnitude, speed controls animation.glsh.effects(el, 'rippleDistort', {
texture: img,
strength: 0.06,
speed: 4.0
});
halftoneDot-matrix halftone.
dotSize is cells-per-row (higher = finer grid).glsh.effects(el, 'halftone', {
texture: img,
dotSize: 40.0
});
rainbowHue-cycle overlay blended by luminance.
speed controls cycle rate.glsh.effects(el, 'rainbow', {
texture: img,
speed: 0.4
});
kaleidoScopeMirrored slice rotation.
segments is the number of mirror facets.glsh.effects(el, 'kaleidoScope', {
texture: img,
segments: 8
});
swirlRadial twist from center.
angle is max twist, radius is falloff distance.glsh.effects(el, 'swirl', {
texture: img,
angle: 4.0,
radius: 0.5
});
shearUV shear displacement animated over time.
amountX and amountY control axes.glsh.effects(el, 'shear', {
texture: img,
amountX: 0.3,
amountY: 0.0
});
duotoneMaps luminance to two colors.
colorA is shadows, colorB is highlights (RGB 0–1).glsh.effects(el, 'duotone', {
texture: img,
colorA: [0.1, 0.0, 0.4],
colorB: [1.0, 0.8, 0.0]
});
tritoneThree-point tone mapping:
shadow, mid, highlight — each an RGB array.glsh.effects(el, 'tritone', {
texture: img,
shadow: [0.0, 0.0, 0.2],
mid: [0.5, 0.0, 0.5],
highlight: [1.0, 0.9, 0.4]
});
Transitions
rippleTransitionRipple-warp blend between two textures. Drive
setProgress(0–1) to animate.const inst = glsh.effects(el, 'rippleTransition', {
texture: imgA,
texture2: imgB
});
inst.setProgress(0.5);
cubeTransitionPerspective-simulated cube flip between two textures.
const inst = glsh.effects(el, 'cubeTransition', {
texture: imgA,
texture2: imgB
});
inst.setProgress(0.5);