Back to skills
SKILL.md
Shader Dev
ASecurityUse when creating GLSL shaders for real-time visual effects
- 2 stars
- 0 votes
- 0 copies
- 2 views
- Added September 10, 2026
Works with
Security analysis
100/100npx -y skills add LoopyLuci/Skills --skill shader-dev --agent claude-codeAre you the author of Shader Dev?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/loopyluci-shader-dev)---
name: shader-dev
description: Use when creating GLSL shaders for real-time visual effects
tags: [shader, glsl, webgl, ray-marching, procedural, graphics]
related_skills: [three-js-3d-web, animation-web-patterns]
---
# Shader Craft
A unified skill covering GLSL shader techniques (ShaderToy-compatible) for real-time visual effects.
## Quick Start: Generate a Standalone Shader HTML Page
1. Identify the technique from the routing table
2. Apply WebGL2 adaptation rules
3. Generate standalone HTML with full-screen canvas
## Technique Routing Table
| Effect | Technique |
|--------|-----------|
| 3D scenes from math | ray-marching + sdf-3d |
| Organic/warped shapes | domain-warping + procedural-noise |
| Fluid/smoke effects | fluid-simulation |
| Particles (fire, sparks) | particle-system |
| Ocean/water surface | water-ocean + atmospheric-scattering |
| Terrain/landscape | terrain-rendering + procedural-noise |
| Clouds/fog/volumetric | volumetric-rendering |
| Realistic lighting | lighting-model + shadow-techniques |
| Fractals (Mandelbrot/Julia) | fractal-rendering |
| Post-processing | post-processing + multipass-buffer |
## Code Example: Full-Screen Shader HTML
```html
<!DOCTYPE html>
<html>
<head><style>body { margin:0; overflow:hidden; background:#000; }</style></head>
<body>
<canvas id="c"></canvas>
<script>
const canvas = document.getElementById('c');
const gl = canvas.getContext('webgl2');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const vsSource = `#version 300 es
in vec2 a_pos;
void main() { gl_Position = vec4(a_pos, 0.0, 1.0); }`;
const fsSource = `#version 300 es
precision highp float;
out vec4 fragColor;
uniform vec2 iResolution;
uniform float iTime;
void mainImage(out vec4 c, in vec2 f) {
vec2 uv = (2.0 * f - iResolution.xy) / iResolution.y;
c = vec4(uv, 0.5 + 0.5 * sin(iTime), 1.0);
}
void main() { mainImage(fragColor, gl_FragCoord.xy); }
`;
// Compile and link shaders, render loop...
</script>
</body>
</html>
```
## WebGL2 Adaptation Rules
- Use `#version 300 es` in shaders
- Fragment shader: `out vec4 fragColor;` instead of `gl_FragColor`
- Use `gl_FragCoord.xy` instead of `fragCoord`
- Functions must be declared before use
## Common Pitfalls
| Pitfall | Solution |
|---------|----------|
| Using gl_FragColor in WebGL2 | Use `out vec4 fragColor;` |
| Missing #version directive | Shaders must start with `#version 300 es` |
| Function order (reference before definition) | Define callee functions first |
| TDZ in JS: let/const before functions | Declare state variables at top of script |
| Performance: too many ray steps | Main loop ≤ 128 steps, FBM ≤ 6 octaves |
## Verification Checklist
- [ ] Shader uses correct #version directive
- [ ] Fragment shader declares output variable
- [ ] WebGL2 API used (not WebGL1)
- [ ] Function order correct (callee before caller)
- [ ] Variables declared before functions in JS
- [ ] Performance within budget (steps, octaves, iterations)
- [ ] Canvas auto-resizes on window resize
- [ ] Shader compiles without errors
Attribution
Comments
Loading comments…