A ShaderToy-like playground for experimenting with GLSL shaders. Write your shader code and see it render in real-time! Perfect for exploring fractals, mathematical visualizations, and 3D graphics.

Visit the GLSL Toybox to start creating.

Features

• Live shader editing with real-time preview
• Fractal and mathematical shader presets to get started quickly
• Share functionality - generate URLs to share your shaders
• ShaderToy-compatible API - use familiar uniforms like iResolution, iTime, iMouse
• Error reporting - see compilation errors immediately
• Interactive controls - adjust parameters in real-time

Mathematical Shader Presets

The toybox includes several mathematically-inspired shader presets:

Fractals

• Mandelbrot Set - Classic fractal with smooth coloring and zoom exploration
• Julia Set - Interactive Julia set where mouse position controls the constant
• Burning Ship - Fire-like fractal using absolute values in iteration
• Newton Fractal - Visualization of Newton's method basins of attraction
• Buddhabrot - Probability distribution of escape trajectories

3D Graphics

• 3D Ray Marching - Ray marching with SDFs, creating 3D scenes with spheres, boxes, and toruses
• Volumetric Clouds - Volumetric cloud rendering using ray marching and FBM noise

Mathematical Patterns

• Strange Attractor - Clifford attractor showing chaotic trajectory visualization
• Plasma Effect - Classic plasma shader with flowing, organic patterns

Learning Examples

• Simple Waves - Basic animated wave pattern demonstrating coordinate normalization and trigonometric functions

ShaderToy Compatibility

The GLSL Toybox uses a ShaderToy-compatible API, so you can use shaders written for ShaderToy with minimal modifications. The main function signature is:

void mainImage(out vec4 fragColor, in vec2 fragCoord)

Available Uniforms

• vec2 iResolution - Canvas resolution (width, height)
• float iTime - Elapsed time in seconds
• vec4 iMouse - Mouse position (xy) and click state (zw)
• float iTimeDelta - Time since last frame
• int iFrame - Current frame number
• float iScroll - Scroll delta for zoom and parameter control

ShaderToy Examples to Try

Here are some excellent ShaderToy examples you can adapt for the GLSL Toybox:

Fractals

• Mandelbrot Set by iq - Classic implementation with smooth coloring
• Julia Sets by FabriceNeyret2 - Interactive Julia exploration
• Newton Fractal by iq - Root finding visualization
• Buddhabrot Techniques - Various Buddhabrot implementations

Ray Marching

• Ray Marching Tutorial by iq - Comprehensive ray marching guide
• SDF Collection by iq - Extensive library of SDF primitives
• 3D Scenes - Complex 3D scenes using ray marching

Mathematical Visualizations

• Strange Attractors - Chaotic systems and attractors
• Mathematical Art - Various mathematical patterns

Three.js Integration

While the GLSL Toybox uses pure GLSL, you can integrate these techniques with Three.js for more complex scenes. Here's a quick example:

import * as THREE from 'three';

// Create a shader material with your fractal code
const material = new THREE.ShaderMaterial({
  uniforms: {
    iTime: { value: 0 },
    iResolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) },
    iMouse: { value: new THREE.Vector2(0, 0) }
  },
  vertexShader: `
    void main() {
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    uniform float iTime;
    uniform vec2 iResolution;
    uniform vec2 iMouse;
    
    // Your fractal shader code here (from GLSL Toybox)
    void main() {
      vec2 uv = gl_FragCoord.xy / iResolution.xy;
      // ... Mandelbrot or other fractal calculation ...
      gl_FragColor = vec4(color, 1.0);
    }
  `
});

// Apply to a plane covering the screen
const plane = new THREE.PlaneGeometry(2, 2);
const mesh = new THREE.Mesh(plane, material);
scene.add(mesh);

// Update uniforms in animation loop
function animate() {
  material.uniforms.iTime.value = clock.getElapsedTime();
  material.uniforms.iMouse.value.set(mouse.x, mouse.y);
  renderer.render(scene, camera);
}

Three.js Resources:

• Three.js Shader Examples - Official examples
• Three.js Custom Shaders - Documentation
• Post-Processing with Three.js - Advanced techniques

Getting Started

1. Visit /glsl-toybox
2. Choose a preset from the dropdown (start with "Mandelbrot Set" or "Simple Waves")
3. Watch it render in real-time as you modify the code
4. Adjust interactive controls to see how parameters affect the visualization
5. Click "Share" to generate a URL you can share with others

Tips for Learning

1. Start with presets - Load a preset and modify it gradually to understand how it works
2. Read ShaderToy examples - Many shaders on ShaderToy are well-commented and educational
3. Experiment with parameters - Change iteration counts, color speeds, and other values to see their effects
4. Combine techniques - Try combining different fractal formulas or adding ray marching to 2D fractals
5. Study the math - Understanding the underlying mathematics makes shader programming much easier

Sharing Shaders

Click the "Share" button to generate a URL that includes your shader code. Anyone with the URL can load your shader and continue editing it. This makes it easy to:

• Share your creations with others
• Collaborate on shader projects
• Save interesting shaders for later
• Build a collection of mathematical visualizations

Related Articles

• Introduction to GLSL and Shaders - Deep dive into fractals, complex dynamics, and mathematical visualization
• Fractals - More on fractal mathematics and visualization

Learning Resources

• ShaderToy - Browse and study thousands of examples
• Inigo Quilez's Articles - Deep dives into shader techniques and math
• The Book of Shaders - Step-by-step guide by Patricio Gonzalez Vivo
• Raymarching.com - Interactive tutorial on ray marching techniques
• Fractal Forums - Community discussions on fractal mathematics