Three.js From Zero · Article s12-03
S12-03 Visual Regression Testing a Three.js Scene in CI
Skip to demo
Season 12 · S12-03 · Specialized Production Patterns
Visual Regression Testing a Three.js Scene in CI
Three.js regressions often ship as “that looks slightly off.” Image diff testing makes those changes reviewable, but only if the render is stable enough to be worth trusting.
infrastructuretestingci
1. Why this article exists
The research flagged CI image diffs as underwritten infrastructure. It is exactly the kind of article advanced readers bookmark and teams quietly rely on for years.
2. What we are building in the demo
- A seed-controlled scene so two renders can actually be compared.
- A diff threshold control showing how false positives and false negatives emerge.
- A review mindset: test the contracts you care about, not every pixel forever.
3. Live demo
The demo below is a compact study model, not a full production system. The goal is to make the article’s mental model tactile: what changes, what matters, and what you would keep when the codebase graduates into a real project.
booting...
Season 12 is deliberately less single-vertical than Season 11. The throughline is still applied production: every demo is framed as a pattern you could reuse in paid work.
4. Implementation sketch
expect(compareFrames({
baseline: 'hero-desktop.png',
current: frame,
threshold: 0.015,
})).toBeLessThan(0.015);5. Production notes
Useful companion articles from earlier seasons:
What usually goes wrong first:
- Non-deterministic animation destroys trust in the diff pipeline.
- Thresholds that are too strict generate churn, too loose and the tests become theater.
- CI should flag useful visual drift, not punish harmless GPU variance.
6. Takeaways
- Determinism is more valuable than exhaustiveness.
- Stable seeds, cameras, and renderer settings make the whole method credible.
- Visual testing is best when paired with a small number of high-signal checkpoints.