@viamrobotics/motion-tools 1.16.0 → 1.18.0

package/dist/loaders/pcd/worker.js

@@ -15,8 +15,8 @@ globalThis.onmessage = async (event) => {
              */
             const positions = pcd.geometry.attributes.position?.array ??
                 new Float32Array(0);
-            const colorsFloat = pcd.geometry.attributes.color?.array ?? null;
-            const colors = colorsFloat ? new Uint8Array(colorsFloat.length) : null;
+            const colorsFloat = pcd.geometry.attributes.color?.array ?? undefined;
+            const colors = colorsFloat ? new Uint8Array(colorsFloat.length) : undefined;
             if (colors) {
                 for (let i = 0, l = colorsFloat.length; i < l; i++) {
                     colors[i] = Math.round(colorsFloat[i] * 255);

package/dist/metadata.d.ts

@@ -1,22 +1,16 @@
 import type { PlainMessage, Struct } from '@viamrobotics/sdk';
-/**
- * Metadata for a Viam `Transform`.
- *
- * Per the API this can be a struct of any data, so we type this version for
- * fields we use and how we expect them to be defined.
- */
-export type Metadata = {
-    colors?: Uint8Array<ArrayBuffer>;
-};
-/** Type guard that checks whether a string is a recognised {@link Metadata} field name. */
-export declare const isMetadataKey: (key: string) => key is keyof Metadata;
+import { Metadata as MetadataProto } from './buf/draw/v1/metadata_pb';
+/** Metadata for a `Drawing` or `Transform`. */
+export type Metadata = PlainMessage<MetadataProto>;
+/** Type guard that checks whether a string is a recognised metadata wire key. */
+export declare const isMetadataField: (key: string) => boolean;
 /**
  * Extracts typed {@link Metadata} from a proto `Struct` fields map.
  *
- * The `colors` field is expected as a base64-encoded string (the only way to
- * represent binary data in a `google.protobuf.Value`), which is decoded into
- * a `Uint8Array`.
+ * The `colors` and `opacities` fields are base64-encoded strings (the only way
+ * to represent binary data in a `google.protobuf.Value`), which are decoded into
+ * `Uint8Array`s.
  *
  * Unknown keys are silently ignored.
  */
-export declare const parseMetadata: (fields?: PlainMessage<Struct>["fields"]) => Metadata;
+export declare const metadataFromStruct: (fields?: PlainMessage<Struct>["fields"]) => Metadata;

package/dist/metadata.js

@@ -1,20 +1,27 @@
-/** Type guard that checks whether a string is a recognised {@link Metadata} field name. */
-export const isMetadataKey = (key) => {
-    return key === 'colors';
+import { ColorFormat, Metadata as MetadataProto } from './buf/draw/v1/metadata_pb';
+/** Type guard that checks whether a string is a recognised metadata wire key. */
+export const isMetadataField = (key) => {
+    return (key === 'colors' ||
+        key === 'color_format' ||
+        key === 'opacities' ||
+        key === 'show_axes_helper' ||
+        key === 'invisible');
 };
 /**
  * Extracts typed {@link Metadata} from a proto `Struct` fields map.
  *
- * The `colors` field is expected as a base64-encoded string (the only way to
- * represent binary data in a `google.protobuf.Value`), which is decoded into
- * a `Uint8Array`.
+ * The `colors` and `opacities` fields are base64-encoded strings (the only way
+ * to represent binary data in a `google.protobuf.Value`), which are decoded into
+ * `Uint8Array`s.
  *
  * Unknown keys are silently ignored.
  */
-export const parseMetadata = (fields = {}) => {
-    const json = {};
+export const metadataFromStruct = (fields = {}) => {
+    const json = {
+        colorFormat: ColorFormat.UNSPECIFIED,
+    };
     for (const [k, v] of Object.entries(fields)) {
-        if (!isMetadataKey(k))
+        if (!isMetadataField(k))
             continue;
         const unwrappedValue = unwrapValue(v);
         switch (k) {
@@ -29,6 +36,35 @@ export const parseMetadata = (fields = {}) => {
                 }
                 break;
             }
+            case 'color_format': {
+                if (typeof unwrappedValue === 'number') {
+                    json.colorFormat = unwrappedValue;
+                }
+                break;
+            }
+            case 'opacities': {
+                if (typeof unwrappedValue === 'string') {
+                    const binary = atob(unwrappedValue);
+                    const opacityBytes = new Uint8Array(binary.length);
+                    for (let i = 0; i < binary.length; i++) {
+                        opacityBytes[i] = binary.charCodeAt(i);
+                    }
+                    json.opacities = opacityBytes;
+                }
+                break;
+            }
+            case 'show_axes_helper': {
+                if (typeof unwrappedValue === 'boolean') {
+                    json.showAxesHelper = unwrappedValue;
+                }
+                break;
+            }
+            case 'invisible': {
+                if (typeof unwrappedValue === 'boolean') {
+                    json.invisible = unwrappedValue;
+                }
+                break;
+            }
         }
     }
     return json;

package/dist/plugins/bvh.svelte.js

@@ -22,7 +22,11 @@ export const bvh = (raycaster, options) => {
             if (opts.enabled === false) {
                 return;
             }
-            if (isInstanceOf(ref, 'Points')) {
+            if (isInstanceOf(ref, 'Points') &&
+                /**
+                 * This check is necessary, there are some strange cases where points are coming in from PCDs without any position data
+                 */
+                ref.geometry?.attributes.position) {
                 ref.geometry.computeBoundsTree = computeBoundsTree;
                 ref.geometry.disposeBoundsTree = disposeBoundsTree;
                 ref.raycast = acceleratedRaycast;
@@ -55,7 +59,7 @@ export const bvh = (raycaster, options) => {
                  * (mp) Line2s sort of suck. Their buffer attribute design internally is much different
                  * but they give no indication other than this that they are different.
                  */
-                ref.geometry.attributes.position) {
+                ref.geometry?.attributes.position) {
                 ref.geometry.computeBoundsTree = computeBoundsTree;
                 ref.geometry.disposeBoundsTree = disposeBoundsTree;
                 ref.raycast = acceleratedRaycast;

package/dist/snapshot.d.ts

@@ -4,8 +4,8 @@ import type { Settings } from './hooks/useSettings.svelte';
 import { type SceneMetadata } from './buf/draw/v1/scene_pb';
 /**
  * Merges scene-level metadata (grid, camera, point/line settings) into the
- * current viewer settings. Millimetre values from the proto are converted
- * to metres.
+ * current viewer settings. Millimeter values from the proto are converted
+ * to meters.
  */
 export declare const applySceneMetadata: (settings: Settings, metadata: SceneMetadata) => Settings;
 /**
@@ -16,12 +16,6 @@ export declare const applySceneMetadata: (settings: Settings, metadata: SceneMet
  * depending on the geometry type (arrows, points, line, nurbs, model, or
  * simple shapes like box/sphere/capsule).
  *
- * @returns The spawned entities — pass them to {@link destroyEntities} to
- *          clean up before loading a new snapshot.
+ * @returns The spawned entities
  */
 export declare const spawnSnapshotEntities: (world: World, snapshot: Snapshot) => Entity[];
-/**
- * Destroys a list of entities that are still alive in the given world.
- * Silently skips entities that have already been removed.
- */
-export declare const destroyEntities: (world: World, entities: Entity[]) => void;

package/dist/snapshot.js

@@ -1,19 +1,11 @@
-import { Geometry } from '@viamrobotics/sdk';
-import { Color, Vector3, Vector4 } from 'three';
-import { NURBSCurve } from 'three/addons/curves/NURBSCurve.js';
-import {} from './buf/draw/v1/drawing_pb';
 import { RenderArmModels } from './buf/draw/v1/scene_pb';
 import { traits } from './ecs';
-import { parseMetadata } from './metadata';
-import { createBufferGeometry } from './attribute';
-import { asColor, asFloat32Array, asOpacity, isPerVertexColors, STRIDE } from './buffer';
-import { rgbaToHex } from './color';
-const vec3 = new Vector3();
-const colorUtil = new Color();
+import { rgbToHex } from './color';
+import { drawDrawing, drawTransform } from './draw';
 /**
  * Merges scene-level metadata (grid, camera, point/line settings) into the
- * current viewer settings. Millimetre values from the proto are converted
- * to metres.
+ * current viewer settings. Millimeter values from the proto are converted
+ * to meters.
  */
 export const applySceneMetadata = (settings, metadata) => {
     const next = { ...settings };
@@ -33,13 +25,13 @@ export const applySceneMetadata = (settings, metadata) => {
         next.pointSize = metadata.pointSize / 1000;
     }
     if (metadata.pointColor !== undefined) {
-        next.pointColor = rgbaToHex(metadata.pointColor);
+        next.pointColor = rgbToHex(metadata.pointColor);
     }
     if (metadata.lineWidth !== undefined) {
         next.lineWidth = metadata.lineWidth / 1000;
     }
-    if (metadata.linePointSize !== undefined) {
-        next.lineDotSize = metadata.linePointSize / 1000;
+    if (metadata.lineDotSize !== undefined) {
+        next.lineDotSize = metadata.lineDotSize / 1000;
     }
     if (metadata.renderArmModels !== undefined) {
         next.renderArmModels = getRenderArmModels(metadata.renderArmModels);
@@ -60,33 +52,22 @@ export const applySceneMetadata = (settings, metadata) => {
  * depending on the geometry type (arrows, points, line, nurbs, model, or
  * simple shapes like box/sphere/capsule).
  *
- * @returns The spawned entities — pass them to {@link destroyEntities} to
- *          clean up before loading a new snapshot.
+ * @returns The spawned entities
  */
 export const spawnSnapshotEntities = (world, snapshot) => {
     const entities = [];
+    const options = { removable: true, showAxesHelper: false };
     for (const transform of snapshot.transforms) {
-        entities.push(spawnTransformEntity(world, transform));
+        entities.push(drawTransform(world, transform, traits.SnapshotAPI, options));
     }
     for (const drawing of snapshot.drawings) {
-        const drawingEntities = spawnEntitiesFromDrawing(world, drawing);
+        const drawingEntities = drawDrawing(world, drawing, traits.SnapshotAPI, options);
         for (const e of drawingEntities) {
             entities.push(e);
         }
     }
     return entities;
 };
-/**
- * Destroys a list of entities that are still alive in the given world.
- * Silently skips entities that have already been removed.
- */
-export const destroyEntities = (world, entities) => {
-    for (const entity of entities) {
-        if (world.has(entity)) {
-            entity.destroy();
-        }
-    }
-};
 const getRenderArmModels = (renderArmModels) => {
     switch (renderArmModels) {
         case RenderArmModels.COLLIDERS: {
@@ -101,177 +82,3 @@ const getRenderArmModels = (renderArmModels) => {
         }
     }
 };
-const spawnTransformEntity = (world, transform) => {
-    const entityTraits = [
-        traits.Name(transform.referenceFrame),
-        traits.Geometry(transform.physicalObject ?? Geometry.fromJson({})),
-        traits.Center(transform.physicalObject?.center),
-        traits.SnapshotAPI,
-        traits.Removable,
-    ];
-    const poseInFrame = transform.poseInObserverFrame;
-    entityTraits.push(traits.Pose(poseInFrame?.pose), traits.Parent(poseInFrame?.referenceFrame));
-    if (transform.metadata) {
-        const metadata = parseMetadata(transform.metadata.fields);
-        if (metadata.colors)
-            addColorTraits(entityTraits, metadata.colors);
-    }
-    return world.spawn(...entityTraits);
-};
-const spawnEntitiesFromDrawing = (world, drawing) => {
-    const entities = [];
-    const poseInFrame = drawing.poseInObserverFrame;
-    const parent = poseInFrame?.referenceFrame;
-    const { geometryType } = drawing.physicalObject ?? {};
-    if (geometryType?.case === 'arrows') {
-        const poses = asFloat32Array(geometryType.value.poses);
-        const colors = drawing.metadata?.colors;
-        const entityTraits = [
-            traits.Name(drawing.referenceFrame),
-            traits.Pose(poseInFrame?.pose),
-            traits.Positions(poses),
-        ];
-        if (parent) {
-            entityTraits.push(traits.Parent(parent));
-        }
-        if (colors) {
-            entityTraits.push(traits.Colors(colors));
-        }
-        const entity = world.spawn(...entityTraits, traits.Arrows({ headAtPose: true }), traits.Instances({ count: poses.length / STRIDE.ARROWS }), traits.SnapshotAPI, traits.Removable);
-        entities.push(entity);
-    }
-    else if (geometryType?.case === 'model') {
-        const rootEntityTraits = [
-            traits.Name(drawing.referenceFrame),
-            traits.Pose(poseInFrame?.pose),
-            traits.ReferenceFrame,
-        ];
-        if (parent) {
-            rootEntityTraits.push(traits.Parent(parent));
-        }
-        const rootEntity = world.spawn(...rootEntityTraits, traits.SnapshotAPI, traits.Removable);
-        entities.push(rootEntity);
-        let i = 1;
-        for (const asset of geometryType.value.assets) {
-            const entityTraits = [
-                traits.Name(`${drawing.referenceFrame} model ${i++}`),
-                traits.Parent(drawing.referenceFrame),
-            ];
-            if (geometryType.value.scale) {
-                entityTraits.push(traits.Scale(geometryType.value.scale));
-            }
-            if (asset.content.case === 'url') {
-                entityTraits.push(traits.GLTF({
-                    source: { url: asset.content.value },
-                    animationName: geometryType.value.animationName ?? '',
-                }));
-            }
-            else if (asset.content.value) {
-                entityTraits.push(traits.GLTF({
-                    source: { glb: asset.content.value },
-                    animationName: geometryType.value.animationName ?? '',
-                }));
-            }
-            const entity = world.spawn(...entityTraits, traits.SnapshotAPI, traits.Removable);
-            entities.push(entity);
-        }
-    }
-    else {
-        const entityTraits = [
-            traits.Name(drawing.referenceFrame),
-            traits.Pose(poseInFrame?.pose),
-        ];
-        if (parent && parent !== 'world') {
-            entityTraits.push(traits.Parent);
-        }
-        if (drawing.physicalObject?.center) {
-            entityTraits.push(traits.Center(drawing.physicalObject.center));
-        }
-        if (geometryType?.case === 'line') {
-            const positions = asFloat32Array(geometryType.value.positions);
-            for (let i = 0, l = positions.length; i < l; i += 1) {
-                positions[i] *= 0.001;
-            }
-            entityTraits.push(traits.LinePositions(positions), traits.LineWidth(geometryType.value.lineWidth), traits.PointSize((geometryType.value.pointSize ?? 0) * 0.001));
-            // Lines pack exactly 2 colors: [lineColor, pointColor]
-            const colors = drawing.metadata?.colors;
-            if (colors && colors.length >= STRIDE.COLORS_RGB) {
-                const stride = colors.length % STRIDE.COLORS_RGBA === 0 ? STRIDE.COLORS_RGBA : STRIDE.COLORS_RGB;
-                asColor(colors, colorUtil, 0);
-                entityTraits.push(traits.Color({ r: colorUtil.r, g: colorUtil.g, b: colorUtil.b }));
-                if (colors.length >= stride * 2) {
-                    asColor(colors, colorUtil, stride);
-                    entityTraits.push(traits.PointColor({ r: colorUtil.r, g: colorUtil.g, b: colorUtil.b }));
-                    if (stride === STRIDE.COLORS_RGBA) {
-                        entityTraits.push(traits.Opacity(asOpacity(colors, 1, 3)));
-                    }
-                }
-            }
-        }
-        else if (geometryType?.case === 'points') {
-            const positions = asFloat32Array(geometryType.value.positions);
-            for (let i = 0, l = positions.length; i < l; i += 1) {
-                positions[i] *= 0.001;
-            }
-            const colors = drawing.metadata?.colors;
-            const numPoints = positions.length / STRIDE.POSITIONS;
-            const vertexColors = colors && isPerVertexColors(colors, numPoints) ? colors : undefined;
-            const geometry = createBufferGeometry(positions, vertexColors);
-            entityTraits.push(traits.BufferGeometry(geometry));
-            if (colors && !vertexColors) {
-                addColorTraits(entityTraits, colors);
-            }
-            if (geometryType.value.pointSize) {
-                entityTraits.push(traits.PointSize(geometryType.value.pointSize * 0.001));
-            }
-            entityTraits.push(traits.Points);
-        }
-        else if (geometryType?.case === 'nurbs') {
-            const { degree = 3, knots: knotsBuffer, weights: weightsBuffer, controlPoints: controlPointsBuffer, } = geometryType.value;
-            const knots = [...asFloat32Array(knotsBuffer)];
-            const weights = weightsBuffer
-                ? [...asFloat32Array(weightsBuffer)]
-                : [];
-            const controlPointsArray = [...asFloat32Array(controlPointsBuffer)];
-            const controlPoints = [];
-            for (let i = 0, j = 0, l = controlPointsArray.length / STRIDE.NURBS_CONTROL_POINTS; i < l; i += STRIDE.NURBS_CONTROL_POINTS, j += 1) {
-                vec3
-                    .set(controlPointsArray[0], controlPointsArray[1], controlPointsArray[2])
-                    .multiplyScalar(0.001);
-                controlPoints.push(new Vector4(vec3.x, vec3.y, vec3.z, weights[j] ?? 0));
-            }
-            const curve = new NURBSCurve(degree, knots, controlPoints);
-            const numPoints = 600;
-            const points = new Float32Array(numPoints * 3);
-            const l = numPoints * 3;
-            for (let i = 0; i < l; i += 3) {
-                curve.getPointAt(i / (l - 1), vec3);
-                points[i + 0] = vec3.x;
-                points[i + 1] = vec3.y;
-                points[i + 2] = vec3.z;
-            }
-            entityTraits.push(traits.LinePositions(points));
-            const colors = drawing.metadata?.colors;
-            if (colors) {
-                addColorTraits(entityTraits, colors);
-            }
-        }
-        else {
-            // Box, sphere, capsule, and other geometry shapes with a single color
-            const colors = drawing.metadata?.colors;
-            if (colors) {
-                addColorTraits(entityTraits, colors);
-            }
-        }
-        const entity = world.spawn(...entityTraits, traits.SnapshotAPI, traits.Removable);
-        entities.push(entity);
-    }
-    return entities;
-};
-const addColorTraits = (entityTraits, bytes) => {
-    asColor(bytes, colorUtil);
-    entityTraits.push(traits.Color(colorUtil));
-    const isRgba = bytes.length % STRIDE.COLORS_RGBA === 0;
-    if (isRgba)
-        entityTraits.push(traits.Opacity(asOpacity(bytes)));
-};

package/dist/three/InstancedArrows/InstancedArrows.js

@@ -1,4 +1,5 @@
 import { Box3, BufferGeometry, Color, DynamicDrawUsage, FrontSide, Group, InstancedBufferAttribute, InstancedInterleavedBuffer, InterleavedBufferAttribute, Material, Mesh, RawShaderMaterial, Vector3, } from 'three';
+import { STRIDE } from '../../buffer';
 import { computeBoundingBox } from './box';
 import fragmentShader from './fragment.glsl';
 import { createHeadGeometry, createShaftGeometry, toInstanced } from './geometry';
@@ -64,8 +65,8 @@ export class InstancedArrows extends Group {
             instanceDirection,
         };
         if (!options.uniformColor) {
-            const colors = new Uint8Array(this.count * (options?.alpha ? 4 : 3));
-            const instanceColor = new InstancedBufferAttribute(colors, options?.alpha ? 4 : 3, true);
+            const colors = new Uint8Array(this.count * STRIDE.COLORS_RGB);
+            const instanceColor = new InstancedBufferAttribute(colors, STRIDE.COLORS_RGB, true);
             instanceColor.setUsage(DynamicDrawUsage);
             this.attributes.instanceColor = instanceColor;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "1.16.0",
+  "version": "1.18.0",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",
@@ -25,19 +25,20 @@
     "@testing-library/jest-dom": "6.8.0",
     "@testing-library/svelte": "5.2.8",
     "@testing-library/user-event": "^14.6.1",
-    "@threlte/core": "8.5.0",
-    "@threlte/extras": "9.9.0",
-    "@threlte/rapier": "3.4.0",
-    "@threlte/xr": "1.4.0",
+    "@threlte/core": "8.5.5",
+    "@threlte/extras": "9.14.1",
+    "@threlte/rapier": "3.4.1",
+    "@threlte/xr": "1.5.2",
     "@types/bun": "1.2.21",
     "@types/earcut": "^3.0.0",
     "@types/lodash-es": "4.17.12",
-    "@types/three": "0.181.0",
+    "@types/three": "0.183.1",
     "@typescript-eslint/eslint-plugin": "8.56.1",
     "@typescript-eslint/parser": "8.56.1",
     "@viamrobotics/prime-core": "0.1.5",
     "@viamrobotics/sdk": "0.58.0",
     "@viamrobotics/svelte-sdk": "1.0.1",
+    "@vitest/browser": "3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
     "@zag-js/collapsible": "1.22.1",
     "@zag-js/floating-panel": "1.22.1",
@@ -47,6 +48,7 @@
     "@zag-js/toggle-group": "1.22.1",
     "@zag-js/tree-view": "1.22.1",
     "camera-controls": "3.1.0",
+    "concurrently": "^9.2.1",
     "esbuild": "^0.27.3",
     "eslint": "10.0.2",
     "eslint-config-prettier": "10.1.8",
@@ -55,7 +57,6 @@
     "eslint-plugin-unicorn": "^63.0.0",
     "globals": "16.3.0",
     "idb-keyval": "6.2.2",
-    "jsdom": "26.1.0",
     "lucide-svelte": "0.542.0",
     "prettier": "3.6.2",
     "prettier-plugin-svelte": "3.4.0",
@@ -66,13 +67,13 @@
     "svelte-check": "4.4.5",
     "svelte-virtuallists": "1.4.2",
     "tailwindcss": "4.1.13",
-    "three": "0.182.0",
+    "three": "0.183.2",
     "threlte-uikit": "1.2.1",
     "tsx": "4.20.5",
     "type-fest": "^5.0.1",
     "typescript": "5.9.2",
     "typescript-eslint": "8.56.1",
-    "vite": "7.1.11",
+    "vite": "7.3.2",
     "vite-plugin-devtools-json": "1.0.0",
     "vite-plugin-glsl": "^1.5.5",
     "vite-plugin-mkcert": "1.17.8",
@@ -138,12 +139,14 @@
     "earcut": "^3.0.2",
     "filtrex": "^3.1.0",
     "koota": "0.6.5",
-    "lodash-es": "4.17.23",
+    "lodash-es": "4.18.1",
     "three-mesh-bvh": "^0.9.8",
     "uuid-tool": "^2.0.3"
   },
   "scripts": {
-    "dev": "tsx server/check-bun && bun run server/server.ts",
+    "dev": "pnpm dev:bun",
+    "dev:bun": "tsx server/check-bun && bun run server/server.ts",
+    "dev:next": "concurrently \"pnpm dev:bun\" \"go run cmd/draw-server/main.go -port 3030\"",
     "dev:https": "vite dev -- --https",
     "build": "vite build && npm run prepack",
     "build:workers": "node scripts/build-workers.js",

package/dist/components/xr/Hands.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-	import { Hand } from '@threlte/xr'
-
-	const onpinchstart = () => {
-		// Pinch started
-	}
-
-	const onpinchend = () => {
-		// Pinch ended
-	}
-</script>
-
-<Hand
-	left
-	{onpinchstart}
-	{onpinchend}
-></Hand>
-
-<Hand
-	right
-	{onpinchstart}
-	{onpinchend}
-></Hand>

package/dist/components/xr/Hands.svelte.d.ts

@@ -1,18 +0,0 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Hands: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Hands = InstanceType<typeof Hands>;
-export default Hands;