ShaderPad

Get creative with shaders.

ShaderPad is a lightweight, embeddable fragment shader player. It lets you add stunning creative effects to your website with minimal setup.

QuickstartView on GitHub
Core library6.1 kB gzipped
main.ts
shader.frag
// Fragmentum shader by Jaenam: shadertoy.com/view/t3SyzV
const shader = new ShaderPad(fragmentShaderSrc, { canvas })
shader.play();

Getting Started

Overview

ShaderPad handles the repetitive work required to render fragment shaders in the browser. It’s performant, flexible, and comes “batteries included” for most needs. ShaderPad has optional plugins — from PNG export to face/pose tracking — for more specific requirements. Simple, performant, and portable, ShaderPad lets you focus on writing GLSL.

Installation

Install ShaderPad into your project, or teach your AI agent how to use it.

Quickstart

Render your first shader with the smallest complete example.

AI agent guide

Start here if you want an LLM or coding agent to generate correct ShaderPad programs.

API reference

Jump straight to constructor options, methods, events, and utilities.

Meet ShaderPad

ShaderPad is a minimal fragment shader library for the web. It handles WebGL2 scaffolding, uniform and texture synchronization, resizing, history buffers, and other runtime plumbing. It’s performant by default and lets you focus on the creative part. With a small footprint (6.1 kB gzipped), effects load quickly and run well on a range of device. And if you want face filters, pose-driven visuals, hand tracking, or object segmentation, MediaPipe-powered plugins give you one of the fastest ways to start building.

Face mesh created with ShaderPad’s face plugin

What can I build with ShaderPad?

  • Create fullscreen interactive shaders with under 10 lines of JS code.
  • Make your own face filters or pose detection apps like Strange Camera.
  • Add post-processing effects to canvas, img and video elements on an existing page.
  • Point your AI coding agent to the AI agent guide, describe the effect you want to see, and let it build from there.

Comparisons To Other Libraries

ThreeJS is an incredible framework, but it’s nearly 30x the size of ShaderPad. If you want to use your GPU without a full 3D library, ShaderPad is a great choice.

Hosted shader playgrounds like ShaderToy are perfect for sketches, but they keep your work locked on that site. ShaderPad aims to provide a similar speed of iteration while giving you something you can drop into any project.

Inspiration

  • ShaderToy: The original shader playground. Still one of the coolest places on the Internet.
  • ThreeJS: The most popular 3D library on the web by a landslide, for good reason.
  • TWGL: A performant and unopinionated WebGL library for the browser.
  • ShaderBooth: A fun, immediate, and inspiring way to learn and experiment with shaders.

WebGL2 is required

ShaderPad targets WebGL 2.0, which is widely available across all major browsers.

Interested? Choose a path

Start here

Camera effects and filters

Advanced / multi-pass effects

Next Steps

Next
Installation