Three.js From Zero · Article s12-02
S12-02 OffscreenCanvas + Worker Three.js
Skip to demo
Season 12 · S12-02 · Specialized Production Patterns
OffscreenCanvas + Worker Three.js — the gotcha-complete guide
OffscreenCanvas is one of those APIs that sounds like free performance until you hit the message boundary. This article turns it into a deployment decision instead of a vibes-driven tweak.
infrastructureperformanceworkers
1. Why this article exists
Research ranked this highly because it is both useful and badly explained. The tutorial market still treats Worker rendering like a novelty instead of a production tradeoff.
2. What we are building in the demo
- A visual queue that distinguishes main-thread orchestration from render-thread work.
- A slider for work density so you can feel when the boundary pays for itself.
- A fallback story for browsers or app shells where the API surface is partial.
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
worker.postMessage({
type: 'scene:update',
camera,
uniforms,
frameBudgetMs,
});5. Production notes
Useful companion articles from earlier seasons:
What usually goes wrong first:
- The main thread still owns input, layout, and most UI.
- Shipping this without careful serialization discipline can make the codebase harder to reason about.
- Profiling matters more than ideology here.
6. Takeaways
- Workers help when render work is stable and message traffic is small.
- They do not rescue a bad asset pipeline or oversized textures.
- A fallback path is part of the pattern, not optional garnish.