ShaderToy

Use this skill for ShaderToy-native work and ShaderToy-to-runtime migration.

This skill is narrower than shader. If the problem is fundamentally about ShaderToy built-ins, mainImage, channels, buffers, or porting out of ShaderToy, use this one first.

Workflow

1. Confirm the ShaderToy shape

Resolve these first:

• - single Image pass or multi-pass with INLINECODE3
• uses of iTime, iResolution, INLINECODE6
• channel usage: INLINECODE7
• whether the code is pure procedural or samples textures / buffers

If the user posts ShaderToy code, keep the original structure visible until the effect works.

2. Debug in ShaderToy terms first

Before porting, reduce the effect inside ShaderToy conventions:

• - replace output with a constant color
• visualize INLINECODE8
• bypass texture reads and channels temporarily
• isolate one term at a time

Read references/builtins.md for the built-in variable map.

3. Port only after the effect is understood

When porting away from ShaderToy:

• - convert mainImage(out vec4 fragColor, in vec2 fragCoord) to the host entry point
• replace built-ins with explicit uniforms
• recreate full-screen quad or postprocess host setup
• account for channel textures and buffer passes explicitly

Read references/porting.md before rewriting host-side glue.

4. Keep answers concrete

Prefer:

• - a corrected ShaderToy fragment shader
• a mapping of built-ins to host uniforms
• a minimal migration plan
• the first likely failure point

Commands

Inspect built-ins and channels

CODEBLOCK0

Generate a porting checklist

CODEBLOCK1

Use this when converting ShaderToy code into another runtime.

Print a debug checklist

CODEBLOCK2

Generate an intake plan

CODEBLOCK3

Pick the right demo starting point

CODEBLOCK4

Generate a scaffold recommendation

CODEBLOCK5

Use this when the user wants the fastest route from a ShaderToy idea to a runnable host setup.

Assets

Bundled templates:

• - INLINECODE12
• INLINECODE13

References

• - Built-ins, channels, and pass semantics: INLINECODE14
• Migration rules to WebGL / Three.js / R3F: INLINECODE15
• Buffer and feedback triage: INLINECODE16

Guardrails

• - Keep ShaderToy naming intact until the effect is understood.
• Do not invent channels or buffer passes the user did not specify.
• If the shader relies on buffers or feedback, say so explicitly before pretending it is a single-pass effect.
• When porting, make every implicit ShaderToy input explicit in the host code.