Shader Skills

---
name: shader-art-coding
description: >-
  Writes, debugs, and art-directs procedural GLSL fragment shaders (Shadertoy mainImage, WebGL2 / GLSL ES 3.00):
  SDF raymarching, procedural buildings/cities, 2D distance-field graphics, noise / fBm / domain warping, terrain,
  ocean/coastal water optics, clouds and other volumes, PBR lighting, color and tonemapping. Ships a verified GLSL building-block library with a bundler and
  checker. Use when the user asks for a shader, Shadertoy, GLSL/.frag/.glsl code, a raymarcher, an SDF scene, a
  procedural texture or generative visual, or wants a shader fixed, optimized, ported or explained. Not for
  HLSL/Unity ShaderLab or non-graphics GPU compute.
license: MIT
metadata:
  hermes:
    tags:
      - shader
      - glsl
      - shadertoy
      - procedural-art
      - raymarching
      - sdf
    category: development
---

# Shader Art Coding

Treat shader work as visual engineering: start from the intended image, choose the smallest mathematical model that
can produce it, build it in inspectable stages, and verify each stage with a debug view.

## Workflow

1. **Target.** State the image: subject, camera and framing, dominant forms, materials, light, motion.
2. **Route.** Pick the rendering model and starting template from `references/subject-routing.md`:
   2D distance fields (posters, icons, patterns), SDF raymarching (objects, characters), heightfield marching
   (landscapes), volume integration (clouds, smoke, fire).
3. **Assemble from the library.** Find building blocks with `python3 scripts/glsl_tools.py search <words>` or
   `references/library-index.md`, and call them by name. Do not paste or re-derive library code; it is tested.
4. **First image fast.** Coordinates, background, one primitive, one light. Then add the debug views.
5. **Refine in order:** proportions, composition, material separation, lighting, atmosphere, color, antialiasing,
   performance.
6. **Bundle and check.** `python3 scripts/glsl_tools.py bundle shader.glsl -o out.glsl` inlines exactly the
   functions used. `python3 scripts/glsl_tools.py check out.glsl` lints it and compiles it with glslangValidator
   when installed. Fix every error, then deliver `out.glsl`.

Run the scripts from this skill's directory. They need only Python 3.

## Conventions