Back to Devoured - July 16, 2026
DEVOURED
ShaderPad (Website)

ShaderPad (Website)

Design webperformance Misery
ShaderPad is a 5.9 kB (gzipped) WebGL2 library designed to help developers implement fragment shaders without the overhead of heavy 3D frameworks.
What: Built for performance and portability, ShaderPad simplifies WebGL2 scaffolding and supports plugins for face tracking and pose estimation via MediaPipe.
Why it matters: It addresses the gap between complex 3D libraries like Three.js and platform-locked shader playgrounds like ShaderToy, offering a lightweight alternative for production websites.
Deep dive
  • Key Capabilities: Handles uniform/texture synchronization, browser resizing, and history buffers with minimal code.
  • Integration: Compatible with existing canvas, img, and video elements for post-processing.
  • Extensibility: Supports plugins for object segmentation, hand tracking, and face filters.
  • Performance: Maintains a tiny footprint (5.9 kB gzipped) compared to full 3D suites.
  • Requirements: Targets WebGL 2.0; suitable for multi-pass graphics pipelines.
Decoder
  • Fragment Shader: A program that determines the color of individual pixels on the screen, often used to create visual effects.
  • WebGL2: A JavaScript API for rendering 2D and 3D graphics within any compatible web browser without the use of plug-ins.
  • Scaffolding: The basic structure of code required to set up a library before adding specific logic.
Original article

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, start from a template, or set up an AI-assisted workflow.

Quickstart

Get started by rendering your first simple example shaders.

Examples

Browse runnable examples and source code for common ShaderPad patterns.

API reference

Jump straight to 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 parts of graphics programming. With a small footprint (5.9 kB gzipped), effects load quickly and run well on any 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.

What can I build with ShaderPad?

  • Create fullscreen interactive shaders in under 10 lines of JS code.
  • Add post-processing effects to existing canvas, img and video elements.
  • Efficiently create multi-pass graphics pipelines with minimal overhead.
  • Make your own face filters or pose detection apps like Strange Camera.
  • Vibe code your first shader using the AI entry points.

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 into that platform. 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.

Explore all 56 articles in today's digest

Fresh dev news, AI-digested daily. Never miss a trend at devoured.fyi