create-playcanvas 0.6.0 → 0.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "create-playcanvas",
-    "version": "0.6.0",
+    "version": "0.6.2",
     "description": "Scaffold a PlayCanvas project",
     "keywords": [
         "playcanvas",

package/skills/assemble-scene/references/web-components.md

@@ -4,7 +4,7 @@ Represent the whole gameplay object below one semantic root:
 
 ```html
 <pc-entity name="Enemy_1" position="4 0 -3" rotation="0 90 0">
-    <pc-rigidbody type="dynamic" mass="1"></pc-rigidbody>
+    <pc-rigid-body type="dynamic" mass="1"></pc-rigid-body>
     <pc-collision type="capsule"></pc-collision>
     <pc-entity position="0 0.8 0" rotation="0 180 0" scale="0.01 0.01 0.01">
         <pc-model asset="enemy"></pc-model>
@@ -14,6 +14,6 @@ Represent the whole gameplay object below one semantic root:
 
 Keep component tags as direct children of the owning `<pc-entity>`. Register the model with a
 direct-child `<pc-asset>` under `<pc-app>`. Before using rigid bodies, load Ammo with a direct-child
-`<pc-module name="Ammo">` carrying its `glue`, `wasm`, and `fallback` attributes; `<pc-app>` awaits
+`<pc-wasm name="Ammo">` carrying its `glue`, `wasm`, and `fallback` attributes; `<pc-app>` awaits
 its direct-child modules before creating the graphics device, so every body in the document depends
 on that one element. Add and remove the semantic root as one DOM subtree.

package/skills/build-app/references/web-components.md

@@ -35,10 +35,10 @@ Build supported application structure declaratively:
 - Treat a present boolean attribute as true unless its value is `false`; remove it to restore the
   Engine default.
 
-Load Engine `Script` modules with `<pc-asset>`, then attach them through `<pc-scripts>` and
-`<pc-script>`. Match the element's `name` to the class's static `scriptName`. Extra kebab-case
-attributes map to camelCase properties; use the `attributes` JSON attribute for nested or reserved
-values.
+Load Engine `Script` modules with `<pc-asset>`, then attach them through `<pc-script>` and
+`<pc-script-instance>`. Match the instance element's `name` to the class's static `scriptName`.
+Extra kebab-case attributes map to camelCase properties; use the `attributes` JSON attribute for
+nested or reserved values.
 
 Use `whenReady` for occasional page-level Engine access:
 

package/skills/calibrate-model/references/direct-engine.md

@@ -11,12 +11,15 @@ const instance = (name: keyof typeof ASSET_TUNING) => {
         castShadows: true
     });
     model.setLocalScale(t.scale, t.scale, t.scale);
-    model.setLocalPosition(0, t.y, 0);
-    model.setLocalEulerAngles(0, t.yaw, 0);
+    model.setLocalPosition(-t.center[0] * t.scale, t.y, -t.center[2] * t.scale);
     const root = new Entity(name);
-    root.addChild(model);
+    const yaw = new Entity(`${name}-yaw`);
+    yaw.setLocalEulerAngles(0, t.yaw, 0);
+    yaw.addChild(model);
+    root.addChild(yaw);
     return root;
 };
 ```
 
-Only position and rotate the returned root. Keep the calibration inside `instance()`.
+Only position and rotate the returned root. Keep the yaw, scale, and pivot compensation inside
+`instance()`.

package/skills/calibrate-model/references/react.md

@@ -15,13 +15,18 @@ const Model = ({ id, src, heading = 0, position = [0, 0, 0] }) => {
 
     return (
         <Entity name={id} position={position} rotation={[0, heading, 0]}>
-            <Entity position={[0, t.y, 0]} rotation={[0, t.yaw, 0]} scale={[t.scale, t.scale, t.scale]}>
-                <Render type="asset" asset={asset} />
+            <Entity rotation={[0, t.yaw, 0]}>
+                <Entity
+                    position={[-t.center[0] * t.scale, t.y, -t.center[2] * t.scale]}
+                    scale={[t.scale, t.scale, t.scale]}
+                >
+                    <Render type="asset" asset={asset} />
+                </Entity>
             </Entity>
         </Entity>
     );
 };
 ```
 
-Add project-specific prop types without changing the two-level transform structure. Keep hooks
+Add project-specific prop types without changing the three-level transform structure. Keep hooks
 unconditional and asset URLs stable.

package/skills/calibrate-model/references/web-components.md

@@ -7,13 +7,16 @@ Keep gameplay placement on the outer entity and calibration on a visual child:
     <pc-asset id="ship" src="/models/ship.glb"></pc-asset>
     <pc-scene>
         <pc-entity name="Ship" position="12 0 -4" rotation="0 90 0">
-            <pc-entity position="0 1.2 0" rotation="0 180 0" scale="0.9 0.9 0.9">
-                <pc-model asset="ship"></pc-model>
+            <pc-entity rotation="0 180 0">
+                <pc-entity position="-0.45 1.2 0.225" scale="0.9 0.9 0.9">
+                    <pc-model asset="ship"></pc-model>
+                </pc-entity>
             </pc-entity>
         </pc-entity>
     </pc-scene>
 </pc-app>
 ```
 
-Generate repeated markup from one `{ scale, y, yaw }` record per asset. Keep all vector attributes
-space-separated and use degrees for rotations.
+Generate repeated markup from one `{ scale, y, yaw, center }` record per asset. Calculate the visual
+position as `-center.x * scale, y, -center.z * scale`. Keep vector attributes space-separated and use
+degrees for rotations.

package/skills/configure-animation/references/web-components.md

@@ -1,13 +1,22 @@
 # Web Components projects
 
-`<pc-model>` already covers the simplest case without any script: when the loaded container has
-animations it adds an `anim` component and assigns `animations[0]` under the state name `animation`.
-It always takes the first clip and has no attribute for choosing another.
+Use `<pc-anim>` inside `<pc-model>` to animate the model hierarchy. Without `<pc-anim-clip>`
+children, it assigns every animation from the model's container by track name and starts the first
+clip. Select and cross-fade declaratively:
 
-There is no animation component beyond that. Put explicit clip selection, multiple clips, state
-graphs, and retargeting in a module-scoped Engine `Script`, load it with `<pc-asset>`, and attach it
-to the same `<pc-entity>` hierarchy as the rendered model using `<pc-scripts>` and `<pc-script>`.
+```html
+<pc-entity>
+    <pc-model asset="character">
+        <pc-anim clip="Idle" transition-time="0.2"></pc-anim>
+    </pc-model>
+</pc-entity>
+```
 
-Pass clip names and simple configuration as `<pc-script>` attributes. Use its `attributes` JSON
-attribute for nested state-graph configuration. Keep scale on a visual child `<pc-entity>`, not on
-skinned bones, and confirm playback after `pc-app` is ready.
+Add `<pc-anim-clip name="...">` children to declare a subset, rename states, set per-clip `loop` or
+`speed`, or source tracks through an explicit `asset`. Use `<pc-anim>` attributes for `activate`,
+`clip`, `speed`, and `transition-time`; its `play`, `pause`, and `transition` methods cover imperative
+playback.
+
+Use a module-scoped Engine `Script` only for state graphs, retargeting, or orchestration beyond that
+component contract. Keep scale on a visual child `<pc-entity>`, not on skinned bones, and confirm
+playback after `pc-app` is ready.

package/skills/find-examples/references/web-components.md

@@ -9,7 +9,7 @@ update logic. Drop its graphics device and application bootstrap because `<pc-ap
 - Express supported entities and components with `pc-*` elements.
 - Register assets as direct children of `<pc-app>` with `<pc-asset>`.
 - Put per-entity behavior in an Engine `Script` loaded through `<pc-asset>` and attached with
-  `<pc-scripts>` and `<pc-script>`.
+  `<pc-script>` and `<pc-script-instance>`.
 - Use `whenReady` for page-level glue or Engine APIs with no declarative element.
 - Fetch example assets from the same Engine tag as the source example.
 

package/skills/inspect-glb/SKILL.md

@@ -19,20 +19,27 @@ The output provides:
 - `groundOffset` for the model wrapper's local Y position;
 - `center` for the pivot offset from the geometry centre: a non-zero X or Z means the root's
   position is not where the model appears, and Y feeds grounding;
-- `boundsSource` for proving how precisely the bounds were measured;
+- `boundsSource` and `boundsPose` for proving how and at which pose the bounds were measured;
+- `requiresRuntimeCheck` for animated morphs, skins, and incomplete decoding;
 - `nodePaths`, `clips`, `joints`, and `animationTargets` for animation setup and rig comparison;
-- `skinned` to flag bind-pose bounds that need runtime confirmation.
+- `morphed`, `morphAnimated`, and `skinned` for pose-sensitive assets.
 
 ## Bounds precision
 
-`aabb`, `dims`, `center`, and `groundOffset` are decoded from actual vertex positions and transformed
-by each node's world matrix, so they are exact and can place meshes touching without a gap. Confirm
-`boundsSource` before relying on that precision:
+`aabb`, `dims`, `center`, and `groundOffset` are decoded from actual vertex positions, default morph
+weights, and each node's world matrix. Confirm both source and pose before relying on them:
 
-- `vertices` means every primitive was decoded and the bounds are exact.
+- `vertices` means every primitive was decoded and the bounds are exact for `boundsPose`.
 - `accessor-minmax` means at least one primitive could not be decoded, so its bounds fall back to the
   node-transformed local box. That over-estimates a mesh which does not fill its own box on a node
   rotated off-axis, by up to 41 percent for a 45-degree yaw. `boundsNotes` gives the cause.
+- `incomplete` means some visible default-pose geometry could not be measured; do not calibrate from
+  the reported bounds.
+- `null` means no usable bounds could be recovered.
+
+`static` and `default-morph` bounds describe visible geometry at its authored default pose. `bind`
+describes skinned vertices before animation. When `requiresRuntimeCheck` is true, confirm grounding
+and maximum animated extent in the running application even if `boundsSource` is `vertices`.
 
 Carry `boundsSource`, `aabb`, `dims`, `center`, and `groundOffset` into the asset tuning record.
 `groundOffset` seats the base in Y; `center.x` and `center.z` are the horizontal pivot offset that
@@ -41,28 +48,30 @@ authored pivot happens to be. Running the inspector alone is not placement evide
 broad-phase spacing, but cannot locate a non-planar support surface or attachment point. Use an
 authored mount point or confirm the support in the running application before placing another model.
 
-## Extract from any container with gltf-transform
+## Extract from compressed containers
 
-The bundled inspector decodes plain vertex buffers only. When a primitive is draco- or
-meshopt-compressed, sparse, or in an external buffer it falls back to `accessor-minmax` or reports
-nothing, and `boundsNotes` names the cause. Use gltf-transform as the precursor that normalizes any
-container into a plain GLB the inspector can then measure exactly. Decompress a scratch copy with the
-passes that would alter geometry or hierarchy disabled, and inspect the copy rather than shipping it:
+The bundled inspector decodes plain, interleaved, quantized, and sparse vertex buffers. For Draco,
+Meshopt, or external buffers, `boundsNotes` names the cause. Parse and rewrite a scratch copy with
+glTF Transform's lossless `copy` command, then inspect that copy rather than shipping it:
 
 ```sh
-npx @gltf-transform/cli optimize in.glb scratch.glb \
-  --compress false --simplify false --flatten false --join false
+npx --yes @gltf-transform/cli@4.4.2 copy in.glb scratch.glb
 node <skill-directory>/scripts/inspect.mjs scratch.glb
 ```
 
+`copy` preserves decoded vertex values, scenes, nodes, and materials while removing Draco and
+Meshopt compression. Existing lossy compression may already have quantized the source. Do not
+substitute `optimize`: it enables additional transforms unless each one is understood and disabled.
+
 The Engine has no `EXT_meshopt_compression` support, so a meshopt asset will not render as shipped.
 If it must appear in the scene, transcode it to an uncompressed GLB the same way — subject to the
 project's rules on modifying assets — so it both loads and measures.
 
-These exact bounds intentionally disagree with the Engine at runtime. `MeshInstance.aabb` transforms
-the mesh's declared local box, so for a node rotated off-axis it reads larger than the geometry
-really is. Treat that difference as expected and place from these bounds. A skinned mesh node's own
-transform is ignored here because glTF requires it; the Engine resolves to the same result.
+These geometry-fit bounds can intentionally disagree with the Engine's runtime culling AABB.
+`MeshInstance.aabb` transforms the declared local box and expands it conservatively for morph
+targets, so it can be larger than visible geometry. Place static models from exact inspected bounds;
+confirm morph and skin extremes at runtime. A skinned mesh node's own transform is ignored here
+because glTF requires it; the Engine resolves to the same result.
 
 Shortlist files first; do not dump an entire asset pack into context. Bounds cannot prove facing.
 glTF convention is +Z forward while PlayCanvas entities face -Z, and asset packs vary. Confirm each

package/skills/inspect-glb/scripts/inspect.mjs

@@ -2,11 +2,14 @@
 // zero-dep glb metadata inspector. bounds come from decoded vertex positions, not accessor min/max,
 // so a rotated node reports its true extent and models can be placed touching.
 import fs from 'node:fs';
+import { fileURLToPath } from 'node:url';
 
 const GLB_MAGIC = 0x46546c67;
 const JSON_CHUNK = 0x4e4f534a;
 const BIN_CHUNK = 0x004e4942;
 const IDENTITY = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
+const MAX_ACCESSOR_VALUES = 30_000_000;
+const TYPES = { SCALAR: 1, VEC2: 2, VEC3: 3, VEC4: 4, MAT2: 4, MAT3: 9, MAT4: 16 };
 
 // componentType -> byte size, signedness and normalized divisor (glTF 2.0 table 3.1 / 5.1)
 const COMPONENTS = {
@@ -18,6 +21,14 @@ const COMPONENTS = {
     5126: { size: 4, signed: true, norm: 1, read: (b, o) => b.readFloatLE(o) }
 };
 
+const tryCatch = (fn) => {
+    try {
+        return [null, fn()];
+    } catch (error) {
+        return [error];
+    }
+};
+
 const mul = (a, b) => {
     const o = new Array(16);
     for (let c = 0; c < 4; c++) {
@@ -73,41 +84,99 @@ const round = (v) => Math.round(v * 1e4) / 1e4 + 0;
 
 // buffer 0 of a GLB is the BIN chunk; other buffers are external files or data URIs
 const bufferBytes = (g, bin, index) => {
-    const uri = g.buffers?.[index]?.uri;
-    if (uri === undefined) return bin;
+    const buffer = g.buffers?.[index];
+    if (!buffer) return null;
+    const uri = buffer.uri;
+    if (uri === undefined) return index === 0 ? bin : null;
     const base64 = /^data:[^,]*;base64,(.*)$/s.exec(uri);
     return base64 ? Buffer.from(base64[1], 'base64') : null;
 };
 
-// widen min/max with every decoded POSITION transformed by matrix. returns null on success,
-// otherwise a reason the vertices could not be read so the caller can fall back and say so.
-const accumulate = (g, bin, accessor, matrix, min, max) => {
+const readAccessor = (g, bin, accessor, type = 'VEC3') => {
     const acc = g.accessors?.[accessor];
-    if (!acc) return 'no-position-accessor';
-    if (acc.sparse) return 'sparse-accessor';
-    if (acc.bufferView === undefined) return 'no-vertex-data';
+    if (!acc) return ['no-position-accessor'];
+    if (acc.bufferView === undefined && !acc.sparse) return ['no-vertex-data'];
     const comp = COMPONENTS[acc.componentType];
-    if (!comp || acc.type !== 'VEC3') return 'unsupported-accessor';
-    const view = g.bufferViews?.[acc.bufferView];
-    if (!view) return 'unsupported-accessor';
-    if (view.extensions?.EXT_meshopt_compression) return 'meshopt-compressed';
-    const bytes = bufferBytes(g, bin, view.buffer ?? 0);
-    if (!bytes) return 'external-buffer';
-    const stride = view.byteStride ?? comp.size * 3;
-    const base = (view.byteOffset ?? 0) + (acc.byteOffset ?? 0);
-    if (!acc.count || base + (acc.count - 1) * stride + comp.size * 3 > bytes.length) return 'truncated-buffer';
+    const size = TYPES[acc.type];
+    if (!comp || !size || acc.type !== type || !Number.isInteger(acc.count) || acc.count < 1) {
+        return ['unsupported-accessor'];
+    }
+    if (acc.count * size > MAX_ACCESSOR_VALUES) return ['accessor-too-large'];
+    const data = new Float32Array(acc.count * size);
     const scale = acc.normalized ? comp.norm : 1;
-    for (let v = 0; v < acc.count; v++) {
-        const o = base + v * stride;
-        let x = comp.read(bytes, o) / scale;
-        let y = comp.read(bytes, o + comp.size) / scale;
-        let z = comp.read(bytes, o + comp.size * 2) / scale;
-        if (acc.normalized && comp.signed) {
-            if (x < -1) x = -1;
-            if (y < -1) y = -1;
-            if (z < -1) z = -1;
+    const read = (bytes, offset) => {
+        const value = comp.read(bytes, offset) / scale;
+        return acc.normalized && comp.signed && value < -1 ? -1 : value;
+    };
+
+    if (acc.bufferView !== undefined) {
+        const view = g.bufferViews?.[acc.bufferView];
+        if (!view || !Number.isInteger(view.byteLength)) return ['unsupported-accessor'];
+        if (view.extensions?.EXT_meshopt_compression) return ['meshopt-compressed'];
+        const bytes = bufferBytes(g, bin, view.buffer ?? 0);
+        if (!bytes) return ['external-buffer'];
+        const width = comp.size * size;
+        const stride = view.byteStride ?? width;
+        const base = (view.byteOffset ?? 0) + (acc.byteOffset ?? 0);
+        const used = (acc.byteOffset ?? 0) + (acc.count - 1) * stride + width;
+        if (stride < width || base < 0 || used > view.byteLength || base + (acc.count - 1) * stride + width > bytes.length) {
+            return ['truncated-buffer'];
+        }
+        for (let i = 0; i < acc.count; i++) {
+            for (let k = 0; k < size; k++) data[i * size + k] = read(bytes, base + i * stride + k * comp.size);
+        }
+    }
+
+    if (acc.sparse) {
+        const sparse = acc.sparse;
+        const idx = sparse.indices;
+        const values = sparse.values;
+        const idxComp = idx && [5121, 5123, 5125].includes(idx.componentType) ? COMPONENTS[idx.componentType] : null;
+        const idxView = g.bufferViews?.[idx?.bufferView];
+        const valueView = g.bufferViews?.[values?.bufferView];
+        if (!Number.isInteger(sparse.count) || sparse.count < 1 || sparse.count > acc.count || !idxComp ||
+            !Number.isInteger(idxView?.byteLength) || !Number.isInteger(valueView?.byteLength)) {
+            return ['invalid-sparse-accessor'];
+        }
+        if (idxView.extensions?.EXT_meshopt_compression || valueView.extensions?.EXT_meshopt_compression) {
+            return ['meshopt-compressed'];
+        }
+        const idxBytes = bufferBytes(g, bin, idxView.buffer ?? 0);
+        const valueBytes = bufferBytes(g, bin, valueView.buffer ?? 0);
+        if (!idxBytes || !valueBytes) return ['external-buffer'];
+        const idxBase = (idxView.byteOffset ?? 0) + (idx.byteOffset ?? 0);
+        const valueBase = (valueView.byteOffset ?? 0) + (values.byteOffset ?? 0);
+        const valueWidth = comp.size * size;
+        const idxUsed = (idx.byteOffset ?? 0) + sparse.count * idxComp.size;
+        const valueUsed = (values.byteOffset ?? 0) + sparse.count * valueWidth;
+        if (idxBase < 0 || valueBase < 0 || idxUsed > idxView.byteLength || valueUsed > valueView.byteLength ||
+            idxBase + sparse.count * idxComp.size > idxBytes.length || valueBase + sparse.count * valueWidth > valueBytes.length) {
+            return ['truncated-buffer'];
+        }
+        let prev = -1;
+        for (let i = 0; i < sparse.count; i++) {
+            const index = idxComp.read(idxBytes, idxBase + i * idxComp.size);
+            if (index <= prev || index >= acc.count) return ['invalid-sparse-accessor'];
+            prev = index;
+            for (let k = 0; k < size; k++) {
+                data[index * size + k] = read(valueBytes, valueBase + i * valueWidth + k * comp.size);
+            }
+        }
+    }
+
+    return [null, data];
+};
+
+const accumulate = (data, matrix, min, max, morphs = []) => {
+    for (let i = 0; i < data.length; i += 3) {
+        let x = data[i];
+        let y = data[i + 1];
+        let z = data[i + 2];
+        for (const [weight, delta] of morphs) {
+            x += delta[i] * weight;
+            y += delta[i + 1] * weight;
+            z += delta[i + 2] * weight;
         }
-        // inlined to avoid allocating a vector per vertex on million-vertex meshes
         const px = matrix[0] * x + matrix[4] * y + matrix[8] * z + matrix[12];
         const py = matrix[1] * x + matrix[5] * y + matrix[9] * z + matrix[13];
         const pz = matrix[2] * x + matrix[6] * y + matrix[10] * z + matrix[14];
@@ -118,13 +187,12 @@ const accumulate = (g, bin, accessor, matrix, min, max) => {
         if (py > max[1]) max[1] = py;
         if (pz > max[2]) max[2] = pz;
     }
-    return null;
 };
 
 // loose fallback: bound the 8 corners of the accessor's local box. over-estimates a mesh that does
 // not fill its box when the node rotation is not a multiple of 90 degrees.
 const accumulateCorners = (acc, matrix, min, max) => {
-    if (!acc?.min || !acc?.max) return;
+    if (!acc?.min || !acc?.max) return false;
     for (let c = 0; c < 8; c++) {
         const point = xform(matrix, [
             c & 1 ? acc.max[0] : acc.min[0],
@@ -136,35 +204,55 @@ const accumulateCorners = (acc, matrix, min, max) => {
             if (point[k] > max[k]) max[k] = point[k];
         }
     }
+    return true;
 };
 
 export const inspectGlb = (buf) => {
     if (buf.length < 20 || buf.readUInt32LE(0) !== GLB_MAGIC || buf.readUInt32LE(16) !== JSON_CHUNK) {
         throw new Error('not a GLB (or JSON chunk missing)');
     }
+    if (buf.readUInt32LE(4) !== 2) throw new Error('unsupported GLB version');
+    if (buf.readUInt32LE(8) !== buf.length) throw new Error('invalid GLB length');
     const jsonLength = buf.readUInt32LE(12);
+    if (20 + jsonLength > buf.length) throw new Error('invalid JSON chunk length');
     const g = JSON.parse(buf.toString('utf8', 20, 20 + jsonLength));
     const binAt = 20 + jsonLength;
-    const bin =
-        binAt + 8 <= buf.length && buf.readUInt32LE(binAt + 4) === BIN_CHUNK
-            ? buf.subarray(binAt + 8, binAt + 8 + buf.readUInt32LE(binAt))
-            : null;
+    let bin = null;
+    if (binAt < buf.length) {
+        if (binAt + 8 > buf.length || buf.readUInt32LE(binAt + 4) !== BIN_CHUNK) {
+            throw new Error('invalid BIN chunk');
+        }
+        const length = buf.readUInt32LE(binAt);
+        if (binAt + 8 + length !== buf.length) throw new Error('invalid BIN chunk length');
+        bin = buf.subarray(binAt + 8);
+    }
     const nodes = g.nodes ?? [];
     const nodeName = (i) => nodes[i]?.name ?? `node_${i}`;
     const parents = new Array(nodes.length).fill(-1);
     for (let i = 0; i < nodes.length; i++) {
-        for (const child of nodes[i].children ?? []) parents[child] = i;
+        for (const child of nodes[i].children ?? []) {
+            if (!Number.isInteger(child) || !nodes[child] || parents[child] !== -1) throw new Error('invalid node graph');
+            parents[child] = i;
+        }
     }
     const nodePath = (i) => {
         const names = [];
-        for (; i >= 0; i = parents[i]) names.unshift(nodeName(i));
+        const seen = new Set();
+        for (; i >= 0; i = parents[i]) {
+            if (seen.has(i)) throw new Error('invalid node graph');
+            seen.add(i);
+            names.unshift(nodeName(i));
+        }
         return names.join('/');
     };
     const children = new Set(nodes.flatMap((n) => n.children ?? []));
     const roots = g.scenes?.[g.scene ?? 0]?.nodes ?? nodes.map((_, i) => i).filter((i) => !children.has(i));
 
     const world = new Array(nodes.length);
+    const seen = new Set();
     const walk = (i, parent) => {
+        if (!Number.isInteger(i) || !nodes[i] || seen.has(i)) throw new Error('invalid node graph');
+        seen.add(i);
         const n = nodes[i];
         const local = n.matrix ?? compose(n.translation ?? [0, 0, 0], n.rotation ?? [0, 0, 0, 1], n.scale ?? [1, 1, 1]);
         world[i] = mul(parent, local);
@@ -176,28 +264,67 @@ export const inspectGlb = (buf) => {
     const max = [-Infinity, -Infinity, -Infinity];
     const notes = new Set();
     let meshNodes = 0;
+    let morphed = false;
+    let fallback = false;
+    let incomplete = false;
     for (let i = 0; i < nodes.length; i++) {
         if (nodes[i].mesh === undefined || !world[i]) continue;
         meshNodes++;
         // glTF 2.0: "the transform of the skinned mesh node MUST be ignored" - joints drive the pose
         const matrix = nodes[i].skin === undefined ? world[i] : IDENTITY;
-        for (const prim of g.meshes?.[nodes[i].mesh]?.primitives ?? []) {
-            const note = prim.extensions?.KHR_draco_mesh_compression
-                ? 'draco-compressed'
-                : accumulate(g, bin, prim.attributes?.POSITION, matrix, min, max);
-            if (!note) continue;
-            notes.add(note);
-            accumulateCorners(g.accessors?.[prim.attributes?.POSITION], matrix, min, max);
+        const mesh = g.meshes?.[nodes[i].mesh];
+        for (const prim of mesh?.primitives ?? []) {
+            const [error, data] = prim.extensions?.KHR_draco_mesh_compression
+                ? ['draco-compressed']
+                : readAccessor(g, bin, prim.attributes?.POSITION);
+            if (error) {
+                notes.add(error);
+                if (error === 'meshopt-compressed' || !accumulateCorners(g.accessors?.[prim.attributes?.POSITION], matrix, min, max)) {
+                    incomplete = true;
+                } else {
+                    fallback = true;
+                }
+                continue;
+            }
+            const morphs = [];
+            if (prim.targets?.length) {
+                morphed = true;
+                const weights = nodes[i].weights ?? mesh.weights ?? [];
+                for (let k = 0; k < prim.targets.length; k++) {
+                    const weight = weights[k] ?? 0;
+                    if (!Number.isFinite(weight)) {
+                        notes.add('invalid-morph-weight');
+                        incomplete = true;
+                        continue;
+                    }
+                    const accessor = prim.targets[k].POSITION;
+                    if (!weight || accessor === undefined) continue;
+                    const [morphError, delta] = readAccessor(g, bin, accessor);
+                    if (morphError || delta.length !== data.length) {
+                        notes.add(`morph-${morphError ?? 'accessor-size'}`);
+                        incomplete = true;
+                        continue;
+                    }
+                    morphs.push([weight, delta]);
+                }
+            }
+            accumulate(data, matrix, min, max, morphs);
         }
     }
 
     const ok = min[0] !== Infinity;
+    const morphAnimated = (g.animations ?? []).some((a) =>
+        (a.channels ?? []).some((c) => c.target?.path === 'weights')
+    );
+    const skinned = !!g.skins?.length;
     return {
         aabb: ok ? { min: min.map(round), max: max.map(round) } : null,
         dims: ok ? max.map((v, i) => round(v - min[i])) : null,
         center: ok ? max.map((v, i) => round((v + min[i]) / 2)) : null,
         groundOffset: ok ? round(-min[1]) : null,
-        boundsSource: ok ? (notes.size ? 'accessor-minmax' : 'vertices') : null,
+        boundsSource: ok ? (incomplete ? 'incomplete' : fallback ? 'accessor-minmax' : 'vertices') : null,
+        boundsPose: skinned ? 'bind' : morphed ? 'default-morph' : 'static',
+        requiresRuntimeCheck: skinned || morphAnimated || notes.size > 0,
         ...(notes.size ? { boundsNotes: [...notes].sort() } : {}),
         nodes: nodes.length,
         nodePaths: nodes.map((_, i) => nodePath(i)).sort(),
@@ -217,11 +344,15 @@ export const inspectGlb = (buf) => {
                     )
             )
         ].sort(),
-        skinned: !!g.skins?.length
+        morphed,
+        morphAnimated,
+        skinned
     };
 };
 
-if (import.meta.main ?? import.meta.filename === process.argv[1]) {
+const main = import.meta.main ?? (process.argv[1] &&
+    fs.realpathSync(fileURLToPath(import.meta.url)) === fs.realpathSync(process.argv[1]));
+if (main) {
     const files = process.argv.slice(2);
     if (!files.length) {
         console.error('usage: node inspect.mjs <file.glb> [more.glb ...]');
@@ -229,11 +360,9 @@ if (import.meta.main ?? import.meta.filename === process.argv[1]) {
     }
     // report per-file failures so one unreadable file cannot discard a whole glob
     const out = files.map((file) => {
-        try {
-            return { file, ...inspectGlb(fs.readFileSync(file)) };
-        } catch (e) {
-            return { file, error: e.message };
-        }
+        const [error, result] = tryCatch(() => inspectGlb(fs.readFileSync(file)));
+        return error ? { file, error: error instanceof Error ? error.message : String(error) } : { file, ...result };
     });
+    if (out.some((result) => result.error)) process.exitCode = 1;
     console.log(JSON.stringify(out.length === 1 ? out[0] : out, null, 2));
 }

package/skills/reuse-scripts/references/web-components.md

@@ -8,9 +8,9 @@ Expose an Engine script as an ES module and register it as an asset:
     <pc-scene>
         <pc-entity name="Camera">
             <pc-camera></pc-camera>
-            <pc-scripts>
-                <pc-script name="cameraControls" move-speed="4"></pc-script>
-            </pc-scripts>
+            <pc-script>
+                <pc-script-instance name="cameraControls" move-speed="4"></pc-script-instance>
+            </pc-script>
         </pc-entity>
     </pc-scene>
 </pc-app>

package/templates/web-components/base/README.md

@@ -39,9 +39,9 @@ so `document.querySelector` reaches them and `setAttribute` changes them.
 
 `src/main.ts` covers the two things HTML alone cannot do:
 
-- **Attaching engine scripts.** `<pc-script name="...">` resolves scripts that `<pc-asset>` fetched at
-  runtime. Scripts imported through the bundler — like `CameraControls` and `Grid` here — are attached
-  through the entity instead, reached via `whenReady()` and the element's `.entity` property.
+- **Attaching engine scripts.** `<pc-script-instance name="...">` resolves scripts that `<pc-asset>`
+  fetched at runtime. Scripts imported through the bundler — like `CameraControls` and `Grid` here — are
+  attached through the entity instead, reached via `whenReady()` and the element's `.entity` property.
 - **Responding to pointer input.** `<pc-app>` picks whatever is under the pointer and dispatches an
   ordinary `PointerEvent` on the `<pc-entity>` it hit, so `addEventListener('pointerup', ...)` works on a
   3D entity exactly as it would on a `<button>`. Events are only generated for entities that have a

package/templates/web-components/base/package.json

@@ -15,7 +15,7 @@
         "typecheck": "tsc --noEmit"
     },
     "dependencies": {
-        "@playcanvas/web-components": "^0.15.0",
+        "@playcanvas/web-components": "^0.17.0",
         "playcanvas": "^2.21.4"
     },
     "devDependencies": {

package/templates/web-components/first-person-controller/index.html

@@ -14,12 +14,12 @@
             <pc-material id="green-material" diffuse="#2e6638" emissive="#09140b" gloss="0.2"></pc-material>
             <pc-material id="wood-material" diffuse="#7a451a" emissive="#180e05" gloss="0.2"></pc-material>
             <pc-material id="metal-material" diffuse="#475461" emissive="#0e1113" gloss="0.5"></pc-material>
-            <pc-module
+            <pc-wasm
                 name="Ammo"
                 glue="/ammo/ammo.wasm.js"
                 wasm="/ammo/ammo.wasm.wasm"
                 fallback="/ammo/ammo.js"
-            ></pc-module>
+            ></pc-wasm>
             <pc-scene>
                 <pc-entity name="light" rotation="50 30 0"
                     ><pc-light
@@ -36,121 +36,121 @@
                 <pc-entity name="floor" position="0 -0.1 0" scale="18 0.2 18"
                     ><pc-render type="box" material="floor-material"></pc-render
                     ><pc-collision type="box" half-extents="9 0.1 9"></pc-collision
-                    ><pc-rigidbody type="static"></pc-rigidbody
+                    ><pc-rigid-body type="static"></pc-rigid-body
                 ></pc-entity>
                 <pc-entity name="back-wall" position="0 1.5 -9" scale="18 3 0.3"
                     ><pc-render type="box" material="wall-material"></pc-render
                     ><pc-collision type="box" half-extents="9 1.5 0.15"></pc-collision
-                    ><pc-rigidbody type="static"></pc-rigidbody
+                    ><pc-rigid-body type="static"></pc-rigid-body
                 ></pc-entity>
                 <pc-entity name="front-wall" position="0 1.5 9" scale="18 3 0.3"
                     ><pc-render type="box" material="wall-material"></pc-render
                     ><pc-collision type="box" half-extents="9 1.5 0.15"></pc-collision
-                    ><pc-rigidbody type="static"></pc-rigidbody
+                    ><pc-rigid-body type="static"></pc-rigid-body
                 ></pc-entity>
                 <pc-entity name="left-wall" position="-9 1.5 0" scale="0.3 3 18"
                     ><pc-render type="box" material="wall-material"></pc-render
                     ><pc-collision type="box" half-extents="0.15 1.5 9"></pc-collision
-                    ><pc-rigidbody type="static"></pc-rigidbody
+                    ><pc-rigid-body type="static"></pc-rigid-body
                 ></pc-entity>
                 <pc-entity name="right-wall" position="9 1.5 0" scale="0.3 3 18"
                     ><pc-render type="box" material="wall-material"></pc-render
                     ><pc-collision type="box" half-extents="0.15 1.5 9"></pc-collision
-                    ><pc-rigidbody type="static"></pc-rigidbody
+                    ><pc-rigid-body type="static"></pc-rigid-body
                 ></pc-entity>
                 <pc-entity name="blue-crate" position="-2 0.75 -3" scale="1.5 1.5 1.5"
                     ><pc-render type="box" material="blue-material"></pc-render
                     ><pc-collision type="box" half-extents="0.75 0.75 0.75"></pc-collision
-                    ><pc-rigidbody type="static"></pc-rigidbody
+                    ><pc-rigid-body type="static"></pc-rigid-body
                 ></pc-entity>
                 <pc-entity name="green-crate" position="3 0.5 1" scale="2.5 1 1"
                     ><pc-render type="box" material="green-material"></pc-render
                     ><pc-collision type="box" half-extents="1.25 0.5 0.5"></pc-collision
-                    ><pc-rigidbody type="static"></pc-rigidbody
+                    ><pc-rigid-body type="static"></pc-rigid-body
                 ></pc-entity>
                 <pc-entity name="cargo-left-0" position="-5.5 0.75 -5.5" scale="2 1.5 2"
                     ><pc-render type="box" material="wood-material"></pc-render
                     ><pc-collision type="box" half-extents="1 0.75 1"></pc-collision
-                    ><pc-rigidbody type="static"></pc-rigidbody
+                    ><pc-rigid-body type="static"></pc-rigid-body
                 ></pc-entity>
                 <pc-entity name="cargo-left-1" position="-5.5 2 -5.5" scale="1.5 1 1.5"
                     ><pc-render type="box" material="blue-material"></pc-render
                     ><pc-collision type="box" half-extents="0.75 0.5 0.75"></pc-collision
-                    ><pc-rigidbody type="static"></pc-rigidbody
+                    ><pc-rigid-body type="static"></pc-rigid-body
                 ></pc-entity>
                 <pc-entity name="cargo-right-0" position="5.3 0.6 -4.8" scale="2.4 1.2 2"
                     ><pc-render type="box" material="green-material"></pc-render
                     ><pc-collision type="box" half-extents="1.2 0.6 1"></pc-collision
-                    ><pc-rigidbody type="static"></pc-rigidbody
+                    ><pc-rigid-body type="static"></pc-rigid-body
                 ></pc-entity>
                 <pc-entity name="cargo-right-1" position="5.3 1.7 -4.8" scale="1.5 1 1.5"
                     ><pc-render type="box" material="wood-material"></pc-render
                     ><pc-collision type="box" half-extents="0.75 0.5 0.75"></pc-collision
-                    ><pc-rigidbody type="static"></pc-rigidbody
+                    ><pc-rigid-body type="static"></pc-rigid-body
                 ></pc-entity>
                 <pc-entity name="cargo-center" position="0 0.6 -6.5" scale="2.2 1.2 1.8"
                     ><pc-render type="box" material="blue-material"></pc-render
                     ><pc-collision type="box" half-extents="1.1 0.6 0.9"></pc-collision
-                    ><pc-rigidbody type="static"></pc-rigidbody
+                    ><pc-rigid-body type="static"></pc-rigid-body
                 ></pc-entity>
                 <pc-entity name="shelf-left-post-0" position="-6.8 1.4 -3.5" scale="0.25 2.8 0.25"
                     ><pc-render type="box" material="metal-material"></pc-render
                     ><pc-collision type="box" half-extents="0.125 1.4 0.125"></pc-collision
-                    ><pc-rigidbody type="static"></pc-rigidbody
+                    ><pc-rigid-body type="static"></pc-rigid-body
                 ></pc-entity>
                 <pc-entity name="shelf-left-post-1" position="-6.8 1.4 0" scale="0.25 2.8 0.25"
                     ><pc-render type="box" material="metal-material"></pc-render
                     ><pc-collision type="box" half-extents="0.125 1.4 0.125"></pc-collision
-                    ><pc-rigidbody type="static"></pc-rigidbody
+                    ><pc-rigid-body type="static"></pc-rigid-body
                 ></pc-entity>
                 <pc-entity name="shelf-left-post-2" position="-6.8 1.4 3.5" scale="0.25 2.8 0.25"
                     ><pc-render type="box" material="metal-material"></pc-render
                     ><pc-collision type="box" half-extents="0.125 1.4 0.125"></pc-collision
-                    ><pc-rigidbody type="static"></pc-rigidbody
+                    ><pc-rigid-body type="static"></pc-rigid-body
                 ></pc-entity>
                 <pc-entity name="shelf-right-post-0" position="6.8 1.4 -3.5" scale="0.25 2.8 0.25"
                     ><pc-render type="box" material="metal-material"></pc-render
                     ><pc-collision type="box" half-extents="0.125 1.4 0.125"></pc-collision
-                    ><pc-rigidbody type="static"></pc-rigidbody
+                    ><pc-rigid-body type="static"></pc-rigid-body
                 ></pc-entity>
                 <pc-entity name="shelf-right-post-1" position="6.8 1.4 0" scale="0.25 2.8 0.25"
                     ><pc-render type="box" material="metal-material"></pc-render
                     ><pc-collision type="box" half-extents="0.125 1.4 0.125"></pc-collision
-                    ><pc-rigidbody type="static"></pc-rigidbody
+                    ><pc-rigid-body type="static"></pc-rigid-body
                 ></pc-entity>
                 <pc-entity name="shelf-right-post-2" position="6.8 1.4 3.5" scale="0.25 2.8 0.25"
                     ><pc-render type="box" material="metal-material"></pc-render
                     ><pc-collision type="box" half-extents="0.125 1.4 0.125"></pc-collision
-                    ><pc-rigidbody type="static"></pc-rigidbody
+                    ><pc-rigid-body type="static"></pc-rigid-body
                 ></pc-entity>
                 <pc-entity name="shelf-left-low" position="-6.8 0.65 0" scale="1.1 0.18 7.5"
                     ><pc-render type="box" material="metal-material"></pc-render
                     ><pc-collision type="box" half-extents="0.55 0.09 3.75"></pc-collision
-                    ><pc-rigidbody type="static"></pc-rigidbody
+                    ><pc-rigid-body type="static"></pc-rigid-body
                 ></pc-entity>
                 <pc-entity name="shelf-left-high" position="-6.8 2.1 0" scale="1.1 0.18 7.5"
                     ><pc-render type="box" material="metal-material"></pc-render
                     ><pc-collision type="box" half-extents="0.55 0.09 3.75"></pc-collision
-                    ><pc-rigidbody type="static"></pc-rigidbody
+                    ><pc-rigid-body type="static"></pc-rigid-body
                 ></pc-entity>
                 <pc-entity name="shelf-right-low" position="6.8 0.65 0" scale="1.1 0.18 7.5"
                     ><pc-render type="box" material="metal-material"></pc-render
                     ><pc-collision type="box" half-extents="0.55 0.09 3.75"></pc-collision
-                    ><pc-rigidbody type="static"></pc-rigidbody
+                    ><pc-rigid-body type="static"></pc-rigid-body
                 ></pc-entity>
                 <pc-entity name="shelf-right-high" position="6.8 2.1 0" scale="1.1 0.18 7.5"
                     ><pc-render type="box" material="metal-material"></pc-render
                     ><pc-collision type="box" half-extents="0.55 0.09 3.75"></pc-collision
-                    ><pc-rigidbody type="static"></pc-rigidbody
+                    ><pc-rigid-body type="static"></pc-rigid-body
                 ></pc-entity>
                 <pc-entity name="pallet" position="-2.5 0.15 2.5" scale="3 0.3 2"
                     ><pc-render type="box" material="wood-material"></pc-render
                     ><pc-collision type="box" half-extents="1.5 0.15 1"></pc-collision
-                    ><pc-rigidbody type="static"></pc-rigidbody
+                    ><pc-rigid-body type="static"></pc-rigid-body
                 ></pc-entity>
                 <pc-entity name="player" position="0 1 5">
                     <pc-collision type="capsule" radius="0.45" height="1.8"></pc-collision>
-                    <pc-rigidbody type="dynamic" mass="80" angular-factor="0 0 0"></pc-rigidbody>
+                    <pc-rigid-body type="dynamic" mass="80" angular-factor="0 0 0"></pc-rigid-body>
                     <pc-entity name="camera" position="0 0.65 0"
                         ><pc-camera clear-color="#61a3db" fov="80"></pc-camera
                     ></pc-entity>

package/templates/web-components/first-person-controller/src/main.ts

@@ -6,7 +6,7 @@ import './starter.css';
 
 await Promise.all([
     whenReady('pc-entity[name="player"] > pc-collision'),
-    whenReady('pc-entity[name="player"] > pc-rigidbody')
+    whenReady('pc-entity[name="player"] > pc-rigid-body')
 ]);
 const [player, camera] = await Promise.all([
     whenReady<EntityElement>('pc-entity[name="player"]'),

package/templates/web-components/interactive-sphere/src/main.ts

@@ -47,7 +47,7 @@ if (skyboxLayer) {
 }
 
 // Engine scripts are resolved by the bundler, so they are attached through the entity rather than
-// with <pc-script name="...">, which only resolves scripts fetched at runtime by <pc-asset>
+// with <pc-script-instance name="...">, which only resolves scripts fetched at runtime by <pc-asset>
 const camera = cameraComponent.closestEntity;
 camera?.entity?.addComponent('script');
 camera?.entity?.script?.create(CameraControls, { properties: { sceneSize: 3 } });

package/templates/web-components/model-viewer/src/main.ts

@@ -14,7 +14,7 @@ const [cameraComponent, sky] = await Promise.all([
 ]);
 
 // Engine scripts are resolved by the bundler, so they are attached through the entity rather than
-// with <pc-script name="...">, which only resolves scripts fetched at runtime by <pc-asset>
+// with <pc-script-instance name="...">, which only resolves scripts fetched at runtime by <pc-asset>
 const camera = cameraComponent.closestEntity;
 camera?.entity?.addComponent('script');
 camera?.entity?.script?.create(CameraControls, { properties: { sceneSize: 2.5 } });

package/templates/web-components/physics-playground/index.html

@@ -8,12 +8,12 @@
     </head>
     <body>
         <pc-app>
-            <pc-module
+            <pc-wasm
                 name="Ammo"
                 glue="/ammo/ammo.wasm.js"
                 wasm="/ammo/ammo.wasm.wasm"
                 fallback="/ammo/ammo.js"
-            ></pc-module>
+            ></pc-wasm>
             <pc-material id="floor-material" diffuse="#2e333d" gloss="0.2"></pc-material>
             <pc-material id="cyan-material" diffuse="#29ade6" gloss="0.45"></pc-material>
             <pc-material id="coral-material" diffuse="#f25738" gloss="0.45"></pc-material>
@@ -34,7 +34,7 @@
                 <pc-entity name="floor" position="0 -0.1 0" scale="10 0.2 10"
                     ><pc-render type="box" material="floor-material"></pc-render
                     ><pc-collision type="box" half-extents="5 0.1 5"></pc-collision
-                    ><pc-rigidbody type="static"></pc-rigidbody
+                    ><pc-rigid-body type="static"></pc-rigid-body
                 ></pc-entity>
                 <pc-entity id="bodies"></pc-entity>
             </pc-scene>

package/templates/web-components/physics-playground/src/main.ts

@@ -18,7 +18,7 @@ const spawn = () => {
     const type = TYPES[i % TYPES.length];
     bodies.insertAdjacentHTML(
         'beforeend',
-        `<pc-entity data-body position="${((i % 4) - 1.5) * 1.1} ${0.7 + Math.floor(i / 4) * 1.1} ${(Math.floor(i / 4) - 1) * 1.4}" rotation="${i * 13} ${i * 29} 0" scale="${SCALES[i % SCALES.length]}"><pc-render type="${type}" material="${MATERIALS[i % MATERIALS.length]}"></pc-render><pc-collision type="${type}"></pc-collision><pc-rigidbody type="dynamic" mass="1" restitution="0.35"></pc-rigidbody></pc-entity>`
+        `<pc-entity data-body position="${((i % 4) - 1.5) * 1.1} ${0.7 + Math.floor(i / 4) * 1.1} ${(Math.floor(i / 4) - 1) * 1.4}" rotation="${i * 13} ${i * 29} 0" scale="${SCALES[i % SCALES.length]}"><pc-render type="${type}" material="${MATERIALS[i % MATERIALS.length]}"></pc-render><pc-collision type="${type}"></pc-collision><pc-rigid-body type="dynamic" mass="1" restitution="0.35"></pc-rigid-body></pc-entity>`
     );
 };
 const reset = () => {

package/templates/web-components/product-configurator/src/main.ts

@@ -58,8 +58,10 @@ ground.addComponent('render', {
     receiveShadows: true
 });
 
+// The element's entity is a host whose transform composes with the GLB's authored root rotation
+// (a -90° X up-axis fix), so only the yaw is set here
 const entity = model.entity!;
-entity.setLocalEulerAngles(-90, -25, 0);
+entity.setLocalEulerAngles(0, -25, 0);
 entity.root.syncHierarchy();
 const meshes = (entity.findComponents('render') as RenderComponent[]).flatMap((render) => render.meshInstances);
 const bounds = meshes[0].aabb.clone();

package/templates/web-components/spinning-cube/src/main.ts

@@ -14,7 +14,7 @@ class Rotate extends Script {
 }
 
 // Engine scripts are resolved by the bundler, so they are attached through the entity rather than
-// with <pc-script name="...">, which only resolves scripts fetched at runtime by <pc-asset>
+// with <pc-script-instance name="...">, which only resolves scripts fetched at runtime by <pc-asset>
 const cube = await whenReady<EntityElement>('pc-entity[name="cube"]');
 
 cube.entity?.addComponent('script');

package/templates/web-components/splat-viewer/src/main.ts

@@ -9,7 +9,7 @@ import './style.css';
 const cameraComponent = await whenReady('pc-camera');
 
 // Engine scripts are resolved by the bundler, so they are attached through the entity rather than
-// with <pc-script name="...">, which only resolves scripts fetched at runtime by <pc-asset>
+// with <pc-script-instance name="...">, which only resolves scripts fetched at runtime by <pc-asset>
 const camera = cameraComponent.closestEntity;
 camera?.entity?.addComponent('script');
 camera?.entity?.script?.create(CameraControls, { properties: { sceneSize: 2 } });

package/templates/web-components/third-person-controller/index.html

@@ -16,12 +16,12 @@
             <pc-material id="shirt-material" diffuse="#268bd2"></pc-material>
             <pc-material id="skin-material" diffuse="#c78759"></pc-material>
             <pc-material id="pants-material" diffuse="#2e4a85"></pc-material>
-            <pc-module
+            <pc-wasm
                 name="Ammo"
                 glue="/ammo/ammo.wasm.js"
                 wasm="/ammo/ammo.wasm.wasm"
                 fallback="/ammo/ammo.js"
-            ></pc-module>
+            ></pc-wasm>
             <pc-scene>
                 <pc-entity name="camera" position="0 3 6"><pc-camera clear-color="#7ab8e6"></pc-camera></pc-entity>
                 <pc-entity name="light" rotation="45 30 0"
@@ -36,32 +36,32 @@
                 <pc-entity name="ground" position="0 -0.1 0" scale="20 0.2 20"
                     ><pc-render type="box" material="ground-material"></pc-render
                     ><pc-collision type="box" half-extents="10 0.1 10"></pc-collision
-                    ><pc-rigidbody type="static"></pc-rigidbody
+                    ><pc-rigid-body type="static"></pc-rigid-body
                 ></pc-entity>
                 <pc-entity name="block-0" position="-4.5 0.5 -3.5" scale="2.4 1 2.4"
                     ><pc-render type="box" material="block-material"></pc-render
                     ><pc-collision type="box" half-extents="1.2 0.5 1.2"></pc-collision
-                    ><pc-rigidbody type="static"></pc-rigidbody
+                    ><pc-rigid-body type="static"></pc-rigid-body
                 ></pc-entity>
                 <pc-entity name="block-1" position="4.2 0.5 -2.8" rotation="0 25 0" scale="2.4 1 2.4"
                     ><pc-render type="box" material="block-material"></pc-render
                     ><pc-collision type="box" half-extents="1.2 0.5 1.2"></pc-collision
-                    ><pc-rigidbody type="static"></pc-rigidbody
+                    ><pc-rigid-body type="static"></pc-rigid-body
                 ></pc-entity>
                 <pc-entity name="block-2" position="-3.7 0.5 3.2" rotation="0 50 0" scale="2.4 1 2.4"
                     ><pc-render type="box" material="block-material"></pc-render
                     ><pc-collision type="box" half-extents="1.2 0.5 1.2"></pc-collision
-                    ><pc-rigidbody type="static"></pc-rigidbody
+                    ><pc-rigid-body type="static"></pc-rigid-body
                 ></pc-entity>
                 <pc-entity name="block-3" position="3.8 0.5 3.6" rotation="0 75 0" scale="2.4 1 2.4"
                     ><pc-render type="box" material="block-material"></pc-render
                     ><pc-collision type="box" half-extents="1.2 0.5 1.2"></pc-collision
-                    ><pc-rigidbody type="static"></pc-rigidbody
+                    ><pc-rigid-body type="static"></pc-rigid-body
                 ></pc-entity>
                 <pc-entity name="tree-0-trunk" position="-7 0.99 -6" scale="0.418 1.98 0.418"
                     ><pc-render type="box" material="wood-material"></pc-render
                     ><pc-collision type="box" half-extents="0.209 0.99 0.209"></pc-collision
-                    ><pc-rigidbody type="static"></pc-rigidbody
+                    ><pc-rigid-body type="static"></pc-rigid-body
                 ></pc-entity>
                 <pc-entity name="tree-0-crown-0" position="-7 2.09 -6" scale="2.31 1.98 2.31"
                     ><pc-render type="cone" material="leaves-material"></pc-render
@@ -75,7 +75,7 @@
                 <pc-entity name="tree-1-trunk" position="6.5 1.125 -6.5" scale="0.475 2.25 0.475"
                     ><pc-render type="box" material="wood-material"></pc-render
                     ><pc-collision type="box" half-extents="0.2375 1.125 0.2375"></pc-collision
-                    ><pc-rigidbody type="static"></pc-rigidbody
+                    ><pc-rigid-body type="static"></pc-rigid-body
                 ></pc-entity>
                 <pc-entity name="tree-1-crown-0" position="6.5 2.375 -6.5" scale="2.625 2.25 2.625"
                     ><pc-render type="cone" material="leaves-material"></pc-render
@@ -89,7 +89,7 @@
                 <pc-entity name="tree-2-trunk" position="-7.5 0.81 5" scale="0.342 1.62 0.342"
                     ><pc-render type="box" material="wood-material"></pc-render
                     ><pc-collision type="box" half-extents="0.171 0.81 0.171"></pc-collision
-                    ><pc-rigidbody type="static"></pc-rigidbody
+                    ><pc-rigid-body type="static"></pc-rigid-body
                 ></pc-entity>
                 <pc-entity name="tree-2-crown-0" position="-7.5 1.71 5" scale="1.89 1.62 1.89"
                     ><pc-render type="cone" material="leaves-material"></pc-render
@@ -103,7 +103,7 @@
                 <pc-entity name="tree-3-trunk" position="7 1.035 5.5" scale="0.437 2.07 0.437"
                     ><pc-render type="box" material="wood-material"></pc-render
                     ><pc-collision type="box" half-extents="0.2185 1.035 0.2185"></pc-collision
-                    ><pc-rigidbody type="static"></pc-rigidbody
+                    ><pc-rigid-body type="static"></pc-rigid-body
                 ></pc-entity>
                 <pc-entity name="tree-3-crown-0" position="7 2.185 5.5" scale="2.415 2.07 2.415"
                     ><pc-render type="cone" material="leaves-material"></pc-render
@@ -117,7 +117,7 @@
                 <pc-entity name="tree-4-trunk" position="-2.2 0.765 -8" scale="0.323 1.53 0.323"
                     ><pc-render type="box" material="wood-material"></pc-render
                     ><pc-collision type="box" half-extents="0.1615 0.765 0.1615"></pc-collision
-                    ><pc-rigidbody type="static"></pc-rigidbody
+                    ><pc-rigid-body type="static"></pc-rigid-body
                 ></pc-entity>
                 <pc-entity name="tree-4-crown-0" position="-2.2 1.615 -8" scale="1.785 1.53 1.785"
                     ><pc-render type="cone" material="leaves-material"></pc-render
@@ -131,16 +131,16 @@
                 <pc-entity name="fallen-log" position="0 0.35 6" scale="3.8 0.7 0.7"
                     ><pc-render type="box" material="wood-material"></pc-render
                     ><pc-collision type="box" half-extents="1.9 0.35 0.35"></pc-collision
-                    ><pc-rigidbody type="static"></pc-rigidbody
+                    ><pc-rigid-body type="static"></pc-rigid-body
                 ></pc-entity>
                 <pc-entity name="stump" position="-1.8 0.4 -2.2" scale="0.9 0.8 0.9"
                     ><pc-render type="box" material="wood-material"></pc-render
                     ><pc-collision type="box" half-extents="0.45 0.4 0.45"></pc-collision
-                    ><pc-rigidbody type="static"></pc-rigidbody
+                    ><pc-rigid-body type="static"></pc-rigid-body
                 ></pc-entity>
                 <pc-entity name="player" position="0 1.1 0">
                     <pc-collision type="capsule" radius="0.5" height="2.4" linear-offset="0 0.1 0"></pc-collision>
-                    <pc-rigidbody type="dynamic" mass="70" angular-factor="0 0 0"></pc-rigidbody>
+                    <pc-rigid-body type="dynamic" mass="70" angular-factor="0 0 0"></pc-rigid-body>
                     <pc-entity name="character" position="0 0.2 0">
                         <pc-entity name="body" scale="0.56 0.88 0.38"
                             ><pc-render type="box" material="shirt-material"></pc-render

package/templates/web-components/third-person-controller/src/main.ts

@@ -6,7 +6,7 @@ import './starter.css';
 
 await Promise.all([
     whenReady('pc-entity[name="player"] > pc-collision'),
-    whenReady('pc-entity[name="player"] > pc-rigidbody')
+    whenReady('pc-entity[name="player"] > pc-rigid-body')
 ]);
 const [player, camera, model] = await Promise.all([
     whenReady<EntityElement>('pc-entity[name="player"]'),