Easy 2D shader setup with quad-shader

This is a template for getting started with WebGL using Vite and TypeScript. The animations on this page are generated on the fly with WebGL fragment shaders.

With fragment shaders, you have control over each pixel's color, making it perfect for Creative Coding and generating textures and patterns procedurally.

WebGL runs on the GPU, allowing for smooth, high-frame-rate animations. This template has no runtime dependencies and uses the WebGL API directly.

The colors used by the shaders are derived from the page's CSS properties — open your devtools and have some fun. The technique used is described in this blog post.

The code for this page and the quad-shader library is on GitHub at nmattia/quad-shader.