Shader Lab

Visual shader composition tool by Basement Studio - "like Photoshop but for shaders." Layer-based editing, real-time preview, timeline/keyframe controls, and a React/WebGPU runtime package for exported compositions.

Shader Lab is a browser-based visual editor for composing shader effects without writing GLSL by hand. Built by Basement Studio (known for high-end WebGL work), it uses a layer-based metaphor borrowed from image editors: stack shader effects like Photoshop layers, tweak parameters in real time, animate properties on a timeline, and export compositions or runtime-ready shader effects. Source: X/@basementstudio, 2026-04-13

Link: eng.basement.studio/tools/shader-lab

Engagement signal: 2,264 likes / 2,550 bookmarks. Source: X/@basementstudio, 2026-04-13

Key capabilities

• Layer-based shader composition, with effect layers such as CRT, dithering, ASCII/text, pattern, gradient, glitch, bloom, and video/media layers.
• Real-time preview with parameter panels for opacity, hue, saturation, mask scale, scanlines, barrel distortion, convergence, beam focus, brightness, highlight drive, vignette, flicker, glitch speed, bloom threshold/radius, and related shader vocabulary.
• Timeline/keyframe controls for animating shader parameters.
• Runtime package @basementstudio/shader-lab for rendering compositions directly in React, using a composition as a texture, or applying effect layers as postprocessing over a scene.
• Client-side WebGPU requirement; peer dependencies are react, react-dom, and three. Source: GitHub README, 2026-06-30

Relationship to Shaders MCP

Shader Lab and Shaders MCP are complementary tools occupying different parts of the shader workflow. Shaders MCP is agent-native (search + customize + ship existing shaders via MCP), while Shader Lab is human-native (visually compose new effects). Combined coverage is also documented in Shaders MCP.

Source snapshot

Current source snapshot as of 2026-07-02: basementstudio/shader-lab, HEAD 84c1d09e3ea65a8dbf3f3c574a30a460a5a1f738, Apache-2.0, 597 stars, 49 forks, no GitHub release tags. npm package @basementstudio/shader-lab latest is 1.3.14; the public app repo package is shader-lab@0.1.0 and uses React 19, Three.js, React Three Fiber, Drei, Motion, and Next.js. Brin returned caution for repo (65) and skill (59) pending deeper scan. Source: GitHub API, npm registry, git ls-remote, Brin API, 2026-07-02

Artifact review

The @kubadesign endorsement images are not editor screenshots; they are output-range evidence. The four reviewed local images show a dithered horse over cyan/red point fields, a red LED-grain portrait, a red/yellow point-cloud face, and a blue horizontal glitch/smear figure. Treat the bookmark as evidence that Shader Lab can produce finished editorial shader looks, while the Basement launch/source pages remain the authority for workflow, package boundaries, and runtime integration. Source: X/@kubadesign and local artifact review, 2026-07-02

---

Timeline

• 2026-07-02 | Deep-reviewed @kubadesign's four local Shader Lab artifacts; upgraded the row from generic community signal to output-range evidence and refreshed current source stats. Source: X/@kubadesign, 2026-04-14
• 2026-04-14 | @kubadesign endorsement ("best tool ever") with screenshots; the reviewed outputs show dither, LED-grain, point-cloud, and glitch aesthetics rather than editor workflow. 4,481 likes, 3,227 bookmarks. Source: X/@kubadesign, 2026-04-14
• 2026-04-13 | Shader Lab launches: "gm, today we're launching Shader Lab, like photoshop but for shaders - design slick layered shader compositions, export production-ready GLSL." 2,264 likes, 2,550 bookmarks. Source: X/@basementstudio, 2026-04-13
• 2026-06-30 | Deep-reviewed the product video thumbnail and source repo. Added the concrete editor vocabulary (layer stack, properties panel, timeline/keyframes, ASCII/dither/CRT-style layers), npm runtime snapshot, and React/WebGPU integration boundaries. Source: X/@basementstudio, 2026-04-13