xor-shader-techniques

# Xor Shader Techniques Advanced shader programming techniques by Xor (@XorDev), covering efficient methods for procedural generation, noise, texturing, and visual effects. ## Triggers - shader techniques, shader tricks, shader optimization - turbulence shader, fluid shader, fire shader, smoke shader - procedural noise, dot noise, gyroid noise - efficient chaos, star field, particle scatter - fractal texturing, LOD texturing, texture scaling - volumetric rendering, raymarching, glow effects - antialiasing, analytic antialiasing, fwidth - shader performance, cheap shader effects - GLSL tricks, shader math, shader formulas - Xor shader, GM Shaders, mini.gmshaders.com ## Overview This skill provides comprehensive guidance on advanced shader programming techniques discovered and refined by Xor through 14 years of shader development. These techniques emphasize performance, simplicity, and visual quality, offering cheap alternatives to expensive operations while maintaining impressive results. **Core Philosophy:** - Simple formulas for complex effects - Performance-first approach - Avoid expensive operations when possible - Fake it well rather than simulate it perfectly - Leverage mathematical properties (golden ratio, irrational numbers, rotation) ## Technique Catalog ### 1. Turbulence (Fluid Approximation) **Use Cases:** Water, fire, dust, magic, wind, fog, smoke, clouds **Core Concept:** Approximate fluid dynamics using layered sine waves instead of solving Navier-Stokes equations. Each wave is rotated and scaled to break alignment patterns. **Basic Formula:** ```glsl // Number of turbulence waves #define TURB_NUM 10.0 // Turbulence wave amplitude #define TURB_AMP 0.7 // Turbulence wave speed #define TURB_SPEED 0.3 // Turbulence frequency #define TURB_FREQ 2.0 // Turbulence frequency multiplier #define TURB_EXP 1.4 // Turbulence starting scale float freq = TURB_FREQ; // Turbulence rotation matrix (arbitrary angle, not 45° or 90°) mat2 rot = mat2(0.6, -0.8, 0.8, 0.6); // Loop through turbulence octaves for(float i=0.0; i<TURB_NUM; i++) { // Scroll along the rotated y coordinate float phase = freq * (pos * rot).y + TURB_SPEED*iTime + i; // Add a perpendicular sine wave offset pos += TURB_AMP * rot[0] * sin(phase) / freq; // Rotate for the next octave rot *= mat2(0.6, -0.8, 0.8, 0.6); // Scale down for the next octave freq *= TURB_EXP; } ``` **Key Parameters:** - `TURB_NUM`: Number of waves (8-10 for good results) - `TURB_AMP`: Overall waviness (0.0-1.0) - `TURB_FREQ`: Starting frequency (2.0-4.0) - `TURB_EXP`: Frequency multiplier (1.3-1.6 for smooth, higher for detailed) **Fire Variation:** - Compress horizontally and stretch vertically initially - Scroll upward - Expand horizontally as it rises - Creates upward expansion effect **ShaderToy Demo:** https://shadertoy.com/view/wltcRS --- ### 2. Efficient Chaos (Fast Pseudo-Random Scattering) **Use Cases:** Stars, rain, leaves, particles, object scattering **Problem Solved:** Traditional Worley noise requires sampling all neighboring cells (3^N complexity: 9 in 2D, 27 in 3D). This method works in any dimension with constant cost. **Core Concept:** Layer multiple grids with rotation and scaling. No hash functions or neighbor sampling needed. **Basic Formula:** ```glsl // Number of layers #define LAYERS 5.0 // Overall scale #define SCALE 0.1 // Overall brightness #define BRIGHTNESS 0.04 // Layer shift (shifting factor) #define LAYER_SHIFT 2.618 // Layer spacing (spacing factor) #define LAYER_SCALE 0.6 // Output color vec3 col = vec3(0.0); // Starfield coordinates vec2 c = fragCoord / iResolution.y / SCALE; // Loop through layers for(float i = 0.5 / LAYERS; i<1.0; i+=1.0 / LAYERS) { // Rotate layer (Golden Angle: ~137.5°) c *= mat2(0.22252093, -0.97492791, 0.97492791, 0.22252093); // Get rotated coordinates vec2 p = c; // Apply layer shifting p += LAYER_SHIFT*i; // Adjust layer scaling p /= 1.0 + LAYER_SCALE*i; // Distance to cell center float len = length(mod(p, 2.0) - 1.0); // Light attenuation with circle cutoff float att = max(1.0-len, 0.0) / len; col += att; } ``` **Breaking Patterns:** ```glsl // Add waves to break visible axis lines (for 2 layers) #define LAYER_WAVES 0.2 p += LAYER_WAVES*sin(p.yx); ``` **3D Version:** Works identically in 3D without extra cost! Just use `vec3` and `mat3` for golden angle rotation. **Key Advantages:** - O(N) complexity instead of O(3^N) - Works in any dimension - No hash/rand functions needed - No neighbor cell sampling **ShaderToy Demo:** https://shadertoy.com/view/wfGyzR --- ### 3. Dot Noise (Cheap 3D Noise) **Use Cases:** Clouds, water, terrain, procedural texturing, volumetric rendering **Problem Solved:** 3D Value/Perlin/Simplex noise are expensive when sampled many times per pixel. This provides a fast alternative. **Core Concept:** Aperiodic gyroids using golden ratio and golden angle rotation. No hash, interpolation, or multi-sampling needed. **Formula:** ```glsl float dot_noise(vec3 p) { // The golden ratio const float PHI = 1.618033988; // Rotating the golden angle on the vec3(1, phi, phi*phi) axis const mat3 GOLD = mat3( -0.571464913, +0.814921382, +0.096597072, -0.278044873, -0.303026659, +0.911518454, +0.772087367, +0.494042493, +0.399753815); // Gyroid with irrational orientations and scales return dot(cos(GOLD * p), sin(PHI * p * GOLD)); // Ranges from [-3 to +3] } ``` **Mathematical Background:** - Gyroids: `dot(cos(p), sin(p.yzx))` creates wavy infinite shapes - Golden ratio (φ): Most irrational number, prevents period alignment - Golden angle rotation: Most irrational orientation - Result: Aperiodic pseudo-noise without traditional noise functions **Best Use Cases:** - Low-scale noise on natural shapes - Clouds and fluids - Fractal noise layers (fast accumulation) - Volumetric rendering (many samples per pixel) **Limitations:** - Visible patterns in flat, large-scale scenes - Still composed of periodic waves (just rotated) - Less suitable for terrain at large scales **Fractal Layering:** ```glsl float fractal_dot_noise(vec3 p) { float result = 0.0; float amp = 1.0; float freq = 1.0; for(int i = 0; i < 4; i++) { result += amp * dot_noise(p * freq); amp *= 0.5; freq *= 2.0; } return result; } ``` **ShaderToy Demo:** https://shadertoy.com/view/DfGGzm --- ### 4. Fractal Texturing (Scale-Consistent LOD) **Use Cases:** Terrain rendering, large-scale games, natural textures **Problem Solved:** - Distance textures repeat too much (artificial) - Close textures lose detail (blur) - Traditional mipmapping doesn't solve repetition **Core Concept:** Scale textures inversely with depth, round to discrete LOD levels, and blend between levels. **Formula:** ```glsl vec4 fractal_texture(sampler2D tex, vec2 uv, float depth) { float LOD = log(depth); float LOD_floor = floor(LOD); float LOD_fract = LOD - LOD_floor; vec2 uv1 = uv / exp(LOD_floor - 1.0); vec2 uv2 = uv / exp(LOD_floor + 0.0); vec2 uv3 = uv / exp(LOD_floor + 1.0); vec4 tex0 = texture2D(tex, uv1); vec4 tex1 = texture2D(tex, uv2); vec4 tex2 = texture2D(tex, uv3); return (tex1 + mix(tex0, tex2, LOD_fract)) * 0.5; } ``` **Scale Calibration:** ```glsl // Adjust based on: depth units, texture scale, screen resolution depth *= 1e3 / iResolution.y; ``` **How It Works:** 1. Take log of depth to get LOD level 2. Round down to discrete levels 3. Sample at 3 LOD levels (floor-1, floor, floor+1) 4. Blend between levels based on fractional part 5. Average adjacent levels for smooth transition **Best For:** - Natural textures (grass, terrain, stone) - Consistent detail at all distances **Not Ideal For:** - Structured textures (bricks, tiles) - edges won't blend naturally **ShaderToy Demo:** https://shadertoy.com/view/NdVfzw --- ### 5. fwidth Outlines **Use Cases:** Quick outlines, edge detection, cel shading **Core Concept:** Use derivative functions to detect edges almost for free. Works with any continuous gradient. **Basic Formula:** ```glsl // For any distance field or continuous function float outline = step(fwidth(dist), abs(dist)); // Alternative with thickness control float outline = smoothstep(0.0, fwidth(dist), abs(dist)); ``` **Quality:** Not the best quality, but extremely cheap. Works in a pinch for: - Debug visualization - Stylized rendering - Quick edge detection **Limitations:** - Coarse 2x2 derivative blocks can cause artifacts - Only works with continuous functions - Not as precise as dedicated outline methods --- ### 6. Volumetric Raymarching (Glow Effects) **Use Cases:** Clouds, fire, smoke, light rays, fog, volumetric lighting **Core Concept:** Similar to SDF raymarching, but use density fields instead of distance fields. Accumulate color samples along the ray. **Density Field Example:** ```glsl // Density field (Tunnel + irregular gyroid) float volume(vec3 p) { return 3.5 - 0.25*length(p.xy) + 0.5*dot(sin(p), cos(p*0.618).yzx); } ``` **Glow Raymarch Loop:** ```glsl #define BRIGHTNESS 0.002 #define STEPS 100.0 vec3 col = vec3(0.0); for(float i = 0.0; i<STEPS; i++) { // Glow density float vol = volume(pos); // Step forward pos += dir * vol; // Add the sample color (inverse square attenuation) col += vec3(3, 2, 1) / vol; } // Tanh tonemapping col = tanh(BRIGHTNESS*col); ``` **Alpha Blending (for clouds/smoke):** ```glsl color = mix(color, vec4(sample_rgb, 1), (1.0 - color.a) * sample_alpha); // Stop when opaque (optimization) if (color.a > 0.998) break; ``` **Depth of Field with Raymarching:** ```glsl // Focus ratio should be small like 0.1 or 0.01 float focus = abs(depth - focal_point) * focal_ratio; // Step through when out of focus step_dist = max(step_dist - focus, focus); ``` **Key Differences from SDF Raymarching:** - Use density instead of distance - Accumulate color at every step (not just final intersection) - Allow passthrough (never reach zero step size) - Smaller steps in high-density areas **ShaderToy Demos:** - Glow: https://shadertoy.com/view/4dX3zH - Clouds: https://shadertoy.com/view/lsBfzG --- ### 7. Analytic Anti-Aliasing **Use Cases:** Smooth edges, filtering, preventing aliasing artifacts **Problem:** Aliasing occurs when we have more color data than pixels can represent. **Solution Levels:** #### Level 1: SDF-Based (Cheapest, Best Quality) For circles, lines, squares, or any signed distance field: ```glsl // dist = distance to edge (in world units) // texel = pixel size in world units float gradient = clamp((radius - dist) / texel + 0.5, 0.0, 1.0); ``` **Requirements:** - Accurate distance field - Known pixel scale #### Level 2: fwidth-Based (General Purpose) For any continuous function with inconsistent gradients: ```glsl // Approximate smooth edges from any continuous function float antialias_l1(float d) { // Divide d by its derivative width return clamp(0.5 + d / fwidth(d), 0.0, 1.0); } // Better quality version (L2 norm) float antialias_l2(float d) { // x and y derivatives vec2 dxy = vec2(dFdx(d), dFdy(d)); // Get gradient width float width = length(dxy); // Calculate reciprocal scale (avoid division by 0!) float scale = width > 0.0 ? 1.0/width : 1e7; // Normalize the gradient d with its scale return clamp(0.5 + 0.7 * scale * d, 0.0, 1.0); } ``` **Use For:** - Distorted distance fields - Noise functions - Any continuous gradient #### Level 3: Manual Derivatives (Edge Cases) When 2x2 derivative blocks are too coarse or function is discontinuous: ```glsl // For when derivatives must be manually calculated float antialias_l2_dxy(float d, vec2 dxy) { float width = length(dxy); float scale = width > 0.0 ? 1.0/width : 1e7; return clamp(0.5 + 0.7 * scale * d, 0.0, 1.0); } // Compute manual derivatives (3 samples) float grad00 = grad(pos); float grad10 = grad(pos + vec2(1, 0)); float grad01 = grad(pos + vec2(0, 1)); vec2 dxy = vec2(grad10, grad01) - grad00; // Use with antialiasing float aa = antialias_l2_dxy(grad00, dxy); ``` **Use For:** - Discontinuous functions (floor, fract, step) - Stripy patterns with many edges - When fwidth produces artifacts - Fine detail requiring precision **Handling Discontinuities:** - Use continuous version of gradient for derivative calculation - Apply discontinuous function after anti-aliasing - Example: `fract(grad) - 0.5` breaks derivatives → use `grad` for derivatives, then apply `fract`