Shader Effect Modules

This directory contains modular, reusable shader effects for Three.js applications.

Available Modules

1. gradientNoiseShader.ts

Noise generation with three algorithms:

• Value Noise - Classic gridded noise with smooth interpolation
• Simplex Noise - Ken Perlin's improved noise algorithm
• Worley Noise - Cellular/voronoi patterns

Includes FBM (Fractional Brownian Motion) for layered detail.

Exports:

• noiseHelperFunctions - GLSL code string
• gradientNoiseUniforms - Default uniforms object
• NOISE_TYPES - Type constants

2. ditherShader.ts ✅

16 dithering algorithms for quantization effects:

• Ordered dithering: Bayer 2x2, 4x4, 8x8
• Stochastic: Random, Blue Noise (animated), Pattern
• Error diffusion: Floyd-Steinberg, Atkinson, Burkes, Jarvis, Sierra2, Stucki, and more

Exports:

• ditherFragmentShader - Full fragment shader
• ditherVertexShader - Vertex shader
• ditherShaderUniforms - Default uniforms
• DITHER_TYPES - Type constants

3. waveDistortionShader.ts

10 wave types for UV coordinate distortion:

• Sin - Smooth sine wave (classic)
• Saw - Linear ramp
• Triangle - Sharp up/down
• Square - Binary on/off
• Pulse - Adjustable duty cycle
• Bounce - Elastic/spring motion
• Perlin - Smooth noise-based
• Spiral - Circular rotation
• Steps - Quantized staircase
• Random - Chaotic noise

Exports:

• waveDistortionFunctions - GLSL code string
• waveDistortionUniforms - Default uniforms
• WAVE_TYPES - Type constants

4. colorGradingShader.ts

Comprehensive color grading controls:

• Brightness, Contrast, Exposure
• Saturation, Gamma, Clarity
• Shadows, Midtones, Highlights
• Black Point, White Point

Includes proper linear/sRGB conversion and tone mapping.

Exports:

• colorGradingFunctions - GLSL code string
• colorGradingUniforms - Default uniforms

Usage Example

import { noiseHelperFunctions, gradientNoiseUniforms } from './shaders/gradientNoiseShader';
import { waveDistortionFunctions, waveDistortionUniforms } from './shaders/waveDistortionShader';

const fragmentShader = `
  ${noiseHelperFunctions}
  ${waveDistortionFunctions}
  
  void main() {
    // Your shader code using the functions
  }
`;

const material = new THREE.ShaderMaterial({
  uniforms: {
    ...gradientNoiseUniforms,
    ...waveDistortionUniforms
  },
  fragmentShader,
  vertexShader: standardVertexShader
});

Mix & Match

Each module is independent and can be combined as needed:

• Gradient Noise + Dither = Posterized gradient
• Wave Distortion + Gradient = Flowing patterns
• Color Grading + Dither = Stylized post-processing
• All together = Complete shader playground

All modules include TypeScript types and proper default values.