Neal Spangler

Work Home lab & side projects

Adaptive browser graphics with WebGL

The animated background from my old local web server now runs on its own page. It drifts between 19 patterns, ripples where you click, and picks a quality level the visitor's computer can keep smooth.

Open the visualizer

Visualizer feedback loop Each frame reads the previous frame from one of two framebuffers, zooms, turns and fades it, adds new fractal-noise color and click ripples, writes it to the other framebuffer and shows it on screen. The two buffers swap every frame. A frame-rate check picks the quality tier. Each frame feeds the next Last frame framebuffer A Zoom, turn, fade feedback shader Paint new color noise + ripples Screen framebuffer B buffers swap every frame clicks and drags add ripples
Each frame feeds the next: zoom, turn and fade, then paint new color on top.
19patterns it drifts between
3quality tiers, picked by measuring frame rate
8ripples the shader tracks at once

The problem

A full-screen shader can make a laptop with weak graphics stutter. I needed the visualizer to adjust to different graphics hardware without making visitors tune its settings.

What I did

  • A feedback loop that renders into a pair of reduced-size framebuffers and swaps them every frame, so each frame is the last one zoomed, turned and faded.
  • Layered fractal noise, two octaves normally and four on GPU Max, crossfading to a new pattern every 15 seconds.
  • Click ripples and drag trails passed into the shader, with particles and a waveform drawn on a separate 2D canvas.
  • Three quality tiers. On Auto the page starts at the top tier, times the first two seconds and steps down until the frame rate holds.
  • Shader setup moved to a background worker, so the page and its controls appear at once while the graphics compile and fade in.

What I took from it

I measured the frame rate on the visitor's machine rather than choosing one setting for everyone. Auto mode takes about three seconds to settle on a tier.

Home lab & side projects

A snake game where two AIs compete and improve

A browser snake game with a pathfinder, a neural network and a league that tests new challengers.
Privacy