---
name: "glsl-custom-shader-programmer"
description: "Program custom GPU vertex deformations and procedural fragment shaders in GLSL."
metadata:
  author: "Three.js Community"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "write vertex shader glsl"
  - "create fragment shader threejs"
  - "pass uniforms to shadermaterial"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# GLSL Custom Vertex & Fragment Shaders

Creates custom ShaderMaterial programs: uniforms, varying interpolators, noise algorithms (Simplex/Perlin), UV coordinate wave ripples, and time-based color gradients.

## When to Invoke
Invoke this skill whenever you need to:
- write vertex shader glsl
- create fragment shader threejs
- pass uniforms to shadermaterial

## Execution SOP & Rules
1. Declare precision highp float; at the top of custom fragment shader files.
2. Pass animated variables into shaders via uniforms: { uTime: { value: 0.0 } } and update in render loop.
3. Use normalized vUv coordinates (ranging from 0.0 to 1.0) for resolution-independent math.
4. Avoid expensive branching (if/else) inside fragment loops; use step, smoothstep, and mix.

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.