CSS-to-Shader Pipeline

Style HTML with CSS, capture it into a canvas, then apply real-time GLSL fragment shaders

Preview -- fps

Pipeline

1. CSS styles an HTML element living inside a <canvas layoutsubtree>

2. drawElementImage() renders the styled DOM into the 2D canvas

3. The 2D canvas becomes a WebGL texture

4. A fragment shader processes every pixel in real-time

This pipeline is impossible without HTML-in-Canvas — previously you needed html2canvas or dom-to-image, which are slow, lossy, and cannot keep up with 60 fps.

Hello, Shaders