From 68676a8bcd1efc814fc8c60080900a623af3a43a Mon Sep 17 00:00:00 2001 From: agustin-littlehat Date: Sat, 16 May 2026 20:59:32 -0300 Subject: [PATCH 1/2] fix: use fixed projective quad primitive --- AGENTS.md | 2 +- packages/polycss/src/render/polyDOM.test.ts | 14 ++++++-------- packages/polycss/src/render/textureAtlas.ts | 15 ++++++--------- packages/polycss/src/styles/styles.ts | 5 +++++ packages/react/src/styles/styles.ts | 5 +++++ packages/vue/src/styles/styles.ts | 5 +++++ 6 files changed, 28 insertions(+), 18 deletions(-) diff --git a/AGENTS.md b/AGENTS.md index 59fd8712..1f95feda 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -26,7 +26,7 @@ Public API is **mirrored** across React and Vue. Adding a hook on one side witho | Tag | Strategy | When chosen | Paint mechanism | Atlas memory | |---|---|---|---|---| -| `` | **Quads** | Axis-aligned rectangle, or untextured convex quad when the homography passes stability guards | `background: currentColor`; affine rects use a 1px rectangle mapped by `matrix3d`; projective quads use a bbox-sized rectangle with a normalized high-precision projective `matrix3d` and tiny solid bleed to overlap antialias seams | None | +| `` | **Quads** | Axis-aligned rectangle, or untextured convex quad when the homography passes stability guards | `background: currentColor`; affine rects use a 1px rectangle mapped by `matrix3d`; projective quads use a fixed 64px rectangle with a normalized high-precision projective `matrix3d` and tiny solid bleed to overlap antialias seams | None | | `` | **Border-shape clipped solid** | Untextured non-rect on browsers with CSS `border-shape` (Chromium + `pointer:fine` + `hover:hover`) | `border-color: currentColor` on a fixed 16px border-shape primitive, clipped by `border-shape: polygon(...)`; polygon bbox scale and tiny solid bleed are folded into `matrix3d` | None | | `` | **Atlas slice** | Textured polygons, or untextured non-rect on browsers without `border-shape` | `background-image` slice of packed bitmap on a canonical 1px primitive; atlas position/size are normalized to the slice, scale lives in `matrix3d`, and shared textured edges get low-alpha atlas pixels repaired during atlas generation | Bounding-rect area | | `` | **Stable solid triangle** | Opt-in for triangles via `renderPolygonsWithStableTriangles` | CSS border-color triangle trick with a fixed canonical 1px border triangle; tiny solid bleed is folded into `matrix3d` | None | diff --git a/packages/polycss/src/render/polyDOM.test.ts b/packages/polycss/src/render/polyDOM.test.ts index 717a9fd8..e3974e37 100644 --- a/packages/polycss/src/render/polyDOM.test.ts +++ b/packages/polycss/src/render/polyDOM.test.ts @@ -1298,10 +1298,11 @@ describe("renderPolygonsWithTextureAtlas — strategies.disable", () => { const element = result.rendered[0].element; const style = element.getAttribute("style") ?? ""; expect(element.tagName.toLowerCase()).toBe("b"); + expect(element.classList.contains("polycss-projective")).toBe(true); expect(result.rendered[0].kind).toBe("solid"); expect(style).toContain("transform:matrix3d("); - expect(style).toContain("width:"); - expect(style).toContain("height:"); + expect(style).not.toContain("width"); + expect(style).not.toContain("height"); expect(style).not.toContain("border-shape"); expect(canvases).toHaveLength(0); result.dispose(); @@ -1323,9 +1324,6 @@ describe("renderPolygonsWithTextureAtlas — strategies.disable", () => { { doc }, ); const matrix = extractMatrix(result.rendered[0].element); - const plan = result.rendered[0].plan!; - const width = plan.canvasW; - const height = plan.canvasH; const expected = NON_RECT_QUAD.vertices.map((vertex): [number, number, number] => [ vertex[1] * 50, vertex[0] * 50, @@ -1333,9 +1331,9 @@ describe("renderPolygonsWithTextureAtlas — strategies.disable", () => { ]); expectPointClose(transformMatrixPoint(matrix, 0, 0), expected[0]); - expectPointClose(transformMatrixPoint(matrix, width, 0), expected[1]); - expectPointClose(transformMatrixPoint(matrix, width, height), expected[2]); - expectPointClose(transformMatrixPoint(matrix, 0, height), expected[3]); + expectPointClose(transformMatrixPoint(matrix, 64, 0), expected[1]); + expectPointClose(transformMatrixPoint(matrix, 64, 64), expected[2]); + expectPointClose(transformMatrixPoint(matrix, 0, 64), expected[3]); result.dispose(); }); diff --git a/packages/polycss/src/render/textureAtlas.ts b/packages/polycss/src/render/textureAtlas.ts index c1405cdf..52ab1bb6 100644 --- a/packages/polycss/src/render/textureAtlas.ts +++ b/packages/polycss/src/render/textureAtlas.ts @@ -239,6 +239,7 @@ const BORDER_SHAPE_CENTER_PERCENT = 50; const BORDER_SHAPE_POINT_EPS = 1e-7; const BORDER_SHAPE_CANONICAL_SIZE = 16; const BORDER_SHAPE_BLEED = 0.9; +const PROJECTIVE_QUAD_CANONICAL_SIZE = 64; const PROJECTIVE_QUAD_DENOM_EPS = 0.05; const PROJECTIVE_QUAD_MAX_WEIGHT_RATIO = Number.POSITIVE_INFINITY; const PROJECTIVE_QUAD_BLEED = 0.6; @@ -496,8 +497,6 @@ function computeProjectiveQuadMatrix( tx: number, ty: number, tz: number, - sourceWidth: number, - sourceHeight: number, guards: ProjectiveQuadGuardSettings, ): string | null { if (screenPts.length !== 8) return null; @@ -520,8 +519,7 @@ function computeProjectiveQuadMatrix( if (!coeffs) return null; const { g, h, w1, w3 } = coeffs; const [q0, q1, , q3] = q; - const sx = Math.max(1, sourceWidth); - const sy = Math.max(1, sourceHeight); + const sourceSize = PROJECTIVE_QUAD_CANONICAL_SIZE; const p0: Vec3 = [ tx + q0[0] * xAxis[0] + q0[1] * yAxis[0], @@ -535,8 +533,8 @@ function computeProjectiveQuadMatrix( ]; return formatMatrix3dValues([ - ...projectiveColumn(q1, w1).map((value) => value / sx), g / sx, - ...projectiveColumn(q3, w3).map((value) => value / sy), h / sy, + ...projectiveColumn(q1, w1).map((value) => value / sourceSize), g / sourceSize, + ...projectiveColumn(q3, w3).map((value) => value / sourceSize), h / sourceSize, normal[0], normal[1], normal[2], 0, p0[0], p0[1], p0[2], 1, ], 6); @@ -1528,8 +1526,6 @@ function computeTextureAtlasPlan( tx, ty, tz, - canvasW, - canvasH, projectiveQuadGuards, ) : null; @@ -2756,7 +2752,8 @@ function createProjectiveSolidElement( solidPaintDefaults?: SolidPaintDefaults, ): HTMLElement { const el = doc.createElement("b"); - el.setAttribute("style", `width:${formatCssLength(entry.canvasW)};height:${formatCssLength(entry.canvasH)};transform:matrix3d(${entry.projectiveMatrix})`); + el.classList.add("polycss-projective"); + el.setAttribute("style", `transform:matrix3d(${entry.projectiveMatrix})`); applyPolygonDataAttrs(el, entry.polygon); applySolidPaint(el, entry, textureLighting, solidPaintDefaults); diff --git a/packages/polycss/src/styles/styles.ts b/packages/polycss/src/styles/styles.ts index 7a188c9b..1d1ae5ef 100644 --- a/packages/polycss/src/styles/styles.ts +++ b/packages/polycss/src/styles/styles.ts @@ -82,6 +82,11 @@ const CORE_BASE_STYLES = ` height: 1px; } +.polycss-scene b.polycss-projective { + width: 64px; + height: 64px; +} + .polycss-scene i { width: 16px; height: 16px; diff --git a/packages/react/src/styles/styles.ts b/packages/react/src/styles/styles.ts index 534ac67e..173bdec1 100644 --- a/packages/react/src/styles/styles.ts +++ b/packages/react/src/styles/styles.ts @@ -87,6 +87,11 @@ const CORE_BASE_STYLES = ` height: 1px; } +.polycss-scene b.polycss-projective { + width: 64px; + height: 64px; +} + .polycss-scene i { width: 16px; height: 16px; diff --git a/packages/vue/src/styles/styles.ts b/packages/vue/src/styles/styles.ts index dcd3c5b9..c70eeb61 100644 --- a/packages/vue/src/styles/styles.ts +++ b/packages/vue/src/styles/styles.ts @@ -87,6 +87,11 @@ const CORE_BASE_STYLES = ` height: 1px; } +.polycss-scene b.polycss-projective { + width: 64px; + height: 64px; +} + .polycss-scene i { width: 16px; height: 16px; From 35fa40926be27dbae4a7664ca070c0950e7ddb8b Mon Sep 17 00:00:00 2001 From: agustin-littlehat Date: Sat, 16 May 2026 21:06:01 -0300 Subject: [PATCH 2/2] fix: remove projective quad class --- AGENTS.md | 2 +- packages/polycss/src/render/polyDOM.test.ts | 20 +++++++++++++------ packages/polycss/src/render/textureAtlas.ts | 16 +++++++++++---- packages/polycss/src/styles/styles.ts | 5 ----- packages/react/src/scene/textureAtlas.tsx | 22 +++++++++++++++------ packages/react/src/styles/styles.ts | 5 ----- packages/vue/src/scene/textureAtlas.ts | 22 +++++++++++++++------ packages/vue/src/styles/styles.ts | 5 ----- 8 files changed, 59 insertions(+), 38 deletions(-) diff --git a/AGENTS.md b/AGENTS.md index 1f95feda..7ce29a15 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -26,7 +26,7 @@ Public API is **mirrored** across React and Vue. Adding a hook on one side witho | Tag | Strategy | When chosen | Paint mechanism | Atlas memory | |---|---|---|---|---| -| `` | **Quads** | Axis-aligned rectangle, or untextured convex quad when the homography passes stability guards | `background: currentColor`; affine rects use a 1px rectangle mapped by `matrix3d`; projective quads use a fixed 64px rectangle with a normalized high-precision projective `matrix3d` and tiny solid bleed to overlap antialias seams | None | +| `` | **Quads** | Axis-aligned rectangle, or untextured convex quad when the homography passes stability guards | `background: currentColor` on a fixed 64px rectangle; affine and projective quads normalize their `matrix3d` to that primitive, with tiny solid bleed on projective quads to overlap antialias seams | None | | `` | **Border-shape clipped solid** | Untextured non-rect on browsers with CSS `border-shape` (Chromium + `pointer:fine` + `hover:hover`) | `border-color: currentColor` on a fixed 16px border-shape primitive, clipped by `border-shape: polygon(...)`; polygon bbox scale and tiny solid bleed are folded into `matrix3d` | None | | `` | **Atlas slice** | Textured polygons, or untextured non-rect on browsers without `border-shape` | `background-image` slice of packed bitmap on a canonical 1px primitive; atlas position/size are normalized to the slice, scale lives in `matrix3d`, and shared textured edges get low-alpha atlas pixels repaired during atlas generation | Bounding-rect area | | `` | **Stable solid triangle** | Opt-in for triangles via `renderPolygonsWithStableTriangles` | CSS border-color triangle trick with a fixed canonical 1px border triangle; tiny solid bleed is folded into `matrix3d` | None | diff --git a/packages/polycss/src/render/polyDOM.test.ts b/packages/polycss/src/render/polyDOM.test.ts index e3974e37..2bbb2ea4 100644 --- a/packages/polycss/src/render/polyDOM.test.ts +++ b/packages/polycss/src/render/polyDOM.test.ts @@ -61,6 +61,8 @@ const UNSTABLE_PROJECTIVE_QUAD: Polygon = { color: "#ff00ff", }; +const QUAD_CANONICAL_SIZE = 64; + const OFFAXIS_TRIANGLE: Polygon = { vertices: [ [0, 0, 0], @@ -160,15 +162,21 @@ function computeExpectedMatrix( return computeExpectedPlan(vertices, tileSize, elev).matrix; } -function computeExpectedCanonicalMatrix( +function computeExpectedQuadMatrix( vertices: [number, number, number][], tileSize = 50, elev = tileSize, ): number[] { const { matrix, canvasW, canvasH } = computeExpectedPlan(vertices, tileSize, elev); return [ - matrix[0] * canvasW, matrix[1] * canvasW, matrix[2] * canvasW, 0, - matrix[4] * canvasH, matrix[5] * canvasH, matrix[6] * canvasH, 0, + matrix[0] * canvasW / QUAD_CANONICAL_SIZE, + matrix[1] * canvasW / QUAD_CANONICAL_SIZE, + matrix[2] * canvasW / QUAD_CANONICAL_SIZE, + 0, + matrix[4] * canvasH / QUAD_CANONICAL_SIZE, + matrix[5] * canvasH / QUAD_CANONICAL_SIZE, + matrix[6] * canvasH / QUAD_CANONICAL_SIZE, + 0, matrix[8], matrix[9], matrix[10], 0, matrix[12], matrix[13], matrix[14], 1, ]; @@ -283,7 +291,7 @@ describe("renderPoly — matrix math parity", () => { it("vertical quad matrix3d values match expected", () => { const result = renderPoly(VERTICAL_QUAD)!; const actual = extractMatrix(result.element); - const expected = roundedMatrix(computeExpectedCanonicalMatrix(VERTICAL_QUAD.vertices as [number, number, number][])); + const expected = roundedMatrix(computeExpectedQuadMatrix(VERTICAL_QUAD.vertices as [number, number, number][])); expect(actual.length).toBe(16); for (let i = 0; i < 16; i++) expect(actual[i]).toBeCloseTo(expected[i], 6); result.dispose(); @@ -309,7 +317,7 @@ describe("renderPoly — matrix math parity", () => { }; const result = renderPoly(poly, { tileSize: 50, layerElevation: 25 })!; const actual = extractMatrix(result.element); - const expected = roundedMatrix(computeExpectedCanonicalMatrix(poly.vertices as [number, number, number][], 50, 25)); + const expected = roundedMatrix(computeExpectedQuadMatrix(poly.vertices as [number, number, number][], 50, 25)); for (let i = 0; i < 16; i++) expect(actual[i]).toBeCloseTo(expected[i], 6); result.dispose(); }); @@ -1298,7 +1306,7 @@ describe("renderPolygonsWithTextureAtlas — strategies.disable", () => { const element = result.rendered[0].element; const style = element.getAttribute("style") ?? ""; expect(element.tagName.toLowerCase()).toBe("b"); - expect(element.classList.contains("polycss-projective")).toBe(true); + expect(element.className).toBe(""); expect(result.rendered[0].kind).toBe("solid"); expect(style).toContain("transform:matrix3d("); expect(style).not.toContain("width"); diff --git a/packages/polycss/src/render/textureAtlas.ts b/packages/polycss/src/render/textureAtlas.ts index 52ab1bb6..554e5575 100644 --- a/packages/polycss/src/render/textureAtlas.ts +++ b/packages/polycss/src/render/textureAtlas.ts @@ -239,7 +239,7 @@ const BORDER_SHAPE_CENTER_PERCENT = 50; const BORDER_SHAPE_POINT_EPS = 1e-7; const BORDER_SHAPE_CANONICAL_SIZE = 16; const BORDER_SHAPE_BLEED = 0.9; -const PROJECTIVE_QUAD_CANONICAL_SIZE = 64; +const QUAD_CANONICAL_SIZE = 64; const PROJECTIVE_QUAD_DENOM_EPS = 0.05; const PROJECTIVE_QUAD_MAX_WEIGHT_RATIO = Number.POSITIVE_INFINITY; const PROJECTIVE_QUAD_BLEED = 0.6; @@ -519,7 +519,7 @@ function computeProjectiveQuadMatrix( if (!coeffs) return null; const { g, h, w1, w3 } = coeffs; const [q0, q1, , q3] = q; - const sourceSize = PROJECTIVE_QUAD_CANONICAL_SIZE; + const sourceSize = QUAD_CANONICAL_SIZE; const p0: Vec3 = [ tx + q0[0] * xAxis[0] + q0[1] * yAxis[0], @@ -2289,6 +2289,14 @@ function formatPlanElementStyle( return `transform:matrix3d(${entry.canonicalMatrix})${shape}`; } +function formatQuadMatrix(entry: TextureAtlasPlan): string { + return formatScaledMatrixFromPlan( + entry, + entry.canvasW / QUAD_CANONICAL_SIZE, + entry.canvasH / QUAD_CANONICAL_SIZE, + ); +} + function formatScaledMatrixFromPlan( entry: TextureAtlasPlan, scaleX: number, @@ -2725,7 +2733,8 @@ function createSolidElement( solidPaintDefaults?: SolidPaintDefaults, ): HTMLElement { const el = doc.createElement("b"); - applyPlanElementBase(el, entry); + el.setAttribute("style", `transform:matrix3d(${formatQuadMatrix(entry)})`); + applyPolygonDataAttrs(el, entry.polygon); applySolidPaint(el, entry, textureLighting, solidPaintDefaults); return el; @@ -2752,7 +2761,6 @@ function createProjectiveSolidElement( solidPaintDefaults?: SolidPaintDefaults, ): HTMLElement { const el = doc.createElement("b"); - el.classList.add("polycss-projective"); el.setAttribute("style", `transform:matrix3d(${entry.projectiveMatrix})`); applyPolygonDataAttrs(el, entry.polygon); applySolidPaint(el, entry, textureLighting, solidPaintDefaults); diff --git a/packages/polycss/src/styles/styles.ts b/packages/polycss/src/styles/styles.ts index 1d1ae5ef..4cb2e76b 100644 --- a/packages/polycss/src/styles/styles.ts +++ b/packages/polycss/src/styles/styles.ts @@ -78,11 +78,6 @@ const CORE_BASE_STYLES = ` .polycss-scene b { background: currentColor; - width: 1px; - height: 1px; -} - -.polycss-scene b.polycss-projective { width: 64px; height: 64px; } diff --git a/packages/react/src/scene/textureAtlas.tsx b/packages/react/src/scene/textureAtlas.tsx index d6a2b3b4..fdd61159 100644 --- a/packages/react/src/scene/textureAtlas.tsx +++ b/packages/react/src/scene/textureAtlas.tsx @@ -43,6 +43,7 @@ const DEFAULT_ATLAS_CSS_DECIMALS = 4; const BORDER_SHAPE_CENTER_PERCENT = 50; const BORDER_SHAPE_POINT_EPS = 1e-7; const BORDER_SHAPE_CANONICAL_SIZE = 16; +const QUAD_CANONICAL_SIZE = 64; const PROJECTIVE_QUAD_DENOM_EPS = 0.05; const PROJECTIVE_QUAD_MAX_WEIGHT_RATIO = 4; const PROJECTIVE_QUAD_BLEED = 0.6; @@ -577,6 +578,14 @@ function formatScaledMatrixFromPlan( return formatMatrix3dValues(values); } +function formatQuadMatrix(entry: TextureAtlasPlan): string { + return formatScaledMatrixFromPlan( + entry, + entry.canvasW / QUAD_CANONICAL_SIZE, + entry.canvasH / QUAD_CANONICAL_SIZE, + ); +} + function formatBorderShapeMatrix(entry: TextureAtlasPlan): string { return formatScaledMatrixFromPlan( entry, @@ -764,13 +773,14 @@ function computeProjectiveQuadMatrix( p3[1] * w3 - p0[1], p3[2] * w3 - p0[2], ]; + const sourceSize = QUAD_CANONICAL_SIZE; - return [ - xCol[0], xCol[1], xCol[2], g, - yCol[0], yCol[1], yCol[2], h, + return formatMatrix3dValues([ + xCol[0] / sourceSize, xCol[1] / sourceSize, xCol[2] / sourceSize, g / sourceSize, + yCol[0] / sourceSize, yCol[1] / sourceSize, yCol[2] / sourceSize, h / sourceSize, normal[0], normal[1], normal[2], 0, p0[0], p0[1], p0[2], 1, - ].join(","); + ], 6); } function cssPoints(vertices: Vec3[], tile: number, elev: number): Vec3[] { @@ -1958,7 +1968,7 @@ export function TextureBorderShapePoly({ else el.style.removeProperty("border-shape"); orderBrushInlineStyle(el); }, [borderShape]); - const transform = formatMatrix3d(borderShape ? formatBorderShapeMatrix(entry) : entry.canonicalMatrix); + const transform = formatMatrix3d(borderShape ? formatBorderShapeMatrix(entry) : formatQuadMatrix(entry)); const style: CSSProperties = fullRect ? { transform, @@ -2027,7 +2037,7 @@ export function TextureProjectiveSolidPoly({ const base = parseHex(entry.polygon.color ?? "#cccccc"); const useDefaultDynamicColor = dynamic && rgbKey(base) === solidPaintDefaults?.dynamicColorKey; const style: CSSProperties = { - transform: formatMatrix3d(entry.projectiveMatrix), + transform: formatMatrix3d(entry.projectiveMatrix, 6), color: dynamic || entry.shadedColor === solidPaintDefaults?.paintColor ? undefined : entry.shadedColor, diff --git a/packages/react/src/styles/styles.ts b/packages/react/src/styles/styles.ts index 173bdec1..80324d90 100644 --- a/packages/react/src/styles/styles.ts +++ b/packages/react/src/styles/styles.ts @@ -83,11 +83,6 @@ const CORE_BASE_STYLES = ` .polycss-scene b { background: currentColor; - width: 1px; - height: 1px; -} - -.polycss-scene b.polycss-projective { width: 64px; height: 64px; } diff --git a/packages/vue/src/scene/textureAtlas.ts b/packages/vue/src/scene/textureAtlas.ts index 0014c462..f103f21e 100644 --- a/packages/vue/src/scene/textureAtlas.ts +++ b/packages/vue/src/scene/textureAtlas.ts @@ -43,6 +43,7 @@ const DEFAULT_ATLAS_CSS_DECIMALS = 4; const BORDER_SHAPE_CENTER_PERCENT = 50; const BORDER_SHAPE_POINT_EPS = 1e-7; const BORDER_SHAPE_CANONICAL_SIZE = 16; +const QUAD_CANONICAL_SIZE = 64; const PROJECTIVE_QUAD_DENOM_EPS = 0.05; const PROJECTIVE_QUAD_MAX_WEIGHT_RATIO = 4; const PROJECTIVE_QUAD_BLEED = 0.6; @@ -585,6 +586,14 @@ function formatScaledMatrixFromPlan( return formatMatrix3dValues(values); } +function formatQuadMatrix(entry: TextureAtlasPlan): string { + return formatScaledMatrixFromPlan( + entry, + entry.canvasW / QUAD_CANONICAL_SIZE, + entry.canvasH / QUAD_CANONICAL_SIZE, + ); +} + function formatBorderShapeMatrix(entry: TextureAtlasPlan): string { return formatScaledMatrixFromPlan( entry, @@ -772,13 +781,14 @@ function computeProjectiveQuadMatrix( p3[1] * w3 - p0[1], p3[2] * w3 - p0[2], ]; + const sourceSize = QUAD_CANONICAL_SIZE; - return [ - xCol[0], xCol[1], xCol[2], g, - yCol[0], yCol[1], yCol[2], h, + return formatMatrix3dValues([ + xCol[0] / sourceSize, xCol[1] / sourceSize, xCol[2] / sourceSize, g / sourceSize, + yCol[0] / sourceSize, yCol[1] / sourceSize, yCol[2] / sourceSize, h / sourceSize, normal[0], normal[1], normal[2], 0, p0[0], p0[1], p0[2], 1, - ].join(","); + ], 6); } function cssPoints(vertices: Vec3[], tile: number, elev: number): Vec3[] { @@ -2055,7 +2065,7 @@ export function renderTextureBorderShapePoly({ const useIForFullRect = fullRect && forceBorderShape && borderShapeSupported(); const borderShape = (!fullRect || useIForFullRect) ? cssBorderShapeForPlan(entry) : null; const useDefaultPaint = entry.shadedColor === solidPaintDefaults?.paintColor; - const transform = formatMatrix3d(borderShape ? formatBorderShapeMatrix(entry) : entry.canonicalMatrix); + const transform = formatMatrix3d(borderShape ? formatBorderShapeMatrix(entry) : formatQuadMatrix(entry)); const style: CSSProperties = fullRect ? { transform, @@ -2116,7 +2126,7 @@ export function renderTextureProjectiveSolidPoly({ const base = parseHex(entry.polygon.color ?? "#cccccc"); const useDefaultDynamicColor = dynamic && rgbKey(base) === solidPaintDefaults?.dynamicColorKey; const style: CSSProperties = { - transform: formatMatrix3d(entry.projectiveMatrix), + transform: formatMatrix3d(entry.projectiveMatrix, 6), color: dynamic || entry.shadedColor === solidPaintDefaults?.paintColor ? undefined : entry.shadedColor, diff --git a/packages/vue/src/styles/styles.ts b/packages/vue/src/styles/styles.ts index c70eeb61..14f81b65 100644 --- a/packages/vue/src/styles/styles.ts +++ b/packages/vue/src/styles/styles.ts @@ -83,11 +83,6 @@ const CORE_BASE_STYLES = ` .polycss-scene b { background: currentColor; - width: 1px; - height: 1px; -} - -.polycss-scene b.polycss-projective { width: 64px; height: 64px; }