Shader Effects
Visual effects that add polish, style, and atmosphere to shader output.
Quick Start // Combine multiple effects vec3 color = baseColor; color = applyVignette(color, uv, 0.5); color = applyGrain(color, uv, uTime, 0.1); color = applyChromaticAberration(color, uv, 0.005);
Glow / Bloom Simple Glow // Distance-based glow float glow(float d, float radius, float intensity) { return pow(radius / max(d, 0.001), intensity); }
// Usage float d = sdCircle(uv, 0.2); vec3 color = vec3(glow(d, 0.1, 2.0)) * glowColor;
Bloom (Multi-sample) // Sample in cross pattern for cheap bloom vec3 bloom(sampler2D tex, vec2 uv, float radius) { vec3 color = vec3(0.0); float total = 0.0;
for (float x = -4.0; x <= 4.0; x += 1.0) { for (float y = -4.0; y <= 4.0; y += 1.0) { float weight = 1.0 / (1.0 + length(vec2(x, y))); color += texture2D(tex, uv + vec2(x, y) * radius).rgb * weight; total += weight; } }
return color / total; }
Gaussian Blur (Separable) // Horizontal pass vec3 blurH(sampler2D tex, vec2 uv, float radius) { vec3 color = vec3(0.0); float weights[5] = float;
color += texture2D(tex, uv).rgb * weights[0]; for (int i = 1; i < 5; i++) { vec2 offset = vec2(float(i) * radius, 0.0); color += texture2D(tex, uv + offset).rgb * weights[i]; color += texture2D(tex, uv - offset).rgb * weights[i]; }
return color; }
// Vertical pass (same, swap x/y)
Chromatic Aberration vec3 chromaticAberration(sampler2D tex, vec2 uv, float amount) { vec2 dir = uv - 0.5; vec2 offset = dir * amount;
vec3 color; color.r = texture2D(tex, uv + offset).r; color.g = texture2D(tex, uv).g; color.b = texture2D(tex, uv - offset).b;
return color; }
// Radial chromatic aberration (stronger at edges) vec3 radialCA(sampler2D tex, vec2 uv, float amount) { vec2 dir = uv - 0.5; float dist = length(dir); vec2 offset = dir * amount * dist;
vec3 color; color.r = texture2D(tex, uv + offset).r; color.g = texture2D(tex, uv).g; color.b = texture2D(tex, uv - offset).b;
return color; }
Distortion Wave Distortion vec2 waveDistort(vec2 uv, float time, float freq, float amp) { uv.x += sin(uv.y * freq + time) * amp; uv.y += cos(uv.x * freq + time) * amp; return uv; }
Barrel/Pincushion Distortion vec2 barrelDistort(vec2 uv, float amount) { vec2 centered = uv - 0.5; float r2 = dot(centered, centered); vec2 distorted = centered * (1.0 + amount * r2); return distorted + 0.5; }
Heat Haze vec2 heatHaze(vec2 uv, float time, float intensity) { float noise = snoise(vec3(uv * 10.0, time)); return uv + vec2(noise) * intensity; }
Ripple vec2 ripple(vec2 uv, vec2 center, float time, float freq, float amp) { vec2 dir = uv - center; float dist = length(dir); float wave = sin(dist * freq - time) * amp; return uv + normalize(dir) * wave; }
Vignette vec3 vignette(vec3 color, vec2 uv, float intensity, float smoothness) { vec2 centered = uv - 0.5; float dist = length(centered); float vig = smoothstep(0.5, 0.5 - smoothness, dist * intensity); return color * vig; }
// Colored vignette vec3 coloredVignette(vec3 color, vec2 uv, vec3 vigColor, float intensity) { vec2 centered = uv - 0.5; float dist = length(centered); float vig = smoothstep(0.0, 0.5, dist * intensity); return mix(color, vigColor, vig); }
Film Grain float random(vec2 st) { return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123); }
vec3 filmGrain(vec3 color, vec2 uv, float time, float intensity) { float grain = random(uv + fract(time)) * 2.0 - 1.0; return color + grain * intensity; }
// Animated grain (smoother) vec3 animatedGrain(vec3 color, vec2 uv, float time, float intensity) { float x = (uv.x + 4.0) * (uv.y + 4.0) * (time * 10.0); float grain = mod((mod(x, 13.0) + 1.0) * (mod(x, 123.0) + 1.0), 0.01) - 0.005; return color + grain * intensity * 50.0; }
Scanlines vec3 scanlines(vec3 color, vec2 uv, float count, float intensity) { float scanline = sin(uv.y * count * 3.14159) * 0.5 + 0.5; return color * (1.0 - intensity + scanline * intensity); }
// CRT-style scanlines vec3 crtScanlines(vec3 color, vec2 fragCoord, float intensity) { float scanline = sin(fragCoord.y * 0.7) * 0.1 * intensity; float flicker = sin(uTime * 10.0) * 0.01 * intensity; return color * (1.0 - scanline - flicker); }
Glitch vec3 glitch(sampler2D tex, vec2 uv, float time, float intensity) { // Random block offset float blockTime = floor(time * 20.0); float blockRand = random(vec2(blockTime, 0.0));
if (blockRand > 0.9) { // Horizontal shift float shift = (random(vec2(uv.y, blockTime)) - 0.5) * intensity; uv.x += shift; }
// Color channel split vec3 color; color.r = texture2D(tex, uv + vec2(intensity * 0.01, 0.0)).r; color.g = texture2D(tex, uv).g; color.b = texture2D(tex, uv - vec2(intensity * 0.01, 0.0)).b;
// Random color inversion blocks if (random(vec2(floor(uv.y * 20.0), blockTime)) > 0.98) { color = 1.0 - color; }
return color; }
// Digital glitch with blocks vec3 blockGlitch(sampler2D tex, vec2 uv, float time, float intensity) { vec2 blockSize = vec2(0.1, 0.05); vec2 block = floor(uv / blockSize); float blockRand = random(block + floor(time * 10.0));
if (blockRand > 1.0 - intensity * 0.1) { uv.x += (blockRand - 0.5) * 0.1; }
return texture2D(tex, uv).rgb; }
Dissolve vec3 dissolve(vec3 color, vec2 uv, float progress, float edgeWidth, vec3 edgeColor) { float noise = snoise(uv * 10.0);
// Discard dissolved pixels if (noise < progress) { discard; }
// Edge glow float edge = smoothstep(progress, progress + edgeWidth, noise); return mix(edgeColor, color, edge); }
// With alpha instead of discard vec4 dissolveAlpha(vec3 color, vec2 uv, float progress, float edgeWidth, vec3 edgeColor) { float noise = snoise(uv * 10.0);
float alpha = smoothstep(progress - edgeWidth, progress, noise); float edge = smoothstep(progress, progress + edgeWidth, noise); vec3 finalColor = mix(edgeColor, color, edge);
return vec4(finalColor, alpha); }
Outline // SDF-based outline vec3 sdfOutline(float d, vec3 fillColor, vec3 outlineColor, float outlineWidth) { float aa = fwidth(d); float fill = smoothstep(aa, -aa, d); float outline = smoothstep(aa, -aa, abs(d) - outlineWidth);
return mix(vec3(0.0), mix(outlineColor, fillColor, fill), max(fill, outline)); }
// Texture-based outline (sample neighbors) float textureOutline(sampler2D tex, vec2 uv, float thickness) { float alpha = texture2D(tex, uv).a;
float outline = 0.0; for (float x = -1.0; x <= 1.0; x += 1.0) { for (float y = -1.0; y <= 1.0; y += 1.0) { outline += texture2D(tex, uv + vec2(x, y) * thickness).a; } }
return clamp(outline - alpha * 9.0, 0.0, 1.0); }
Fresnel / Rim Light // 3D fresnel (needs view direction and normal) float fresnel(vec3 viewDir, vec3 normal, float power) { return pow(1.0 - max(dot(viewDir, normal), 0.0), power); }
// 2D fake fresnel (based on UV distance from center) float fakeFresnel2D(vec2 uv, float power) { vec2 centered = uv - 0.5; float dist = length(centered) * 2.0; return pow(dist, power); }
// Usage vec3 color = baseColor; float rim = fresnel(viewDir, normal, 3.0); color += rimColor * rim * rimIntensity;
Color Grading Contrast / Brightness / Saturation vec3 adjustContrast(vec3 color, float contrast) { return (color - 0.5) * contrast + 0.5; }
vec3 adjustBrightness(vec3 color, float brightness) { return color + brightness; }
vec3 adjustSaturation(vec3 color, float saturation) { float gray = dot(color, vec3(0.299, 0.587, 0.114)); return mix(vec3(gray), color, saturation); }
Color Remap vec3 colorRemap(vec3 color, vec3 shadowColor, vec3 highlightColor) { float luma = dot(color, vec3(0.299, 0.587, 0.114)); return mix(shadowColor, highlightColor, luma); }
Posterize vec3 posterize(vec3 color, float levels) { return floor(color * levels) / levels; }
Dithering // Bayer 4x4 dithering float bayer4x4(vec2 fragCoord) { int x = int(mod(fragCoord.x, 4.0)); int y = int(mod(fragCoord.y, 4.0));
return float(bayer[y * 4 + x]) / 16.0; }
vec3 dither(vec3 color, vec2 fragCoord, float levels) { float threshold = bayer4x4(fragCoord); return floor(color * levels + threshold) / levels; }
Combining Effects vec3 applyEffects(vec3 color, vec2 uv, float time) { // Order matters!
// 1. Distortion (modify UVs first) // Already applied to texture sampling
// 2. Color adjustments color = adjustContrast(color, 1.1); color = adjustSaturation(color, 1.2);
// 3. Chromatic aberration // (apply during texture sampling)
// 4. Vignette color = vignette(color, uv, 1.2, 0.4);
// 5. Film grain (last, before final output) color = filmGrain(color, uv, time, 0.05);
return color; }
File Structure shader-effects/ ├── SKILL.md ├── references/ │ ├── effect-order.md # Recommended effect ordering │ └── performance.md # Effect costs └── scripts/ ├── effects/ │ ├── glow.glsl # Glow/bloom │ ├── distortion.glsl # Distortion effects │ ├── color.glsl # Color grading │ └── retro.glsl # CRT/retro effects └── examples/ ├── cyberpunk.glsl # Cyberpunk style combo └── vintage.glsl # Vintage film look
Reference references/effect-order.md — Recommended order for combining effects references/performance.md — Performance cost of each effect