@viamrobotics/motion-tools 1.2.2 → 1.3.0

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/SceneProviders.svelte

@@ -20,6 +20,7 @@
 	import { provideFramelessComponents } from '../hooks/useFramelessComponents.svelte'
 	import { provideResourceByName } from '../hooks/useResourceByName.svelte'
 	import { provide3DModels } from '../hooks/use3DModels.svelte'
+	import { providePointcloudObjects } from '../hooks/usePointcloudObjects.svelte'
 
 	interface Props {
 		cameraPose?: CameraPose
@@ -44,6 +45,7 @@
 	provideGeometries(() => partID.current)
 	provide3DModels(() => partID.current)
 	providePointclouds(() => partID.current)
+	providePointcloudObjects(() => partID.current)
 	provideArmClient(() => partID.current)
 	provideWorldStates()
 	provideFramelessComponents()

package/dist/components/Tree/Settings.svelte

@@ -16,8 +16,9 @@
 	const { invalidate } = useThrelte()
 	const partID = usePartID()
 	const cameras = useResourceNames(() => partID.current, 'camera')
+	const visionServices = useResourceNames(() => partID.current, 'vision')
 	const settings = useSettings()
-	const { disabledCameras } = useMachineSettings()
+	const { disabledCameras, disabledVisionServicesObjectPointclouds } = useMachineSettings()
 	const geometries = useGeometries()
 	const pointclouds = usePointClouds()
 	const { refetchPoses } = useRefetchPoses()
@@ -56,8 +57,9 @@
 				pointclouds.refetch()
 			}}
 		/>
