What it is
ShaderMate is a small, focused JavaScript library that removes WebGL boilerplate so shader artists can prototype single‑ and multi‑pass fragment shaders fast, with ShaderToy‑style ergonomics and automatic uniforms, working across WebGL1 and WebGL2. [1]
https://github.com/Tezumie/ShaderMate
Why it matters for VJ workflows
For browser‑based VJ tools and live visuals, ShaderMate’s pass graph, ping‑pong feedback, and plug‑and‑play channels (images, video, audio FFT, buffers) let creators build reactive patches that slot into existing setups without wrestling raw WebGL. [1]
Core features
- Single or multi‑pass graphs with offscreen FBOs, screen routing, half‑res passes, float textures, wrap and filter controls, and optional depth attachments on WebGL2. [1]
- Ping‑pong feedback per pass for simulations, trails, and accumulations, including self‑referencing previous‑frame inputs. [1]
- Automatic injection of ShaderToy‑style scaffolding: precision, version, texture macro compatibility, outColor, and mainImage wrapping, configurable or fully disable‑able. [1]
- Built‑in uniforms: iResolution, iTime, iTimeDelta, iFrameRate, iFrame, iMouse, iDate, plus iChannelN, iChannelResolution, and iChannelTime for connected sources. [1]
- Channels: load images, cubemaps, video, audio FFT, or other pass IDs; set flipY, wrap, filter; chain buffers; and propagate dimensions/timing to shaders. [1]
- Custom uniforms with typed setters (1f, 3f, Matrix4fv, etc.) and live updates via a beforeFrame hook. [1]
Quick start
Include via CDN, add a full‑screen canvas, and boot with a single fragment shader that exposes mainImage—ShaderMate wraps it and drives per‑frame uniforms. [1]
- Minimal files: index.html, style.css, sketch.js, frag.glsl; a single call to startShaderMate('frag.glsl') draws to screen. [1]
Multi‑pass and feedback
Define an array of passes where upstream buffers feed downstream iChannelN, rendering to screen only on the final pass, or anywhere desired. [1]
Enable pingpong on a pass and self‑route its ID to read the previous frame, noting the first frame starts black—seed or bias to avoid “black forever” feedback. [1]
Injection control
Keep the ShaderToy‑like comfort or take full control: disable autoSetup to supply #version, precision, outColor/gl_FragColor, and main; or toggle header/defines/mainWrap/builtins individually. [1]
Audio‑reactive visuals
Point a channel at audioFFT:'file.mp3' and sample spectrum from a 1×N texture, with fftSize options; use iChannelTime to sync and iChannelResolution for UVs. [1]
For Three.js and TWGL users
ShaderMate sits closer to raw WebGL than Three.js ShaderMaterial, trading scene‑graph features for direct, minimal shader pipelines suited to full‑screen post and VJ patch style iterations; TWGL users will feel at home with the reduced ceremony. [3][4]
Learning curve notes
- WebGL fragment‑only setups still rely on a pass that fills the viewport with a quad; ShaderMate abstracts the vertex path and compiles the program under the hood. [5][6]
- MDN’s shader lifecycle concepts still apply—ShaderMate handles create/compile/link/bind so shader authors focus on GLSL and uniforms. [6]
Ideal use cases
- Browser VJ tools that need fast iteration, ping‑pong trails, and audio/video inputs without a heavy framework. [1]
- ShaderToy migrations where mainImage, iTime/iResolution/iMouse, and texture macros should “just work.” [1]
- Generative experiments with buffer chains, half‑res blurs, and feedback‑driven simulations. [1]
Practical tips
- Always declare uniforms used by ShaderMate—if a shader doesn’t declare iTime or iChannel0, values won’t bind; silent failure looks like “nothing happening.” [1]
- For feedback, seed the first frames with noise or a small bias to escape black initialization; add mouse‑driven color for interactive triggers. [1]
Example scaffolds
- Single pass: startShaderMate('frag.glsl') with mainImage and iResolution/iTime declared; ShaderMate wraps to main and writes outColor/gl_FragColor. [1]
- Two pass: BufferA writes offscreen; Image reads iChannel0=BufferA and renders to screen; add filter/wrap/size per pass to tune quality/perf. [1]
Roadmap signals
The repo hints at an on‑canvas stats overlay, optional GUI for uniform tweaking, expanded sizing modes, and improved mouse mapping for letterboxed canvases—nice fits for live performance ergonomics. [1]
Community and provenance
ShaderMate is authored by Tezumie, a US‑based generative artist and creator of the Codevre browser editor; the library is open‑source under GPL‑3.0 and has been shared in creative coding communities. [1][2]
How it fits vjun.io readers
For Linux‑first, browser‑based VJ rigs, ShaderMate provides a minimal, hackable shader core that plays well with MIDI/OSC layers and video inputs, without the overhead of a scene graph—ideal for layering inside custom VJ dashboards or embedding as a post stack. [1]
Further reading
- ShaderToy‑style full‑screen fragment rendering and context concepts for building one‑quad pipelines. [5]
- Three.js ShaderMaterial docs for those bridging scene‑graph pipelines with custom fragment stages. [3]
Citations:
[1] Tezumie https://github.com/Tezumie
[2] 2d canvas Landscape : r/creativecoding https://www.reddit.com/r/creativecoding/comments/1mn5kho/2d_canvas_landscape/
[3] ShaderMaterial – three.js docs https://threejs.org/docs/api/en/materials/ShaderMaterial.html
[4] TWGL.js, a tiny WebGL helper library https://twgljs.org
[5] WebGL Shadertoy https://webglfundamentals.org/webgl/lessons/webgl-shadertoy.html
[6] WebGLShader - Web APIs | MDN - Mozilla https://developer.mozilla.org/en-US/docs/Web/API/WebGLShader
[7] GitHub - Tezumie/ShaderMate: ShaderMate is a lightweight JavaScript library that simplifies WebGL shader development. Ideal for ShaderToy users, TWGL.js developers, or beginners, it offers a streamlined way to build stunning visual effects with ease. https://github.com/Tezumie/ShaderMate
[8] Tezumie/p5play-Tile-Map-Editor https://github.com/Tezumie/p5play-Tile-Map-Editor
[9] ShaderMaterial / WebGL conversion : r/threejs https://www.reddit.com/r/threejs/comments/1drsvyv/shadermaterial_webgl_conversion/
[10] WebGL, Shaders, Vertex Shader, Fragment Shader, GLSL ... https://www.youtube.com/watch?v=6AHpdQCrf_Q
[11] sjfricke/awesome-webgl: A curated list of ... https://github.com/sjfricke/awesome-webgl
[12] ShaderLib – three.js docs https://threejs.org/docs/api/en/renderers/shaders/ShaderLib.html
Discussion (0)