# ShaderPad

ShaderPad is a lightweight WebGL2 library for fragment shaders, live textures, history buffers, fullscreen canvas workflows, and optional MediaPipe-powered plugins for face, pose, hands, and segmentation.

Hard rules:

- ShaderPad targets WebGL2.
- Standard fragment shaders should include `#version 300 es`, `precision highp float;`, `in vec2 v_uv;`, and `out vec4 outColor;`.
- Initialize uniforms before calling `updateUniforms()`.
- Initialize textures before calling `updateTextures()`.
- For live DOM-backed textures like video or webcam, call `updateTextures()` every frame.
- Use `play()` for normal animation, `step()` for manual advancement, and `draw()` only for render-only passes. `draw()` does not advance time, frame count, or history.
- If the canvas might resize, add `autosize()`.
- If using `helpers()`, do not manually declare `u_resolution`; the plugin injects it.
- MediaPipe plugins (`face`, `pose`, `hands`, `segmenter`) require `@mediapipe/tasks-vision`.
- For MediaPipe plugins, the configured `textureName` must match the actual initialized live texture name.
- Prefer one WebGL context whenever possible. Multi-pass pipelines should usually share one canvas/context, and the last draw in `requestAnimationFrame` is what appears on screen.

Start with these pages:

- `/shaderpad/docs/getting-started/ai-agent-guide/` - best single-page overview for AI agents
- `/shaderpad/docs/getting-started/quickstart/` - smallest working example
- `/shaderpad/docs/api/shaderpad/` - constructor and options
- `/shaderpad/docs/api/methods/` - methods and behavior
- `/shaderpad/docs/core-concepts/built-in-inputs/` - built-in varying and uniforms
- `/shaderpad/docs/core-concepts/history/` - history buffers and `historyZ()`
- `/shaderpad/docs/guides/chaining-shaders/` - multi-pass workflows
- `/shaderpad/docs/plugins/helpers/` - GLSL helpers and `u_resolution` caveat

Plugin docs:

- `/shaderpad/docs/plugins/autosize/`
- `/shaderpad/docs/plugins/save/`
- `/shaderpad/docs/plugins/face/`
- `/shaderpad/docs/plugins/pose/`
- `/shaderpad/docs/plugins/hands/`
- `/shaderpad/docs/plugins/segmenter/`

Additional deep reference:

- `https://github.com/rileyjshaw/shaderpad/blob/main/README.md` - longer API walkthrough and examples