-		<div>
-			<div>Enabled pointcloud cameras</div>
+
+		<div class="mt-4">
+			<h3 class="text-sm"><strong>Enabled pointcloud cameras</strong></h3>
 			{#each cameras.current as camera (camera)}
 				<div class="flex items-center justify-between gap-4 py-2">
 					{camera.name}
@@ -73,6 +75,23 @@
 			{/each}
 		</div>
 
+		<div class="mt-4">
+			<h3 class="text-sm"><strong>Enabled vision services</strong></h3>
+			{#each visionServices.current as visionService (visionService)}
+				<div class="flex items-center justify-between gap-4 py-2">
+					{visionService.name}
+					<Switch
+						on={disabledVisionServicesObjectPointclouds.get(visionService.name) !== true}
+						on:change={(event) => {
+							disabledVisionServicesObjectPointclouds.set(visionService.name, !event.detail)
+						}}
+					/>
+				</div>
+			{:else}
+				No vision services detected
+			{/each}
+		</div>
+
 		<h3 class="pt-2 text-sm"><strong>Pointclouds</strong></h3>
 		<div class="flex flex-col gap-2.5">
 			<label class="flex items-center justify-between gap-2">

package/dist/components/Tree/TreeContainer.svelte

@@ -28,7 +28,10 @@
 
 	const partID = usePartID()
 	const selectedEntity = useSelectedEntity()
-	const resizable = useResizable(() => 'treeview')
+	const resizable = useResizable(
+		() => 'treeview',
+		() => ({ width: 240, height: window.innerHeight - 20 })
+	)
 	const environment = useEnvironment()
 	const partConfig = usePartConfig()
 	const world = useWorld()
@@ -42,6 +45,7 @@
 	const flush = () => {
 		if (pending) return
 		pending = true
+
 		window.setTimeout(() => {
 			const results = buildTreeNodes(world.query(traits.Name))
 			children = results.rootNodes

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/entries.d.ts

@@ -0,0 +1 @@
+export declare const typeSafeObjectFromEntries: <const T extends ReadonlyArray<readonly [PropertyKey, unknown]>>(entries: T) => { [K in T[number] as K[0]]: K[1]; };

package/dist/entries.js

@@ -0,0 +1,3 @@
+export const typeSafeObjectFromEntries = (entries) => {
+    return Object.fromEntries(entries);
+};

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/useMachineSettings.svelte.d.ts

@@ -6,6 +6,7 @@ export declare const RefreshRates: {
 type Context = {
     refreshRates: SvelteMap<string, number>;
     disabledCameras: SvelteMap<string, boolean>;
+    disabledVisionServicesObjectPointclouds: SvelteMap<string, boolean>;
 };
 export declare const provideMachineSettings: () => void;
 export declare const useMachineSettings: () => Context;

package/dist/hooks/useMachineSettings.svelte.js

@@ -4,6 +4,7 @@ import { SvelteMap } from 'svelte/reactivity';
 const key = Symbol('polling-rate-context');
 const refreshRatesKey = 'polling-rate';
 const disabledCamerasKey = 'disabled-cameras';
+const disabledVisionServicesObjectPointcloudsKey = 'disabled-vision-services-object-pointcloud';
 export const RefreshRates = {
     poses: 'poses',
     pointclouds: 'pointclouds',
@@ -21,12 +22,16 @@ export const provideMachineSettings = () => {
         [RefreshRates.pointclouds, -1],
     ]);
     const disabledCameras = new SvelteMap();
+    const disabledVisionServicesObjectPointclouds = new SvelteMap();
     get(refreshRatesKey).then((entries) => {
         setFromEntries(refreshRates, entries);
     });
     get(disabledCamerasKey).then((entries) => {
         setFromEntries(disabledCameras, entries);
     });
+    get(disabledVisionServicesObjectPointcloudsKey).then((entries) => {
+        setFromEntries(disabledVisionServicesObjectPointclouds, entries);
+    });
     $effect(() => {
         set(refreshRatesKey, [...refreshRates.entries()]);
     });
@@ -40,6 +45,9 @@ export const provideMachineSettings = () => {
         get disabledCameras() {
             return disabledCameras;
         },
+        get disabledVisionServicesObjectPointclouds() {
+            return disabledVisionServicesObjectPointclouds;
+        },
     });
 };
 export const useMachineSettings = () => {

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

@@ -0,0 +1,6 @@
+interface Context {
+    refetch: () => void;
+}
+export declare const providePointcloudObjects: (partID: () => string) => void;
+export declare const usePointcloudObjects: () => Context;
+export {};

package/dist/hooks/usePointcloudObjects.svelte.js

@@ -0,0 +1,174 @@
+import { GeometriesInFrame, PointCloudObject, VisionClient } from '@viamrobotics/sdk';
+import { createResourceClient, createResourceQuery, useResourceNames, } from '@viamrobotics/svelte-sdk';
+import { RefreshRates, useMachineSettings } from './useMachineSettings.svelte';
+import { useLogs } from './useLogs.svelte';
+import { parsePcdInWorker } from '../lib';
+import { getContext, setContext } from 'svelte';
+import { traits, useWorld } from '../ecs';
+import { createBufferGeometry, updateBufferGeometry } from '../attribute';
+import { useEnvironment } from './useEnvironment.svelte';
+import { RefetchRates } from '../components/RefreshRate.svelte';
+import { createPose } from '../transform';
+const key = Symbol('pointcloud-object-context');
+export const providePointcloudObjects = (partID) => {
+    const world = useWorld();
+    const environment = useEnvironment();
+    const { refreshRates, disabledVisionServicesObjectPointclouds } = useMachineSettings();
+    const services = useResourceNames(partID, 'vision');
+    const clients = $derived(services.current.map((service) => createResourceClient(VisionClient, partID, () => service.name)));
+    const propQueries = $derived(clients.map((client) => [
+        client.current?.name,
+        createResourceQuery(client, 'getProperties', {
+            staleTime: Infinity,
+            refetchOnMount: false,
+            refetchInterval: false,
+        }),
+    ]));
+    const fetchedPropQueries = $derived(propQueries.every(([, query]) => query.isPending === false));
+    const enabledClients = $derived.by(() => {
+        const results = [];
+        for (const client of clients) {
+            if (environment.current.viewerMode === 'monitor' &&
+                fetchedPropQueries &&
+                client.current?.name &&
+                interval !== RefetchRates.OFF) {
+                results.push(client);
+            }
+        }
+        return results;
+    });
+    /**
+     * Some machines have a lot of vision services, so before enabling all of them
+     * we'll first check pointcloud object support.
+     *
+     * We'll disable cameras that don't support pointclouds,
+     * but still allow users to manually enable if they want to.
+     */
+    $effect(() => {
+        for (const [name, query] of propQueries) {
+            if (name && query.data?.objectPointCloudsSupported === false) {
+                if (disabledVisionServicesObjectPointclouds.get(name) === undefined) {
+                    disabledVisionServicesObjectPointclouds.set(name, true);
+                }
+            }
+        }
+    });
+    const logs = useLogs();
+    const interval = $derived(refreshRates.get(RefreshRates.pointclouds));
+    const options = $derived({
+        enabled: interval !== -1,
+        refetchInterval: (interval === 0 ? false : interval),
+    });
+    const queries = $derived(enabledClients.map((client) => [
+        client.current.name,
+        createResourceQuery(client, 'getObjectPointClouds', [''], () => options),
+    ]));
+    $effect(() => {
+        for (const [name, query] of queries) {
+            if (query.isFetching) {
+                logs.add(`Fetching pointcloud for ${name}...`);
+            }
+            else if (query.error) {
+                logs.add(`Error fetching pointcloud from ${name}: ${query.error.message}`, 'error');
+            }
+        }
+    });
+    let pcResults = $state.raw([]);
+    $effect(() => {
+        const responses = [];
+        for (const [name, query] of queries) {
+            const { data } = query;
+            if (name && data) {
+                responses.push([name, data]);
+            }
+        }
+        Promise.allSettled(responses.map(async ([name, pointcloudObjects]) => {
+            const pointclouds = await Promise.all(pointcloudObjects.map((value) => parsePcdInWorker(new Uint8Array(value.pointCloud))));
+            return {
+                name,
+                pointclouds,
+                geometries: pointcloudObjects.map((value) => value.geometries),
+            };
+        })).then((results) => {
+            const fulfilledResults = [];
+            for (const result of results) {
+                if (result.status === 'fulfilled') {
+                    fulfilledResults.push(result.value);
+                }
+                else if (result.status === 'rejected') {
+                    logs.add(result.reason, 'error');
+                }
+            }
+            pcResults = fulfilledResults;
+        });
+    });
+    const entities = new Map();
+    $effect(() => {
+        const active = {};
+        for (const { name, pointclouds, geometries } of pcResults) {
+            for (const [pointcloudIndex, pointcloud] of pointclouds.entries()) {
+                const poincloudLabel = `${name} pointcloud ${pointcloudIndex + 1}`;
+                const existing = entities.get(poincloudLabel);
+                active[poincloudLabel] = true;
+                if (existing) {
+                    const geometry = existing.get(traits.BufferGeometry);
+                    if (geometry) {
+                        updateBufferGeometry(geometry, pointcloud.positions, pointcloud.colors);
+                    }
+                }
+                else {
+                    const geometry = createBufferGeometry(pointcloud.positions, pointcloud.colors);
+                    const entity = world.spawn(traits.Name(poincloudLabel), traits.BufferGeometry(geometry), traits.Points);
+                    entities.set(poincloudLabel, entity);
+                }
+                if (geometries) {
+                    for (const geometriesInFrame of geometries) {
+                        if (geometriesInFrame) {
+                            for (const [geometryIndex, geometry] of geometriesInFrame.geometries.entries()) {
+                                const geometryLabel = `${name} pointcloud ${pointcloudIndex} geometry ${geometryIndex + 1}`;
+                                const pose = createPose(geometry.center);
+                                active[geometryLabel] = true;
+                                const existing = entities.get(geometryLabel);
+                                if (existing) {
+                                    existing.set(traits.Pose, pose);
+                                }
+                                else {
+                                    const entityTraits = [
+                                        traits.Name(geometryLabel),
+                                        traits.Pose(pose),
+                                        traits.GeometriesAPI,
+                                        traits.Geometry(geometry),
+                                        traits.Opacity(0.2),
+                                        traits.Color({ r: 0, g: 1, b: 0 }),
+                                    ];
+                                    if (geometriesInFrame.referenceFrame) {
+                                        entityTraits.push(traits.Parent(geometriesInFrame.referenceFrame));
+                                    }
+                                    const entity = world.spawn(...entityTraits);
+                                    entities.set(geometryLabel, entity);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        // Clean up old entities
+        for (const [label, entity] of entities) {
+            if (!active[label]) {
+                entity.destroy();
+                entities.delete(label);
+            }
+        }
+    });
+    setContext(key, {
+        refetch() {
+            for (const [, query] of queries) {
+                query.refetch();
+            }
+        },
+    });
+};
+export const usePointcloudObjects = () => {
+    return getContext(key);
+};

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/hooks/useResizable.svelte.d.ts

@@ -8,5 +8,5 @@ interface Context {
     observe: (target: HTMLElement) => void;
 }
 export declare const MIN_DIMENSIONS: Dimensions;
-export declare const useResizable: (name: () => string) => Context;
+export declare const useResizable: (name: () => string, defaultDimensions?: () => Dimensions) => Context;
 export {};

package/dist/hooks/useResizable.svelte.js

@@ -1,8 +1,8 @@
 import { get, set } from 'idb-keyval';
 export const MIN_DIMENSIONS = { width: 240, height: 320 };
-export const useResizable = (name) => {
+export const useResizable = (name, defaultDimensions) => {
     const key = $derived(`${name()}-resizable`);
-    let dimensions = $state.raw(MIN_DIMENSIONS);
+    let dimensions = $derived(defaultDimensions?.() ?? MIN_DIMENSIONS);
     let loaded = $state(false);
     let observer;
     $effect(() => {

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/dist/three/arrow.js

@@ -7,7 +7,7 @@ import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js
  */
 export const createArrowGeometry = () => {
     const length = 0.1;
-    const headLength = length * 0.2;
+    const headLength = length * 0.3;
     const headWidth = headLength * 0.3;
     const tailLength = length - headLength;
     const tailWidth = 0.001;
@@ -15,7 +15,7 @@ export const createArrowGeometry = () => {
     const tailGeometry = new BoxGeometry(tailWidth, tailLength, tailWidth);
     tailGeometry.translate(0, tailLength * 0.5, 0);
     // Head: cone centered at origin spanning [-h/2, +h/2] in y
-    const radialSegments = 5;
+    const radialSegments = 3;
     const headGeo = new ConeGeometry(headWidth * 0.5, headLength, radialSegments, 1, false);
     // Place its center at y = shaftLength + headLength/2 so tip lands at y = shaftLength + headLength
     headGeo.translate(0, tailLength + headLength * 0.5, 0);

package/package.json

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