@viamrobotics/motion-tools 1.3.1 → 1.3.3

package/dist/buffer.d.ts

@@ -19,6 +19,8 @@ export declare const STRIDE: {
     readonly NURBS_KNOTS: 1;
     /** Colors: [r, g, b, a] per color (uint8) */
     readonly COLORS_RGBA: 4;
+    /** Colors: [r, g, b] */
+    readonly COLORS_RGB: 3;
 };
 /**
  * Creates a Float32Array view over a Uint8Array without copying data.

package/dist/buffer.js

@@ -19,6 +19,8 @@ export const STRIDE = {
     NURBS_KNOTS: 1,
     /** Colors: [r, g, b, a] per color (uint8) */
     COLORS_RGBA: 4,
+    /** Colors: [r, g, b] */
+    COLORS_RGB: 3,
 };
 /**
  * Creates a Float32Array view over a Uint8Array without copying data.

package/dist/components/Arrows.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { T } from '@threlte/core'
+	import { Portal } from '@threlte/extras'
+	import { InstancedArrows } from '../three/InstancedArrows/InstancedArrows'
+	import { traits, useWorld } from '../ecs'
+	import type { Entity } from 'koota'
+	import { STRIDE } from '../buffer'
+	import { useObjectEvents } from '../hooks/useObjectEvents.svelte'
+	import { SvelteMap } from 'svelte/reactivity'
+	import { Color } from 'three'
+	import { meshBoundsRaycast } from '../three/InstancedArrows/raycast'
+
+	const world = useWorld()
+
+	const map = new SvelteMap<Entity, InstancedArrows>()
+
+	const onAdd = (entity: Entity) => {
+		const poses = entity.get(traits.Positions)
+		const colors = entity.get(traits.Colors)
+		const { headAtPose } = entity.get(traits.Arrows) ?? {}
+
+		if (!poses) return
+
+		const total = poses.length / STRIDE.ARROWS
+		const alpha = colors && colors.length / STRIDE.COLORS_RGBA === total
+		const uniformColor =
+			colors && (colors.length === 3 || colors.length === 4)
+				? new Color(colors[0], colors[1], colors[2])
+				: undefined
+
+		const arrows = new InstancedArrows({ count: total, alpha, uniformColor })
+		map.set(entity, arrows)
+		arrows.update({ poses, colors, headAtPose })
+	}
+
+	/**
+	 * TODO: more granular updates here, but this should be fine for now.
+	 */
+	const onChange = (entity: Entity) => {
+		onRemove(entity)
+		onAdd(entity)
+	}
+
+	const onRemove = (entity: Entity) => {
+		map.delete(entity)
+	}
+
+	$effect(() => {
+		const unsubAdd = world.onAdd(traits.Arrows, onAdd)
+		const unsubRemove = world.onRemove(traits.Arrows, onRemove)
+		const unsubPoseChange = world.onChange(traits.Arrows, onChange)
+
+		return () => {
+			unsubAdd()
+			unsubRemove()
+			unsubPoseChange()
+		}
+	})
+</script>
+
+{#each map as [entity, arrows] (entity)}
+	{@const events = useObjectEvents(() => entity)}
+	<Portal id={entity.get(traits.Parent)}>
+		<T
+			is={arrows}
+			name={entity}
+		>
+			<T
+				is={arrows.headMesh}
+				bvh={{ enabled: false }}
+				raycast={() => null}
+			/>
+			<T
+				is={arrows.shaftMesh}
+				bvh={{ enabled: false }}
+				raycast={meshBoundsRaycast}
+				{...events}
+			/>
+		</T>
+	</Portal>
+{/each}

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

@@ -0,0 +1,3 @@
+declare const Arrows: import("svelte").Component<Record<string, never>, {}, "">;
+type Arrows = ReturnType<typeof Arrows>;
+export default Arrows;

package/dist/components/Details.svelte

@@ -31,10 +31,7 @@
 
 	const { ...rest } = $props()
 
-	const dragPosition = new PersistedState<Vector2Like | undefined>(
-		'details-drag-position',
-		undefined
-	)
+	const dragPosition = new PersistedState<Vector2Like>('details-drag-position', { x: 0, y: 0 })
 
 	const resourceByName = useResourceByName()
 	const frames = useFrames()

package/dist/components/GLTF.svelte

@@ -84,7 +84,7 @@
 			<T
 				is={$gltf.scene as Object3D}
 				scale={[scale.current?.x ?? 1, scale.current?.y ?? 1, scale.current?.z ?? 1]}
-				name={name.current}
+				name={entity}
 				{...objectProps}
 				{...rest}
 			>

package/dist/components/Geometry2.svelte

@@ -131,7 +131,7 @@
 
 		<T
 			is={mesh}
-			name={name.current}
+			name={entity}
 			bvh={{ enabled: geometryType === 'buffer' }}
 		>
 			{#if model && renderMode.includes('model')}

package/dist/components/Points.svelte

@@ -19,7 +19,6 @@
 	const { camera } = useThrelte()
 	const settings = useSettings()
 
-	const name = useTrait(() => entity, traits.Name)
 	const parent = useTrait(() => entity, traits.Parent)
 	const pose = useTrait(() => entity, traits.Pose)
 	const geometry = useTrait(() => entity, traits.BufferGeometry)
@@ -122,9 +121,9 @@
 	<Portal id={parent.current}>
 		<T
 			is={points}
-			name={name.current}
-			{...events}
+			name={entity}
 			bvh={{ maxDepth: 40, maxLeafTris: 20 }}
+			{...events}
 		>
 			<T is={geometry.current} />
 			<T is={material} />

package/dist/components/Scene.svelte

@@ -17,6 +17,7 @@
 	import MeasureTool from './MeasureTool.svelte'
 	import PointerMissBox from './PointerMissBox.svelte'
 	import BatchedArrows from './BatchedArrows.svelte'
+	import Arrows from './Arrows.svelte'
 
 	interface Props {
 		children?: Snippet
@@ -95,6 +96,7 @@
 
 		<Entities />
 		<BatchedArrows />
+		<Arrows />
 	</T.Group>
 
 	{@render children?.()}

package/dist/components/Selected.svelte

@@ -1,50 +1,54 @@
 <script lang="ts">
-	import { T, useTask, useThrelte } from '@threlte/core'
+	import { isInstanceOf, T, useTask, useThrelte } from '@threlte/core'
 	import { useSelectedEntity, useSelectedObject3d } from '../hooks/useSelection.svelte'
 	import { OBBHelper } from '../three/OBBHelper'
 	import { OBB } from 'three/addons/math/OBB.js'
-	import { traits, useTrait } from '../ecs'
 	import { BatchedMesh, Box3 } from 'three'
+	import type { InstancedArrows } from '../three/InstancedArrows/InstancedArrows'
 
 	const box3 = new Box3()
 	const obb = new OBB()
 	const obbHelper = new OBBHelper()
 
-	const { scene, invalidate } = useThrelte()
+	const { invalidate } = useThrelte()
 	const selectedEntity = useSelectedEntity()
 	const selectedObject3d = useSelectedObject3d()
-	const instance = useTrait(() => selectedEntity.current, traits.Instance)
 
-	// Create a clone so that our bounding box doesn't include children
-	const clone = $derived.by(() => {
-		if (instance.current) {
-			return
+	const object = $derived.by(() => {
+		if (!isInstanceOf(selectedObject3d.current, 'Mesh')) {
+			return selectedObject3d.current
 		}
 
-		return selectedObject3d.current?.clone(false)
+		// Create a clone in the case of meshes, which could be frames with geometries,
+		// so that our bounding box doesn't include children
+		const result = selectedObject3d.current?.clone(false)
+
+		if (result) {
+			selectedObject3d.current?.getWorldPosition(result.position)
+			selectedObject3d.current?.getWorldQuaternion(result.quaternion)
+			return result
+		}
 	})
 
 	const { start, stop } = useTask(
 		() => {
-			if (selectedEntity.current === undefined) {
+			if (object === undefined) {
 				return
 			}
 
-			if (instance.current) {
-				const mesh = scene.getObjectById(instance.current.meshID) as BatchedMesh
-				mesh?.getBoundingBoxAt(instance.current.instanceID, box3)
+			if (
+				selectedEntity.instance &&
+				(isInstanceOf(object, 'BatchedMesh') || (object as InstancedArrows).isInstancedArrows)
+			) {
+				const mesh = object as BatchedMesh | InstancedArrows
+				mesh.getBoundingBoxAt(selectedEntity.instance, box3)
 				obb.fromBox3(box3)
 				obbHelper.setFromOBB(obb)
-				invalidate()
-				return
+			} else {
+				obbHelper.setFromObject(object)
 			}
 
-			if (clone) {
-				selectedObject3d.current?.getWorldPosition(clone.position)
-				selectedObject3d.current?.getWorldQuaternion(clone.quaternion)
-				obbHelper.setFromObject(clone)
-				invalidate()
-			}
+			invalidate()
 		},
 		{
 			autoStart: false,

package/dist/ecs/traits.d.ts

@@ -30,6 +30,11 @@ export declare const Center: import("koota").Trait<{
     oZ: number;
     theta: number;
 }>;
+/**
+ * Represents that an entity is composed of many instances, so that the treeview and
+ * details panel may display all instances
+ */
+export declare const Instanced: import("koota").TagTrait;
 export declare const Instance: import("koota").Trait<{
     meshID: number;
     instanceID: number;
@@ -45,6 +50,14 @@ export declare const Color: import("koota").Trait<{
     b: number;
 }>;
 export declare const Arrow: import("koota").TagTrait;
+export declare const Positions: import("koota").Trait<() => Float32Array<ArrayBuffer>>;
+export declare const Colors: import("koota").Trait<() => Uint8Array<ArrayBuffer>>;
+export declare const Instances: import("koota").Trait<{
+    count: number;
+}>;
+export declare const Arrows: import("koota").Trait<{
+    headAtPose: boolean;
+}>;
 /**
  * Render entity as points
  */

package/dist/ecs/traits.js

@@ -8,6 +8,11 @@ export const Parent = trait(() => 'world');
 export const Pose = trait({ x: 0, y: 0, z: 0, oX: 0, oY: 0, oZ: 1, theta: 0 });
 export const EditedPose = trait({ x: 0, y: 0, z: 0, oX: 0, oY: 0, oZ: 1, theta: 0 });
 export const Center = trait({ x: 0, y: 0, z: 0, oX: 0, oY: 0, oZ: 1, theta: 0 });
+/**
+ * Represents that an entity is composed of many instances, so that the treeview and
+ * details panel may display all instances
+ */
+export const Instanced = trait();
 export const Instance = trait({
     meshID: -1,
     instanceID: -1,
@@ -19,6 +24,14 @@ export const Opacity = trait(() => 1);
  */
 export const Color = trait({ r: 0, g: 0, b: 0 });
 export const Arrow = trait();
+export const Positions = trait(() => new Float32Array());
+export const Colors = trait(() => new Uint8Array());
+export const Instances = trait({
+    count: 0,
+});
+export const Arrows = trait({
+    headAtPose: true,
+});
 /**
  * Render entity as points
  */

package/dist/hooks/useDrawAPI.svelte.js

@@ -13,6 +13,7 @@ import { useLogs } from './useLogs.svelte';
 import { createBox, createCapsule, createSphere } from '../geometry';
 import { useDrawConnectionConfig } from './useDrawConnectionConfig.svelte';
 import { createBufferGeometry, updateBufferGeometry } from '../attribute';
+import { STRIDE } from '../buffer';
 const colorUtil = new Color();
 const bufferTypes = {
     DRAW_POINTS: 0,
@@ -45,25 +46,50 @@ const lowercaseKeys = (obj) => {
     }
     return obj;
 };
-class Float32Reader {
+class BinaryReader {
     littleEndian = true;
-    offset = 0;
-    buffer = new ArrayBuffer();
-    array = new Float32Array();
+    offsetBytes = 0;
+    buffer = new ArrayBuffer(0);
     view = new DataView(this.buffer);
     header = { requestID: '', type: -1 };
     async init(data) {
         this.buffer = await data.arrayBuffer();
-        this.header.requestID = UuidTool.toString([...new Uint8Array(this.buffer.slice(0, 16))]);
-        this.header.type = new Float32Array(this.buffer.slice(16, 20))[0];
-        this.buffer = this.buffer.slice(20);
-        this.array = new Float32Array(this.buffer);
+        this.view = new DataView(this.buffer);
+        this.offsetBytes = 0;
+        // 16-byte UUID
+        const uuidBytes = new Uint8Array(this.buffer, 0, 16);
+        this.header.requestID = UuidTool.toString([...uuidBytes]);
+        // 4-byte float32 type at byte offset 16
+        this.header.type = this.view.getFloat32(16, this.littleEndian);
+        // payload starts after 20 bytes
+        this.offsetBytes = 20;
         return this;
     }
+    /** Read one float32 and advance. */
     read() {
-        const result = this.array[this.offset];
-        this.offset += 1;
-        return result;
+        const v = this.view.getFloat32(this.offsetBytes, this.littleEndian);
+        this.offsetBytes += 4;
+        return v;
+    }
+    /**
+     * Get a Float32Array VIEW into the underlying buffer (no copy) and advance.
+     * Requires current offset to be 4-byte aligned (it will be, if you only readF32 so far).
+     */
+    readF32Array(count) {
+        const byteOffset = this.offsetBytes;
+        const byteLength = count * 4;
+        const arr = new Float32Array(this.buffer, byteOffset, count);
+        this.offsetBytes += byteLength;
+        return arr;
+    }
+    /**
+     * Get a Uint8Array VIEW (no copy) and advance.
+     */
+    readU8Array(count) {
+        const byteOffset = this.offsetBytes;
+        const arr = new Uint8Array(this.buffer, byteOffset, count);
+        this.offsetBytes += count;
+        return arr;
     }
 }
 export const provideDrawAPI = () => {
@@ -80,8 +106,6 @@ export const provideDrawAPI = () => {
     const maxReconnectDelay = 5_000;
     let ws;
     let connectionStatus = $state('connecting');
-    const direction = new Vector3();
-    const origin = new Vector3();
     const loader = new GLTFLoader();
     const entities = new Map();
     const sendResponse = (response) => {
@@ -181,34 +205,14 @@ export const provideDrawAPI = () => {
         entities.set(name, entity);
     };
     const vec3 = new Vector3();
-    const pose = createPose();
     const drawPoses = async (reader) => {
         // Read counts
         const nPoints = reader.read();
         const nColors = reader.read();
         const arrowHeadAtPose = reader.read();
         const entities = [];
-        for (let i = 0; i < nPoints; i += 1) {
-            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 */ 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;
-            const entity = world.spawn(traits.Name(`Pose ${++poseIndex}`), traits.Pose(pose), traits.Color, traits.DrawAPI, traits.Arrow);
-            entities.push(entity);
-        }
-        for (let i = 0; i < nColors; i += 1) {
-            const entity = entities[i];
-            colorUtil.set(reader.read(), reader.read(), reader.read());
-            entity.set(traits.Color, colorUtil);
-        }
+        const entity = world.spawn(traits.Name(`Arrow group ${++poseIndex}`), traits.Positions(reader.readF32Array(nPoints * STRIDE.ARROWS)), traits.Colors(reader.readU8Array(nColors * STRIDE.COLORS_RGB)), traits.Arrows({ headAtPose: arrowHeadAtPose === 1 }), traits.DrawAPI);
+        entities.push(entity);
     };
     const drawPoints = async (reader) => {
         // Read label length
@@ -225,11 +229,9 @@ export const provideDrawAPI = () => {
         const g = reader.read();
         const b = reader.read();
         const nPointsElements = nPoints * 3;
-        const positions = reader.array.slice(reader.offset, reader.offset + nPointsElements);
-        reader.offset += nPointsElements;
+        const positions = reader.readF32Array(nPointsElements);
         const nColorsElements = nColors * 3;
-        const rawColors = reader.array.slice(reader.offset, reader.offset + nColorsElements);
-        reader.offset += nColorsElements;
+        const rawColors = reader.readF32Array(nColorsElements);
         const colors = new Float32Array(nPointsElements);
         colors.set(rawColors);
         // Cover the gap for any points not colored
@@ -347,7 +349,7 @@ export const provideDrawAPI = () => {
         let requestID = '';
         try {
             if (typeof event.data === 'object' && 'arrayBuffer' in event.data) {
-                const reader = await new Float32Reader().init(event.data);
+                const reader = await new BinaryReader().init(event.data);
                 requestID = reader.header.requestID;
                 const { type } = reader.header;
                 if (type === bufferTypes.DRAW_POINTS) {

package/dist/hooks/useObjectEvents.svelte.js

@@ -26,7 +26,7 @@ export const useObjectEvents = (entity) => {
         },
         ondblclick: (event) => {
             event.stopPropagation();
-            focusedEntity.set(currentEntity);
+            focusedEntity.set(currentEntity, event.instanceId ?? event.batchId);
         },
         onpointerdown: (event) => {
             down.copy(event.pointer);
@@ -34,7 +34,7 @@ export const useObjectEvents = (entity) => {
         onclick: (event) => {
             event.stopPropagation();
             if (down.distanceToSquared(event.pointer) < 0.1) {
-                selectedEntity.set(currentEntity);
+                selectedEntity.set(currentEntity, event.instanceId ?? event.batchId);
             }
         },
     };

package/dist/hooks/usePose.svelte.js

@@ -10,6 +10,7 @@ import { RefetchRates } from '../components/RefreshRate.svelte';
 import { useLogs } from './useLogs.svelte';
 import { useResourceByName } from './useResourceByName.svelte';
 import { useRefetchPoses } from './useRefetchPoses';
+const origingFrameComponentTypes = ['arm', 'gantry', 'gripper'];
 export const usePose = (name, parent) => {
     const environment = useEnvironment();
     const logs = useLogs();
@@ -25,10 +26,10 @@ export const usePose = (name, parent) => {
     const frames = useFrames();
     let pose = $state(undefined);
     const interval = $derived(refreshRates.get(RefreshRates.poses));
-    const resolvedParent = $derived(parentResource?.subtype === 'arm' || parentResource?.subtype === 'gantry'
+    const resolvedParent = $derived(origingFrameComponentTypes.includes(parentResource?.subtype ?? '')
         ? `${parent()}_origin`
         : parent());
-    const resolvedName = $derived(resource?.subtype === 'arm' || resource?.subtype === 'gantry'
+    const resolvedName = $derived(origingFrameComponentTypes.includes(resource?.subtype ?? '')
         ? `${currentName}_origin`
         : currentName);
     const query = createRobotQuery(robotClient, 'getPose', () => [resolvedName, resolvedParent ?? 'world', []], () => ({

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

@@ -2,20 +2,24 @@ import { Object3D } from 'three';
 import type { Entity } from 'koota';
 interface SelectedEntityContext {
     readonly current: Entity | undefined;
-    set(entity?: Entity): void;
+    readonly instance: number | undefined;
+    set(entity?: Entity, instance?: number): void;
 }
 interface FocusedEntityContext {
     readonly current: Entity | undefined;
-    set(entity?: Entity): void;
+    readonly instance: number | undefined;
+    set(entity?: Entity, instance?: number): void;
 }
 export declare const provideSelection: () => {
     selection: {
         readonly current: Entity | undefined;
-        set(entity: Entity): void;
+        readonly instance: number | undefined;
+        set(entity: Entity, instance?: number): void;
     };
     focus: {
         readonly current: Entity | undefined;
-        set(entity: Entity): void;
+        readonly instance: number | undefined;
+        set(entity: Entity, instance?: number): void;
     };
 };
 export declare const useFocusedEntity: () => FocusedEntityContext;

package/dist/hooks/useSelection.svelte.js

@@ -1,7 +1,7 @@
 import { isInstanceOf, useThrelte } from '@threlte/core';
 import { getContext, setContext } from 'svelte';
-import { BatchedMesh, Matrix4, Object3D } from 'three';
-import { traits, useTrait, useWorld } from '../ecs';
+import { Object3D } from 'three';
+import { traits, useWorld } from '../ecs';
 const selectedKey = Symbol('selected-frame-context');
 const focusedKey = Symbol('focused-frame-context');
 const focusedObject3dKey = Symbol('focused-object-3d-context');
@@ -9,7 +9,9 @@ export const provideSelection = () => {
     const world = useWorld();
     const { scene } = useThrelte();
     let selected = $state.raw();
+    let selectedInstance = $state();
     let focused = $state.raw();
+    let focusedInstance = $state();
     $effect(() => {
         return world.onRemove(traits.Name, (entity) => {
             if (entity === selected)
@@ -22,8 +24,12 @@ export const provideSelection = () => {
         get current() {
             return selected;
         },
-        set(entity) {
+        get instance() {
+            return selectedInstance;
+        },
+        set(entity, instance) {
             selected = entity;
+            selectedInstance = instance;
         },
     };
     setContext(selectedKey, selectedEntityContext);
@@ -31,8 +37,12 @@ export const provideSelection = () => {
         get current() {
             return focused;
         },
-        set(entity) {
+        get instance() {
+            return focusedInstance;
+        },
+        set(entity, instance) {
             focused = entity;
+            focusedInstance = instance;
         },
     };
     setContext(focusedKey, focusedEntityContext);
@@ -68,27 +78,14 @@ export const useSelectedEntity = () => {
 export const useFocusedObject3d = () => {
     return getContext(focusedObject3dKey);
 };
-const matrix = new Matrix4();
 export const useSelectedObject3d = () => {
     const selectedEntity = useSelectedEntity();
     const { scene } = useThrelte();
-    const name = useTrait(() => selectedEntity.current, traits.Name);
-    const instance = useTrait(() => selectedEntity.current, traits.Instance);
     const object = $derived.by(() => {
         if (!selectedEntity.current) {
             return;
         }
-        if (instance.current) {
-            const proxy = new Object3D();
-            const mesh = scene.getObjectById(instance.current.meshID);
-            mesh?.getMatrixAt(instance.current.instanceID, matrix);
-            proxy.applyMatrix4(matrix);
-            return proxy;
-        }
-        if (!name.current) {
-            return;
-        }
-        return scene.getObjectByName(name.current);
+        return scene.getObjectByName(selectedEntity.current);
     });
     return {
         get current() {

package/dist/snapshot.js

@@ -1,4 +1,4 @@
-import { Color, Vector3, Vector4 } from 'three';
+import { 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';
@@ -7,13 +7,8 @@ import { Geometry } from '@viamrobotics/sdk';
 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();
-const color = new Color();
-const pose = createPose();
 export const applySceneMetadata = (settings, metadata) => {
     const next = { ...settings };
     if (metadata.grid !== undefined) {
@@ -109,48 +104,21 @@ const spawnEntitiesFromDrawing = (world, drawing) => {
     const parent = poseInFrame?.referenceFrame;
     const { geometryType } = drawing.physicalObject ?? {};
     if (geometryType?.case === 'arrows') {
-        const rootEntityTraits = [
+        const poses = asFloat32Array(geometryType.value.poses);
+        const colors = drawing.metadata?.colors;
+        const entityTraits = [
             traits.Name(drawing.referenceFrame),
             traits.Pose(poseInFrame?.pose),
-            traits.ReferenceFrame,
+            traits.Positions(poses),
         ];
         if (parent) {
-            rootEntityTraits.push(traits.Parent(parent));
+            entityTraits.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);
+        if (colors) {
+            entityTraits.push(traits.Colors(colors));
         }
+        const entity = world.spawn(...entityTraits, traits.SnapshotAPI, traits.Arrows({ headAtPose: true }), traits.Instances({ count: poses.length / STRIDE.ARROWS }));
+        entities.push(entity);
     }
     else if (geometryType?.case === 'model') {
         const rootEntityTraits = [

package/dist/three/InstancedArrows/InstancedArrows.d.ts

@@ -0,0 +1,30 @@
+import { Group, Mesh, BufferGeometry, InstancedInterleavedBuffer, type ColorRepresentation, Vector3, Box3 } from 'three';
+export declare class InstancedArrows extends Group {
+    isInstancedArrows: boolean;
+    count: number;
+    arrowLength: number;
+    shaftRadius: number;
+    headLength: number;
+    headWidth: number;
+    shaftMesh: Mesh;
+    headMesh: Mesh;
+    attributes: BufferGeometry['attributes'];
+    poses: InstancedInterleavedBuffer;
+    constructor(options?: {
+        count?: number;
+        length?: number;
+        shaftRadius?: number;
+        headLength?: number;
+        headWidth?: number;
+        alpha?: boolean;
+        uniformColor?: ColorRepresentation;
+    });
+    update(arrows: {
+        poses?: Float32Array;
+        colors?: Uint8Array;
+        headAtPose?: boolean;
+    }): void;
+    getBoundingBoxAt(instanceId: number, target: Box3): Box3;
+    getPoseAt(instanceID: number, origin: Vector3, direction: Vector3): void;
+    dispose(): void;
+}

package/dist/three/InstancedArrows/InstancedArrows.js

@@ -0,0 +1,138 @@
+import { RawShaderMaterial, FrontSide, Group, InstancedBufferAttribute, DynamicDrawUsage, Mesh, BufferGeometry, InstancedInterleavedBuffer, InterleavedBufferAttribute, Material, Color, Vector3, Box3, } from 'three';
+import vertexShader from './vertex.glsl?raw';
+import fragmentShader from './fragment.glsl?raw';
+import { createHeadGeometry, createShaftGeometry, toInstanced } from './geometry';
+import { computeBoundingBox } from './box';
+const defaults = {
+    LENGTH: 0.1,
+    HEAD_LENGTH: 0.02,
+    HEAD_WIDTH: 0.005,
+    SHAFT_RADIUS: 0.001,
+};
+const origin = new Vector3();
+const direction = new Vector3();
+const min = new Vector3();
+const max = new Vector3();
+const createMaterial = (options) => {
+    return new RawShaderMaterial({
+        vertexShader,
+        fragmentShader,
+        uniforms: {
+            headAtOrigin: { value: 1.0 },
+            shaftRadius: { value: defaults.SHAFT_RADIUS },
+            headLength: { value: defaults.HEAD_LENGTH },
+            headWidth: { value: defaults.HEAD_WIDTH },
+            arrowLength: { value: defaults.LENGTH },
+            minimumArrowLength: { value: 1e-6 },
+            uniformColor: { value: new Color() },
+        },
+        defines: {
+            ...(options.isHead ? { IS_HEAD: 1 } : {}),
+            ...(options.useColorAttribute ? { USE_COLOR_ATTRIBUTE: 1 } : {}),
+        },
+        side: FrontSide,
+        depthTest: true,
+        depthWrite: true,
+    });
+};
+export class InstancedArrows extends Group {
+    isInstancedArrows = true;
+    count;
+    arrowLength;
+    shaftRadius;
+    headLength;
+    headWidth;
+    shaftMesh;
+    headMesh;
+    attributes;
+    poses;
+    constructor(options = {}) {
+        super();
+        this.count = options?.count ?? 0;
+        this.shaftRadius = options?.shaftRadius ?? defaults.SHAFT_RADIUS;
+        this.headLength = options?.headLength ?? defaults.HEAD_LENGTH;
+        this.headWidth = options?.headWidth ?? defaults.HEAD_WIDTH;
+        this.arrowLength = options?.length ?? defaults.LENGTH;
+        const stride = 6;
+        const posesInterleaved = new Float32Array(this.count * stride);
+        this.poses = new InstancedInterleavedBuffer(posesInterleaved, stride);
+        this.poses.setUsage(DynamicDrawUsage);
+        const instanceOrigin = new InterleavedBufferAttribute(this.poses, 3, 0, false);
+        const instanceDirection = new InterleavedBufferAttribute(this.poses, 3, 3, false);
+        this.attributes = {
+            instanceOrigin,
+            instanceDirection,
+        };
+        if (!options.uniformColor) {
+            const colors = new Uint8Array(this.count * (options?.alpha ? 4 : 3));
+            const instanceColor = new InstancedBufferAttribute(colors, options?.alpha ? 4 : 3, true);
+            instanceColor.setUsage(DynamicDrawUsage);
+            this.attributes.instanceColor = instanceColor;
+        }
+        const shaftGeometry = toInstanced(createShaftGeometry(), this.count, this.attributes);
+        shaftGeometry.computeBoundingBox = computeBoundingBox.bind(this, shaftGeometry);
+        const headGeometry = toInstanced(createHeadGeometry(), this.count, this.attributes);
+        headGeometry.computeBoundingBox = computeBoundingBox.bind(this, headGeometry);
+        const shaftMaterial = createMaterial({
+            isHead: false,
+            useColorAttribute: !options.uniformColor,
+        });
+        const headMaterial = createMaterial({
+            isHead: true,
+            useColorAttribute: !options.uniformColor,
+        });
+        for (const { uniforms } of [shaftMaterial, headMaterial]) {
+            uniforms.shaftRadius.value = this.shaftRadius;
+            uniforms.headLength.value = this.headLength;
+            uniforms.headWidth.value = this.headWidth;
+            uniforms.arrowLength.value = this.arrowLength;
+            if (options.uniformColor) {
+                uniforms.uniformColor.value.set(options.uniformColor);
+            }
+        }
+        this.shaftMesh = new Mesh(shaftGeometry, shaftMaterial);
+        this.headMesh = new Mesh(headGeometry, headMaterial);
+        this.shaftMesh.frustumCulled = false;
+        this.headMesh.frustumCulled = false;
+        this.shaftMesh.raycast = () => null;
+        this.headMesh.raycast = () => null;
+        this.add(this.shaftMesh, this.headMesh);
+    }
+    update(arrows) {
+        if (arrows.poses) {
+            this.poses.array.set(arrows.poses);
+            this.poses.needsUpdate = true;
+        }
+        if (arrows.colors && this.attributes.instanceColor) {
+            this.attributes.instanceColor.array.set(arrows.colors);
+            this.attributes.instanceColor.needsUpdate = true;
+        }
+    }
+    getBoundingBoxAt(instanceId, target) {
+        this.getPoseAt(instanceId, origin, direction);
+        const r = Math.max(this.shaftRadius, this.headWidth);
+        const directionLength = direction.length();
+        if (directionLength > 0)
+            direction.multiplyScalar(1 / directionLength);
+        else
+            direction.set(0, 1, 0);
+        direction.multiplyScalar(this.arrowLength).add(origin);
+        min.set(Math.min(origin.x, direction.x) - r, Math.min(origin.y, direction.y) - r, Math.min(origin.z, direction.z) - r);
+        max.set(Math.max(origin.x, direction.x) + r, Math.max(origin.y, direction.y) + r, Math.max(origin.z, direction.z) + r);
+        target.min.copy(min);
+        target.max.copy(max);
+        return target;
+    }
+    getPoseAt(instanceID, origin, direction) {
+        const i = instanceID * 6;
+        const { array } = this.poses;
+        origin.set(array[i], array[i + 1], array[i + 2]);
+        direction.set(array[i + 3], array[i + 4], array[i + 5]);
+    }
+    dispose() {
+        this.shaftMesh.geometry.dispose();
+        this.headMesh.geometry.dispose();
+        this.shaftMesh.material.dispose();
+        this.headMesh.material.dispose();
+    }
+}

package/dist/three/InstancedArrows/box.d.ts

@@ -0,0 +1,3 @@
+import { BufferGeometry } from 'three';
+import type { InstancedArrows } from './InstancedArrows';
+export declare function computeBoundingBox(this: InstancedArrows, geometry: BufferGeometry): void;

package/dist/three/InstancedArrows/box.js

@@ -0,0 +1,92 @@
+import { RawShaderMaterial, Box3, BufferGeometry } from 'three';
+const bounds = new Box3();
+export function computeBoundingBox(geometry) {
+    const src = this.poses.array;
+    const poseScale = this.shaftMesh.material.uniforms.poseScale?.value ?? 0.001;
+    const headAtOrigin = this.shaftMesh.material.uniforms.headAtOrigin?.value ?? 1.0;
+    const r = Math.max(this.shaftRadius, this.headWidth);
+    let minX = +Infinity;
+    let minY = +Infinity;
+    let minZ = +Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    let maxZ = -Infinity;
+    for (let i = 0, l = src.length; i < l; i += 6) {
+        // origin in rendered units
+        const ox = src[i + 0] * poseScale;
+        const oy = src[i + 1] * poseScale;
+        const oz = src[i + 2] * poseScale;
+        // normalize direction
+        let dx = src[i + 3];
+        let dy = src[i + 4];
+        let dz = src[i + 5];
+        const dLen = Math.hypot(dx, dy, dz);
+        if (dLen > 0) {
+            const inv = 1 / dLen;
+            dx *= inv;
+            dy *= inv;
+            dz *= inv;
+        }
+        else {
+            dx = 0;
+            dy = 1;
+            dz = 0;
+        }
+        // segment endpoints
+        let ax, ay, az;
+        let bx, by, bz;
+        if (headAtOrigin > 0.5) {
+            // origin is tip
+            bx = ox;
+            by = oy;
+            bz = oz;
+            ax = ox - dx * this.arrowLength;
+            ay = oy - dy * this.arrowLength;
+            az = oz - dz * this.arrowLength;
+        }
+        else {
+            // origin is tail
+            ax = ox;
+            ay = oy;
+            az = oz;
+            bx = ox + dx * this.arrowLength;
+            by = oy + dy * this.arrowLength;
+            bz = oz + dz * this.arrowLength;
+        }
+        // expand with both endpoints
+        if (ax < minX)
+            minX = ax;
+        if (ay < minY)
+            minY = ay;
+        if (az < minZ)
+            minZ = az;
+        if (ax > maxX)
+            maxX = ax;
+        if (ay > maxY)
+            maxY = ay;
+        if (az > maxZ)
+            maxZ = az;
+        if (bx < minX)
+            minX = bx;
+        if (by < minY)
+            minY = by;
+        if (bz < minZ)
+            minZ = bz;
+        if (bx > maxX)
+            maxX = bx;
+        if (by > maxY)
+            maxY = by;
+        if (bz > maxZ)
+            maxZ = bz;
+    }
+    // pad by radius so the box contains arrow thickness
+    minX -= r;
+    minY -= r;
+    minZ -= r;
+    maxX += r;
+    maxY += r;
+    maxZ += r;
+    bounds.min.set(minX, minY, minZ);
+    bounds.max.set(maxX, maxY, maxZ);
+    geometry.boundingBox = bounds.clone();
+}

package/dist/three/InstancedArrows/fragment.glsl

@@ -0,0 +1,7 @@
+precision highp float;
+
+varying vec3 vColor;
+
+void main() {
+  gl_FragColor = vec4(vColor, 1.0);
+}

package/dist/three/InstancedArrows/geometry.d.ts

@@ -0,0 +1,4 @@
+import { BufferGeometry, InstancedBufferGeometry } from 'three';
+export declare const createShaftGeometry: () => BufferGeometry<import("three").NormalBufferAttributes, import("three").BufferGeometryEventMap>;
+export declare const createHeadGeometry: () => BufferGeometry<import("three").NormalBufferAttributes, import("three").BufferGeometryEventMap>;
+export declare const toInstanced: (baseGeometry: BufferGeometry, instanceCount: number, attributes: BufferGeometry["attributes"]) => InstancedBufferGeometry;

package/dist/three/InstancedArrows/geometry.js

@@ -0,0 +1,58 @@
+import { BufferGeometry, BufferAttribute, InstancedBufferGeometry } from 'three';
+export const createShaftGeometry = () => {
+    // Triangular prism aligned to +Y, base at y=0, top at y=1.
+    // No caps, 6 verts, 6 side triangles.
+    const positions = new Float32Array([
+        // bottom (y=0)
+        1, 0, 0,
+        -0.5, 0, 0.8660254,
+        -0.5, 0, -0.8660254,
+        // top (y=1)
+        1, 1, 0,
+        -0.5, 1, 0.8660254,
+        -0.5, 1, -0.8660254,
+    ]);
+    const indices = new Uint16Array([
+        0, 3, 4, 0, 4, 1,
+        1, 4, 5, 1, 5, 2,
+        2, 5, 3, 2, 3, 0,
+    ]);
+    const geometry = new BufferGeometry();
+    geometry.setAttribute('position', new BufferAttribute(positions, 3));
+    geometry.setIndex(new BufferAttribute(indices, 1));
+    geometry.computeBoundingSphere();
+    return geometry;
+};
+export const createHeadGeometry = () => {
+    // Triangular pyramid aligned to +Y, base at y=0, tip at y=1.
+    // 4 verts, 3 side triangles.
+    const positions = new Float32Array([
+        // base (y=0)
+        1, 0, 0,
+        -0.5, 0, 0.8660254,
+        -0.5, 0, -0.8660254,
+        // tip (y=1)
+        0, 1, 0,
+    ]);
+    const indices = new Uint16Array([
+        0, 1, 3,
+        1, 2, 3,
+        2, 0, 3,
+        0, 2, 1,
+    ]);
+    const geometry = new BufferGeometry();
+    geometry.setAttribute('position', new BufferAttribute(positions, 3));
+    geometry.setIndex(new BufferAttribute(indices, 1));
+    geometry.computeBoundingSphere();
+    return geometry;
+};
+export const toInstanced = (baseGeometry, instanceCount, attributes) => {
+    const geometry = new InstancedBufferGeometry();
+    geometry.index = baseGeometry.index;
+    geometry.attributes.position = baseGeometry.attributes.position;
+    for (const [name, attribute] of Object.entries(attributes)) {
+        geometry.setAttribute(name, attribute);
+    }
+    geometry.instanceCount = instanceCount;
+    return geometry;
+};

package/dist/three/InstancedArrows/raycast.d.ts

@@ -0,0 +1,9 @@
+import { Object3D, BufferGeometry, Raycaster, type Intersection } from 'three';
+import type { InstancedArrows } from './InstancedArrows';
+export declare function meshBoundsRaycast(this: Object3D & {
+    geometry: BufferGeometry;
+}, raycaster: Raycaster, intersects: Intersection[]): void;
+/**
+ * Currently unused. In the future will be used for click only (not mousemove) due to complexity.
+ */
+export declare function raycast(this: InstancedArrows, raycaster: Raycaster, intersects: Intersection[]): void;

package/dist/three/InstancedArrows/raycast.js

@@ -0,0 +1,129 @@
+import { Object3D, BufferGeometry, Ray, Matrix4, Raycaster, Vector3, Box3, RawShaderMaterial, } from 'three';
+const vec3 = new Vector3();
+const inverseMatrix = new Matrix4();
+const localRay = new Ray();
+const ray = new Ray();
+const box = new Box3();
+const segmentStart = new Vector3();
+const segmentEnd = new Vector3();
+const direction = new Vector3();
+const closestPointRay = new Vector3();
+const closestPointSeg = new Vector3();
+function closestPointsRaySegment(ray, a, b, outRay, outSeg) {
+    // Ray: O + tD, t>=0. Segment: A + u(B-A), u in [0,1]
+    const O = ray.origin;
+    const D = ray.direction; // assume normalized
+    const AB = direction.copy(b).sub(a);
+    const a0 = 1.0; // D·D
+    const b0 = D.dot(AB);
+    const c0 = AB.dot(AB);
+    const w0x = O.x - a.x, w0y = O.y - a.y, w0z = O.z - a.z;
+    const d0 = D.x * w0x + D.y * w0y + D.z * w0z;
+    const e0 = AB.x * w0x + AB.y * w0y + AB.z * w0z;
+    const denom = a0 * c0 - b0 * b0;
+    let t = 0.0;
+    let u = 0.0;
+    if (denom > 1e-8) {
+        t = (b0 * e0 - c0 * d0) / denom;
+        u = (a0 * e0 - b0 * d0) / denom;
+    }
+    else {
+        t = 0.0;
+        u = c0 > 0.0 ? e0 / c0 : 0.0;
+    }
+    if (t < 0.0)
+        t = 0.0;
+    if (u < 0.0)
+        u = 0.0;
+    else if (u > 1.0)
+        u = 1.0;
+    outRay.copy(D).multiplyScalar(t).add(O);
+    outSeg.copy(AB).multiplyScalar(u).add(a);
+    return outRay.distanceToSquared(outSeg);
+}
+export function meshBoundsRaycast(raycaster, intersects) {
+    if (this.geometry.boundingBox === null) {
+        this.geometry.computeBoundingBox();
+    }
+    box.copy(this.geometry.boundingBox ?? box);
+    box.applyMatrix4(this.matrixWorld);
+    if (!raycaster.ray.intersectsBox(box)) {
+        return;
+    }
+    inverseMatrix.copy(this.matrixWorld).invert();
+    ray.copy(raycaster.ray).applyMatrix4(inverseMatrix);
+    const distance = vec3.distanceTo(raycaster.ray.origin);
+    const point = vec3.clone();
+    intersects.push({
+        distance,
+        point,
+        object: this,
+    });
+}
+/**
+ * Currently unused. In the future will be used for click only (not mousemove) due to complexity.
+ */
+export function raycast(raycaster, intersects) {
+    // Ensure transforms are current
+    this.shaftMesh.updateMatrixWorld(true);
+    // Transform ray into local space of the mesh
+    inverseMatrix.copy(this.shaftMesh.matrixWorld).invert();
+    localRay.copy(raycaster.ray).applyMatrix4(inverseMatrix);
+    localRay.direction.normalize();
+    const material = this.shaftMesh.material;
+    const poseScale = material.uniforms?.poseScale?.value ?? 0.001;
+    const headAtOrigin = material.uniforms?.headAtOrigin?.value ?? 0.0;
+    // pick radius in local space (same units as rendered)
+    const radius = Math.max(this.shaftRadius, this.headWidth);
+    const array = this.poses.array;
+    const stride = 6;
+    // Optional quick coarse reject: if you maintain a global bounds box/sphere, test it here.
+    let bestDistance = Infinity;
+    let bestPointWorld = null;
+    let bestInstanceId = -1;
+    for (let instanceId = 0; instanceId < this.count; instanceId++) {
+        const i = instanceId * stride;
+        // origin is in mm in your data, so scale it to match render
+        const ox = array[i + 0] * poseScale;
+        const oy = array[i + 1] * poseScale;
+        const oz = array[i + 2] * poseScale;
+        const dx = array[i + 3];
+        const dy = array[i + 4];
+        const dz = array[i + 5];
+        segmentStart.set(ox, oy, oz);
+        direction.set(dx, dy, dz);
+        const dlen = direction.length();
+        if (dlen > 0)
+            direction.multiplyScalar(1 / dlen);
+        else
+            direction.set(0, 1, 0);
+        // If shader shifts so the TIP is at origin, mirror it here
+        if (headAtOrigin > 0.5) {
+            segmentStart.addScaledVector(direction, -this.arrowLength);
+        }
+        segmentEnd.copy(segmentStart).addScaledVector(direction, this.arrowLength);
+        const distSq = closestPointsRaySegment(localRay, segmentStart, segmentEnd, closestPointRay, closestPointSeg);
+        if (distSq > radius * radius)
+            continue;
+        // Param distance along the local ray
+        const t = closestPointRay.clone().sub(localRay.origin).dot(localRay.direction);
+        if (t < raycaster.near || t > raycaster.far)
+            continue;
+        // Convert closest point back to world for intersection result
+        const worldPoint = closestPointRay.clone().applyMatrix4(this.shaftMesh.matrixWorld);
+        const worldDistance = raycaster.ray.origin.distanceTo(worldPoint);
+        if (worldDistance < bestDistance) {
+            bestDistance = worldDistance;
+            bestPointWorld = worldPoint;
+            bestInstanceId = instanceId;
+        }
+    }
+    if (bestInstanceId >= 0 && bestPointWorld) {
+        intersects.push({
+            distance: bestDistance,
+            point: bestPointWorld,
+            object: this.shaftMesh,
+            instanceId: bestInstanceId,
+        });
+    }
+}

package/dist/three/InstancedArrows/vertex.glsl

@@ -0,0 +1,104 @@
+precision highp float;
+
+attribute vec3 position;
+
+attribute vec3 instanceOrigin;
+attribute vec3 instanceDirection; 
+
+#ifdef USE_COLOR_ATTRIBUTE
+  attribute vec3 instanceColor;
+#else
+  uniform vec3 uniformColor;
+#endif
+
+uniform float shaftRadius;
+uniform float headLength;
+uniform float headWidth;
+uniform float arrowLength;        
+uniform float minimumArrowLength; 
+
+uniform float headAtOrigin; // 0.0 = base at origin, 1.0 = head tip at origin
+
+uniform mat4 modelViewMatrix;
+uniform mat4 projectionMatrix;
+
+varying vec3 vColor;
+
+void buildOrthonormalBasisFromDirection(
+	in vec3 normalizedDirection,
+	out vec3 basisX,
+	out vec3 basisY,
+	out vec3 basisZ
+) {
+	basisY = normalizedDirection;
+
+	vec3 helperAxis =
+		abs(basisY.z) < 0.999
+			? vec3(0.0, 0.0, 1.0)
+			: vec3(1.0, 0.0, 0.0);
+
+	basisX = normalize(cross(helperAxis, basisY));
+	basisZ = cross(basisY, basisX);
+}
+
+void main() {
+	#ifdef USE_COLOR_ATTRIBUTE
+    vColor = instanceColor;
+  #else
+    vColor = uniformColor;
+  #endif
+
+	float clampedArrowLength = max(arrowLength, minimumArrowLength);
+
+	// Normalize direction, with a safe fallback if the vector is zero-length.
+	vec3 normalizedDirection = instanceDirection;
+	float directionMagnitude = length(normalizedDirection);
+	normalizedDirection =
+		(directionMagnitude > 0.0)
+			? (normalizedDirection / directionMagnitude)
+			: vec3(0.0, 1.0, 0.0);
+
+	vec3 basisX, basisY, basisZ;
+	buildOrthonormalBasisFromDirection(normalizedDirection, basisX, basisY, basisZ);
+
+  vec3 scaledInstanceOrigin = instanceOrigin * 0.001;
+  vec3 effectiveOrigin = scaledInstanceOrigin;
+
+	// Shift the arrow so its head tip lands at the provided origin.
+	if (headAtOrigin > 0.5) {
+		effectiveOrigin -= basisY * clampedArrowLength;
+	}
+
+	float computedHeadLength = min(headLength, clampedArrowLength);
+	float computedShaftLength = max(clampedArrowLength - computedHeadLength, 0.0);
+
+	vec3 localPosition = position.xyz;
+
+	#if defined(IS_HEAD)
+		// Scale unit cone to head dimensions.
+		localPosition.xz *= headWidth;
+		localPosition.y  *= computedHeadLength;
+
+		// Head starts where shaft ends.
+		vec3 headOffsetAlongDirection = basisY * computedShaftLength;
+
+		vec3 worldPosition =
+			effectiveOrigin +
+			headOffsetAlongDirection +
+			(basisX * localPosition.x + basisY * localPosition.y + basisZ * localPosition.z);
+	#else
+		// Scale unit shaft to shaft dimensions.
+		localPosition.xz *= shaftRadius;
+		localPosition.y  *= computedShaftLength;
+
+		if (computedShaftLength <= 0.0) {
+			localPosition *= 0.0;
+		}
+
+		vec3 worldPosition =
+			effectiveOrigin +
+			(basisX * localPosition.x + basisY * localPosition.y + basisZ * localPosition.z);
+	#endif
+
+	gl_Position = projectionMatrix * (modelViewMatrix * vec4(worldPosition, 1.0));
+}

package/package.json

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