Introducing ShaderPad: A Lightweight Library for Creative Coders

Today marks the release of ShaderPad, a compact library designed to simplify the integration of shaders into websites without the repetitive task of building graphics scaffolding. Shaders offer a dynamic way to sketch with code, but transferring these creations from platforms like ShaderToy to personal sites can be cumbersome due to platform lock-in. After repeatedly setting up the same graphics boilerplate, I developed ShaderPad to streamline this process. Over time, I added features like autosizing, save/share utilities, and MediaPipe integrations, making it invaluable for my projects. Now, I'm sharing it with the world, hoping it will inspire more artists and creative coders to bring their ideas online.

ShaderPad is remarkably efficient, with a gzipped size of just 5.8kb, making it over 30 times smaller than Three.js, which many companies use for single fullscreen shaders. While Three.js is excellent for full 3D scenes, ShaderPad is perfect for simpler interactive graphics, offering a straightforward API that can be learned quickly.

Performance was a key focus in ShaderPad's design, with most tasks offloaded to the GPU to avoid common graphics performance issues. The library maintains work within the same pipeline and caches detection results to minimize CPU trips, allowing users to focus on creativity rather than technical details.

Building ShaderPad was a journey that began before AI tools became prevalent. I carefully crafted the API based on real needs, focusing on what to exclude rather than add. While AI now aids in documentation and other non-core aspects, the essence of ShaderPad was shaped by deliberate design choices. AI has proven to be a valuable collaborator, especially in maintaining comprehensive documentation and exploring new library ideas.

I'm eager to see the creative projects ShaderPad will inspire. To get started, explore the quickstart guide or interactive examples, and join the discussion on Hacker News.