shaderforge

🎨 ShaderForge

Evolve Stunning Visual Effects Through Genetic Algorithms

ShaderForge is an interactive WebGL shader playground that combines real-time visual programming with evolutionary computation. Write GLSL shaders, see instant results, and use genetic algorithms to evolve mesmerizing visual effects.

License: MIT Version WebGL

✨ Features

🎬 Real-Time Shader Editor

🧬 Genetic Algorithm Evolution

🎨 Shader DNA

Each evolved shader has genetic traits:

️ Real-Time Controls

💾 Save & Export

🖼️ Visualization

🚀 Quick Start

Option 1: Run Locally

# Clone the repository
git clone https://github.com/yourusername/shaderforge.git
cd shaderforge

# Open in browser
open shaderforge.html
# or
python -m http.server 8000
# Then visit http://localhost:8000

Option 2: Online

Simply open shaderforge.html in any modern browser - no installation required!

Browser Requirements:

Must support: WebGL 2.0 (or WebGL 1.0 fallback)

📖 How to Use

Basic Workflow

  1. 🎨 Open ShaderForge
    • The default shader displays automatically
    • Canvas fills the entire screen
  2. ✏️ Edit Shader Code
    • Click in the editor panel
    • Modify the fragment shader GLSL code
    • Press Ctrl+Enter or click “Compile” to see changes
  3. 🧬 Start Evolution
    • Click “Start Evolution” to begin genetic algorithm
    • View random shader from population
  4. 👍👎 Guide Evolution
    • Click “❤️ Like” to increase shader’s fitness
    • Click “➡️ Skip” to decrease fitness and try next
    • Evolution happens after rating all 20 shaders
  5. 💾 Save Favorites
    • Click “Save Current” to add to library
    • Name your shader for easy recall
    • Load saved shaders anytime
  6. 📤 Export
    • Copy shader code to clipboard
    • Save screenshot of current frame
    • Share with others (URL sharing coming soon)

Advanced Techniques

Manual Shader Writing

precision mediump float;
uniform vec2 u_resolution;
uniform float u_time;
uniform vec2 u_mouse;

void main() {
    // Normalized coordinates (0.0 to 1.0)
    vec2 st = gl_FragCoord.xy / u_resolution;
    
    // Mouse interaction
    vec2 mouse = u_mouse / u_resolution;
    float dist = distance(st, mouse);
    
    // Animated color
    vec3 color = vec3(st.x, st.y, abs(sin(u_time)));
    color *= 1.0 - dist;
    
    gl_FragColor = vec4(color, 1.0);
}

Using Built-in Uniforms

Directed Evolution

1. Start with preset you like (e.g., "plasma")
2. Click "Evolve From Current"
3. Rate variations (Like/Skip)
4. After 3-5 generations, patterns emerge
5. Save your favorite evolutions
6. Use as starting point for new evolutions

Creating Complex Effects

// Combine multiple techniques:

// 1. Fractal noise
float noise(vec2 st) {
    return fract(sin(dot(st, vec2(12.9898, 78.233))) * 43758.5453);
}

// 2. Domain warping
vec2 warp(vec2 st) {
    st += vec2(sin(st.y * 3.0 + u_time), cos(st.x * 3.0 - u_time)) * 0.1;
    return st;
}

// 3. Color palette
vec3 palette(float t) {
    vec3 a = vec3(0.5, 0.5, 0.5);
    vec3 b = vec3(0.5, 0.5, 0.5);
    vec3 c = vec3(1.0, 1.0, 1.0);
    vec3 d = vec3(0.0, 0.33, 0.67);
    return a + b * cos(6.28318 * (c * t + d));
}

void main() {
    vec2 st = gl_FragCoord.xy / u_resolution;
    st = warp(st);
    float n = noise(st * 10.0 + u_time);
    vec3 color = palette(n);
    gl_FragColor = vec4(color, 1.0);
}

🎓 GLSL Tutorial

Basic Concepts

Data Types:

float x = 1.0;           // Single number
vec2 pos = vec2(0.5, 0.5); // 2D vector
vec3 color = vec3(1.0, 0.0, 0.0); // RGB
vec4 rgba = vec4(1.0, 0.0, 0.0, 1.0); // RGBA

Built-in Functions:

sin(x), cos(x), tan(x)   // Trigonometry
abs(x), sign(x)          // Math
length(v), distance(a,b) // Vector
mix(a, b, t)            // Linear interpolation
smoothstep(e0, e1, x)   // Smooth interpolation
fract(x)                // Fractional part
floor(x), ceil(x)       // Rounding

Vector Operations:

vec2 a = vec2(1.0, 2.0);
vec2 b = vec2(3.0, 4.0);

vec2 sum = a + b;        // (4.0, 6.0)
vec2 scaled = a * 2.0;   // (2.0, 4.0)
float dot = dot(a, b);   // 11.0

Common Patterns

1. Gradient:

vec2 st = gl_FragCoord.xy / u_resolution;
vec3 color = vec3(st.x, st.y, 0.5);
gl_FragColor = vec4(color, 1.0);

2. Circle:

vec2 st = gl_FragCoord.xy / u_resolution;
vec2 center = vec2(0.5);
float dist = distance(st, center);
float circle = smoothstep(0.3, 0.29, dist);
gl_FragColor = vec4(vec3(circle), 1.0);

3. Animation:

vec2 st = gl_FragCoord.xy / u_resolution;
float wave = sin(st.x * 10.0 + u_time * 2.0);
vec3 color = vec3(wave * 0.5 + 0.5);
gl_FragColor = vec4(color, 1.0);

