ShaderShop Documentation

📖 Introduction

Welcome to the ShaderShop Documentation. ShaderShop is a modern, high-performance browser-based IDE and social community designed for crafting real-time WebGL and GLSL shaders directly on your GPU.

Whether you are creating generative art, audio-reactive visuals, physical simulations, or game VFX, this guide covers everything you need to know: shader fundamentals, the built-in uniforms system, multi-pass ping-pong buffers, and one-click exports to platforms like ShaderToy, Three.js, WebGPU, and Unity URP.

🎨 Creating Your First Shader

Creating your first shader in ShaderShop takes less than 30 seconds. Fragment shaders execute once for every single pixel on your screen simultaneously in parallel.

Here is the minimal boilerplate required to output solid black:

// Minimal Fragment Shader
#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform float u_time;

void main() {
    // gl_FragColor expects RGBA values in range 0.0 to 1.0
    gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
}

Click the Compile button in the bottom left or press Ctrl + Enter. Congratulations! You have compiled your first real-time GPU shader.

⭕ Making a Circle (Signed Distance Basics)

Now let's render a smooth, glowing circle. Unlike traditional 2D canvas drawing where you stroke paths, GLSL works with mathematical coordinate fields.

1. Normalize pixel coordinates gl_FragCoord.xy using u_resolution.xy so the viewport ranges from 0.0 to 1.0.
2. Center the coordinates around the origin (0.0, 0.0) and correct the aspect ratio.
3. Use the built-in GLSL length() function to calculate Euclidean distance from the center.

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform float u_time;

void main() {
    // Normalize coordinates: (0, 0) at center of screen
    vec2 uv = (gl_FragCoord.xy * 2.0 - u_resolution.xy) / min(u_resolution.x, u_resolution.y);

    // Compute distance from center
    float dist = length(uv);

    // Create a circle with radius 0.4 and anti-aliased edge
    float radius = 0.4;
    float circle = smoothstep(radius + 0.01, radius - 0.01, dist);

    // Modulate color with brand purple
    vec3 color = vec3(0.58, 0.28, 0.78) * circle;

    gl_FragColor = vec4(color, 1.0);
}

Because the shader runs across millions of GPU cores in parallel, the calculation produces crisp, instantaneous graphics at 60+ FPS.

💡 What is GLSL?

OpenGL Shading Language (GLSL) is a high-level shading language based on C. It gives graphics programmers direct, low-overhead access to the GPU rendering pipeline.

In standard CPU programming (like JavaScript or Python), loops execute instructions sequentially. On the GPU, GLSL executes your fragment shader program concurrently across thousands of streaming processors for every single pixel on screen.

• Vertex Shaders: Transform 3D geometry, vertices, normals, and model matrices into 2D screen projections.
• Fragment Shaders (Pixel Shaders): Calculate the final RGBA color, lighting, texture lookups, and visual effects for every rasterized pixel. In ShaderShop, you write full fragment shaders.
• Strongly Typed: Types are strictly checked at compile time. Explicit casting is mandatory (e.g., write 1.0 instead of 1 for floating point calculations).

⚡ Uniform Variables Reference

Uniforms are global read-only variables supplied by ShaderShop to your GLSL shader on every frame. You do not need to register them manually—they are automatically bound to the WebGL context:

🖼️ Using Media Channels (Channels 0–3)

ShaderShop includes a 4-slot media buffer tray located directly beneath the code editor. Each slot can be bound to any media source:

• Audio Reactivity: Synthetic rhythm loops (Synthwave, Cyberpunk, Ambient), local MP3/WAV uploads, or live microphone input.
• Multi-Pass Buffers: Route double-buffered ping-pong texture outputs from Buffer A, B, C, or D.
• Procedural Presets: White Noise, Perlin Noise (fBm), Voronoi Cellular, Checkerboard, Normal Maps, or Color Spectrum LUT.
• Custom Image Files: PNG, JPG, or WebP images from your computer.
• Video Files: MP4 or WebM looping video clips synced to the editor timeline.
• Live Webcam Stream: Real-time hardware camera feed via navigator.mediaDevices.getUserMedia.

