shader

# 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 `ShaderMaterial` - 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` -> `uTime` - `iResolution` -> `uResolution` - `fragCoord` -> `gl_FragCoord.xy` - 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 ```bash node {baseDir}/scripts/shader.js intake "fullscreen ocean background in three.js" node {baseDir}/scripts/shader.js intake "port this shadertoy to r3f" --json ``` Use this to structure an underspecified request. ### Debug ```bash node {baseDir}/scripts/shader.js debug black-screen node {baseDir}/scripts/shader.js debug uniform node {baseDir}/scripts/shader.js debug varyings ``` ### Effects ```bash node {baseDir}/scripts/shader.js effects ``` Maps user phrases to likely starter techniques like `gradient`, `noise`, `fresnel`, `dissolve`, `ripple`, `scanline`, and `pixelate`. ### Boilerplate ```bash node {baseDir}/scripts/shader.js boilerplate fresnel node {baseDir}/scripts/shader.js boilerplate dissolve --json ``` Returns stage split, likely uniforms, varyings, build order, and common failure points. ### Snippet ```bash node {baseDir}/scripts/shader.js snippet fresnel node {baseDir}/scripts/shader.js snippet ripple --json ``` Points to the nearest bundled GLSL starter. ### Demo ```bash node {baseDir}/scripts/shader.js demo webgl ripple node {baseDir}/scripts/shader.js demo r3f fresnel --json ``` Chooses the best bundled runtime template for a target + effect combination. ### Scaffold ```bash node {baseDir}/scripts/shader.js scaffold r3f dissolve node {baseDir}/scripts/shader.js scaffold postprocess scanline --json ``` Combines the nearest demo, boilerplate, snippet, and first integration steps. ## Assets Bundled templates: - `assets/webgl-fullscreen-demo/index.html` - `assets/threejs-material-demo/index.html` - `assets/postprocess-demo/index.html` - `assets/r3f-demo/App.jsx` - `assets/r3f-demo/main.jsx` - `assets/r3f-demo/index.html` - `assets/r3f-demo/package.json` - `assets/r3f-demo/vite.config.js` Bundled snippets: - `assets/snippets/fresnel.md` - `assets/snippets/dissolve.md` - `assets/snippets/ripple.md` - `assets/snippets/scanline.md` - `assets/snippets/pixelate.md` - `assets/snippets/vertex-wobble.md` Use the postprocess template for screen-space effects. Use the Three.js or R3F templates for mesh/material effects. ## References - `references/glsl-quick-reference.md` - `references/black-screen-checklist.md` - `references/effect-starters-zh.md` - `references/snippets.md` - `references/runtime-translation.md` ## 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.