4. Noise:

float random(vec2 st) {
    return fract(sin(dot(st, vec2(12.9898, 78.233))) * 43758.5453);
}

void main() {
    vec2 st = gl_FragCoord.xy / u_resolution;
    float n = random(st);
    gl_FragColor = vec4(vec3(n), 1.0);
}

🛠️ Technical Details

Architecture

┌─────────────────────────────────────┐
│         ShaderForge System          │
├─────────────────────────────────────┤
│                                     │
│  ┌─────────────────────────────┐   │
│  │    WebGL Rendering Engine   │   │
│  │  - Shader Compilation       │   │
│  │  - Uniform Management       │   │
│  │  - Render Loop (60fps)      │   │
│  └─────────────────────────────┘   │
│                                     │
│  ┌─────────────────────────────┐   │
│  │   Genetic Algorithm Engine  │   │
│  │  - Population Management    │   │
│  │  - Fitness Evaluation       │   │
│  │  - Selection & Breeding     │   │
│  │  - Mutation Operators       │   │
│  └─────────────────────────────┘   │
│                                     │
│  ┌─────────────────────────────┐   │
│  │     Shader DNA System       │   │
│  │  - Gene Encoding            │   │
│  │  - Code Generation          │   │
│  │  - Parameter Evolution      │   │
│  └─────────────────────────────┘   │
│                                     │
│  ┌─────────────────────────────┐   │
│  │       User Interface        │   │
│  │  - Code Editor              │   │
│  │  - Controls Panel           │   │
│  │  - Library Manager          │   │
│  └─────────────────────────────┘   │
│                                     │
└─────────────────────────────────────┘

Genetic Algorithm

// Evolution Process
1. INITIALIZATION
   - Create 20 random shader genomes
   - Each has 8 genetic traits

2. EVALUATION
   - User rates shaders (Like/Skip)
   - Fitness = likes - (skips * 0.5)

3. SELECTION
   - Tournament selection (size 4)
   - Top 30% elite preservation

4. CROSSOVER
   - Select two parents
   - Randomly inherit traits
   - Create offspring

5. MUTATION
   - 15% chance per gene
   - Gaussian perturbation
   - Clamp to valid ranges

6. REPLACEMENT
   - New generation replaces old
   - Repeat from step 2

Shader Gene Mapping

Gene Range Effect
colorSpeed 0.0 - 2.0 Color animation rate
colorShift [0-6, 0-6, 0-6] RGB phase offsets
timeScale 0.1 - 2.0 Global time multiplier
distortion 0.0 - 1.0 Noise amount
frequency 1.0 - 20.0 Pattern repetition
octaves 1 - 5 Fractal layers
symmetry 0 - 4 Mirror modes
blendMode 0 - 2 Compositing

Performance

🎯 Use Cases

Creative Coding

Game Development

Visual Music

Education

Art & Design

🐛 Troubleshooting

Shader Won’t Compile

Problem: Red error message appears Solution:

Common Errors:

// ❌ Wrong
vec2 st = gl_FragCoord.xy / u_resolution
gl_FragColor = vec4(color, 1.0)

// ✅ Correct
vec2 st = gl_FragCoord.xy / u_resolution; // Need semicolon
gl_FragColor = vec4(color, 1.0); // Need semicolon

Black Screen

Problem: Canvas shows nothing Solution:

Evolution Not Working

Problem: Shaders don’t change after evolution Solution:

Performance Issues

Problem: Low FPS or stuttering Solution:

Can’t Save Shaders

Problem: Save button doesn’t work Solution:

💡 Tips & Best Practices

Writing Efficient Shaders

✅ Do:

❌ Don’t:

Evolution Strategy

For Beautiful Results:

1. Start with "plasma" or "rainbow"
2. Use low mutation rate (0.1)
3. Evolve slowly (rate 10+ shaders)
4. Save intermediate results
5. Cross-breed favorites

For Wild Experiments:

1. Start with "experimental" preset
2. Use high mutation rate (0.3)
3. Skip often to increase diversity
4. Don't save until gen 5+
5. Embrace chaos

Common Patterns

Time-based Animation:

float t = u_time * 0.5; // Slower animation

Mouse Interaction:

vec2 mouse = u_mouse / u_resolution;
float dist = distance(st, mouse);
color *= 1.0 - smoothstep(0.0, 0.5, dist);

Aspect Ratio Correction:

vec2 st = gl_FragCoord.xy / u_resolution;
st.x *= u_resolution.x / u_resolution.y;

📚 Resources

GLSL Learning

Inspiration

Tools

🗺️ Roadmap

Version 1.1 (Q2 2025)

Version 1.2 (Q3 2025)

Version 2.0 (Q4 2025)

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Development Setup

git clone https://github.com/yourusername/shaderforge.git
cd shaderforge
# No build process - pure HTML/JS/WebGL
# Just open shaderforge.html in browser

Areas for Contribution

📜 License

MIT License

Copyright (c) 2025 ShaderForge

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

🙏 Acknowledgments

Technologies

Inspiration

Graphics Algorithms

⭐ Show Your Support

If you find ShaderForge useful, please consider:

**🎨 ShaderForge - Where Code Meets Art 🎨** Made with ❤️ using WebGL, GLSL & Genetic Algorithms **Part of the Evolution Trilogy:** - 🎨 [Primordial](https://jamesthegiblet.github.io/Primordial/) - Art Evolution - 🎵 [MelodyForge](#) - Music Evolution - 🔥 **ShaderForge** - Visual FX Evolution

This site is open source. Improve this page.