Shader

Use this skill to turn shader requests into runnable code and fast debugging steps.

Default target: browser-friendly GLSL. If the runtime is unclear, narrow it before writing code:

• - ShaderToy fragment-only
• raw WebGL / GLSL ES
• Three.js INLINECODE0
• React Three Fiber
• postprocess-style full-screen pass

Workflow

1. Lock the runtime and effect shape

Resolve these first:

• - runtime
• fragment-only vs vertex + fragment
• screen effect vs material effect vs postprocess pass
• required inputs: uTime, uResolution, UVs, normals, textures, mouse

If the request is vague, start with the smallest visible version of the effect.

2. Build from a visible baseline

• - Start with a constant color or UV gradient.
• Add one moving term at a time.
• Reintroduce uniforms, varyings, noise, lighting, and distortion step by step.

For blank output, compile failures, or “nothing shows”, read references/black-screen-checklist.md.

3. Match the host, not the idea source

Do not hand over ShaderToy code unchanged if the user asked for Three.js or R3F.

Common translations:

• - iTime -> INLINECODE5
• INLINECODE6 -> INLINECODE7
• INLINECODE8 -> INLINECODE9
• ShaderToy fullscreen logic -> quad / plane / postprocess host setup

For live previews inside OpenClaw, pair this skill with canvas.

4. Keep answers practical

Prefer responses that include:

• - runnable shader code
• required uniforms and defaults
• host-side glue code
• the first debugging step if it fails

Common Uses

• - Full-screen effects: flowing gradients, ripples, ShaderToy-style animated backgrounds
• Material effects: fresnel, dissolve, edge glow, scanlines, vertex wobble
• Porting: ShaderToy -> WebGL / Three.js / R3F
• Debugging: black screen, all-white / all-black output, broken UVs, wrong varyings, missing uniforms

Commands

Intake

CODEBLOCK0

Use this to structure an underspecified request.

Debug

CODEBLOCK1

Effects

CODEBLOCK2

Maps user phrases to likely starter techniques like gradient, noise, fresnel, dissolve, ripple, scanline, and pixelate.

Boilerplate

CODEBLOCK3

Returns stage split, likely uniforms, varyings, build order, and common failure points.

Snippet

CODEBLOCK4

Points to the nearest bundled GLSL starter.

Demo

CODEBLOCK5

Chooses the best bundled runtime template for a target + effect combination.

Scaffold

CODEBLOCK6

Combines the nearest demo, boilerplate, snippet, and first integration steps.

Assets

Bundled templates:

• - INLINECODE18
• INLINECODE19
• INLINECODE20
• INLINECODE21
• INLINECODE22
• INLINECODE23
• INLINECODE24
• INLINECODE25

Bundled snippets:

• - INLINECODE26
• INLINECODE27
• INLINECODE28
• INLINECODE29
• INLINECODE30
• INLINECODE31

Use the postprocess template for screen-space effects. Use the Three.js or R3F templates for mesh/material effects.

References

• - INLINECODE32
• INLINECODE33
• INLINECODE34
• INLINECODE35
• INLINECODE36

Guardrails

• - Default to the smallest working shader that proves the effect.
• Use host-friendly uniform names like uTime, uResolution, uMouse, uTexture.
• Do not assume WebGL2 unless the host clearly uses it.
• Do not invent runtime-specific macros or built-ins.
• Call out likely precision, color-space, or postprocess-order bugs explicitly.
• For performance advice, stay directional unless the actual runtime and GPU are known.