← dominic.balass.one

Thursday shader series

Shader Demos: RGB Split

Week 2. A chromatic glitch shader that runs on any DOM element. The element is rasterized to a texture with SVG foreignObject, then a fullscreen triangle samples it three times — once per color channel, each slightly offset. The offsets drift slowly, so the headline slides in and out of registration like a misprinted page.

🌈 RGB Split fragment shader

Red from one sample, green from the center, blue from a sample shifted the other way. The offsets drift on slow sine waves, so the channels slide apart and back together — print misregistration, no duplicated DOM.

Source element (plain DOM)
rgb-split.frag · live WebGL

How it works

  1. Rasterize. The source element’s HTML (inline styles only, so it survives serialization) goes into an SVG foreignObject, drawn to a 2D canvas at 2x. That canvas becomes the WebGL texture. No screenshots, no html2canvas.
  2. Split. The shader samples that texture three times: red from a sample shifted one way, green from the center, blue from a sample shifted the other way. The offsets are two slow sine waves, so the channels drift apart and back together on their own.
  3. Respect motion. If prefers-reduced-motion is set, time freezes and one composed frame renders. The pause button does the same on demand.
rgb-split.frag 

    

  


  

    
In this series