Introducing: ShaderPad

ShaderPad is a small library designed to keep you from rebuilding graphics scaffolding every time you want to add a shader to your website.

The core motivation is to reduce the repeated hassle of moving an idea from ShaderToy or TouchDesigner over to your own site once you've refined it there. The author has been adding needed features bit by bit over a long period, and has now open-sourced it.

The main points are as follows.

• Very small at 5.8KB gzipped.
• Described as more than 30x smaller than Three.js.
• Suited for fullscreen interactive graphics or simple shader experiments, rather than full 3D scenes.

On the performance side, it's designed to keep work on the GPU as much as possible. When chaining multiple shaders, it processes them within the same pipeline instead of going back and forth to the CPU, and it caches detection results when multiple passes use the same face/pose tracking output.

The post also includes reflections on the development process. The core API and constraints were refined slowly based on real needs before AI was involved, and AI was mainly useful for helping with peripheral work like documentation, cleaning up explanations, and updating README/examples. Conversely, the author's view is that keeping the bundle size small, the API simple, and the scope disciplined is still something humans need to do better.

Right now, you can get started right away via the docs, quickstart, and interactive examples, and the author hopes to see more creative doodles and experiments built on ShaderPad.