Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 13 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@ npm install @layoutit/polycss-react
# Vue
npm install @layoutit/polycss-vue

# Prepared retained models
npm install @layoutit/polycss-morph

```

You can also load PolyCSS directly from a CDN. Here is a minimal custom-element scene:
Expand Down Expand Up @@ -155,10 +158,9 @@ If any referenced asset cannot be inlined, the function throws `PolySceneSnapsho

### Prepared retained models

The source tree includes `@layoutit/polycss-morph`, an imperative,
framework-agnostic package for models prepared ahead of time and updated through
one retained PolyCSS DOM graph. Version `0.0.1` is qualified for publication;
this documentation does not announce npm registry availability.
`@layoutit/polycss-morph` is an imperative, framework-agnostic package for
models prepared ahead of time and updated through one retained PolyCSS DOM
graph.

Preparation is explicitly Node-only:

Expand Down Expand Up @@ -201,12 +203,13 @@ updates do not rebuild topology or redraw prepared image resources.
Prepared playback uses a two-phase sample: apply `sample.update`, then call
`runtime.commit(sample)` only after the retained mount accepts the update.

Prepared solid triangles use the native CSS triangle primitive when supported.
Preparation also emits packed alpha-atlas pages for WebKit/Safari and other
browsers without a supported CSS triangle primitive. Every polygon receives a
slice sized to its local-2D bounding rect. Mount creates object URLs from the
already-verified package bytes, selects the fallback once, and revokes those
URLs at teardown; it never refetches, generates, or redraws the atlas.
On browsers that pass PolyCSS's solid-triangle support check, Morph uses
`corner-shape` when available and a CSS border triangle otherwise; Firefox uses
the larger border-triangle variant. Preparation also emits packed alpha-atlas
pages for WebKit/Safari. Every polygon receives a slice sized to its local-2D
bounding rect. Mount creates object URLs from the already-verified package
bytes, selects the fallback once, and revokes those URLs at teardown; it never
refetches, generates, or redraws the atlas.

### Polygon Data Model

Expand Down
2 changes: 1 addition & 1 deletion packages/morph/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,5 +8,5 @@
identity and caller-owned timing.
- Support static models, sparse morph regions, controls, springs, animation,
joint skinning, and prepared playback.
- Use native CSS triangle primitives where available and prepared,
- Use PolyCSS's solid-triangle CSS path where supported and prepared,
polygon-sized alpha-atlas slices elsewhere, with no runtime rasterization.
20 changes: 11 additions & 9 deletions packages/morph/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@

Prepared retained-model deformation and playback for PolyCSS.

Version `0.0.1` is the first release candidate. This README documents the
source-tree API; it does not announce npm registry availability.
```bash
npm install @layoutit/polycss-morph
```

## Boundary

Expand Down Expand Up @@ -91,13 +92,14 @@ mounted model keeps the same leaf elements for its lifetime. Runtime updates do
not rebuild topology, add or remove leaves, construct image resources, or
redraw prepared image resources.

The browser resolves prepared triangles once during mount. Supporting browsers,
including Firefox, use a native CSS triangle primitive. WebKit/Safari and other
browsers without a supported primitive use each leaf's prepared polygon-sized
atlas slice. Mount creates object URLs from the loader's already-verified image
bytes and revokes them at teardown; it does not refetch package resources.
Atlas pages are generated with Node built-ins, so Morph has no Sharp or other
native image dependency.
The browser resolves prepared triangles once during mount. On browsers that
pass PolyCSS's solid-triangle support check, Morph uses `corner-shape` when
available and a CSS border triangle otherwise; Firefox uses the larger
border-triangle variant. WebKit/Safari instead uses each leaf's prepared
polygon-sized atlas slice. Mount creates object URLs from the loader's
already-verified image bytes and revokes them at teardown; it does not refetch
package resources. Atlas pages are generated with Node built-ins, so Morph has
no Sharp or other native image dependency.

## Consumer adapters

Expand Down
20 changes: 11 additions & 9 deletions website/src/content/docs/guides/morph.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,10 @@ description: Prepare retained PolyCSS models in Node, then load and update them

`@layoutit/polycss-morph` is an imperative, framework-agnostic layer for models
whose topology, paint resources, and update plans are prepared ahead of time.
It is currently a workspace package under standalone qualification; this page
documents the source-tree API and does not announce npm registry availability.

```bash
npm install @layoutit/polycss-morph
```

Use ordinary `Polygon[]` loading for ordinary meshes. Use Morph when a model
needs a retained leaf graph plus sparse deformation, semantic controls,
Expand Down Expand Up @@ -93,13 +95,13 @@ Mount once, then sample and apply:
- sparse samples visit only affected leaves;
- runtime updates do not reconstruct topology or redraw prepared image resources.

Supporting browsers, including Firefox, use a native CSS triangle primitive.
WebKit/Safari and other browsers without a supported primitive use each leaf's
prepared polygon-sized alpha-atlas slice instead. Mount uses the loader's
verified image bytes and revokes their object URLs at teardown; the browser
never refetches, generates, or redraws
those pages. Dedicated tooling may also author other image-backed strategies,
including prepared-playback consumers.
On browsers that pass PolyCSS's solid-triangle support check, Morph uses
`corner-shape` when available and a CSS border triangle otherwise; Firefox uses
the larger border-triangle variant. WebKit/Safari instead uses each leaf's
prepared polygon-sized alpha-atlas slice. Mount uses the loader's verified image
bytes and revokes their object URLs at teardown; the browser never refetches,
generates, or redraws those pages. Dedicated tooling may also author other
image-backed strategies, including prepared-playback consumers.

## Consumer boundary

Expand Down
Loading