ShaderBot is a free online shader editor and Discord bot that lets you write, preview, and share GLSL/WGSL shaders. It compiles your code to animated GIFs and embeds them directly in Discord.

How do I use the shader editor on Discord?

Add ShaderBot to your Discord server. Then use /shader, /shader-preset, or /shader-generate commands in any channel to create and share animated shaders instantly.

Is the online shader editor free?

Yes. ShaderBot offers a free tier with 5 compilations/day, access to all 1,200+ presets, and the full web shader editor. Pro plans unlock unlimited compilations and AI generation.

What shader languages does ShaderBot support?

ShaderBot supports GLSL (OpenGL Shading Language) and WGSL (WebGPU Shading Language). It uses standard GLSL uniforms including iTime, iResolution, and iChannel.

Can I export shaders to game engines?

Yes. ShaderBot lets you export shaders to 16+ game engines including Unity, Unreal Engine, Godot, Bevy, and more — directly from the web editor.

Can ShaderBot generate shaders with AI?

Yes. Use /shader-prompt on Discord or the AI tab in the web editor to describe what you want in plain text (e.g. "blue ocean waves with foam") and ShaderBot will generate the full GLSL code instantly. You can also use /shader-generate to pick shapes, colors and animations with no coding required.

Is ShaderBot a good Shadertoy alternative?

Yes. ShaderBot is fully compatible with Shadertoy-style GLSL shaders (iTime, iResolution, iChannel0–3 uniforms). Unlike Shadertoy, ShaderBot also offers Discord integration, animated GIF export, AI generation, 1,200+ preset library, and one-click game engine export to Unity, Unreal Engine, Godot and more — all for free.

Shaders · Examples · Guides

Use Cases & How-To Guides

AI-generated GLSL shaders for every creative domain — VFX, game dev, streaming, data visualisation, and more.

Generate a shader →Browse gallery

How to use ShaderBot

Run a Discord command

Type a /shader, /dataviz, or /stream command in any channel. ShaderBot generates GLSL code and renders a preview GIF server-side, then replies in seconds.

/shader generate "sunset over ocean"

Preview & tweak in Discord

The bot replies with an animated preview image. React with 🎨 to open the interactive editor, adjust parameters, or regenerate.

→ click 🎨 to open the live editor

Export to your pipeline

Download the shader in any format: Shadertoy, Unity, Unreal, Godot, p5.js, OBS Browser Source, TouchDesigner GLSL TOP, and more.

/export --format unity --preset current

Browse by domain

🎬 VFX & Motion

Post-production transitions, motion graphics, custom viewport shaders.

OBS Browser Source overlay
Viewport display shader
Motion graphics GLSL

See examples →Try it

⛏️ Minecraft

OptiFine & Iris-compatible GLSL starting points — sky, water, ambient occlusion. Manual integration into pack conventions required.

Generate sky shader
Water reflection preset
Ambient light shader

See examples →Try it

🕹️ Game Dev

Godot GLSL shaders ready to use. Unity ShaderLab and Unreal Material exports are provided as starting points — manual adaptation is required due to fundamental differences between GLSL and these shader systems.

Godot visual shader
Unity ShaderLab starting point
Unreal Material reference

See examples →Try it

🌐 Web & Creative

WebGL canvas embeds, Three.js materials, interactive site backgrounds.

React/Next.js <canvas> embed
Three.js ShaderMaterial
p5.js WEBGL sketch

See examples →Try it

🎵 Audio & VJ

FFT-driven visuals for live performance, Resolume, TouchDesigner.

Spectrum visualiser
Beat-reactive shader
TouchDesigner GLSL TOP

See examples →Try it

🥽 VR / AR / XR

GLSL fragment shaders for WebXR and Quest skyboxes. True stereo rendering requires host-side multi-view setup; the exported shader is a starting point, not a plug-and-play stereo solution.

WebXR fragment shader (mono base)
Quest skybox preset
AR passthrough overlay

See examples →Try it

📊 Data Visualisation

Bar, line, pie and scatter charts in pure GLSL — no D3, no DOM.

Animated bar chart
Live Bitcoin line chart
Scatter cluster shader

See examples →Try it

🎓 Learn GLSL

Step-by-step shader guides generated on demand in Discord.

