@viamrobotics/motion-tools 1.1.5 → 1.2.0

package/dist/ecs/traits.js

@@ -1,9 +1,8 @@
 import { trait } from 'koota';
-import { MathUtils, BufferGeometry as ThreeBufferGeometry } from 'three';
+import { BufferGeometry as ThreeBufferGeometry } from 'three';
 import { Geometry as ViamGeometry } from '@viamrobotics/sdk';
 import { createBox, createCapsule, createSphere } from '../geometry';
 import { parsePlyInput } from '../ply';
-export const UUID = trait(() => MathUtils.generateUUID());
 export const Name = trait(() => '');
 export const Parent = trait(() => 'world');
 export const Pose = trait({ x: 0, y: 0, z: 0, oX: 0, oY: 0, oZ: 1, theta: 0 });
@@ -18,7 +17,7 @@ export const Opacity = trait(() => 1);
  * The color of an object
  * @default { r: 1, g: 0, b: 0 }
  */
-export const Color = trait({ r: 1, g: 0, b: 0 });
+export const Color = trait({ r: 0, g: 0, b: 0 });
 export const Arrow = trait();
 /**
  * A box, in mm
@@ -32,26 +31,36 @@ export const Capsule = trait({ l: 200, r: 50 });
  * A sphere, in mm
  */
 export const Sphere = trait({ r: 200 });
-/**
- *
- */
-export const DottedLineColor = trait({ r: 0, g: 0, b: 0 });
-export const LineGeometry = trait(() => []);
-export const PointsGeometry = trait(() => new Float32Array());
+export const PointColor = trait({ r: 0, g: 0, b: 0 });
+/** format [x, y, z, ...] */
+export const LinePositions = trait(() => new Float32Array());
+export const PointsPositions = trait(() => new Float32Array());
 export const BufferGeometry = trait(() => new ThreeBufferGeometry());
+/** format [r, g, b, ...] */
 export const VertexColors = trait(() => new Float32Array());
-export const GLTF = trait(() => ({}));
-export const DrawAPI = trait();
+export const GLTF = trait(() => ({
+    source: { url: '' },
+    animationName: '',
+}));
+export const Scale = trait({ x: 1, y: 1, z: 1 });
+export const FramesAPI = trait();
 export const GeometriesAPI = trait();
+export const DrawAPI = trait();
 export const WorldStateStoreAPI = trait();
+export const SnapshotAPI = trait();
 /**
  * Marker trait for entities created from user-dropped files (PLY, PCD, etc.)
  */
 export const DroppedFile = trait();
+// === Shape Properties ===
 /**
- * An entity with data from the FrameSystemConfig() API
+ * Point size, in mm
  */
