Three.js From Zero · Article s12-02
OffscreenCanvas + Worker Three.js — the gotcha-complete guide
OffscreenCanvas + Worker Three.js — the gotcha-complete guide is Article s12-02 of Three.js From Zero, a MasterAllArts free interactive lesson for artists learning creative 3D on the web.
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.
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.
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.