Real-Time Use Cases
Five WebSocket features to animate your shaders with live data — Twitch events, Discord audio, external APIs, collaboration, and OBS.
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
Live Data Visualisation
Bitcoin price, weather, Discord stats — 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
Real-Time Collaborative Shader Editing
Multiple users tweak parameters together — last-write-wins with undo.
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. Full undo stack (capped at 50 entries per user) and 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
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 runs a 60 Hz audio analysis pipeline. 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 and clamped to 60–200 BPM.
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 in the channel animates the shader in real time
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
Required environment variables
These features require additional environment variables configured on your ShaderBot instance.
| WS_PORT | WebSocket hub port (default: 8080) |
| WS_INTERNAL_SECRET | Shared secret for bot ↔ hub auth |
| WEB_HOST | Public host URL (e.g. https://shaderbot.uk) |
| TWITCH_CLIENT_ID / SECRET | Twitch API credentials (Feature 1) |
| OPENWEATHER_API_KEY | OpenWeatherMap key (Feature 2 — weather preset) |