@layoutit/polycss-core 0.2.8 → 0.2.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +58 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,6 +4,8 @@ A CSS polygon mesh library. A 3D engine for the DOM. Renders OBJ/MTL, STL, glTF/
|
|
|
4
4
|
|
|
5
5
|
Visit [polycss.com](https://polycss.com) for docs and model examples.
|
|
6
6
|
|
|
7
|
+
Join [chat.polycss.com](https://chat,polycss.com) for support and community discussions.
|
|
8
|
+
|
|
7
9
|
<img width="1600" height="300" alt="PolyCSS primitives banner" src="https://github.com/user-attachments/assets/b05e2204-9323-4f83-8d1b-01ea0dd000db" />
|
|
8
10
|
|
|
9
11
|
## Installation
|
|
@@ -151,6 +153,61 @@ const html = await exportPolySceneSnapshot(scene.host);
|
|
|
151
153
|
|
|
152
154
|
If any referenced asset cannot be inlined, the function throws `PolySceneSnapshotError` with `code: "ASSET_INLINE_FAILED"`.
|
|
153
155
|
|
|
156
|
+
### Prepared retained models
|
|
157
|
+
|
|
158
|
+
The source tree includes `@layoutit/polycss-morph`, an imperative,
|
|
159
|
+
framework-agnostic package for models prepared ahead of time and updated through
|
|
160
|
+
one retained PolyCSS DOM graph. Version `0.0.1` is qualified for publication;
|
|
161
|
+
this documentation does not announce npm registry availability.
|
|
162
|
+
|
|
163
|
+
Preparation is explicitly Node-only:
|
|
164
|
+
|
|
165
|
+
```ts
|
|
166
|
+
import { preparePolyMorphModel } from "@layoutit/polycss-morph/prepare";
|
|
167
|
+
|
|
168
|
+
await preparePolyMorphModel({
|
|
169
|
+
configPath: "./source/prepare.json",
|
|
170
|
+
outputRoot: "./public/model/package",
|
|
171
|
+
});
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
The browser entry loads, mounts, samples, and applies updates:
|
|
175
|
+
|
|
176
|
+
```ts
|
|
177
|
+
import {
|
|
178
|
+
createPolyMorphDeformationRuntime,
|
|
179
|
+
loadPolyMorphPackage,
|
|
180
|
+
mountPolyMorphModel,
|
|
181
|
+
} from "@layoutit/polycss-morph";
|
|
182
|
+
|
|
183
|
+
const loaded = await loadPolyMorphPackage("/model/");
|
|
184
|
+
const mounted = mountPolyMorphModel(host, loaded.model, {
|
|
185
|
+
resources: loaded.resources,
|
|
186
|
+
});
|
|
187
|
+
const deformation = createPolyMorphDeformationRuntime(loaded.model);
|
|
188
|
+
const frame = deformation.sample({
|
|
189
|
+
tick: 0,
|
|
190
|
+
morphWeights: { "corner-lift": 0.5 },
|
|
191
|
+
});
|
|
192
|
+
|
|
193
|
+
mounted.apply({ leaves: frame.leafUpdates });
|
|
194
|
+
```
|
|
195
|
+
|
|
196
|
+
Morph supports `static-prepared`, `morph-regions`, `joint-skin`, and
|
|
197
|
+
`prepared-playback` profiles. It does not own an animation scheduler: callers
|
|
198
|
+
sample controls, springs, clips, skinning, or playback and pass only changed
|
|
199
|
+
rows to `mounted.apply(...)`. Mounted leaf identity stays stable, and runtime
|
|
200
|
+
updates do not rebuild topology or redraw prepared image resources.
|
|
201
|
+
Prepared playback uses a two-phase sample: apply `sample.update`, then call
|
|
202
|
+
`runtime.commit(sample)` only after the retained mount accepts the update.
|
|
203
|
+
|
|
204
|
+
Prepared solid triangles use the native CSS triangle primitive when supported.
|
|
205
|
+
Preparation also emits packed alpha-atlas pages for WebKit/Safari and other
|
|
206
|
+
browsers without a supported CSS triangle primitive. Every polygon receives a
|
|
207
|
+
slice sized to its local-2D bounding rect. Mount creates object URLs from the
|
|
208
|
+
already-verified package bytes, selects the fallback once, and revokes those
|
|
209
|
+
URLs at teardown; it never refetches, generates, or redraws the atlas.
|
|
210
|
+
|
|
154
211
|
### Polygon Data Model
|
|
155
212
|
|
|
156
213
|
Each polygon describes one renderable face:
|
|
@@ -231,6 +288,7 @@ Each visible polygon is emitted as one leaf element; the renderer chooses the le
|
|
|
231
288
|
| `@layoutit/polycss` | Vanilla custom elements and imperative `createPolyScene` API. |
|
|
232
289
|
| `@layoutit/polycss-react` | React components, hooks, controls, and core re-exports. |
|
|
233
290
|
| `@layoutit/polycss-vue` | Vue 3 components, composables, controls, and core re-exports. |
|
|
291
|
+
| `@layoutit/polycss-morph` | Prepared retained-model contracts, Node preparation, browser loading, sparse deformation, controls, springs, animation, skinning, and playback. |
|
|
234
292
|
|
|
235
293
|
## Made with PolyCSS
|
|
236
294
|
|