Visualization

Shader Visualization

Unleash your creativity with GLSL. This tool allows you to write and preview shaders in real-time, inspired by the power of Shadertoy.

True Wide

FPS: 00 0x0

// --- 1. HSV to RGB Converter ---
vec3 hsv2rgb(vec3 c) {
    vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
    vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
    return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), 1.0);
}

// --- 2. CONTROL CONSTANTS ---
float uDirection = 0.0; // 0.0 = Vertical Flow, 1.0 = Horizontal Flow
float uInvert = 0.0;    // 0.0 = Standard, 1.0 = Inverted Flow

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
    vec2 uv = fragCoord / iResolution.xy;
    
    // --- 3. DYNAMIC DIRECTIONAL MAPPING ---
    float freqCoord, timeCoord;
    
    if (uDirection < 0.5) {
        freqCoord = uv.x;
        timeCoord = (uInvert < 0.5) ? uv.y : 1.0 - uv.y;
    } else {
        freqCoord = uv.y;
        timeCoord = (uInvert < 0.5) ? uv.x : 1.0 - uv.x;
    }
    
    // Lookup the Pre-Normalized magnitude from your JS buffer (iChannel1)
    // iChannel1 contains the waterfall/spectrogram history
    float normalizedMag = texture(iChannel1, vec2(timeCoord, freqCoord)).r;
    
    // --- 4. VISUAL EXPANDER (Dynamic) ---
    // These uniforms are now controlled by the sliders in the Hardware Panel
    float intensity = pow(smoothstep(uNoiseFloor, uCeiling, normalizedMag), uPower);
    
    // --- 5. CHROMA-COLOR REPETITION ---
    float octaves = 10.0;
    float hue = fract(freqCoord * octaves);
    
    // Final color: Hue = Pitch, Saturation = 1.0, Value = Intensity
    vec3 chromaColor = hsv2rgb(vec3(hue, 1.0, intensity));
    
    // --- 6. VISUAL POLISH ---
    vec3 col = chromaColor * (1.0 + intensity * 0.5);
    
    // Final output
    fragColor = vec4(col, 1.0);
}

Audio Connectivity

Input Device

Output Sink

FFT Bands 1024

FFT Smoothing (Overlap) 0.00

Spectrum Mode

Audio Out

Engine Parameters

Spectrogram Speed 12.0

Audio Delay (A/V Sync) 0ms

Tilt Filter 0.3

Input Gain 1.0

Monitor Volume 1.0

Post Processing

Vibrance & Sat 1.2

Bloom Intensity 0.3

Overlay Buffer Active

Alpha (Opacity) 1.0

Size (Zoom) 1.0

Position X 0.0

Position Y 0.0

Use the tabs in the editor to switch between Main and Overlay shader code.

Cloud Sync: Disabled (Guest)

How to use Visualization Tool

⚡ Licensing & Software Tiers

Unlock Full Studio & Hardware Capabilities

Choose the license tier that fits your workflow. From browser DSP and continuous WebGL visualizers to direct 60 FPS HUB75 LED matrix hardware streaming.

🛠️ Software Only

Web DSP & Audio Visualizer Toolkit

Uninterrupted browser workstation for acoustic calibration, custom 32-bit IR export, and continuous WebGL audio visualizers.

$5 USD / One-time

✓ Unrestricted Room & Headphone Calibration
✓ Continuous WebGL Shader Engine
✓ Chroma-Color Harmonic Note Analysis
✓ 32-bit Custom Impulse Response (IR) Export
✕ LED Hardware Flasher & Streaming

Buy Toolkit Pass ($5)

Popular

⚡ Hardware Bridge

Synesthesia Matrix: Hardware Bridge & Stream License

Drive physical HUB75 LED displays directly from the browser with Web Serial firmware flashing and 60 FPS DMA streaming.

$7 USD / One-time

★ Everything in Tier 1 included
✓ In-Browser Web Serial Flasher (Matrix Portal S3)
✓ Zero-Config 96×48 HUB75 LED Panel Mapping
✓ 60 FPS Real-Time Panel Streaming over DMA
✓ Live Hardware Control Dashboard

Buy Hardware Bridge ($7)

💎 All-Access VIP

Chroma-Color Studio Suite (VIP Access)

The ultimate pass for electronic musicians and VJs: continuous VIP content drops, soundbanks, and priority experimental DSP.

$12 USD / Month

★ Everything in Tiers 1 & 2 included
✓ Exclusive VIP Subscriber Content Feed
✓ Sound Design Bundles & Viper Synth Bank
✓ Priority Feature Benches & Early Firmware
✓ Unreleased High-Bitrate Music & Stems

Get VIP Access ($12/mo)

🔒 Secure checkout powered by Creem (Merchant of Record). All purchases represent commercial software and service licenses.

Unlimited Studio Sound Calibration

Real-Time WebGL Audio Visualizer

Unlimited Impulse Response (IR) Exports

Cloud Storage & Preset Sync

Real-Time Studio DSP Toolkit

Lifetime License & Future Updates

Shader Visualization

Enjoy the music with your eyes

Unlock Full Studio & Hardware Capabilities

Web DSP & Audio Visualizer Toolkit

Synesthesia Matrix: Hardware Bridge & Stream License

Chroma-Color Studio Suite (VIP Access)

Unlock Pro Mode

Hardware Connection Restricted

Synesthesia Matrix: Hardware Bridge

Chroma-Color Studio Suite (VIP)

Set New Password

Visualization

Shader Visualization

Enjoy the music with your eyes

Save Preset

Program Phrase

Unlock Full Studio & Hardware Capabilities

Web DSP & Audio Visualizer Toolkit

Synesthesia Matrix: Hardware Bridge & Stream License

Chroma-Color Studio Suite (VIP Access)

Unlock Pro Mode

Hardware Connection Restricted

Synesthesia Matrix: Hardware Bridge

Chroma-Color Studio Suite (VIP)