Examples + textureAtlas refactor: split, move pure math to core, per-renderer browser glue#22
Merged
Conversation
…n atlas rasterisation
Exports isFullRectSolid, buildTextureEdgeRepairSets, computeTextureAtlasPlanPublic, getSolidPaintDefaultsFromPlans, formatMatrix3d, formatCssLengthPx, formatSolidQuadEntryMatrix, formatBorderShapeEntryMatrix, isBorderShapeSupported, isSolidTriangleSupported, filterAtlasPlans, packTextureAtlasPlansWithScale, buildAtlasPages, isSolidTrianglePlan, isProjectiveQuadPlan, and related types so React/Vue can import pure logic instead of duplicating it.
… polycss Removes ~2000 lines of duplicated atlas planning, strategy selection, and CSS helpers. Imports pure functions from @layoutit/polycss and keeps only React-specific JSX components, the useTextureAtlas hook, updateStableTriangleDom, and solidTriangleStyle. Fixes the PROJECTIVE_QUAD_MAX_WEIGHT_RATIO divergence (4 in fork vs Infinity in canonical) that caused visible rendering holes.
…olycss Same migration as React: removes ~2000 lines of duplicated logic, imports pure functions from @layoutit/polycss, retains Vue composable useTextureAtlas (taking ComputedRef arguments and returning useFullRectSolid/useProjectiveQuad/ useStableTriangle/useBorderShape ComputedRefs), VNode render functions, and updateStableTriangleDom. Fixes the same strategy selection divergence.
…rom core directly
Moves all 8 test files out of packages/polycss/src/render/__tests__/ and places them as siblings of the source files they test. Pure-math tests (plan, matrix, borderShape) move to packages/core/src/atlas/; polycss wrapper/DOM tests (strategy, packing, paintDefaults, solidTrianglePrimitive, stableTriangle) move to packages/polycss/src/render/atlas/. Imports updated to reference local siblings or @layoutit/polycss-core where appropriate.
…, import from core directly
…port from core directly
…t from core directly
…atlas/ Mechanical file split only — zero behavior change, zero renames. New files under packages/react/src/scene/atlas/: detection.ts isBorderShapeSupported, isSolidTriangleSupported, getSolidPaintDefaultsFromPlans + doc-level helpers filterPlans.ts filterAtlasPlans wrapper packing.ts isMobileDocument, packTextureAtlasPlansWithScale buildAtlasPages.ts canvas pipeline (~340 lines, all internal helpers kept together) solidTriangleStyle.ts solidTriangleStyle math + shared geometry/color helpers stableTriangleDom.ts updateStableTriangleDom — imports shared helpers from solidTriangleStyle.ts paintDefaults.ts computeTextureAtlasPlan, getSolidPaintDefaults useTextureAtlas.ts React hook + TextureAtlasResult type triangle.tsx TextureTrianglePoly component borderShape.tsx TextureBorderShapePoly component + orderBrushInlineStyle helper projectiveSolid.tsx TextureProjectiveSolidPoly component atlasPoly.tsx TextureAtlasPoly component index.tsx barrel re-exporting all public symbols Symbols added export (previously private, needed by stableTriangleDom.ts): offsetConvexPolygonPoints, formatStableTriangleTransformScalars, BASIS_EPS, SOLID_TRIANGLE_BLEED, DEFAULT_TILE, DEFAULT_LIGHT_DIR, DEFAULT_LIGHT_COLOR, DEFAULT_LIGHT_INTENSITY, DEFAULT_AMBIENT_COLOR, DEFAULT_AMBIENT_INTENSITY, RGB (interface), parseHex, rgbKey, rgbToHex, shadePolygon, quantizeCssColor, stepRgbToward textureAtlas.tsx and atlasBrowser.ts reduced to thin re-export barrels. Tests moved from scene/__tests__/ to atlas/ next to their sources.
Mirrors the React split. Mechanical file split only — zero behavior change, zero renames. New files under packages/vue/src/scene/atlas/: detection.ts isBorderShapeSupported, isSolidTriangleSupported, getSolidPaintDefaultsFromPlans filterPlans.ts filterAtlasPlans wrapper packing.ts isMobileDocument, packTextureAtlasPlansWithScale buildAtlasPages.ts canvas pipeline (identical to React copy) solidTriangleStyle.ts solidTriangleStyle math + shared geometry/color helpers stableTriangleDom.ts updateStableTriangleDom — imports shared helpers from solidTriangleStyle.ts paintDefaults.ts computeTextureAtlasPlan, getSolidPaintDefaults useTextureAtlas.ts Vue composable + TextureAtlasResult type triangle.ts renderTextureTrianglePoly render function borderShape.ts renderTextureBorderShapePoly + orderBrushInlineStyle helper projectiveSolid.ts renderTextureProjectiveSolidPoly render function atlasPoly.ts renderTextureAtlasPoly render function index.ts barrel re-exporting all public symbols Symbols added export (previously private, needed by stableTriangleDom.ts): offsetConvexPolygonPoints, BASIS_EPS, SOLID_TRIANGLE_BLEED, DEFAULT_TILE, DEFAULT_LIGHT_DIR, DEFAULT_LIGHT_COLOR, DEFAULT_LIGHT_INTENSITY, DEFAULT_AMBIENT_COLOR, DEFAULT_AMBIENT_INTENSITY, RGB (interface), parseHex, rgbKey, rgbToHex, shadePolygon, quantizeCssColor, stepRgbToward textureAtlas.ts and atlasBrowser.ts reduced to thin re-export barrels. Tests moved from scene/__tests__/ to atlas/ next to their sources.
…m ./atlas directly
…Effect/onUpdated imperative write to prevent Concurrent Mode flicker on solid-triangle meshes
…er diagnosis Adds __polycssDiag window object counting PolyScene/PolyMesh/TrianglePoly renders, applyTransformDirect calls, and animate rAF ticks per second. Logs to console every 1s. Remove after diagnosis.
…nt compositing flicker The React and Vue stylesheets were missing `will-change: transform` on .polycss-scene. Without it, the browser re-rasterizes every descendant leaf on each animation frame instead of compositing a cached GPU layer, causing visible flicker on solid-shape meshes (triangles, quads) that have no opacity:0 loading phase to mask the re-paint. The vanilla polycss stylesheet already carried this declaration with the same explanation. Adds bench/flicker-diagnose.mjs: a Playwright-based diagnostic that observes DOM mutations during orbit animation and reports the scene element's CSS properties including will-change status.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Two big workstreams converged on this branch:
Examples
Four Vite apps under
examples/{html,vanilla,react,vue}demonstrating the minimal usage for each renderer. Each is a workspace member usingworkspace:^so local changes flow through immediately. Six examples per app: baked-shapes, multi-mesh, solid-glb, textured-glb, animated, voxel (html skips animated).textureAtlas refactor + dep graph cleanup
polycss/render/textureAtlas.tsinto ~16 focused files underpolycss/render/atlas/.packages/core/src/atlas/(matrix, plan, strategy, packing, paint, edge-repair, etc.). Core keepslib: ["ES2020"]— no DOM types added.@layoutit/polycss-core. Each renderer owns its own copy of the canvas atlas pipeline + browser detection (~700 lines duplicated per renderer, deliberate trade for clean dep boundaries).Bug fixes along the way
mergePolygonsalways returned the merged result (was guarded by length-equality which silently dropped merged polygons when count matched).bench/flicker-diagnose.mjs). Root cause was missingwill-change: transformon.polycss-scenein React/Vue stylesheets, causing Chromium to re-rasterize every leaf per frame.Coverage
@layoutit/polycss-core@layoutit/polycss@layoutit/polycss-react@layoutit/polycss-vueCore/atlas folder up from ~30% to 85%+ across the moved files. Total: 2219 tests across 4 packages, all green.
AGENTS.md updates
Updated the monorepo table (React/Vue depend only on core), added the examples workspace row, and added a new "Renderer-owned browser glue" section to the cross-package discipline rules — a fix to the canvas pipeline or
styles.tsnow needs to land in all three renderers in the same PR.Test plan