-export const FramesAPI = trait();
+export const PointSize = trait(() => 10);
+/**
+ * Line width, in mm
+ */
+export const LineWidth = trait(() => 5);
 export const ReferenceFrame = trait();
 export const Geometry = (geometry) => {
     if (geometry.geometryType.case === 'box') {

package/dist/hooks/useDrawAPI.svelte.js

@@ -128,7 +128,7 @@ export const provideDrawAPI = () => {
     };
     const drawPCD = async (buffer) => {
         const { positions, colors } = await parsePcdInWorker(new Uint8Array(buffer));
-        const entity = world.spawn(traits.Name(`Points ${++pointsIndex}`), traits.PointsGeometry(positions), traits.DrawAPI);
+        const entity = world.spawn(traits.Name(`Points ${++pointsIndex}`), traits.PointsPositions(positions), traits.DrawAPI);
         if (colors) {
             entity.add(traits.VertexColors(colors));
         }
@@ -172,12 +172,20 @@ export const provideDrawAPI = () => {
         const existing = entities.get(name);
         const controlPoints = data.ControlPts.map((point) => new Vector4(point.x / 1000, point.y / 1000, point.z / 1000));
         const curve = new NURBSCurve(data.Degree, data.Knots, controlPoints);
-        const points = curve.getPoints(200);
+        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;
+        }
         if (existing) {
-            existing.set(traits.LineGeometry, points);
+            existing.set(traits.LinePositions, points);
             return;
         }
-        const entity = world.spawn(traits.Name(name), traits.Color(colorUtil.set(color)), traits.LineGeometry(points), traits.DrawAPI);
+        const entity = world.spawn(traits.Name(name), traits.Color(colorUtil.set(color)), traits.LinePositions(points), traits.DrawAPI);
         entities.set(name, entity);
     };
     const vec3 = new Vector3();
@@ -189,11 +197,11 @@ export const provideDrawAPI = () => {
         const arrowHeadAtPose = reader.read();
         const entities = [];
         for (let i = 0; i < nPoints; i += 1) {
-            origin.set(reader.read(), reader.read(), reader.read()).multiplyScalar(0.001);
+            origin.set(reader.read(), reader.read(), reader.read());
             direction.set(reader.read(), reader.read(), reader.read());
             if (arrowHeadAtPose === 1) {
                 // Compute the base position so the arrow ends at the origin
-                origin.sub(vec3.copy(direction).multiplyScalar(/** arrow length */ 0.1));
+                origin.sub(vec3.copy(direction).multiplyScalar(/** arrow length */ 100));
             }
             pose.x = origin.x;
             pose.y = origin.y;
@@ -242,7 +250,7 @@ export const provideDrawAPI = () => {
             colors[offset + 1] = g;
             colors[offset + 2] = b;
         }
-        world.spawn(traits.Name(label), traits.Color(colorUtil.set(r, g, b)), traits.PointsGeometry(positions), traits.VertexColors(colors), traits.DrawAPI);
+        world.spawn(traits.Name(label), traits.Color(colorUtil.set(r, g, b)), traits.PointsPositions(positions), traits.VertexColors(colors), traits.DrawAPI);
     };
     const drawLine = async (reader) => {
         // Read label length
@@ -264,11 +272,13 @@ export const provideDrawAPI = () => {
         const dotG = reader.read();
         const dotB = reader.read();
         // Read positions
-        const points = [];
+        const points = new Float32Array(nPoints * 3);
         for (let i = 0; i < nPoints * 3; i += 3) {
-            points.push(new Vector3(reader.read(), reader.read(), reader.read()));
+            points[i + 0] = reader.read();
+            points[i + 1] = reader.read();
+            points[i + 2] = reader.read();
         }
-        world.spawn(traits.Name(label), traits.Color({ r, g, b }), traits.LineGeometry(points), traits.DottedLineColor({ r: dotR, g: dotG, b: dotB }), traits.DrawAPI);
+        world.spawn(traits.Name(label), traits.Color({ r, g, b }), traits.LinePositions(points), traits.PointColor({ r: dotR, g: dotG, b: dotB }), traits.DrawAPI);
     };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const drawGeometries = (geometries, colors, parent) => {
@@ -282,7 +292,7 @@ export const provideDrawAPI = () => {
         const blob = new Blob([buffer], { type: 'model/gltf-binary' });
         const url = URL.createObjectURL(blob);
         const gltf = await loader.loadAsync(url);
-        world.spawn(traits.Name(gltf.scene.name), traits.GLTF(gltf), traits.DrawAPI);
+        world.spawn(traits.Name(gltf.scene.name), traits.GLTF({ source: { gltf }, animationName: '' }), traits.DrawAPI);
         URL.revokeObjectURL(url);
     };
     const remove = (names) => {
@@ -290,6 +300,7 @@ export const provideDrawAPI = () => {
             for (const entity of world.query(traits.DrawAPI)) {
                 if (entity.get(traits.Name) === name) {
                     entity.destroy();
+                    entities.delete(name);
                 }
             }
         }
@@ -298,6 +309,7 @@ export const provideDrawAPI = () => {
         for (const entity of world.query(traits.DrawAPI)) {
             entity.destroy();
         }
+        entities.clear();
         pointsIndex = 0;
         geometryIndex = 0;
         poseIndex = 0;

package/dist/hooks/usePointclouds.svelte.js

@@ -101,13 +101,13 @@ export const providePointclouds = (partID) => {
         for (const { name, positions, colors } of pcObjects) {
             const existing = entities.get(name);
             if (existing) {
-                existing.set(traits.PointsGeometry, positions);
+                existing.set(traits.PointsPositions, positions);
                 if (colors) {
                     existing.set(traits.VertexColors, colors);
                 }
                 continue;
             }
-            const entity = world.spawn(traits.Parent(name), traits.Name(`${name} pointcloud`), traits.PointsGeometry(positions), colors ? traits.VertexColors(colors) : traits.Color);
+            const entity = world.spawn(traits.Parent(name), traits.Name(`${name} pointcloud`), traits.PointsPositions(positions), colors ? traits.VertexColors(colors) : traits.Color);
             entities.set(name, entity);
         }
         // Clean up old entities

package/dist/hooks/useSettings.svelte.d.ts

@@ -1,4 +1,4 @@
-interface Settings {
+export interface Settings {
     isLoaded: boolean;
     cameraMode: 'orthographic' | 'perspective';
     transforming: boolean;

package/dist/hooks/useSettings.svelte.js

@@ -43,6 +43,9 @@ export const provideSettings = () => {
         get current() {
             return settings;
         },
+        set current(value) {
+            settings = value;
+        },
     };
     setContext(key, context);
     return context;

package/dist/hooks/useWorldState.svelte.js

@@ -48,10 +48,17 @@ const createWorldState = (client) => {
             entityTraits.push(traits.Geometry(transform.physicalObject));
         }
         if (metadata.shape === 'line' && metadata.points) {
-            entityTraits.push(traits.LineGeometry(metadata.points), traits.DottedLineColor(metadata.lineDotColor));
+            const { points } = metadata;
+            const positions = new Float32Array(points.length * 3);
+            for (let i = 0, j = 0, l = points.length * 3; i < l; i += 3, j += 1) {
+                positions[i + 0] = points[j].x;
+                positions[i + 1] = points[j].y;
+                positions[i + 2] = points[j].z;
+            }
+            entityTraits.push(traits.LinePositions(positions), traits.PointColor(metadata.lineDotColor));
         }
         if (metadata.gltf) {
-            entityTraits.push(traits.GLTF(metadata.gltf));
+            entityTraits.push(traits.GLTF({ source: { gltf: metadata.gltf }, animationName: '' }));
         }
         if (metadata.shape === 'arrow') {
             entityTraits.push(traits.Arrow);

package/dist/lib.d.ts

@@ -1,6 +1,7 @@
 export { default as Geometry } from './components/Geometry.svelte';
 export { default as AxesHelper } from './components/AxesHelper.svelte';
-export { Snapshot } from './draw/v1/snapshot_pb';
+export { default as Snapshot } from './components/Snapshot.svelte';
+export { Snapshot as SnapshotProto } from './draw/v1/snapshot_pb';
 export { BatchedArrow } from './three/BatchedArrow';
 export { CapsuleGeometry } from './three/CapsuleGeometry';
 export { OrientationVector } from './three/OrientationVector';

package/dist/lib.js

@@ -3,8 +3,9 @@
 // ensure you write a corresponding unit test to assert the component works in absence of parent providers in /src/lib/__tests__/PureComponents.svelte.spec.ts
 export { default as Geometry } from './components/Geometry.svelte';
 export { default as AxesHelper } from './components/AxesHelper.svelte';
-// Draw
-export { Snapshot } from './draw/v1/snapshot_pb';
+// Snapshot component (uses context, requires MotionTools parent)
+export { default as Snapshot } from './components/Snapshot.svelte';
+export { Snapshot as SnapshotProto } from './draw/v1/snapshot_pb';
 // Classes
 export { BatchedArrow } from './three/BatchedArrow';
 export { CapsuleGeometry } from './three/CapsuleGeometry';

package/dist/snapshot.d.ts

@@ -0,0 +1,7 @@
+import type { World, Entity } from 'koota';
+import type { Snapshot } from './draw/v1/snapshot_pb';
+import { type SceneMetadata } from './draw/v1/scene_pb';
+import type { Settings } from './hooks/useSettings.svelte';
+export declare const applySceneMetadata: (settings: Settings, metadata: SceneMetadata) => Settings;
+export declare const spawnSnapshotEntities: (world: World, snapshot: Snapshot) => Entity[];
+export declare const destroyEntities: (entities: Entity[]) => void;

package/dist/snapshot.js

@@ -0,0 +1,255 @@
+import { Color, Vector3, Vector4 } from 'three';
+import { NURBSCurve } from 'three/addons/curves/NURBSCurve.js';
+import { RenderArmModels } from './draw/v1/scene_pb';
+import {} from './draw/v1/drawing_pb';
+import { traits } from './ecs';
+import { Geometry } from '@viamrobotics/sdk';
+import { parseMetadata } from './WorldObject.svelte';
+import { rgbaBytesToFloat32, rgbaToHex } from './color';
+import { asFloat32Array, STRIDE } from './buffer';
+import { createPose } from './transform';
+const vec3 = new Vector3();
+const origin = new Vector3();
+const direction = new Vector3();
+const color = new Color();
+const pose = createPose();
+export const applySceneMetadata = (settings, metadata) => {
+    const next = { ...settings };
+    if (metadata.grid !== undefined) {
+        next.grid = metadata.grid;
+    }
+    if (metadata.gridCellSize !== undefined) {
+        next.gridCellSize = metadata.gridCellSize / 1000;
+    }
+    if (metadata.gridSectionSize !== undefined) {
+        next.gridSectionSize = metadata.gridSectionSize / 1000;
+    }
+    if (metadata.gridFadeDistance !== undefined) {
+        next.gridFadeDistance = metadata.gridFadeDistance / 1000;
+    }
+    if (metadata.pointSize !== undefined) {
+        next.pointSize = metadata.pointSize / 1000;
+    }
+    if (metadata.pointColor !== undefined) {
+        next.pointColor = rgbaToHex(metadata.pointColor);
+    }
+    if (metadata.lineWidth !== undefined) {
+        next.lineWidth = metadata.lineWidth / 1000;
+    }
+    if (metadata.linePointSize !== undefined) {
+        next.lineDotSize = metadata.linePointSize / 1000;
+    }
+    if (metadata.renderArmModels !== undefined) {
+        next.renderArmModels = getRenderArmModels(metadata.renderArmModels);
+    }
+    if (metadata.sceneCamera?.cameraType.case === 'orthographicCamera') {
+        next.cameraMode = 'orthographic';
+    }
+    else if (metadata.sceneCamera?.cameraType.case === 'perspectiveCamera') {
+        next.cameraMode = 'perspective';
+    }
+    return next;
+};
+export const spawnSnapshotEntities = (world, snapshot) => {
+    const entities = [];
+    for (const transform of snapshot.transforms) {
+        entities.push(spawnTransformEntity(world, transform));
+    }
+    for (const drawing of snapshot.drawings) {
+        entities.push(...spawnEntitiesFromDrawing(world, drawing));
+    }
+    return entities;
+};
+export const destroyEntities = (entities) => {
+    for (const entity of entities) {
+        entity.destroy();
+    }
+};
+const getRenderArmModels = (renderArmModels) => {
+    switch (renderArmModels) {
+        case RenderArmModels.COLLIDERS:
+            return 'colliders';
+        case RenderArmModels.UNSPECIFIED:
+        case RenderArmModels.COLLIDERS_AND_MODEL:
+            return 'colliders+model';
+        case RenderArmModels.MODEL:
+            return 'model';
+    }
+};
+const spawnTransformEntity = (world, transform) => {
+    const entityTraits = [
+        traits.Name(transform.referenceFrame),
+        traits.Geometry(transform.physicalObject ?? Geometry.fromJson({})),
+        traits.Center(transform.physicalObject?.center),
+        traits.SnapshotAPI,
+    ];
+    const poseInFrame = transform.poseInObserverFrame;
+    entityTraits.push(traits.Pose(poseInFrame?.pose));
+    entityTraits.push(traits.Parent(poseInFrame?.referenceFrame));
+    if (transform.metadata) {
+        const metadata = parseMetadata(transform.metadata.fields);
+        if (metadata.color) {
+            entityTraits.push(traits.Color(metadata.color));
+        }
+        if (metadata.opacity !== undefined) {
+            entityTraits.push(traits.Opacity(metadata.opacity));
+        }
+    }
+    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 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);
+        entities.push(rootEntity);
+        const poses = asFloat32Array(geometryType.value.poses);
+        const colors = drawing.metadata?.colors
+            ? asFloat32Array(drawing.metadata.colors)
+            : [];
+        for (let i = 0, j = 0, k = 0, l = poses.length; i < l; i += STRIDE.ARROWS, j += 1, k += 4) {
+            const entityTraits = [
+                traits.Name(`pose ${j}`),
+                traits.Parent(drawing.referenceFrame),
+            ];
+            origin.set(poses[i + 0], poses[i + 1], poses[i + 2]);
+            direction.set(poses[i + 3], poses[i + 4], poses[i + 5]);
+            // Compute the base position so the arrow ends at the origin
+            origin.sub(vec3.copy(direction).multiplyScalar(/** arrow length */ 100));
+            pose.x = origin.x;
+            pose.y = origin.y;
+            pose.z = origin.z;
+            pose.oX = direction.x;
+            pose.oY = direction.y;
+            pose.oZ = direction.z;
+            entityTraits.push(traits.Pose(pose));
+            if (colors[k + 0] && colors[k + 1] && colors[k + 2]) {
+                color.r = colors[k + 0];
+                color.g = colors[k + 1];
+                color.b = colors[k + 2];
+                entityTraits.push(traits.Color(color));
+            }
+            if (colors[k + 3]) {
+                entityTraits.push(traits.Opacity(colors[k + 3]));
+            }
+            const entity = world.spawn(...entityTraits, traits.Arrow, traits.SnapshotAPI);
+            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);
+        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);
+            entities.push(entity);
+        }
+    }
+    else {
+        const entityTraits = [
+            traits.Name(drawing.referenceFrame),
+            traits.Pose(poseInFrame?.pose),
+        ];
+        if (parent && parent !== 'world') {
+            entityTraits.push(traits.Parent);
+        }
+        if (drawing.metadata?.colors) {
+            const colors = rgbaBytesToFloat32(drawing.metadata.colors);
+            if (colors.length === 4) {
+                entityTraits.push(traits.Color({ r: colors[0], g: colors[1], b: colors[2] }), traits.Opacity(colors[3]));
+            }
+            else {
+                entityTraits.push(traits.VertexColors(colors));
+            }
+        }
+        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));
+            if (geometryType.value.pointSize) {
+                entityTraits.push(traits.PointSize(geometryType.value.pointSize * 0.001));
+            }
+        }
+        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;
+            }
+            entityTraits.push(traits.PointsPositions(positions));
+            if (geometryType.value.pointSize) {
+                entityTraits.push(traits.PointSize(geometryType.value.pointSize * 0.001));
+            }
+        }
+        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 entity = world.spawn(...entityTraits, traits.SnapshotAPI);
+        entities.push(entity);
+    }
+    return entities;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "1.1.5",
+  "version": "1.2.0",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",

package/dist/components/Pointcloud.svelte.d.ts

@@ -1,9 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { Entity } from 'koota';
-interface Props {
-    entity: Entity;
-    children?: Snippet;
-}
-declare const Pointcloud: import("svelte").Component<Props, {}, "">;
-type Pointcloud = ReturnType<typeof Pointcloud>;
-export default Pointcloud;