OverviewHistoryStatsSecurity
npx skills add ...
Documentation
SKILL.md
npx skills add minimax-ai/skills --skill shader-dev
Comprehensive GLSL shader techniques for creating stunning visual effects — ray marching, SDF modeling, fluid simulation, particle systems, procedural generation, lighting, post-processing, and more.
npx skills add minimax-ai/skills --skill shader-dev
A unified skill covering 36 GLSL shader techniques (ShaderToy-compatible) for real-time visual effects.
$ARGUMENTS contains the user's request (e.g. "create a raymarched SDF scene with soft shadows").
techniques/ — each file contains core principles, implementation steps, and complete code templatesreference/| User wants to create... | Primary technique | Combine with |
|---|---|---|
| 3D objects / scenes from math | ray-marching + sdf-3d | lighting-model, shadow-techniques |
| Complex 3D shapes (booleans, blends) | csg-boolean-operations | sdf-3d, ray-marching |
| Infinite repeating patterns in 3D | domain-repetition | sdf-3d, ray-marching |
| Organic / warped shapes | domain-warping | procedural-noise |
| Fluid / smoke / ink effects | fluid-simulation | multipass-buffer |
| Particle effects (fire, sparks, snow) | particle-system | procedural-noise, color-palette |
| Physically-based simulations | simulation-physics | multipass-buffer |
| Game of Life / reaction-diffusion | cellular-automata | multipass-buffer, color-palette |
| Ocean / water surface | water-ocean | atmospheric-scattering, lighting-model |
| Terrain / landscape | terrain-rendering | atmospheric-scattering, procedural-noise |
| Clouds / fog / volumetric fire | volumetric-rendering | procedural-noise, atmospheric-scattering |
| Sky / sunset / atmosphere | atmospheric-scattering | volumetric-rendering |
| Realistic lighting (PBR, Phong) | lighting-model | shadow-techniques, ambient-occlusion |
| Shadows (soft / hard) | shadow-techniques | lighting-model |
| Ambient occlusion | ambient-occlusion | lighting-model, normal-estimation |
| Path tracing / global illumination | path-tracing-gi | analytic-ray-tracing, multipass-buffer |
| Precise ray-geometry intersections | analytic-ray-tracing | lighting-model |
| Voxel worlds (Minecraft-style) | voxel-rendering | lighting-model, shadow-techniques |
| Noise / FBM textures | procedural-noise | domain-warping |
| Tiled 2D patterns | procedural-2d-pattern | polar-uv-manipulation |
| Voronoi / cell patterns | voronoi-cellular-noise | color-palette |
| Fractals (Mandelbrot, Julia, 3D) | fractal-rendering | color-palette, polar-uv-manipulation |
| Color grading / palettes | color-palette | — |
| Bloom / tone mapping / glitch | post-processing | multipass-buffer |
| Multi-pass ping-pong buffers | multipass-buffer | — |
| Texture / sampling techniques | texture-sampling | — |
| Camera / matrix transforms | matrix-transform | — |
| Surface normals | normal-estimation | — |
| Polar coords / kaleidoscope | polar-uv-manipulation | procedural-2d-pattern |
| 2D shapes / UI from SDF | sdf-2d | color-palette |
| Procedural audio / music | sound-synthesis | — |
| SDF tricks / optimization | sdf-tricks | sdf-3d, ray-marching |
| Anti-aliased rendering | anti-aliasing | sdf-2d, post-processing |
| Depth of field / motion blur / lens effects | camera-effects | post-processing, multipass-buffer |
| Advanced texture mapping / no-tile textures | texture-mapping-advanced | terrain-rendering, texture-sampling |
| WebGL2 shader errors / debugging | webgl-pitfalls | — |
fragCoord, main() wrapper, function order, macro limitations, uniform nullAll technique files use ShaderToy GLSL style. When generating standalone HTML pages, apply these adaptations:
canvas.getContext("webgl2")#version 300 es, fragment shader adds precision highp float;out vec4 fragColor;attribute → in, varying → outvarying → in, gl_FragColor → fragColor, texture2D() → texture()gl_FragCoord.xy instead of fragCoord (WebGL2 does not have fragCoord built-in)void mainImage(out vec4 fragColor, in vec2 fragCoord)void main() entry point — always wrap mainImage:#define cannot use function calls — use const instead:<script> tags, ensure #version is the first character — use .trim():gl.getUniformLocation() to return null — always use uniforms in a way the compiler cannot optimize out#define macros in some ES versionsterrainM(vec2) need XZ components — use terrainM(pos.xz + offset) not terrainM(pos + offset)When generating a standalone HTML page:
body { margin: 0; overflow: hidden; background: #000; }iTime, iResolution, iMouse, iFramelet/const variables must be declared at the top of the <script> block, before any function that references them:
Reason: let/const have a Temporal Dead Zone — referencing them before declaration throws ReferenceError, causing a white screen.
float fbm(vec3 p), cannot call fbm(uv) with a vec2patch, cast, sample, filter, input, output, common, partition, activevec3 x = 1.0 is illegal — use vec3 x = vec3(1.0); cannot use .z to access a vec2if/else insteadDeployment environments may use headless software rendering with limited GPU power. Stay within these limits:
Common effect combinations — complete rendering pipelines assembled from technique modules.
Visual debugging methods — temporarily replace your output to diagnose issues.
| What to check | Code | What to look for |
|---|---|---|
| Surface normals | col = nor * 0.5 + 0.5; | Smooth gradients = correct normals; banding = epsilon too large |
| Ray march step count | col = vec3(float(steps) / float(MAX_STEPS)); | Red hotspots = performance bottleneck; uniform = wasted iterations |
| Depth / distance | col = vec3(t / MAX_DIST); | Verify correct hit distances |
| UV coordinates | col = vec3(uv, 0.0); | Check coordinate mapping |
| SDF distance field | col = (d > 0.0 ? vec3(0.9,0.6,0.3) : vec3(0.4,0.7,0.85)) * (0.8 + 0.2*cos(150.0*d)); | Visualize SDF bands and zero-crossing |
| Checker pattern (UV) | col = vec3(mod(floor(uv.x*10.)+floor(uv.y*10.), 2.0)); | Verify UV distortion, seams |
| Lighting only | col = vec3(shadow); or col = vec3(ao); | Isolate shadow/AO contributions |
| Material ID | col = palette(matId / maxMatId); | Verify material assignment |
// WRONG
vec2 uv = (2.0 * fragCoord - iResolution.xy) / iResolution.y;
// CORRECT
vec2 uv = (2.0 * gl_FragCoord.xy - iResolution.xy) / iResolution.y;void mainImage(out vec4 fragColor, in vec2 fragCoord) {
// shader code...
fragColor = vec4(col, 1.0);
}
void main() {
mainImage(fragColor, gl_FragCoord.xy);
}// WRONG — getAtmosphere() calls getSunDirection() before it's defined
vec3 getAtmosphere(vec3 dir) { return getSunDirection(); } // Error!
vec3 getSunDirection() { return normalize(vec3(1.0)); }
// CORRECT — define callee first
vec3 getSunDirection() { return normalize(vec3(1.0)); }
vec3 getAtmosphere(vec3 dir) { return getSunDirection(); } // Works// WRONG
#define SUN_DIR normalize(vec3(0.8, 0.4, -0.6))
// CORRECT
const vec3 SUN_DIR = vec3(0.756, 0.378, -0.567); // Pre-computed normalized valueconst fs = document.getElementById('fs').text.trim();// 1. State variables FIRST
let frameCount = 0;
let startTime = Date.now();
// 2. Canvas/GL init, shader compile, FBO creation
const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl2');
// ...
// 3. Functions and event bindings LAST
function resize() { /* can now safely reference frameCount */ }
function render() { /* ... */ }
window.addEventListener('resize', resize);