Explain this shader
Tutorial: noise functions
Debug my GLSL

See examples →

WebSocket · Real-Time

Real-time features

WebSocket live — Twitch events, Discord audio, external APIs, collaboration, OBS.

Twitch / OBSWebSocket

Twitch / OBS Stream Overlays

Your live viewers, subs & hype train — rendered as GLSL uniforms in real time.

Connect ShaderBot to your Twitch channel via EventSub. Every subscription, cheer, donation and Hype Train maps directly to uniform values (u_viewers, u_subs, u_donations, u_energy). OBS picks up the shader page at /obs/:roomId as a Browser Source — no plugins needed.

Discord command

/stream connect [username] [shader]

Link your Twitch username and choose the GLSL preset to animate.

Getting started

1Run /stream connect in your Discord server
2Add /obs/:roomId as an OBS Browser Source (1920×1080)
3Go live — viewer count and sub events animate the shader automatically

Open in dashboard

Polled DataWebSocket

API Data Visualisation

Bitcoin price, weather, Discord stats — polled every 5–30 s, mapped to up to 64 shader floats.

The data pipeline polls any JSON API at a configurable interval (minimum 5 s) and normalises values into u_data[0..63]. Three built-in presets cover Bitcoin/USDT via CoinGecko, OpenWeatherMap, and Discord guild member counts. Any public JSON endpoint can be used with a custom JSONPath expression.

Discord command

/dataviz-live preset [bitcoin|weather|discord_stats] [shader]

Pick a built-in data source and choose a GLSL preset to visualise it.

Getting started

1Run /dataviz-live preset bitcoin in Discord
2ShaderBot starts polling CoinGecko every 30 s
3Price changes pulse through u_data[0] in the shader automatically

Open in dashboard

CollaborationWebSocket

Real-Time Collaborative Shader Editing

Multiple users tweak parameters together — last-write-wins conflict resolution.

Open /collab/:roomId in any browser to get a shared dashboard. Each collaborator is assigned a unique colour. Uniform sliders update live across all connected clients with a last-write-wins conflict resolution policy. Per-user undo history (capped at 50 entries) lets you step back your own changes, but cannot recover changes overwritten by another collaborator. One-click snapshots export the current state as JSON.

Discord command

/collab start [preset]

Create a new collaboration room and get the /collab link to share.

Getting started

1Run /collab start plasma in Discord
2Share the returned /collab/:roomId URL with your team
3Everyone adjusts sliders in real time — changes appear instantly for all

Open in dashboard

AudioWebSocket

Audio-Reactive Shaders from Discord Voice

FFT analysis of your voice channel drives 64 frequency bins + beat detection.

ShaderBot joins your Discord voice channel and analyses the audio stream. The FFT spectrum fills u_data[0..31]; bass, mid, treble averages fill u_data[32..34]; beat detection flag is u_data[35]; overall loudness maps to u_energy and u_peak. BPM is estimated from inter-beat intervals; the detector is tuned for 60–200 BPM — genres outside this range (ambient, speedcore) may produce inaccurate BPM readings. ⚠ Audio capture relies on undocumented Discord voice mechanisms and may break without notice on Discord API updates. Visual output appears in the web dashboard or OBS — not in Discord.

Discord command

/audio join [shader]

Bot joins your current voice channel and starts the audio pipeline.

Getting started

1Join a Discord voice channel
2Run /audio join neon in Discord
3Music or speech drives the shader — open your dashboard or OBS to see the visuals (output is not visible in Discord)

Open in dashboard

OBSWebSocket

OBS Dynamic Shader Background

Full-scene WebGL canvas as an OBS Browser Source — swap shaders on the fly.

The /scene/:roomId page renders a full-resolution WebGL canvas that OBS loads as a Browser Source. Uniform patches are diffed server-side (only changed keys transmitted) and absorbed through a 50 ms jitter buffer for smooth animation. Resolution, shader and all parameters can be changed live via /scene commands without interrupting the stream.

Discord command

/scene create [preset] [resolution]

Create an OBS scene room and get the /scene URL for OBS.

Getting started

1Run /scene create aurora 1080p in Discord
2Add the returned /scene/:roomId URL as an OBS Browser Source (1920×1080)
3Use /scene shader or /scene param anytime to update live

Open in dashboard