shader_skill

Overview

This skill writes GLSL fragment shaders for procedural graphics, textures, and visual effects. It focuses on signed distance fields (SDF), noise (Perlin, simplex, cellular), fBm, color handling (HSB/RGB), matrices, gradients, and animation. Use it to produce GPU-ready fragment code for WebGL, Three.js, and creative coding environments. The outputs are concise, practical shader snippets and reusable functions.

How this skill works

I generate GLSL fragment shader code and small helper functions tailored to your target platform (plain GLSL, ShaderToy, or Three.js). The skill uses standard uniforms (time, resolution, mouse) and common building blocks: coordinate normalization, SDF blending, tiling, noise, and fBm. It returns ready-to-run fragment functions, examples of usage, and suggestions for uniforms and performance trade-offs. Options include stylized color palettes, animation loops, and domain-warping patterns.

When to use it

• Create procedural textures like wood, marble, clouds, or terrain.
• Draw crisp shapes and outlines using SDFs for vector-like rendering.
• Generate organic patterns with Perlin/simplex/cellular noise and fBm.
• Prototype visual effects and pixel shaders for WebGL or Three.js materials.
• Animate generative art, looping backgrounds, or interactive visuals.

Best practices

• Normalize coordinates early (st = fragCoord.xy / resolution) and center for symmetry.
• Favor smoothstep for anti-aliased edges and mix for color blending.
• Keep noise functions and fBm at reasonable octave counts to balance detail and fps.
• Use low-overhead math (sin/cos/fract) and avoid branching in hot loops.
• Provide uniform defaults (u_time, u_resolution, u_mouse) and document ranges.

Example use cases

• Compact ShaderToy fragment that renders looping procedural clouds with domain-warped Perlin noise.
• Three.js fragment for a tiled truchet pattern with HSB palette controls and mouse-driven distortion.
• SDF-based UI element shader producing scalable, crisp circles, rounded rectangles, and soft outlines.
• Procedural texture generator producing marble or wood grain as a seamless tile for PBR workflows.
• Animated background shader for a web page that adapts to resolution and supports pause/play via u_time.