@viamrobotics/motion-tools 0.14.11 → 0.15.0

package/dist/WorldObject.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Geometry, PlainMessage, Pose, Struct, TransformWithUUID } from '@viamrobotics/sdk';
-import { BatchedMesh, Color, Object3D, Vector3 } from 'three';
+import { BatchedMesh, Color, Object3D, Vector3, type BufferGeometry } from 'three';
 import type { ValueOf } from 'type-fest';
 import type { OBB } from 'three/addons/math/OBB.js';
 export type PointsGeometry = {
@@ -16,7 +16,14 @@ export type LinesGeometry = {
         value: Float32Array;
     };
 };
-export type Geometries = Geometry | PointsGeometry | LinesGeometry;
+export type ThreeBufferGeometry = {
+    center: undefined;
+    geometryType: {
+        case: 'bufferGeometry';
+        value: BufferGeometry;
+    };
+};
+export type Geometries = Geometry | PointsGeometry | LinesGeometry | ThreeBufferGeometry;
 export declare const SupportedShapes: {
     readonly points: "points";
     readonly line: "line";

package/dist/color.js

@@ -102,8 +102,8 @@ export const isRGB = (color) => {
 };
 export const parseRGB = (color, defaultColor = { r: 0, g: 0, b: 0 }) => {
     if (!isRGB(color))
-        return new Color().setRGB(defaultColor.r, defaultColor.g, defaultColor.b);
-    return new Color().setRGB(color.r, color.g, color.b);
+        return new Color().setRGB(defaultColor.r > 1 ? defaultColor.r / 255 : defaultColor.r, defaultColor.g > 1 ? defaultColor.g / 255 : defaultColor.g, defaultColor.b > 1 ? defaultColor.b / 255 : defaultColor.b);
+    return new Color().setRGB(color.r > 1 ? color.r / 255 : color.r, color.g > 1 ? color.g / 255 : color.g, color.b > 1 ? color.b / 255 : color.b);
 };
 export const parseOpacity = (opacity, defaultOpacity = 1) => {
     if (!isNumber(opacity))

package/dist/components/Details.svelte

@@ -27,7 +27,8 @@
 	import { usePartConfig } from '../hooks/usePartConfig.svelte'
 	import { FrameConfigUpdater } from '../FrameConfigUpdater.svelte'
 	import { useWeblabs } from '../hooks/useWeblabs.svelte'
-
+	import { WEBLABS_EXPERIMENTS } from '../hooks/useWeblabs.svelte'
+	import { useEnvironment } from '../hooks/useEnvironment.svelte'
 	const { ...rest } = $props()
 
 	const focused = useFocused()
@@ -38,7 +39,7 @@
 	const selectedObject = useSelectedObject()
 	const selectedObject3d = useSelectedObject3d()
 	const weblab = useWeblabs()
-
+	const environment = useEnvironment()
 	const object = $derived(focusedObject.current ?? selectedObject.current)
 	const object3d = $derived(focusedObject3d.current ?? selectedObject3d.current)
 	const worldPosition = $state({ x: 0, y: 0, z: 0 })
@@ -104,7 +105,7 @@
 	})
 
 	const getCopyClipboardText = () => {
-		if (weblab.isActive('MOTION_TOOLS_EDIT_FRAME')) {
+		if (weblab.isActive(WEBLABS_EXPERIMENTS.MOTION_TOOLS_EDIT_FRAME)) {
 			return JSON.stringify(
 				{
 					worldPosition: worldPosition,
@@ -303,7 +304,7 @@
 				</div>
 			{/if}
 
-			<WeblabActive experiment="MOTION_TOOLS_EDIT_FRAME">
+			<WeblabActive experiment={WEBLABS_EXPERIMENTS.MOTION_TOOLS_EDIT_FRAME}>
 				{@const ParentFrame = showEditFrameOptions ? DropDownField : ImmutableField}
 
 				<div>
@@ -487,7 +488,7 @@
 			</WeblabActive>
 
 			<WeblabActive
-				experiment="MOTION_TOOLS_EDIT_FRAME"
+				experiment={WEBLABS_EXPERIMENTS.MOTION_TOOLS_EDIT_FRAME}
 				renderIfActive={false}
 			>
 				{#if object.geometry}
@@ -563,8 +564,8 @@
 			</Button>
 		{/if}
 
-		<WeblabActive experiment="MOTION_TOOLS_EDIT_FRAME">
-			{#if showEditFrameOptions}
+		<WeblabActive experiment={WEBLABS_EXPERIMENTS.MOTION_TOOLS_EDIT_FRAME}>
+			{#if showEditFrameOptions && environment.current.isStandalone}
 				<Button
 					variant="danger"
 					class="mt-2 w-full"

package/dist/components/FileDrop.svelte

@@ -2,10 +2,11 @@
 	import { useDrawAPI } from '../hooks/useDrawAPI.svelte'
 	import { parsePcdInWorker, WorldObject } from '../lib'
 	import { useToast, ToastVariant } from '@viamrobotics/prime-core'
+	import { PLYLoader } from 'three/examples/jsm/Addons.js'
 
 	let { ...rest } = $props()
 
-	const { addPoints } = useDrawAPI()
+	const { addPoints, addMesh } = useDrawAPI()
 
 	type DropStates = 'inactive' | 'hovering' | 'loading'
 
@@ -31,6 +32,12 @@
 
 	const toast = useToast()
 
+	const extensions = {
+		PCD: 'pcd',
+		PLY: 'ply',
+	}
+	const supportedFiles = [extensions.PCD, extensions.PLY]
+
 	const ondrop = (event: DragEvent) => {
 		event.preventDefault()
 
@@ -45,9 +52,18 @@
 		for (const file of files) {
 			const ext = file.name.split('.').at(-1)
 
-			if (ext !== '.pcd') {
+			if (!ext) {
+				toast({
+					message: `Could not determine file extension.`,
+					variant: ToastVariant.Danger,
+				})
+
+				continue
+			}
+
+			if (!supportedFiles.includes(ext)) {
 				toast({
-					message: `.${ext} is not a supported file type.`,
+					message: `Only ${supportedFiles.map((file) => `.${file}`).join(', ')} files are supported.`,
 					variant: ToastVariant.Danger,
 				})
 
@@ -65,34 +81,55 @@
 			})
 
 			reader.addEventListener('error', () => {
-				toast({ message: `${file.name} failed to load.`, variant: ToastVariant.Danger })
+				toast({
+					message: `${file.name} failed to load.`,
+					variant: ToastVariant.Danger,
+				})
 			})
 
 			reader.addEventListener('load', async (event) => {
 				const arrayBuffer = event.target?.result
 
 				if (!arrayBuffer || typeof arrayBuffer === 'string') {
+					toast({
+						message: `${file.name} failed to load.`,
+						variant: ToastVariant.Danger,
+					})
+
 					return
 				}
 
-				const result = await parsePcdInWorker(new Uint8Array(arrayBuffer))
-
-				addPoints(
-					new WorldObject(
-						file.name,
-						undefined,
-						undefined,
-						{
-							center: undefined,
-							geometryType: {
-								case: 'points',
-								value: result.positions,
+				if (ext === extensions.PCD) {
+					const result = await parsePcdInWorker(new Uint8Array(arrayBuffer))
+
+					addPoints(
+						new WorldObject(
+							file.name,
+							undefined,
+							undefined,
+							{
+								center: undefined,
+								geometryType: {
+									case: 'points',
+									value: result.positions,
+								},
 							},
-						},
-						result.colors ? { colors: result.colors } : undefined
+							result.colors ? { colors: result.colors } : undefined
+						)
 					)
-				)
-				toast({ message: `Loaded ${file.name}`, variant: ToastVariant.Success })
+
+					toast({ message: `Loaded ${file.name}`, variant: ToastVariant.Success })
+				} else if (ext === extensions.PLY) {
+					const result = new PLYLoader().parse(arrayBuffer)
+					const worldObject = new WorldObject(file.name, undefined, undefined, {
+						center: undefined,
+						geometryType: { case: 'bufferGeometry', value: result },
+					})
+
+					addMesh(worldObject)
+
+					toast({ message: `Loaded ${file.name}`, variant: ToastVariant.Success })
+				}
 			})
 
 			reader.readAsArrayBuffer(file)

package/dist/components/Geometry.svelte

@@ -103,7 +103,12 @@
 			{uuid}
 			bvh={{ enabled: false }}
 		>
-			{#if geometry.geometryType.case === 'mesh'}
+			{#if geometry.geometryType.case === 'bufferGeometry'}
+				<T
+					is={geometry.geometryType.value}
+					{oncreate}
+				/>
+			{:else if geometry.geometryType.case === 'mesh'}
 				{@const mesh = geometry.geometryType.value.mesh}
 				{@const meshGeometry = parsePlyInput(mesh)}
 				<T

package/dist/components/Tree/TreeContainer.svelte

@@ -15,6 +15,8 @@
 	import { useEnvironment } from '../../hooks/useEnvironment.svelte'
 	import { usePartID } from '../../hooks/usePartID.svelte'
 	import { usePartConfig } from '../../hooks/usePartConfig.svelte'
+	import WeblabActive from '../weblab/WeblabActive.svelte'
+	import { WEBLABS_EXPERIMENTS } from '../../hooks/useWeblabs.svelte'
 	const { ...rest } = $props()
 
 	provideTreeExpandedContext()
@@ -60,9 +62,11 @@
 		/>
 	{/key}
 
-	{#if environment.current.isStandalone && partID.current && partConfig.hasEditPermissions}
-		<AddFrames />
-	{/if}
+	<WeblabActive experiment={WEBLABS_EXPERIMENTS.MOTION_TOOLS_EDIT_FRAME}>
+		{#if environment.current.isStandalone && partID.current && partConfig.hasEditPermissions}
+			<AddFrames />
+		{/if}
+	</WeblabActive>
 
 	<Logs />
 	<Settings />

package/dist/components/Tree/buildTree.js

@@ -39,8 +39,11 @@ export const buildTreeNodes = (objects, worldStates) => {
                 children: [],
                 href: `/world-state/${worldState.name}/${object.name}`,
             };
+            const parentNode = object.referenceFrame && nodeMap.has(object.referenceFrame)
+                ? nodeMap.get(object.referenceFrame)
+                : node;
             nodeMap.set(object.name, child);
-            node.children?.push(child);
+            parentNode.children?.push(child);
         }
         nodeMap.set(worldState.name, node);
         rootNodes.push(node);

package/dist/components/WorldObjects.svelte

@@ -18,6 +18,7 @@
 	import { useWeblabs } from '../hooks/useWeblabs.svelte'
 	import type { WorldObject } from '../WorldObject.svelte'
 	import type { Pose as ViamPose } from '@viamrobotics/sdk'
+	import { WEBLABS_EXPERIMENTS } from '../hooks/useWeblabs.svelte'
 	const points = usePointClouds()
 	const drawAPI = useDrawAPI()
 	const frames = useFrames()
@@ -27,7 +28,7 @@
 	const weblabs = useWeblabs()
 
 	const weblabedDeterminePose = (object: WorldObject, pose: ViamPose | undefined) => {
-		if (weblabs.isActive('MOTION_TOOLS_EDIT_FRAME')) {
+		if (weblabs.isActive(WEBLABS_EXPERIMENTS.MOTION_TOOLS_EDIT_FRAME)) {
 			return determinePose(object, pose)
 		}
 		return pose ?? object.pose

package/dist/components/WorldState.svelte

@@ -6,8 +6,9 @@
 	import Portal from './portal/Portal.svelte'
 	import PortalTarget from './portal/PortalTarget.svelte'
 	import { WorldObject } from '../WorldObject.svelte'
-	import { useArrows } from '../hooks/useArrows.svelte'
 	import { poseToDirection } from '../transform'
+	import { BatchedArrow } from '../three/BatchedArrow'
+	import { T } from '@threlte/core'
 
 	interface Props {
 		worldObjects: WorldObject[]
@@ -15,38 +16,36 @@
 
 	let { worldObjects }: Props = $props()
 
-	const batchedArrow = useArrows()
 	const currentArrows: Record<string, { id: number; arrow: WorldObject }> = {}
+	const arrowBatches = $state<Record<string, BatchedArrow>>({})
 
 	const arrows = $derived(worldObjects.filter((object) => object.metadata?.shape === 'arrow'))
 	const objects = $derived(worldObjects.filter((object) => object.metadata?.shape !== 'arrow'))
 
 	const getArrows = () => ({ ...currentArrows })
-	const getArrow = (uuid: string) => currentArrows[uuid]
-	const removeArrow = (uuid: string) => delete currentArrows[uuid]
+	const getArrow = (referenceFrame: string, uuid: string) =>
+		currentArrows[`${referenceFrame}:${uuid}`]
+
+	const removeArrow = (referenceFrame: string, uuid: string) => {
+		delete currentArrows[`${referenceFrame}:${uuid}`]
+	}
+
 	const setArrow = (arrow: WorldObject) => {
-		const currentArrow = getArrow(arrow.uuid)
+		const referenceFrame = arrow.referenceFrame ?? 'world'
+		const currentArrow = getArrow(referenceFrame, arrow.uuid)
 		const color = arrow.metadata?.color ?? new Color('yellow')
-		if (currentArrow) {
-			batchedArrow.updateArrow(
-				currentArrow.id,
-				poseToDirection(arrow.pose),
-				new Vector3(arrow.pose.x, arrow.pose.y, arrow.pose.z),
-				0.1,
-				color,
-				true
-			)
+		const direction = poseToDirection(arrow.pose)
+		const position = new Vector3(arrow.pose.x, arrow.pose.y, arrow.pose.z)
+
+		arrowBatches[referenceFrame] ??= new BatchedArrow()
+		const batchedArrow = arrowBatches[referenceFrame]
 
-			currentArrows[arrow.uuid] = { id: currentArrow.id, arrow }
+		if (currentArrow) {
+			batchedArrow.updateArrow(currentArrow.id, direction, position, 0.1, color, true)
+			currentArrows[`${referenceFrame}:${arrow.uuid}`] = { id: currentArrow.id, arrow }
 		} else {
-			const id = batchedArrow.addArrow(
-				poseToDirection(arrow.pose),
-				new Vector3(arrow.pose.x, arrow.pose.y, arrow.pose.z),
-				0.1,
-				color,
-				true
-			)
-			currentArrows[arrow.uuid] = { id, arrow }
+			const id = batchedArrow.addArrow(direction, position, 0.1, color, true)
+			currentArrows[`${referenceFrame}:${arrow.uuid}`] = { id, arrow }
 		}
 	}
 
@@ -58,12 +57,24 @@
 		})
 
 		Object.values(toRemove).forEach(({ id, arrow }) => {
-			batchedArrow.removeArrow(id)
-			removeArrow(arrow.uuid)
+			const referenceFrame = arrow.referenceFrame ?? 'world'
+			arrowBatches[referenceFrame].removeArrow(id)
+			removeArrow(referenceFrame, arrow.uuid)
 		})
 	})
 </script>
 
+{#each Object.entries(arrowBatches) as [referenceFrame, batch] (referenceFrame)}
+	<Portal id={referenceFrame}>
+		<T
+			name={batch.object3d.name}
+			is={batch.object3d}
+			dispose={false}
+			bvh={{ enabled: false }}
+		/>
+	</Portal>
+{/each}
+
 {#each objects as object (object.uuid)}
 	<Portal id={object.referenceFrame}>
 		<Frame

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

@@ -2,7 +2,6 @@ import { Vector3 } from 'three';
 import { WorldObject, type PointsGeometry } from '../WorldObject.svelte';
 type ConnectionStatus = 'connecting' | 'open' | 'closed';
 interface Context {
-    addPoints(worldObject: WorldObject<PointsGeometry>): void;
     points: WorldObject<PointsGeometry>[];
     frames: WorldObject[];
     lines: WorldObject[];
@@ -16,6 +15,8 @@ interface Context {
         lookAt: Vector3;
         animate: boolean;
     } | undefined;
+    addPoints(worldObject: WorldObject<PointsGeometry>): void;
+    addMesh(worldObject: WorldObject): void;
     clearCamera: () => void;
 }
 export declare const provideDrawAPI: () => void;

package/dist/hooks/useDrawAPI.svelte.js

@@ -112,13 +112,7 @@ export const provideDrawAPI = () => {
             result.pose = data.center;
             return;
         }
-        const geometry = {
-            label: data.label,
-            center: undefined,
-            geometryType: {
-                case: undefined,
-            },
-        };
+        const geometry = createGeometry();
         if ('mesh' in data) {
             geometry.geometryType.case = 'mesh';
             geometry.geometryType.value = data.mesh;
@@ -443,9 +437,6 @@ export const provideDrawAPI = () => {
         get points() {
             return points;
         },
-        addPoints(worldObject) {
-            points.push(worldObject);
-        },
         get lines() {
             return lines;
         },
@@ -467,6 +458,12 @@ export const provideDrawAPI = () => {
         get camera() {
             return camera;
         },
+        addPoints(worldObject) {
+            points.push(worldObject);
+        },
+        addMesh(worldObject) {
+            meshes.push(worldObject);
+        },
         clearCamera: () => {
             camera = undefined;
         },

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

@@ -1,3 +1,4 @@
+export declare const ENVIRONMENT_CONTEXT_KEY: unique symbol;
 interface Environemnt {
     viewerMode: 'edit' | 'monitor';
     isStandalone: boolean;
@@ -5,6 +6,7 @@ interface Environemnt {
 interface Context {
     current: Environemnt;
 }
+export declare const createEnvironment: () => Context;
 export declare const provideEnvironment: () => Context;
 export declare const useEnvironment: () => Context;
 export {};

package/dist/hooks/useEnvironment.svelte.js

@@ -1,19 +1,23 @@
 import { getContext, setContext } from 'svelte';
-const key = Symbol('environment');
+export const ENVIRONMENT_CONTEXT_KEY = Symbol('environment');
 const defaults = () => ({
     viewerMode: 'monitor',
     isStandalone: true,
 });
-export const provideEnvironment = () => {
+export const createEnvironment = () => {
     const environment = $state(defaults());
     const context = {
         get current() {
             return environment;
         },
     };
-    setContext(key, context);
+    return context;
+};
+export const provideEnvironment = () => {
+    const context = createEnvironment();
+    setContext(ENVIRONMENT_CONTEXT_KEY, context);
     return context;
 };
 export const useEnvironment = () => {
-    return getContext(key);
+    return getContext(ENVIRONMENT_CONTEXT_KEY);
 };

package/dist/hooks/useSettings.svelte.js

@@ -24,13 +24,17 @@ const defaults = () => ({
 });
 export const provideSettings = () => {
     let settings = $state(defaults());
+    let settingsLoaded = $state(false);
     get('motion-tools-settings').then((response) => {
         if (response) {
             settings = { ...settings, ...response };
         }
+        settingsLoaded = true;
     });
     $effect(() => {
-        set('motion-tools-settings', $state.snapshot(settings));
+        if (settingsLoaded) {
+            set('motion-tools-settings', $state.snapshot(settings));
+        }
     });
     const context = {
         get current() {

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

@@ -1,3 +1,6 @@
+export declare const WEBLABS_EXPERIMENTS: {
+    readonly MOTION_TOOLS_EDIT_FRAME: "MOTION_TOOLS_EDIT_FRAME";
+};
 export declare const WEBLABS_CONTEXT_KEY: unique symbol;
 interface Context {
     load: (experiments: string[]) => void;

package/dist/hooks/useWeblabs.svelte.js

@@ -1,5 +1,8 @@
 import { getContext, setContext } from 'svelte';
 import { SvelteSet } from 'svelte/reactivity';
+export const WEBLABS_EXPERIMENTS = {
+    MOTION_TOOLS_EDIT_FRAME: 'MOTION_TOOLS_EDIT_FRAME',
+};
 export const WEBLABS_CONTEXT_KEY = Symbol('weblabs-context');
 const getCookie = (name) => {
     const value = `; ${document.cookie}`;

package/dist/three/BatchedArrow.d.ts

@@ -1,33 +1,17 @@
-import { BatchedMesh, MeshBasicMaterial, Object3D, Vector3, Color, Matrix4 } from 'three';
+import { BatchedMesh, Vector3, Color } from 'three';
 import type { OBB } from 'three/addons/math/OBB.js';
-interface Arrow {
-    shaftId: number;
-    headId: number;
-}
 export declare class BatchedArrow {
-    batchedMesh: BatchedMesh;
-    shaftGeoId: number;
-    coneGeoId: number;
-    shaftWidth: number;
-    _arrows: Map<number, Arrow>;
-    _idToArrowId: Map<number, number>;
-    _pool: Arrow[];
-    _idCounter: number;
-    constructor({ maxArrows, shaftWidth, material, }?: {
-        maxArrows?: number | undefined;
-        shaftWidth?: number | undefined;
-        material?: MeshBasicMaterial | undefined;
-    });
+    mesh: BatchedMesh;
+    _geometryId: number;
+    _pool: number[];
+    _ids: Set<number>;
+    _id: number;
+    _max: number;
+    constructor();
     addArrow(direction: Vector3, origin: Vector3, length?: number, color?: Color, arrowHeadAtPose?: boolean): number;
-    getArrowId(instanceId: number): number | undefined;
-    getBoundingBoxAt(arrowId: number, target: OBB): any;
-    removeArrow(arrowId: number): void;
-    updateArrow(arrowId: number, direction: Vector3, origin: Vector3, length?: number, color?: Color, arrowHeadAtPose?: boolean): void;
+    removeArrow(instanceId: number): void;
     clear(): void;
-    getObject3d(id: number): Object3D<import("three").Object3DEventMap>;
-    _drawArrow(shaftId: number, headId: number, direction: Vector3, origin: Vector3, length: number, color: Color, arrowHeadAtPose: boolean): void;
-    _computeTransform(origin: Vector3, dir: Vector3, lengthY: number, scaleXZ?: number): Matrix4;
-    _quaternionFromDirection(dir: Vector3): import("three").Quaternion;
+    getBoundingBoxAt(instanceId: number, target: OBB): OBB;
+    updateArrow(instanceId: number, origin: Vector3, direction: Vector3, length: number, color: Color, arrowHeadAtPose: boolean): import("three").Quaternion | undefined;
     get object3d(): BatchedMesh;
 }
-export {};

package/dist/three/BatchedArrow.js

@@ -1,143 +1,79 @@
-import { BatchedMesh, BoxGeometry, ConeGeometry, MeshBasicMaterial, Object3D, Vector3, Color, Box3, Matrix4, } from 'three';
+import { BatchedMesh, MeshBasicMaterial, Object3D, Vector3, Color, Box3 } from 'three';
+import { createArrowGeometry } from './arrow';
 const black = new Color('black');
 const axis = new Vector3();
 const object3d = new Object3D();
 const vec3 = new Vector3();
 const box1 = new Box3();
-const box2 = new Box3();
-const box3 = new Box3();
-const mat4_1 = new Matrix4();
-const mat4_2 = new Matrix4();
 const col = new Color();
 let index = 0;
 export class BatchedArrow {
-    batchedMesh;
-    shaftGeoId = -1;
-    coneGeoId = -1;
-    shaftWidth = 0;
-    _arrows = new Map(); // arrowId -> { shaftId, headId }
-    _idToArrowId = new Map();
+    mesh;
+    _geometryId;
     _pool = [];
-    _idCounter = 0;
-    constructor({ maxArrows = 20_000, shaftWidth = 0.001, material = new MeshBasicMaterial({ color: 0xffffff, toneMapped: false }), } = {}) {
-        const shaftGeo = new BoxGeometry(1, 1, 1);
-        shaftGeo.translate(0, 0.5, 0);
-        const coneGeo = new ConeGeometry(0.5, 1, 8, 1);
-        coneGeo.translate(0, -0.5, 0);
-        const shaftVertexCount = shaftGeo.getAttribute('position').count;
-        const coneVertexCount = coneGeo.getAttribute('position').count;
-        const shaftIndexCount = shaftGeo.index?.count ?? shaftVertexCount;
-        const coneIndexCount = coneGeo.index?.count ?? coneVertexCount;
-        const maxVertexCount = maxArrows * (shaftVertexCount + coneVertexCount);
-        const maxIndexCount = maxArrows * (shaftIndexCount + coneIndexCount);
-        this.batchedMesh = new BatchedMesh(maxArrows * 2, maxVertexCount, maxIndexCount, material);
-        this.batchedMesh.name = `batched arrows ${++index}`;
-        this.batchedMesh.frustumCulled = false;
-        this.shaftWidth = shaftWidth;
-        this.shaftGeoId = this.batchedMesh.addGeometry(shaftGeo);
-        this.coneGeoId = this.batchedMesh.addGeometry(coneGeo);
+    _ids = new Set();
+    _id = 0;
+    _max = 20_000;
+    constructor() {
+        const material = new MeshBasicMaterial({ color: 0xffffff, toneMapped: false });
+        const geometry = createArrowGeometry();
+        const vertexCount = geometry.getAttribute('position').count;
+        const indexCount = geometry.index?.count ?? vertexCount;
+        this.mesh = new BatchedMesh(this._max, vertexCount, indexCount, material);
+        this.mesh.name = `Batched arrows ${++index}`;
+        this.mesh.frustumCulled = false;
+        this._geometryId = this.mesh.addGeometry(geometry);
     }
     addArrow(direction, origin, length = 0.1, color = black, arrowHeadAtPose = true) {
-        let shaftId;
-        let headId;
-        const instance = this._pool.pop();
-        if (instance) {
-            ;
-            ({ shaftId, headId } = instance);
+        if (this.mesh.instanceCount >= this._max) {
+            this._max += 20_000;
+            this.mesh.setInstanceCount(this._max);
         }
-        else {
-            shaftId = this.batchedMesh.addInstance(this.shaftGeoId);
-            headId = this.batchedMesh.addInstance(this.coneGeoId);
-        }
-        this._drawArrow(shaftId, headId, direction, origin, length, color, arrowHeadAtPose);
-        const arrowId = this._idCounter++;
-        this._arrows.set(arrowId, { shaftId, headId });
-        this._idToArrowId.set(shaftId, arrowId);
-        this._idToArrowId.set(headId, arrowId);
-        return arrowId;
-    }
-    getArrowId(instanceId) {
-        return this._idToArrowId.get(instanceId);
-    }
-    getBoundingBoxAt(arrowId, target) {
-        const arrow = this._arrows.get(arrowId);
-        if (arrow) {
-            const headBox = this.batchedMesh.getBoundingBoxAt(this.coneGeoId, box1);
-            const tailBox = this.batchedMesh.getBoundingBoxAt(this.shaftGeoId, box2);
-            if (headBox && tailBox) {
-                this.batchedMesh.getMatrixAt(arrow.headId, mat4_1);
-                this.batchedMesh.getMatrixAt(arrow.shaftId, mat4_2);
-                box3.copy(headBox.applyMatrix4(mat4_1)).union(tailBox.applyMatrix4(mat4_2));
-                target.fromBox3(box3);
-                return target;
-            }
-        }
-    }
-    removeArrow(arrowId) {
-        const arrow = this._arrows.get(arrowId);
-        if (!arrow)
-            return;
-        this.batchedMesh.setVisibleAt(arrow.shaftId, false);
-        this.batchedMesh.setVisibleAt(arrow.headId, false);
-        this._pool.push(arrow);
-        this._arrows.delete(arrowId);
+        const instanceId = this._pool.pop() ?? this.mesh.addInstance(this._geometryId);
+        this._ids.add(instanceId);
+        this.updateArrow(instanceId, origin, direction, length, color, arrowHeadAtPose);
+        return instanceId;
     }
-    updateArrow(arrowId, direction, origin, length = 0.1, color = black, arrowHeadAtPose = true) {
-        const arrow = this._arrows.get(arrowId);
-        if (!arrow)
-            return;
-        this._drawArrow(arrow.shaftId, arrow.headId, direction, origin, length, color, arrowHeadAtPose);
+    removeArrow(instanceId) {
+        this._ids.delete(instanceId);
+        this.mesh.setVisibleAt(instanceId, false);
+        this._pool.push(instanceId);
     }
     clear() {
-        for (const id of this._arrows.keys()) {
+        for (const id of this._ids) {
             this.removeArrow(id);
         }
     }
-    getObject3d(id) {
-        this.batchedMesh.getMatrixAt(id, object3d.matrix);
-        object3d.updateMatrix();
-        return object3d;
+    getBoundingBoxAt(instanceId, target) {
+        const box = this.mesh.getBoundingBoxAt(instanceId, box1);
+        if (box) {
+            target.fromBox3(box);
+        }
+        return target;
     }
-    _drawArrow(shaftId, headId, direction, origin, length, color, arrowHeadAtPose) {
+    updateArrow(instanceId, origin, direction, length, color, arrowHeadAtPose) {
         if (arrowHeadAtPose) {
             // Compute the base position so the arrow ends at the origin
             origin.sub(vec3.copy(direction).multiplyScalar(length));
         }
         direction.normalize();
-        const headLength = length * 0.2;
-        const headWidth = headLength * 0.2;
-        // Apply shaft transform
-        const shaftMatrix = this._computeTransform(origin, direction, length - headLength, this.shaftWidth);
-        this.batchedMesh.setMatrixAt(shaftId, shaftMatrix);
-        // Compute cone position = origin + dir * length
-        const coneOrigin = vec3.copy(direction).multiplyScalar(length).add(origin);
-        const coneMatrix = this._computeTransform(coneOrigin, direction, headLength, headWidth * 4);
-        this.batchedMesh.setMatrixAt(headId, coneMatrix);
-        if (color) {
-            col.set(color);
-            this.batchedMesh.setColorAt(shaftId, col);
-            this.batchedMesh.setColorAt(headId, col);
-        }
-        this.batchedMesh.setVisibleAt(shaftId, true);
-        this.batchedMesh.setVisibleAt(headId, true);
-    }
-    _computeTransform(origin, dir, lengthY, scaleXZ = 1) {
         object3d.position.copy(origin);
-        object3d.quaternion.copy(this._quaternionFromDirection(dir));
-        object3d.scale.set(scaleXZ, lengthY, scaleXZ);
-        object3d.updateMatrix();
-        return object3d.matrix.clone();
-    }
-    _quaternionFromDirection(dir) {
-        if (dir.y > 0.99999)
+        if (direction.y > 0.99999)
             return object3d.quaternion.set(0, 0, 0, 1);
-        if (dir.y < -0.99999)
+        if (direction.y < -0.99999)
             return object3d.quaternion.set(1, 0, 0, 0);
-        axis.set(dir.z, 0, -dir.x).normalize();
-        const radians = Math.acos(dir.y);
-        return object3d.quaternion.setFromAxisAngle(axis, radians);
+        axis.set(direction.z, 0, -direction.x).normalize();
+        const radians = Math.acos(direction.y);
+        object3d.quaternion.setFromAxisAngle(axis, radians);
+        object3d.updateMatrix();
+        this.mesh.setMatrixAt(instanceId, object3d.matrix);
+        if (color) {
+            col.set(color);
+            this.mesh.setColorAt(instanceId, col);
+        }
+        this.mesh.setVisibleAt(instanceId, true);
     }
     get object3d() {
-        return this.batchedMesh;
+        return this.mesh;
     }
 }

package/dist/three/arrow.d.ts

@@ -0,0 +1,7 @@
+import { type BufferGeometry } from 'three';
+/**
+ * Returns one merged geometry for an arrow (box tail + cone head)
+ *
+ * Arrow points along +Y with its base at y = 0
+ */
+export declare const createArrowGeometry: () => BufferGeometry;

package/dist/three/arrow.js

@@ -0,0 +1,27 @@
+import { BoxGeometry, ConeGeometry } from 'three';
+import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js';
+/**
+ * Returns one merged geometry for an arrow (box tail + cone head)
+ *
+ * Arrow points along +Y with its base at y = 0
+ */
+export const createArrowGeometry = () => {
+    const length = 0.1;
+    const headLength = length * 0.2;
+    const headWidth = headLength * 0.3;
+    const tailLength = length - headLength;
+    const tailWidth = 0.001;
+    // Tail: box translated so base starts at y = 0
+    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 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);
+    const merged = mergeGeometries([tailGeometry, headGeo], true);
+    merged.computeVertexNormals();
+    merged.computeBoundingBox();
+    merged.computeBoundingSphere();
+    return merged;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "0.14.11",
+  "version": "0.15.0",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",
@@ -60,7 +60,7 @@
     "svelte-check": "4.3.1",
     "svelte-virtuallists": "1.4.2",
     "tailwindcss": "4.1.13",
-    "three": "0.179.0",
+    "three": "0.180.0",
     "three-mesh-bvh": "^0.9.1",
     "threlte-uikit": "1.2.1",
     "tsx": "4.20.5",