A compelling frame is a starting point. A visual system also has to hold together when the camera moves and the hardware changes.
01 / The problem
Make the effect a system.
Project Delta began with a strong visual language: scenes reduced to light, texture, and deliberate patterns. The engineering problem was to turn that treatment into a reusable post-processing effect instead of a one-off image.
The system supports ordered and procedural patterns, palette mapping, tone controls, and presets. A React Three Fiber playground makes the parameters inspectable, while the reusable effect keeps the rendering logic separate from the demonstration scene.
Fine. Fine grain preserves more of the tonal field. This lightweight illustration is not a live shader benchmark.
Medium. Coarser grain makes the pattern visible as part of the image rather than a hidden rendering detail.
Coarse. At large grain sizes, silhouette and tonal structure have to carry the image.
Illustrative Bayer-threshold field generated for this page. Change the grain to inspect the texture; no GPU performance is being measured.
02 / The work
Coordinates change the picture.
A pattern attached to the screen behaves differently from one attached to an object. Camera movement can expose sliding texture, unstable ownership, and edges that looked fine in a still image.
My work extends into object-space anchors, multi-subject ownership, and the tradeoff between exact visible-pixel ownership and a cheaper proximity fallback. The goal is control over the effect’s behavior, not simply a longer list of visual settings.
03 / The judgment
Test the image and the cost.
The repository pairs browser load tests with deterministic visual captures. The checks inspect rendering states, runtime errors, overflow, image differences, and timing. Perceptual tolerances distinguish an intended visual change from a regression.
CPU and GPU measurements depend on the environment. An unavailable timer query does not mean an effect is free. Keeping that gap visible is more useful than attaching an unsupported performance claim to a beautiful screenshot.
04 / Decisions
What I chose.
And why.
- Reusable effect, separate playground
- The shader can be evaluated independently of the scene used to demonstrate it.
- Object-space pattern anchoring
- Coordinate choice becomes an explicit design decision rather than an accidental artifact of camera motion.
- Perceptual and timing checks
- A rendering change has to be considered both as an image and as work done by the machine.
05 / Result
What came out of it.
A reusable dithering system, a parameter playground, and browser-based visual and performance test tooling.
Status & source notes
The illustration on this page is a lightweight ordered-dither study, not the Three.js runtime or a benchmark capture. Original scene and asset credits remain with the technical implementation. Performance claims require a named device and test environment.
Case study updated September 12, 2026.