skills.rest
surfingalien
surfingalienCOMMUNITY
Explore all skills by this author →
GitHub

shadertoy

Write, debug, and optimize GLSL fragment shaders for Shadertoy and WebGL procedural graphics.

1|Updated May 6, 2026
Search Tags:#generative art#glsl#shadertoy#webgl#procedural graphics#shader#ray marching
One-click install
npx skills add https://github.com/surfingalien/FinSurfing --skill shadertoy-surfingalien
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadertoy
Source: https://github.com/surfingalien/FinSurfing/tree/main/.claude/skills/shadertoy
Command: npx skills add https://github.com/surfingalien/FinSurfing --skill shadertoy-surfingalien

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Writing GLSL fragment shaders for Shadertoy involves tricky syntax rules, coordinate math, and platform-specific pitfalls that cause compilation errors and visual bugs. This Skill provides the patterns, references, and debugging strategies needed to produce working procedural graphics shaders. ## Core Features & Use Cases - Shader Authoring Guidance: Covers the mainImage entry point, Shadertoy built-in uniforms (iResolution, iTime, iMouse, iChannel0-3), and aspect-corrected coordinate normalization. - Pattern Library: Ready-to-use implementations of cosine color palettes, hash functions, ray marching loops, SDF primitives, rotations, domain folding, FBM noise, and post-processing effects. - Multi-Pass Rendering: Templates for buffer-based feedback and temporal blending across Buffer A/B and the final image pass. - Use Case: Ask for a ray-marched 3D scene with animated folded geometry and a vignette, and receive complete GLSL code following Shadertoy conventions with gamma correction and dithering applied. ## Quick Start Write a Shadertoy shader that renders an animated ray-marched octahedron with a cosine color palette and vignette post-processing.

Frequently Asked Questions about shadertoy

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I write a Shadertoy shader in GLSL?▼

Every Shadertoy shader implements void mainImage(out vec4 fragColor, in vec2 fragCoord). Normalize fragCoord by iResolution to get UV coordinates, compute your effect using iTime for animation, and write the final RGBA color to fragColor with alpha set to 1.0.

How do I ray march a 3D scene in a fragment shader?▼

Define a signed distance function in a map() function, then loop from a ray origin along a ray direction, advancing by the returned distance each step. Stop when the distance falls below a threshold like 0.001, then compute normals via finite differences for lighting.

What built-in uniforms does Shadertoy provide?▼

Shadertoy provides iResolution (viewport size), iTime (seconds), iTimeDelta, iFrame, iMouse (position and click), iDate, and iChannel0 through iChannel3 texture samplers with iChannelResolution. These are available in every image and buffer pass.

Why does my GLSL shader fail to compile on Shadertoy?▼

Common causes include using the f suffix on floats (1.0f is illegal), calling saturate() which does not exist in GLSL (use clamp(x, 0.0, 1.0)), feeding negative values to pow() or sqrt(), dividing by zero, and leaving variables uninitialized.

How do I create multi-pass effects with feedback in Shadertoy?▼

Use Buffer passes that write to iChannel textures. A buffer can read its own previous frame through its assigned channel, letting you blend current and previous output with mix() for temporal feedback, then display the result in the final Image pass.

How can I reduce banding artifacts in my shader output?▼

Add a small amount of hash-based dithering noise to the final color, such as hash21(fragCoord + iTime) * 0.001. Also apply gamma correction with pow(col, vec3(0.45)) so gradients distribute more evenly across displayable values.

Related Skills

Explore More Design & Creative Skills→
openharmonyinsightopenharmonyinsight
31

glslviewer-shader-debug

Render fragment shaders as headless PNG previews with glslViewer.

Official
Intermediate
bfollingtonbfollington
52

shadertoy

Write and edit Shadertoy GLSL fragment shaders with syntax references and patterns.

Community
Basic
MolcajeteAIMolcajeteAI
2

visual-regression

Automate visual regression testing with Playwright and Percy across browsers and viewports.

Official
Intermediate
oakossoakoss
14

threejs

Create 3D scenes with Three.js, WebGPU, and React Three Fiber.

Official
Advanced