@viamrobotics/motion-tools 1.2.1 → 1.2.3

package/dist/attribute.d.ts

@@ -0,0 +1,3 @@
+import { BufferGeometry } from 'three';
+export declare const createBufferGeometry: (positions: Float32Array, colors?: Float32Array | null) => BufferGeometry<import("three").NormalBufferAttributes, import("three").BufferGeometryEventMap>;
+export declare const updateBufferGeometry: (geometry: BufferGeometry, positions: Float32Array, colors?: Float32Array | null) => void;

package/dist/attribute.js

@@ -0,0 +1,30 @@
+import { BufferGeometry, BufferAttribute } from 'three';
+export const createBufferGeometry = (positions, colors) => {
+    const geometry = new BufferGeometry();
+    geometry.setAttribute('position', new BufferAttribute(positions, 3));
+    if (colors) {
+        geometry.setAttribute('color', new BufferAttribute(colors, 3));
+    }
+    return geometry;
+};
+export const updateBufferGeometry = (geometry, positions, colors) => {
+    const positionAttr = geometry.getAttribute('position');
+    if (positionAttr && positionAttr.array.length >= positions.length) {
+        positionAttr.array.set(positions, 0);
+        geometry.setDrawRange(0, positions.length);
+        positionAttr.needsUpdate = true;
+    }
+    else {
+        geometry.setAttribute('position', new BufferAttribute(positions, 3));
+    }
+    if (colors) {
+        const colorAttr = geometry.getAttribute('color');
+        if (colorAttr && colorAttr.array.length >= colors.length) {
+            colorAttr.array.set(colors, 0);
+            colorAttr.needsUpdate = true;
+        }
+        else {
+            geometry.setAttribute('color', new BufferAttribute(colors, 3));
+        }
+    }
+};

package/dist/components/Entities.svelte

@@ -37,10 +37,11 @@
 		Not(traits.FramesAPI),
 		Not(traits.GeometriesAPI),
 		Not(traits.WorldStateStoreAPI),
+		Not(traits.Points),
 		Or(traits.Box, traits.Capsule, traits.Sphere, traits.BufferGeometry, traits.ReferenceFrame)
 	)
 
-	const points = useQuery(traits.PointsPositions)
+	const points = useQuery(traits.Points)
 	const lines = useQuery(traits.LinePositions)
 	const gltfs = useQuery(traits.GLTF)
 </script>

package/dist/components/FileDrop/FileDrop.svelte

@@ -7,6 +7,7 @@
 	import { traits } from '../../ecs'
 	import { spawnSnapshotEntities } from '../../snapshot'
 	import { useCameraControls } from '../../hooks/useControls.svelte'
+	import { createBufferGeometry } from '../../attribute'
 
 	const props: HTMLAttributes<HTMLDivElement> = $props()
 
@@ -34,21 +35,25 @@
 
 					break
 				}
-				case 'pcd':
+				case 'pcd': {
+					const geometry = createBufferGeometry(result.pcd.positions, result.pcd.colors)
+
 					world.spawn(
 						traits.Name(result.name),
-						traits.PointsPositions(result.pcd.positions),
-						result.pcd.colors ? traits.VertexColors(result.pcd.colors) : traits.Color,
+						traits.BufferGeometry(geometry),
+						traits.Points,
 						traits.DroppedFile
 					)
 					break
-				case 'ply':
+				}
+				case 'ply': {
 					world.spawn(
 						traits.Name(result.name),
 						traits.BufferGeometry(result.ply),
 						traits.DroppedFile
 					)
 					break
+				}
 			}
 
 			toast({ message: `${result.name} loaded.`, variant: ToastVariant.Success })

package/dist/components/Points.svelte

@@ -1,11 +1,5 @@
 <script lang="ts">
-	import {
-		Points,
-		BufferAttribute,
-		BufferGeometry,
-		PointsMaterial,
-		OrthographicCamera,
-	} from 'three'
+	import { Points, PointsMaterial, OrthographicCamera } from 'three'
 	import { T, useTask, useThrelte } from '@threlte/core'
 	import { Portal } from '@threlte/extras'
 	import { useObjectEvents } from '../hooks/useObjectEvents.svelte'
@@ -28,9 +22,8 @@
 	const name = useTrait(() => entity, traits.Name)
 	const parent = useTrait(() => entity, traits.Parent)
 	const pose = useTrait(() => entity, traits.Pose)
-	const positions = useTrait(() => entity, traits.PointsPositions)
+	const geometry = useTrait(() => entity, traits.BufferGeometry)
 	const color = useTrait(() => entity, traits.Color)
-	const colors = useTrait(() => entity, traits.VertexColors)
 	const opacity = useTrait(() => entity, traits.Opacity)
 	const entityPointSize = useTrait(() => entity, traits.PointSize)
 