// Sample texture from Channel 0
vec2 uv = gl_FragCoord.xy / u_resolution.xy;
vec3 baseColor = texture2D(u_channel0, uv).rgb;

// Combine with procedural noise from Channel 1
vec3 noise = texture2D(u_channel1, uv * 2.5).rgb;
vec3 finalColor = baseColor * noise;

gl_FragColor = vec4(finalColor, 1.0);

🎵 Audio Reactivity & FFT Analysis

ShaderShop includes a built-in Web Audio API engine capable of analyzing live microphone audio, custom sound files, or zero-dependency synthetic audio generators:

1. Direct Uniform Access: u_audio

The easiest way to react to sound without sampling textures is through the u_audio uniform:

float bass   = u_audio.x; // Low frequencies (20 - 150 Hz)
float mid    = u_audio.y; // Mid frequencies (vocals & instruments)
float treble = u_audio.z; // High frequencies (cymbals & sparkle)
float energy = u_audio.w; // Overall RMS audio amplitude

2. ShaderToy 512×2 Audio Texture

When a channel is bound to audio, it receives a 512×2 audio data texture matching ShaderToy's specification:

• y = 0.25 (Row 0): 512 Fast Fourier Transform (FFT) frequency spectrum samples.
• y = 0.75 (Row 1): 512 raw time-domain audio waveform samples.

// Sample frequency spectrum at normalized frequency x
float freq = texture2D(u_channel0, vec2(uv.x, 0.25)).r;

// Sample raw audio waveform
float wave = texture2D(u_channel0, vec2(uv.x, 0.75)).r;

⌨️ Interactive Keyboard Input

Build games, raymarched camera controllers, and interactive installations using real-time keyboard uniforms:

vec2 playerPos = vec2(0.0);

// Horizontal movement: Left / A (-x), Right / D (+x)
playerPos.x += (u_keys.y - u_keys.x) * 0.05;

// Vertical movement: Down / S (-y), Up / W (+y)
playerPos.y += (u_keys.z - u_keys.w) * 0.05;

// Action button via Spacebar
if (u_key_space > 0.5) {
    // Trigger particle blast or boost!
}

🔄 Multi-Pass Buffers & Ping-Pong FBOs

Create advanced GPU simulations—including fluid dynamics, cellular automata (Conway's Game of Life), motion blur, and reaction-diffusion—using ShaderShop's Multi-Pass Architecture:

• Pass Tabs (Buffer A, B, C, D, Image): Dynamically add or remove passes using the + Pass ▾ dropdown in the editor toolbar.
• Topological Execution: Passes evaluate in strict sequence: Buffer A → Buffer B → Buffer C → Buffer D → Image (Canvas Output).
• Zero Feedback Loop Hazards: Each buffer pass manages two internal WebGL framebuffers (FBOs) in a double-buffered ping-pong configuration. A pass can safely sample its own texture from the previous frame without WebGL memory corruption or driver warnings.
• The "Common" Tab: Write shared math functions, raymarching distance functions, or color palettes once. ShaderShop automatically injects Common code into every active pass before compilation, preserving accurate line numbers for error highlighting.

✨ Shader Starter Templates

Kickstart your projects with ready-to-run shaders by clicking the ✨ Templates button in the editor toolbar:

🚀 Exporting & Cross-Platform Transpilers

ShaderShop gives you full portability. Convert your shaders to run across modern game engines, web graphics libraries, and native platforms:

📊 Performance Analytics HUD & GPU Diagnostics

ShaderShop includes a built-in GPU telemetry overlay directly inside the canvas viewport, allowing you to monitor frame times, identify rendering bottlenecks, and scale resolution:

💬 Community Comments, Fork Lineage & Embeds

Collaborate with the global graphics community and embed your creations anywhere on the web:

Embed Any Shader Anywhere

Click Share in the editor toolbar to generate a responsive HTML iframe embed code for blogs, documentation, portfolios, and Medium articles:

<iframe src="https://shadershop.web.app/embed.html?shader=SHADER_ID&autoplay=1&gui=1&scale=1" 
    width="640" height="360" frameborder="0" allowfullscreen 
    allow="accelerometer; camera; encrypted-media; gyroscope; microphone"></iframe>