Professional WebGL procedural texture generator. Multi-layer compositing, PBR map generation, 3D material preview, 52 custom GLSL shaders, and 65+ procedural effects — all running in your browser with zero dependencies.
Live Showcase | Open Editor | Material Forge
Support ongoing development: github.com/sponsors/web3dev1337
The Showcase walks through the full pipeline in 7 chapters:
| Chapter | What You See |
|---|---|
| Raw Canvas | 65+ procedural effects — explosions, corona, caustics, frozen lightning |
| Color Balance | RGB channel shifting on raw effects |
| Gradient Mapping | One explosion through 10 different color palettes |
| Multi-Layer Compositing | Organic caustics + digital matrix blended with 9 modes |
| Combination | Full chains — two effects blended and gradient-mapped |
| PBR Maps | Auto-generated Normal, Roughness, AO, Metallic from any texture |
| 3D Preview | PBR materials applied to lit, rotating geometry in real-time |
The hero demo builds a Dark Ritual Portal from scratch — layering a raymarched warp tunnel with a sprite ring and alpha compositing it into a final effect.
52 hand-written fragment shaders — raymarched volumes, fractals, portals, and cosmic phenomena:
The showcase features 12 of these live — Volumetric Nebula, Black Hole, Cosmic Jellyfish, God Rays, Reality Shatter, Dimensional Portal, Time Vortex, Particle Collider, Void Tendril, and Summoning Circle among them.
| Page | Description |
|---|---|
| Showcase | Guided tour — 7 chapters, live renders, PBR pipeline walkthrough |
| Editor | Full texture editor — layers, gradients, PBR export, undo/redo |
| Gallery | Live animated gallery of 70+ procedural effects |
| Material Forge | 3D material demo — textures on lit spinning objects with bloom |
| Sprite Gallery | 119 animated sprite sheets (FXGEN + custom GLSL) |
| Particles | 3D particle viewport with sprite-sheet effects |
- 65+ procedural effect types — explosions, fire, plasma, voronoi, fractals, caustics
- 52 custom GLSL shaders — raymarched nebulae, black holes, warp tunnels, fractals
- Multi-layer compositing — unlimited layers with 9 blend modes
- Gradient color mapping — multi-stop gradient editor with 5 presets
- PBR map generation — Normal, Roughness, AO, Metallic
- 3D material preview — real-time on sphere/cube/torus knot with environment reflections
- Undo/Redo — 50-state history (Ctrl+Z / Ctrl+Shift+Z)
- Export — PNG, JPEG, ZIP bundles with all PBR maps, up to 2048x2048
- 119 pre-rendered sprite sheets — 6x6 grid, 36 frames each
- Game-ready — transparent PNGs with alpha for particle systems and VFX
- Three.js 0.174.0 — WebGL rendering, 3D preview, PBR materials
- pixy shader library — 65+ procedural effect fragment shaders
- Custom GLSL — 52 hand-written shaders bypassing pixy entirely
- lil-gui — parameter controls
- JSZip — ZIP export (loaded on demand)
- No build step, no bundler — pure ES modules served directly
git clone https://github.com/web3dev1337/shaderbrew.git
cd shaderbrew
python3 -m http.server 4444
# Open http://localhost:4444/showcase.htmlUses pixy.js by mebiusbox (MIT License) — the procedural shader library that powers the 65+ built-in effect types.
Everything else (editor, layers, compositing, gradient mapping, PBR generation, 3D preview, 52 custom GLSL shaders, sprite sheets, showcase, material forge) is original ShaderBrew code.
See the full Credits Page for detailed attribution of all Shadertoy shaders, GitHub libraries, and runtime dependencies.
MIT — see LICENSE for details.
pixy.module.min.js bundles GLSL from Shadertoy authors (CC-BY-NC-SA 3.0) and other sources — see THIRD_PARTY_LICENSES.md for full attribution.