@@ -40,8 +33,7 @@
 	const orthographic = $derived(settings.current.cameraMode === 'orthographic')
 
 	const points = new Points()
-	const geometry = new BufferGeometry()
-	const material = new PointsMaterial()
+	const material = points.material as PointsMaterial
 	material.toneMapped = false
 
 	$effect.pre(() => {
@@ -49,7 +41,7 @@
 	})
 
 	$effect.pre(() => {
-		if (colors.current) {
+		if (geometry.current?.getAttribute('color')) {
 			material.color.set(0xffffff)
 		} else if (color.current) {
 			material.color.setRGB(color.current.r, color.current.g, color.current.b)
@@ -74,25 +66,18 @@
 	})
 
 	$effect.pre(() => {
-		if (positions.current) {
-			geometry.setAttribute('position', new BufferAttribute(positions.current, 3))
-		}
-	})
+		const colors = geometry.current?.getAttribute('color')
+		const positions = geometry.current?.getAttribute('position')
 
-	$effect.pre(() => {
-		material.vertexColors = colors.current !== undefined
+		material.vertexColors = colors !== undefined
 
-		if (colors.current && positions.current) {
-			const vertexColors = colors.current
-			const hasAlphaChannel = positions.current.length / vertexColors.length === 0.75
-			const itemSize = hasAlphaChannel ? 4 : 3
-			geometry.setAttribute('color', new BufferAttribute(vertexColors, itemSize))
-			geometry.attributes.color.needsUpdate = true
+		if (colors && positions) {
+			const hasAlphaChannel = positions.array.length / colors.array.length === 0.75
 
 			let transparent = false
 			if (hasAlphaChannel) {
-				for (let i = 3, l = vertexColors.length; i < l; i += 4) {
-					if (vertexColors[i] < 1) {
+				for (let i = 3, l = colors.array.length; i < l; i += 4) {
+					if (colors.array[i] < 1) {
 						transparent = true
 						break
 					}
@@ -133,15 +118,17 @@
 	})
 </script>
 
-<Portal id={parent.current}>
-	<T
-		is={points}
-		name={name.current}
-		{...events}
-		bvh={{ maxDepth: 40, maxLeafTris: 20 }}
-	>
-		<T is={geometry} />
-		<T is={material} />
-		{@render children?.()}
-	</T>
-</Portal>
+{#if geometry.current}
+	<Portal id={parent.current}>
+		<T
+			is={points}
+			name={name.current}
+			{...events}
+			bvh={{ maxDepth: 40, maxLeafTris: 20 }}
+		>
+			<T is={geometry.current} />
+			<T is={material} />
+			{@render children?.()}
+		</T>
+	</Portal>
+{/if}

package/dist/components/Tree/TreeContainer.svelte

@@ -42,6 +42,7 @@
 	const flush = () => {
 		if (pending) return
 		pending = true
+
 		window.setTimeout(() => {
 			const results = buildTreeNodes(world.query(traits.Name))
 			children = results.rootNodes

package/dist/components/shared/Table.svelte

@@ -11,27 +11,3 @@
 <table class="motion-tools-table">
 	{@render children?.()}
 </table>
-
-<style>
-	@reference "../../../app.css";
-
-	.motion-tools-table {
-		@apply w-full table-auto;
-	}
-	.motion-tools-table :global(thead) {
-		@apply border-light bg-light border;
-	}
-	.motion-tools-table :global(thead th) {
-		@apply border-light text-subtle-1 border px-2.5 py-1 text-xs font-normal whitespace-nowrap;
-	}
-	.motion-tools-table :global(thead th abbr) {
-		@apply text-disabled;
-	}
-
-	.motion-tools-table :global(tbody) {
-		@apply border-light border;
-	}
-	.motion-tools-table :global(tbody th) {
-		@apply border-light font-roboto-mono text-default h-[40px] gap-2 border px-1.5 text-center text-xs font-normal;
-	}
-</style>

package/dist/ecs/traits.d.ts

@@ -45,6 +45,10 @@ export declare const Color: import("koota").Trait<{
     b: number;
 }>;
 export declare const Arrow: import("koota").TagTrait;
+/**
+ * Render entity as points
+ */
+export declare const Points: import("koota").TagTrait;
 /**
  * A box, in mm
  */
@@ -73,7 +77,6 @@ export declare const PointColor: import("koota").Trait<{
 }>;
 /** format [x, y, z, ...] */
 export declare const LinePositions: import("koota").Trait<() => Float32Array<ArrayBuffer>>;
-export declare const PointsPositions: import("koota").Trait<() => Float32Array<ArrayBuffer>>;
 export declare const BufferGeometry: import("koota").Trait<() => ThreeBufferGeometry<import("three").NormalBufferAttributes, import("three").BufferGeometryEventMap>>;
 /** format [r, g, b, ...] */
 export declare const VertexColors: import("koota").Trait<() => Float32Array<ArrayBuffer>>;

package/dist/ecs/traits.js

@@ -19,6 +19,10 @@ export const Opacity = trait(() => 1);
  */
 export const Color = trait({ r: 0, g: 0, b: 0 });
 export const Arrow = trait();
+/**
+ * Render entity as points
+ */
+export const Points = trait();
 /**
  * A box, in mm
  */
@@ -34,7 +38,6 @@ export const Sphere = trait({ r: 200 });
 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());

package/dist/hooks/useDrawAPI.svelte.js

@@ -2,7 +2,6 @@ import { getContext, setContext } from 'svelte';
 import { Color, Vector3, Vector4 } from 'three';
 import { NURBSCurve } from 'three/addons/curves/NURBSCurve.js';
 import { UuidTool } from 'uuid-tool';
-import { parsePcdInWorker } from '../loaders/pcd';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 import { createPose, createPoseFromFrame } from '../transform';
 import { useCameraControls } from './useControls.svelte';
@@ -13,6 +12,7 @@ import { parsePlyInput } from '../ply';
 import { useLogs } from './useLogs.svelte';
 import { createBox, createCapsule, createSphere } from '../geometry';
 import { useDrawConnectionConfig } from './useDrawConnectionConfig.svelte';
+import { createBufferGeometry, updateBufferGeometry } from '../attribute';
 const colorUtil = new Color();
 const bufferTypes = {
     DRAW_POINTS: 0,
@@ -74,7 +74,6 @@ export const provideDrawAPI = () => {
     const drawConnectionConfig = useDrawConnectionConfig();
     const backendIP = $derived(drawConnectionConfig.current?.backendIP);
     const websocketPort = $derived(drawConnectionConfig.current?.websocketPort);
-    let pointsIndex = 0;
     let geometryIndex = 0;
     let poseIndex = 0;
     let reconnectDelay = 200;
@@ -126,13 +125,6 @@ export const provideDrawAPI = () => {
             entities.set(name, entity);
         }
     };
-    const drawPCD = async (buffer) => {
-        const { positions, colors } = await parsePcdInWorker(new Uint8Array(buffer));
-        const entity = world.spawn(traits.Name(`Points ${++pointsIndex}`), traits.PointsPositions(positions), traits.DrawAPI);
-        if (colors) {
-            entity.add(traits.VertexColors(colors));
-        }
-    };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const drawGeometry = (data, color, parent) => {
         const name = data.label ?? `geometry ${++geometryIndex}`;
@@ -225,9 +217,6 @@ export const provideDrawAPI = () => {
         for (let i = 0; i < labelLen; i++) {
             label += String.fromCharCode(reader.read());
         }
-        const entities = world.query(traits.DrawAPI);
-        const entity = entities.find((entity) => entity.get(traits.Name) === label);
-        entity?.destroy();
         // Read counts
         const nPoints = reader.read();
         const nColors = reader.read();
@@ -250,7 +239,17 @@ export const provideDrawAPI = () => {
             colors[offset + 1] = g;
             colors[offset + 2] = b;
         }
-        world.spawn(traits.Name(label), traits.Color(colorUtil.set(r, g, b)), traits.PointsPositions(positions), traits.VertexColors(colors), traits.DrawAPI);
+        const entities = world.query(traits.DrawAPI);
+        const entity = entities.find((entity) => entity.get(traits.Name) === label);
+        if (entity) {
+            const geometry = entity.get(traits.BufferGeometry);
+            if (geometry) {
+                updateBufferGeometry(geometry, positions, colors);
+                return;
+            }
+        }
+        const geometry = createBufferGeometry(positions, colors);
+        world.spawn(traits.Name(label), traits.Color(colorUtil.set(r, g, b)), traits.BufferGeometry(geometry), traits.Points, traits.DrawAPI);
     };
     const drawLine = async (reader) => {
         // Read label length
@@ -310,7 +309,6 @@ export const provideDrawAPI = () => {
             entity.destroy();
         }
         entities.clear();
-        pointsIndex = 0;
         geometryIndex = 0;
         poseIndex = 0;
     };
@@ -364,10 +362,6 @@ export const provideDrawAPI = () => {
                     operation = 'DrawLine';
                     drawLine(reader);
                 }
-                else if (type === bufferTypes.DRAW_PCD) {
-                    operation = 'DrawPCD';
-                    drawPCD(reader.buffer);
-                }
                 else if (type === bufferTypes.DRAW_GLTF) {
                     operation = 'DrawGLTF';
                     drawGLTF(reader.buffer);

package/dist/hooks/usePointclouds.svelte.js

@@ -1,5 +1,5 @@
 import { CameraClient } from '@viamrobotics/sdk';
-import { setContext, getContext, untrack } from 'svelte';
+import { setContext, getContext } from 'svelte';
 import { createResourceClient, createResourceQuery, useResourceNames, } from '@viamrobotics/svelte-sdk';
 import { parsePcdInWorker } from '../loaders/pcd';
 import { RefreshRates, useMachineSettings } from './useMachineSettings.svelte';
@@ -7,6 +7,7 @@ import { useLogs } from './useLogs.svelte';
 import { RefetchRates } from '../components/RefreshRate.svelte';
 import { traits, useWorld } from '../ecs';
 import { useEnvironment } from './useEnvironment.svelte';
+import { createBufferGeometry, updateBufferGeometry } from '../attribute';
 const typeSafeObjectFromEntries = (entries) => {
     return Object.fromEntries(entries);
 };
@@ -26,12 +27,13 @@ export const providePointclouds = (partID) => {
             refetchInterval: false,
         }),
     ]));
-    const fetchedPropQueries = propQueries.every(([, query]) => query.isPending === false);
+    const fetchedPropQueries = $derived(propQueries.every(([, query]) => query.isPending === false));
     const interval = $derived(refreshRates.get(RefreshRates.pointclouds));
     const enabledClients = $derived.by(() => {
         const results = [];
         for (const client of clients) {
-            if (fetchedPropQueries &&
+            if (environment.current.viewerMode === 'monitor' &&
+                fetchedPropQueries &&
                 client.current?.name &&
                 interval !== RefetchRates.OFF &&
                 disabledCameras.get(client.current?.name) !== true) {
@@ -57,7 +59,6 @@ export const providePointclouds = (partID) => {
         }
     });
     const options = $derived({
-        enabled: environment.current.viewerMode === 'edit',
         refetchInterval: interval,
     });
     const queries = $derived(enabledClients.map((client) => [client.current.name, createResourceQuery(client, 'getPointCloud', () => options)]));
@@ -72,7 +73,7 @@ export const providePointclouds = (partID) => {
             }
         }
     });
-    const pcObjects = $state([]);
+    let pcObjects = $state.raw([]);
     $effect(() => {
         const binaries = [];
         for (const [name, query] of queries) {
@@ -85,14 +86,16 @@ export const providePointclouds = (partID) => {
             const { positions, colors } = await parsePcdInWorker(new Uint8Array(uint8array));
             return { name, positions, colors };
         })).then((results) => {
+            const fulfilledResults = [];
             for (const result of results) {
                 if (result.status === 'fulfilled') {
-                    untrack(() => pcObjects.push(result.value));
+                    fulfilledResults.push(result.value);
                 }
                 else if (result.status === 'rejected') {
                     logs.add(result.reason, 'error');
                 }
             }
+            pcObjects = fulfilledResults;
         });
     });
     const entities = new Map();
@@ -101,13 +104,14 @@ export const providePointclouds = (partID) => {
         for (const { name, positions, colors } of pcObjects) {
             const existing = entities.get(name);
             if (existing) {
-                existing.set(traits.PointsPositions, positions);
-                if (colors) {
-                    existing.set(traits.VertexColors, colors);
+                const geometry = existing.get(traits.BufferGeometry);
+                if (geometry) {
+                    updateBufferGeometry(geometry, positions, colors);
+                    continue;
                 }
-                continue;
             }
-            const entity = world.spawn(traits.Parent(name), traits.Name(`${name} pointcloud`), traits.PointsPositions(positions), colors ? traits.VertexColors(colors) : traits.Color);
+            const geometry = createBufferGeometry(positions, colors);
+            const entity = world.spawn(traits.Parent(name), traits.Name(`${name} pointcloud`), traits.BufferGeometry(geometry), traits.Points);
             entities.set(name, entity);
         }
         // Clean up old entities

package/dist/snapshot.js

@@ -8,6 +8,7 @@ import { parseMetadata } from './WorldObject.svelte';
 import { rgbaBytesToFloat32, rgbaToHex } from './color';
 import { asFloat32Array, STRIDE } from './buffer';
 import { createPose } from './transform';
+import { createBufferGeometry } from './attribute';
 const vec3 = new Vector3();
 const origin = new Vector3();
 const direction = new Vector3();
@@ -222,10 +223,15 @@ const spawnEntitiesFromDrawing = (world, drawing) => {
             for (let i = 0, l = positions.length; i < l; i += 1) {
                 positions[i] *= 0.001;
             }
-            entityTraits.push(traits.PointsPositions(positions));
+            const colors = drawing.metadata?.colors
+                ? rgbaBytesToFloat32(drawing.metadata.colors)
+                : undefined;
+            const geometry = createBufferGeometry(positions, colors);
+            entityTraits.push(traits.BufferGeometry(geometry));
             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;

package/package.json

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