T-083 — Perf spike
PixiJS 1000×1000 cell grid — texture-backed renderer
Answers the question: can iPad render and interact with a 1 M-cell chart at 60 fps? Drag to pan, scroll/pinch to zoom. Watch the FPS counter during continuous pan + zoom. If the running average stays at ~60 fps under interaction, the texture-backed approach is viable for the editor architecture.
Method
-
Rendering: a single
Spritebacked by a 1000×1000 RGBATextureSource(4 MB buffer). Pan + zoom are pure GPU transforms — zero per-cell CPU cost. -
Edit path: mutate the buffer + call
source.update(). The buttons below measure single-cell and 100-cell-stroke edit latency. - Cell palette restricted to 8 Coastal Bright colors so the visual is closer to a real colorwork chart than rainbow noise.
- Resolution capped at 2× devicePixelRatio so retina iPads don't render an 8 MP canvas.
What to look for
- Static FPS: should pin at 60 fps with no input (browser caps there).
- Pan FPS: drag continuously — running average should stay ≥ 55 fps.
- Zoom FPS: wheel/pinch continuously — should also stay ≥ 55 fps.
- Single edit: ideally < 1000 µs (1 ms) so 60 fps headroom remains.
- 100-cell stroke: ideally < 2000 µs so a 60 fps paint stroke (~16 ms budget) has room for everything else.
If this spike succeeds
The texture-backed approach becomes the v1 editor architecture. We'd extend it with:
- Per-chunk textures (e.g., 128×128 chunks) instead of one giant texture, so dirty-region updates only re-upload the affected chunks.
- Zustand store for cell data + selection, with a publish/subscribe channel for the renderer.
- Layered passes for grid lines, selection highlight, AI suggestion overlay.
If this spike fails
Texture upload is the cheapest representation; if it can't hit 60 fps, the bottleneck is the device / browser, not the architecture. Fallback options in order of effort:
- Reduce chart cap (e.g., 500×500 max for iPad, 1000×1000 on desktop only).
- Move to WebGPU via PixiJS v8's WebGPU renderer (better-batched, lower overhead).
- Custom shader with vertex-color quad mesh — skip the texture upload entirely.
- Move heavy ops off main thread via OffscreenCanvas + Worker.