shader-dev
Shader Craft — GLSL Shader Techniques
Generate complete, production-ready GLSL shaders for real-time visual effects — from ray-marched 3D scenes to fluid simulations — all running in the browser with WebGL2.
Download the skill ZIP
Upload in Claude
Go to Settings → Capabilities → Skills → Upload skill
Toggle on and start using
Test it
Using "shader-dev". Create a kaleidoscope pattern using polar UV manipulation with a Voronoi color palette
Expected outcome:
- Complete HTML page with WebGL2 canvas
- Fragment shader with polar/log-polar coordinate transformation
- Voronoi/Worley noise function for cell pattern generation
- Cosine color palette mapping for vibrant colors
- Kaleidoscope symmetry via angular repetition (e.g., 8-fold symmetry)
- Animated time-based rotation for dynamic visual effect
Using "shader-dev". Build a path-traced global illumination scene with soft shadows and color bleeding
Expected outcome:
- Complete path tracer with Monte Carlo sampling
- SDF scene definition with multiple objects and materials
- Diffuse and specular BSDF sampling
- Russian roulette path termination
- Accumulation buffer for progressive rendering
- Tonemapping and display for converged image
Security Audit
SafeThis skill consists entirely of GLSL shader reference documentation (36 markdown files in techniques/ and reference/ directories). Detected risk factors (external_commands, scripts, filesystem, network) are false positives triggered by code examples in markdown documentation. The skill contains no executable scripts, no network requests, no filesystem operations, and no external command invocations. All code samples are GLSL shader snippets for educational/reference purposes. Safe to publish.
Quality Score
What You Can Build
Interactive Shader Art & Demoscene
Create mesmerizing visual art pieces, demoscene productions, or generative art installations using GLSL shaders that run in real-time in a web browser. Combine techniques like ray marching, procedural noise, and domain warping to produce unique visuals.
WebGL Game Effects & Shaders
Implement game-ready visual effects including water/ocean surfaces, terrain rendering, particle systems for fire/sparks/snow, post-processing pipelines, and atmospheric lighting — all running client-side in WebGL2.
Scientific Visualization & Simulation
Build GPU-accelerated visualizations for scientific data: fluid dynamics simulations, N-body gravity simulations, cellular automata, reaction-diffusion patterns, and volumetric cloud/fog rendering.
Try These Prompts
Create a standalone HTML page with a ray-marched SDF scene featuring several geometric objects (spheres, boxes, torus) combined with smooth minimum (smin). Add soft shadows, ambient occlusion, and a three-light outdoor lighting model. Include camera orbit controls via mouse.
Generate a WebGL2 shader that renders a procedural landscape. Use heightfield ray marching with FBM terrain (6 octaves with derivatives for erosion-like detail). Add biplanar texturing, height-based atmospheric scattering with Rayleigh/Mie, and Gerstner wave ocean at sea level. Apply ACES tone mapping and 2x SSAA.
Build a fluid simulation using a Navier-Stokes solver in GLSL with multi-pass ping-pong framebuffers. Include advection, diffusion, pressure projection (Jacobi iteration), and mouse interaction for adding dye/velocity. Use a color palette to visualize the flow field.
Create a stateless particle system shader for a fire effect. Use procedural noise for turbulence, a warm color palette for the gradient from bright yellow to deep red, and proper alpha blending. Include a second layer of sparks using a separate particle system with gravity.
Best Practices
- Always respect performance budgets: ≤ 128 ray march steps, ≤ 32 volume samples, ≤ 6 FBM octaves, ≤ 1000 nested loop iterations per pixel
- Declare functions before use in GLSL — unlike C/C++, GLSL doesn't support forward declarations in all implementations
- Use the multipass-buffer technique for effects requiring state persistence across frames (fluid sim, path tracing, particle systems)
- Adapt ShaderToy code properly: wrap mainImage() in main(), use gl_FragCoord instead of fragCoord, declare out vec4 fragColor
- Prefer const over #define for values — GLSL macros can't use function calls and have limitations
Avoid
- Exceeding performance budgets — loops over 1000 iterations per pixel will freeze the browser
- Using #define macros for computed values — the GLSL preprocessor can't evaluate function calls in macros
- Accessing uniforms that may be optimized away by the compiler — always ensure uniforms are used in the fragment output
- Nesting ray marching or volume sampling inside another loop — this multiplies complexity and exceeds GPU time limits