gregblur

High-quality WebGL2 background blur for video streams

View on GitHub
Original Feed Camera
Click "Start Camera" to begin
Processed Output gregblur
Waiting for pipeline...
Pipeline Idle
FPS --
Resolution --
Model --

How It Works

Every frame passes through 8 GPU stages in a single draw cycle — no CPU pixel work.

  1. 1 Upload camera frame to a WebGL2 RGBA texture
  2. 2 Run MediaPipe segmentation to get a confidence mask
  3. 3 Joint bilateral filter refines mask edges using color
  4. 4 Temporal EMA blends with previous frame's mask
  5. 5 Masked downsample to half-res (foreground-weighted)
  6. 6 Mask-weighted 2-pass separable Gaussian blur
  7. 7 Composite via smoothstep matte blending
  8. 8 Output to canvas for display or stream capture
Read the full pipeline documentation →