Offscreen canvas / worker rendering
Handing canvas rendering to a Web Worker so heavy 3D scene updates do not block typing, scrolling, or the rest of the page interface.
See it
What it is
OffscreenCanvas lets a canvas render without being controlled directly by the page's main thread. A visible HTML canvas can transfer its drawing control to a dedicated Web Worker, where WebGL runs while the main thread remains available for input, layout, and interface updates.
Reach for worker rendering when JavaScript scene updates or renderer bookkeeping cause typing, scrolling, and controls to stutter. The GPU work itself does not become free, but moving the render loop and scene logic can stop long main-thread tasks from blocking the interface.
Gotcha: workers have no DOM access. Size, device pixel ratio, pointer events, asset results, and application state must cross through postMessage(), and large copied payloads can erase the benefit. Transfer the canvas before creating a context on it, and use transferable objects for large binary data where ownership can move.
Ask AI for it
Move this WebGL2 renderer into a dedicated Web Worker. On the main thread call canvas.transferControlToOffscreen() and send the resulting OffscreenCanvas in the transfer list to worker.postMessage(). Create the WebGL2 context and requestAnimationFrame loop inside the worker. Use ResizeObserver to post the canvas CSS size and devicePixelRatio, batch pointer movement to one message per animation frame, and transfer loaded ArrayBuffer geometry instead of cloning it. Keep DOM labels and accessibility controls on the main thread, and add a fallback that uses the existing main-thread renderer when transferControlToOffscreen is unavailable.