Skip to content

WordArt: cap-merge + adaptive segments, atomic atlas swaps, live scale#56

Merged
apresmoi merged 9 commits into
mainfrom
wordart-perf
May 31, 2026
Merged

WordArt: cap-merge + adaptive segments, atomic atlas swaps, live scale#56
apresmoi merged 9 commits into
mainfrom
wordart-perf

Conversation

@apresmoi
Copy link
Copy Markdown
Collaborator

What

Two themes, both improving the WordArt composer (/wordart) and the renderers it sits on:

1 · Fonts geometry perf (lossless, same silhouette)

  • Cap convex-mergecomposeText/textPolygons now merge the earcut cap triangles into maximal convex polygons at build time. Fewer DOM leaves (e.g. WordArt flat 644→414, "Hi" 132→58) and about half the front/back internal seams gone. Identical outline + holes; many triangle-pairs collapse to the cheapest <b> rect. The old generic merge option is removed (superseded by this always-on pass).
  • Adaptive round-edge segments — the round profile picks the fewest segments whose chord error stays under ~0.4% of cap height (the round-over radius is capped, so the default never over-tessellates). Round WordArt 3284→2186 by default, visually identical.

2 · Flicker-free editing (atlas pipeline, react + vue)

  • Never-blank double-buffer — the atlas holds the previous bitmap (pre-decoded via Image.decode()) until the new one is ready instead of blanking to shells on every edit, so geometry edits don't flash the textured face.
  • Opt-in atomicAtlas on PolyMesh — holds the whole previous frame (geometry + texture together) until the new atlas is decoded, then swaps atomically, cancelling any superseded build. Used by /wordart so a slider release never shows geometry before its texture. Adds an onFrameReady callback for preview hand-off. Mirrored in react + vue.

3 · WordArt workbench UX

  • Depth previews live via a CSS scaleZ while dragging and bakes on release (clean swap via atomicAtlas).
  • Scale X/Y are now a pure live CSS transform on the mesh (no recompute, no flicker) — they stretch the whole block uniformly and the camera (fitZoom) compensates to stay framed.
  • Heavy sliders (segments, simplify, warp, letter spacing, line height) commit on release for a clean atomic swap.
  • Dropped the dead "Merge polygons" toggle and a duplicate case clause.

Test plan

  • pnpm test — core 949, fonts 45, polycss 584, react 414, vue 415, all green.
  • pnpm build — all packages + website clean.
  • Manual: dragging every /wordart slider on textured/gradient fills — no blank flash, no destructive swap; Depth + Scale X/Y feel live.

Follow-ups (not in this PR)

  • Document the new PolyMesh atomicAtlas / onFrameReady props in the website docs.
  • Live letter spacing + line height via per-leaf CSS-var offsets (the dynamic-lighting pattern) — a separate cross-package feature.

@apresmoi apresmoi merged commit dcb9d88 into main May 31, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant