@viamrobotics/motion-tools 1.16.0 → 1.18.1

package/dist/components/overlay/Details.svelte

@@ -12,6 +12,9 @@
 </script>
 
 <script lang="ts">
+	import type { Entity } from 'koota'
+	import type { Snippet } from 'svelte'
+
 	import { draggable } from '@neodrag/svelte'
 	import { isInstanceOf, useTask } from '@threlte/core'
 	import { Button, Icon, Input, Select, Tooltip } from '@viamrobotics/prime-core'
@@ -34,7 +37,11 @@
 	} from '../../hooks/useSelection.svelte'
 	import { createPose } from '../../transform'
 
-	const { ...rest } = $props()
+	interface Props {
+		details?: Snippet<[{ entity: Entity }]>
+	}
+
+	const { details }: Props = $props()
 
 	const world = useWorld()
 	const controls = useCameraControls()
@@ -94,7 +101,7 @@
 		}
 	}
 
-	const { start, stop } = useTask(
+	useTask(
 		() => {
 			object3d?.getWorldPosition(vec3)
 			if (!vec3.equals(worldPosition)) {
@@ -114,19 +121,11 @@
 			}
 		},
 		{
-			autoStart: false,
 			autoInvalidate: false,
+			running: () => object3d !== undefined,
 		}
 	)
 
-	$effect.pre(() => {
-		if (object3d) {
-			start()
-		} else {
-			stop()
-		}
-	})
-
 	$effect(() => {
 		if (entity) {
 			const worldPose = createPose({
@@ -266,7 +265,6 @@
 			bounds: 'body',
 			handle: dragElement,
 		}}
-		{...rest}
 	>
 		<div
 			class="flex cursor-move items-center justify-between gap-2 pb-2"
@@ -662,6 +660,8 @@
 			</div>
 		{/if}
 
+		{@render details?.({ entity })}
+
 		<h3 class="text-subtle-2 pt-3 pb-2">Actions</h3>
 
 		{#if focusedEntity.current}

package/dist/components/overlay/Details.svelte.d.ts

@@ -1,3 +1,10 @@
-declare const Details: import("svelte").Component<Record<string, any>, {}, "">;
+import type { Entity } from 'koota';
+import type { Snippet } from 'svelte';
+interface Props {
+    details?: Snippet<[{
+        entity: Entity;
+    }]>;
+}
+declare const Details: import("svelte").Component<Props, {}, "">;
 type Details = ReturnType<typeof Details>;
 export default Details;

package/dist/components/overlay/settings/Settings.svelte

@@ -5,6 +5,7 @@
 	import { useResourceNames } from '@viamrobotics/svelte-sdk'
 	import { PersistedState } from 'runed'
 	import { onMount } from 'svelte'
+	import { Color } from 'three'
 
 	import DashboardButton from '../dashboard/Button.svelte'
 	import XRControllerSettings from '../../xr/XRControllerSettings.svelte'
@@ -54,6 +55,8 @@
 
 	const isOpen = new PersistedState('settings-is-open', false)
 	const activeTab = new PersistedState('settings-active-tab', 'Connection')
+
+	const colorHex = $derived(`#${new Color(settings.current.pointColor).getHexString()}`)
 </script>
 
 <Portal id="dashboard">
@@ -122,7 +125,11 @@
 			<div class="w-20">
 				<Input
 					type="color"
-					bind:value={settings.current.pointColor}
+					value={colorHex}
+					on:change={(event) => {
+						const value = (event.target as HTMLInputElement).value
+						settings.current.pointColor = value
+					}}
 					on:keydown={(event) => event.stopImmediatePropagation()}
 				/>
 			</div>

package/dist/components/xr/XR.svelte

@@ -72,7 +72,7 @@
 {#if enableXR}
 	<XR
 		onsessionstart={() => {
-			origin.set([0, 0, -2])
+			origin.set([-1, -1, 0])
 		}}
 		onsessionend={() => {
 			origin.set([0, 0, 0])

package/dist/draw.d.ts

@@ -0,0 +1,13 @@
+import type { TransformWithUUID } from '@viamrobotics/sdk';
+import type { Entity, Trait, World } from 'koota';
+import type { Transform as TransformProto } from './buf/common/v1/common_pb';
+import type { Drawing } from './buf/draw/v1/drawing_pb';
+export type Transform = TransformWithUUID | TransformProto;
+type Options = {
+    removable?: boolean;
+};
+export declare const drawTransform: (world: World, { referenceFrame, poseInObserverFrame, physicalObject, metadata }: Transform, api: Trait, options?: Options) => Entity;
+export declare const drawDrawing: (world: World, drawing: Drawing, api: Trait, options?: Options) => Entity[];
+export declare const updateTransform: (entity: Entity, { poseInObserverFrame, physicalObject, metadata }: Transform, options?: Options) => void;
+export declare const updateDrawing: (world: World, entities: Entity[], drawing: Drawing, api: Trait, options?: Options) => Entity[];
+export {};

package/dist/draw.js

@@ -0,0 +1,428 @@
+import { Vector3, Vector4 } from 'three';
+import { NURBSCurve } from 'three/addons/curves/NURBSCurve.js';
+import { createBufferGeometry, updateBufferGeometry } from './attribute';
+import { asFloat32Array, asOpacity, asRGB, inMeters, isSingleColor, isVertexColors, STRIDE, } from './buffer';
+import { traits } from './ecs';
+import { parsePcdInWorker } from './loaders/pcd';
+import { metadataFromStruct } from './metadata';
+import { createPose } from './transform';
+import { ColorFormat } from './buf/draw/v1/metadata_pb';
+import { isPointCloud } from './geometry';
+const vec3 = new Vector3();
+const rgb = { r: 0, g: 0, b: 0 };
+const DEFAULT_LINE_WIDTH = 5;
+const DEFAULT_POINT_SIZE = 10;
+const DEFAULT_NURBS_DEGREE = 3;
+const DEFAULT_NURBS_WEIGHT = 1;
+const DEFAULT_ANIMATION_NAME = '';
+const DEFAULT_ARROWS_COLORS = new Uint8Array([0, 255, 0]);
+const DEFAULT_LINE_COLORS = new Uint8Array([0, 128, 255]);
+const DEFAULT_LINE_DOT_COLORS = new Uint8Array([0, 0, 139]);
+const DEFAULT_POINTS_COLORS = new Uint8Array([51, 51, 51]);
+const DEFAULT_NURBS_COLORS = new Uint8Array([0, 255, 255]);
+const DEFAULT_OPACITY = 1;
+export const drawTransform = (world, { referenceFrame, poseInObserverFrame, physicalObject, metadata }, api, options = { removable: true }) => {
+    const entityTraits = [
+        traits.Name(referenceFrame),
+        traits.Pose(createPose(poseInObserverFrame?.pose)),
+        api,
+    ];
+    if (physicalObject) {
+        entityTraits.push(traits.Geometry(physicalObject));
+        const center = physicalObject.center;
+        if (center)
+            entityTraits.push(traits.Center(center));
+    }
+    else {
+        entityTraits.push(traits.ReferenceFrame);
+    }
+    if (options.removable)
+        entityTraits.push(traits.Removable);
+    const parent = poseInObserverFrame?.referenceFrame;
+    if (parent && parent !== 'world')
+        entityTraits.push(traits.Parent(parent));
+    const parsedMetadata = metadataFromStruct(metadata?.fields);
+    if (parsedMetadata.showAxesHelper)
+        entityTraits.push(traits.ShowAxesHelper);
+    if (parsedMetadata.invisible)
+        entityTraits.push(traits.Invisible);
+    const { colors, opacities } = parsedMetadata;
+    const pointCloud = isPointCloud(physicalObject?.geometryType)
+        ? physicalObject.geometryType.value.pointCloud
+        : undefined;
+    if (colors && !pointCloud) {
+        if (isVertexColors(colors)) {
+            entityTraits.push(traits.Colors(colors));
+        }
+        else {
+            entityTraits.push(traits.Color(asRGB(colors, rgb)));
+        }
+    }
+    entityTraits.push(traits.Opacity(asOpacity(opacities, DEFAULT_OPACITY)));
+    const entity = world.spawn(...entityTraits);
+    if (pointCloud)
+        parsePointCloud(world, entity, pointCloud, parsedMetadata);
+    return entity;
+};
+export const drawDrawing = (world, drawing, api, options = { removable: true }) => {
+    const { referenceFrame, poseInObserverFrame, physicalObject, metadata } = drawing;
+    if (physicalObject?.geometryType?.case === 'model')
+        return drawModel(world, drawing, api, options);
+    const entity = world.spawn(traits.Name(referenceFrame), traits.Pose(createPose(poseInObserverFrame?.pose)), api);
+    const parent = poseInObserverFrame?.referenceFrame;
+    if (parent && parent !== 'world')
+        entity.add(traits.Parent(parent));
+    if (options.removable)
+        entity.add(traits.Removable);
+    if (metadata?.showAxesHelper)
+        entity.add(traits.ShowAxesHelper);
+    if (metadata?.invisible)
+        entity.add(traits.Invisible);
+    applyShape(entity, drawing);
+    return [entity];
+};
+export const updateTransform = (entity, { poseInObserverFrame, physicalObject, metadata }, options = { removable: true }) => {
+    entity.set(traits.Pose, createPose(poseInObserverFrame?.pose));
+    const parent = poseInObserverFrame?.referenceFrame;
+    if (parent && parent !== 'world')
+        entity.set(traits.Parent, parent);
+    if (physicalObject) {
+        traits.updateGeometryTrait(entity, physicalObject);
+        const center = physicalObject.center;
+        if (center) {
+            entity.set(traits.Center, center);
+        }
+        else {
+            entity.remove(traits.Center);
+        }
+    }
+    const parsedMetadata = metadataFromStruct(metadata?.fields);
+    if (parsedMetadata.showAxesHelper)
+        entity.add(traits.ShowAxesHelper);
+    else
+        entity.remove(traits.ShowAxesHelper);
+    if (parsedMetadata.invisible)
+        entity.add(traits.Invisible);
+    else
+        entity.remove(traits.Invisible);
+    const { colors, opacities } = parsedMetadata;
+    if (colors) {
+        if (isPointCloud(physicalObject?.geometryType)) {
+            updateColors(entity, parsedMetadata);
+        }
+        else {
+            addColorTraits(entity, colors);
+        }
+    }
+    const opacity = asOpacity(opacities, DEFAULT_OPACITY);
+    if (opacity < 1)
+        entity.add(traits.Opacity(opacity));
+    if (options.removable)
+        entity.add(traits.Removable);
+    if (!options.removable)
+        entity.remove(traits.Removable);
+};
+export const updateDrawing = (world, entities, drawing, api, options = { removable: true }) => {
+    const { poseInObserverFrame, physicalObject, metadata } = drawing;
+    if (physicalObject?.geometryType?.case === 'model') {
+        for (const entity of entities) {
+            if (world.has(entity))
+                entity.destroy();
+        }
+        return drawDrawing(world, drawing, api, options);
+    }
+    if (entities.length === 0)
+        return entities;
+    const entity = entities[0];
+    if (!world.has(entity))
+        return entities;
+    entity.set(traits.Pose, createPose(poseInObserverFrame?.pose));
+    const parent = poseInObserverFrame?.referenceFrame;
+    if (parent && parent !== 'world')
+        entity.set(traits.Parent, parent);
+    if (metadata?.showAxesHelper)
+        entity.add(traits.ShowAxesHelper);
+    if (!metadata?.showAxesHelper)
+        entity.remove(traits.ShowAxesHelper);
+    if (metadata?.invisible)
+        entity.add(traits.Invisible);
+    if (!metadata?.invisible)
+        entity.remove(traits.Invisible);
+    updateShape(entity, drawing);
+    return entities;
+};
+const applyShape = (entity, { physicalObject, metadata }) => {
+    const colors = metadata?.colors;
+    const opacities = metadata?.opacities;
+    const geometryType = physicalObject?.geometryType;
+    const opacity = asOpacity(opacities, DEFAULT_OPACITY);
+    entity.add(traits.Opacity(opacity));
+    switch (geometryType?.case) {
+        case 'arrows': {
+            const poses = asFloat32Array(geometryType.value.poses);
+            entity.add(traits.Positions(poses));
+            entity.add(traits.Instances({ count: poses.length / STRIDE.ARROWS }));
+            addColorTraits(entity, colors ?? DEFAULT_ARROWS_COLORS);
+            entity.add(traits.Arrows({ headAtPose: true }));
+            break;
+        }
+        case 'line': {
+            const positions = asFloat32Array(geometryType.value.positions, inMeters);
+            const center = physicalObject?.center;
+            if (center)
+                entity.add(traits.Center(center));
+            addColorTraits(entity, colors ?? DEFAULT_LINE_COLORS);
+            const lineWidth = geometryType.value.lineWidth ?? DEFAULT_LINE_WIDTH;
+            entity.add(traits.LineWidth(lineWidth));
+            entity.add(traits.DotSize(geometryType.value.dotSize ?? lineWidth));
+            entity.add(traits.LinePositions(positions));
+            entity.add(traits.DotColors(geometryType.value.dotColors ?? DEFAULT_LINE_DOT_COLORS));
+            break;
+        }
+        case 'points': {
+            const positions = asFloat32Array(geometryType.value.positions, inMeters);
+            const center = physicalObject?.center;
+            if (center)
+                entity.add(traits.Center(center));
+            addColorTraits(entity, colors ?? DEFAULT_POINTS_COLORS);
+            entity.add(traits.PointSize(geometryType.value.pointSize ?? DEFAULT_POINT_SIZE));
+            entity.add(traits.BufferGeometry(createBufferGeometry(positions, {
+                colors: isVertexColors(colors) ? colors : undefined,
+                colorFormat: metadata?.colorFormat ?? ColorFormat.UNSPECIFIED,
+            })));
+            entity.add(traits.Points);
+            break;
+        }
+        case 'nurbs': {
+            const { degree = DEFAULT_NURBS_DEGREE, knots: knotsBuffer, weights: weightsBuffer, controlPoints: controlPointsBuffer, } = geometryType.value;
+            const knots = asFloat32Array(knotsBuffer).values().toArray();
+            const weights = weightsBuffer ? asFloat32Array(weightsBuffer) : [];
+            const controlPointsArray = asFloat32Array(controlPointsBuffer);
+            const numControlPoints = controlPointsArray.length / STRIDE.NURBS_CONTROL_POINTS;
+            const controlPoints = Array.from({ length: numControlPoints });
+            for (let j = 0; j < numControlPoints; j += 1) {
+                const idx = j * STRIDE.NURBS_CONTROL_POINTS;
+                vec3
+                    .set(controlPointsArray[idx], controlPointsArray[idx + 1], controlPointsArray[idx + 2])
+                    .multiplyScalar(0.001);
+                controlPoints[j] = new Vector4(vec3.x, vec3.y, vec3.z, weights[j] ?? DEFAULT_NURBS_WEIGHT);
+            }
+            const curve = new NURBSCurve(degree, knots, controlPoints);
+            const numPoints = 600;
+            const points = new Float32Array(numPoints * 3);
+            for (let i = 0; i < numPoints; i += 1) {
+                const t = i / (numPoints - 1);
+                curve.getPointAt(t, vec3);
+                points[i * 3 + 0] = vec3.x;
+                points[i * 3 + 1] = vec3.y;
+                points[i * 3 + 2] = vec3.z;
+            }
+            const center = physicalObject?.center;
+            if (center)
+                entity.add(traits.Center(center));
+            addColorTraits(entity, colors ?? DEFAULT_NURBS_COLORS);
+            entity.add(traits.LineWidth(geometryType.value.lineWidth ?? DEFAULT_LINE_WIDTH));
+            entity.add(traits.LinePositions(points));
+            break;
+        }
+        default: {
+            const center = physicalObject?.center;
+            if (center)
+                entity.add(traits.Center(center));
+            if (colors)
+                addColorTraits(entity, colors);
+            break;
+        }
+    }
+};
+const drawModel = (world, { referenceFrame, poseInObserverFrame, physicalObject, metadata }, api, { removable = true }) => {
+    const entities = [];
+    const parent = poseInObserverFrame?.referenceFrame;
+    const geometryType = physicalObject?.geometryType;
+    if (geometryType?.case !== 'model')
+        return entities;
+    const baseTraits = [
+        traits.Name(referenceFrame),
+        traits.Pose(createPose(poseInObserverFrame?.pose)),
+        api,
+    ];
+    if (parent && parent !== 'world')
+        baseTraits.push(traits.Parent(parent));
+    if (removable)
+        baseTraits.push(traits.Removable);
+    if (metadata?.invisible)
+        baseTraits.push(traits.Invisible);
+    entities.push(world.spawn(...baseTraits, traits.ReferenceFrame));
+    const { scale, animationName } = geometryType.value;
+    let i = 1;
+    for (const asset of geometryType.value.assets) {
+        const subEntityTraits = [
+            traits.Name(`${referenceFrame} model ${i++}`),
+            traits.Parent(referenceFrame),
+            api,
+        ];
+        if (scale)
+            subEntityTraits.push(traits.Scale(scale));
+        if (asset.content.case === 'url') {
+            subEntityTraits.push(traits.GLTF({
+                source: { url: asset.content.value },
+                animationName: animationName ?? DEFAULT_ANIMATION_NAME,
+            }));
+        }
+        else if (asset.content.value) {
+            subEntityTraits.push(traits.GLTF({
+                source: { glb: asset.content.value },
+                animationName: animationName ?? DEFAULT_ANIMATION_NAME,
+            }));
+        }
+        entities.push(world.spawn(...subEntityTraits));
+    }
+    return entities;
+};
+const parsePointCloud = (world, entity, pointCloud, metadata) => {
+    parsePcdInWorker(new Uint8Array(pointCloud)).then((pointcloud) => {
+        if (!world.has(entity)) {
+            console.error('Entity was destroyed before pointcloud could be added');
+            return;
+        }
+        const { colors, colorFormat } = metadata;
+        const numPoints = pointcloud.positions.length / STRIDE.POSITIONS;
+        if (colors && isSingleColor(colors))
+            entity.add(traits.Color(asRGB(colors, rgb)));
+        let vertexColors = pointcloud.colors;
+        if (colors && colors.length > 0)
+            vertexColors = parseColors(colors, numPoints);
+        const geometry = createBufferGeometry(pointcloud.positions, {
+            colors: vertexColors ?? undefined,
+            colorFormat,
+        });
+        entity.add(traits.BufferGeometry(geometry));
+        entity.add(traits.Points);
+    });
+};
+const updateColors = (entity, metadata) => {
+    const buffer = entity.get(traits.BufferGeometry);
+    if (!buffer) {
+        if (metadata.colors)
+            addColorTraits(entity, metadata.colors);
+        return;
+    }
+    const position = buffer.getAttribute('position');
+    const count = position?.count ?? 0;
+    const array = position?.array;
+    updateBufferGeometry(buffer, array, {
+        colors: parseColors(metadata.colors, count),
+        colorFormat: metadata.colorFormat,
+    });
+};
+const parseColors = (from, count) => {
+    const colors = from ?? new Uint8Array([255, 0, 0]);
+    if (isVertexColors(colors))
+        return colors;
+    const expanded = new Uint8Array(count * STRIDE.COLORS_RGB);
+    for (let i = 0; i < count; i++) {
+        for (let c = 0; c < STRIDE.COLORS_RGB; c++) {
+            expanded[i * STRIDE.COLORS_RGB + c] = colors[c];
+        }
+    }
+    return expanded;
+};
+const updateShape = (entity, { physicalObject, metadata }) => {
+    const geometryType = physicalObject?.geometryType;
+    entity.set(traits.Opacity, asOpacity(metadata?.opacities, DEFAULT_OPACITY));
+    switch (geometryType?.case) {
+        case 'arrows': {
+            const poses = asFloat32Array(geometryType.value.poses, inMeters);
+            entity.set(traits.Positions, poses);
+            entity.set(traits.Instances, { count: poses.length / STRIDE.ARROWS });
+            setColorTraits(entity, metadata?.colors ?? DEFAULT_ARROWS_COLORS);
+            break;
+        }
+        case 'line': {
+            const positions = asFloat32Array(geometryType.value.positions, inMeters);
+            const center = physicalObject?.center;
+            if (center)
+                entity.set(traits.Center, center);
+            setColorTraits(entity, metadata?.colors ?? DEFAULT_LINE_COLORS);
+            const lineWidth = geometryType.value.lineWidth ?? DEFAULT_LINE_WIDTH;
+            entity.set(traits.LineWidth, lineWidth);
+            entity.set(traits.DotSize, geometryType.value.dotSize ?? lineWidth);
+            entity.set(traits.LinePositions, positions);
+            const dotColors = geometryType.value.dotColors;
+            entity.set(traits.DotColors, dotColors ?? DEFAULT_LINE_DOT_COLORS);
+            break;
+        }
+        case 'points': {
+            const positions = asFloat32Array(geometryType.value.positions, inMeters);
+            const center = physicalObject?.center;
+            if (center)
+                entity.set(traits.Center, center);
+            setColorTraits(entity, metadata?.colors ?? DEFAULT_POINTS_COLORS);
+            entity.set(traits.PointSize, geometryType.value.pointSize ?? DEFAULT_POINT_SIZE);
+            const vertexColors = isVertexColors(metadata?.colors) ? metadata?.colors : undefined;
+            const pointsMetadata = {
+                colors: vertexColors,
+                colorFormat: metadata?.colorFormat ?? ColorFormat.UNSPECIFIED,
+            };
+            const buffer = entity.get(traits.BufferGeometry);
+            if (buffer) {
+                updateBufferGeometry(buffer, positions, pointsMetadata);
+            }
+            else {
+                entity.add(traits.BufferGeometry(createBufferGeometry(positions, pointsMetadata)));
+                entity.add(traits.Points);
+            }
+            break;
+        }
+        case 'nurbs': {
+            const { degree = DEFAULT_NURBS_DEGREE, knots: knotsBuffer, weights: weightsBuffer, controlPoints: controlPointsBuffer, } = geometryType.value;
+            const knots = [...asFloat32Array(knotsBuffer)];
+            const weights = weightsBuffer ? [...asFloat32Array(weightsBuffer)] : [];
+            const controlPointsArray = [...asFloat32Array(controlPointsBuffer)];
+            const numControlPoints = controlPointsArray.length / STRIDE.NURBS_CONTROL_POINTS;
+            const controlPoints = Array.from({ length: numControlPoints });
+            for (let j = 0; j < numControlPoints; j += 1) {
+                const idx = j * STRIDE.NURBS_CONTROL_POINTS;
+                vec3
+                    .set(controlPointsArray[idx], controlPointsArray[idx + 1], controlPointsArray[idx + 2])
+                    .multiplyScalar(0.001);
+                controlPoints[j] = new Vector4(vec3.x, vec3.y, vec3.z, weights[j] ?? DEFAULT_NURBS_WEIGHT);
+            }
+            const curve = new NURBSCurve(degree, knots, controlPoints);
+            const numPoints = 600;
+            const points = new Float32Array(numPoints * 3);
+            for (let i = 0; i < numPoints; i += 1) {
+                const t = i / (numPoints - 1);
+                curve.getPointAt(t, vec3);
+                points[i * 3 + 0] = vec3.x;
+                points[i * 3 + 1] = vec3.y;
+                points[i * 3 + 2] = vec3.z;
+            }
+            const center = physicalObject?.center;
+            if (center)
+                entity.set(traits.Center, center);
+            setColorTraits(entity, metadata?.colors ?? DEFAULT_NURBS_COLORS);
+            entity.set(traits.LineWidth, geometryType.value.lineWidth ?? DEFAULT_LINE_WIDTH);
+            entity.set(traits.LinePositions, points);
+            break;
+        }
+    }
+};
+const addColorTraits = (entity, colors) => {
+    if (isVertexColors(colors)) {
+        entity.add(traits.Colors(colors));
+    }
+    else {
+        entity.add(traits.Color(asRGB(colors, rgb)));
+    }
+};
+const setColorTraits = (entity, colors) => {
+    if (isVertexColors(colors)) {
+        entity.set(traits.Colors, colors);
+        entity.remove(traits.Color);
+    }
+    else {
+        entity.set(traits.Color, asRGB(colors, rgb));
+        entity.remove(traits.Colors);
+    }
+};

package/dist/ecs/traits.d.ts

@@ -80,8 +80,13 @@ export declare const Material: import("koota").Trait<{
 }>;
 export declare const DepthTest: import("koota").Trait<() => boolean>;
 export declare const Arrow: import("koota").Trait<() => boolean>;
-export declare const Positions: import("koota").Trait<() => Float32Array<ArrayBuffer>>;
-export declare const Colors: import("koota").Trait<() => Uint8Array<ArrayBuffer>>;
+export declare const Positions: import("koota").Trait<() => Float32Array<ArrayBufferLike>>;
+/** Per-vertex RGB colors packed as [r, g, b, ...], stride of 3, values 0-255. */
+export declare const Colors: import("koota").Trait<() => Uint8Array<ArrayBufferLike>>;
+/**
+ * Per-vertex opacity values packed as uint8 (0-255).
+ */
+export declare const Opacities: import("koota").Trait<() => Uint8Array<ArrayBuffer>>;
 export declare const Instances: import("koota").Trait<{
     count: number;
 }>;
@@ -113,23 +118,14 @@ export declare const Capsule: import("koota").Trait<{
 export declare const Sphere: import("koota").Trait<{
     r: number;
 }>;
-export declare const PointColor: import("koota").Trait<{
-    r: number;
-    g: number;
-    b: number;
-}>;
-/** format [x, y, z, ...] */
-export declare const LinePositions: 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>>;
 export declare const GLTF: import("koota").Trait<() => {
     source: {
         url: string;
     } | {
         gltf: ThreeGltf;
     } | {
-        glb: Uint8Array<ArrayBuffer>;
+        glb: Uint8Array;
     };
     animationName: string;
 }>;
@@ -141,6 +137,7 @@ export declare const Scale: import("koota").Trait<{
 export declare const FramesAPI: import("koota").Trait<() => boolean>;
 export declare const GeometriesAPI: import("koota").Trait<() => boolean>;
 export declare const DrawAPI: import("koota").Trait<() => boolean>;
+export declare const DrawServiceAPI: import("koota").Trait<() => boolean>;
 export declare const WorldStateStoreAPI: import("koota").Trait<() => boolean>;
 export declare const SnapshotAPI: import("koota").Trait<() => boolean>;
 /**
@@ -148,15 +145,36 @@ export declare const SnapshotAPI: import("koota").Trait<() => boolean>;
  */
 export declare const DroppedFile: import("koota").Trait<() => boolean>;
 export declare const ShowAxesHelper: import("koota").Trait<() => boolean>;
+/**
+ * Marker trait for entities that should be rendered in screen space (CSS pixels)
+ */
+export declare const ScreenSpace: import("koota").Trait<() => boolean>;
 /**
  * Point size, in mm
  */
 export declare const PointSize: import("koota").Trait<() => number>;
 /**
- * Line width, in mm
+ * Line positions, format [x, y, z, ...]
+ */
+export declare const LinePositions: import("koota").Trait<() => Float32Array<ArrayBufferLike>>;
+/**
+ * Line width, in mm when in world units, or CSS pixels when in screen space
  */
 export declare const LineWidth: import("koota").Trait<() => number>;
+/**
+ * Dot colors for line vertices, format [r, g, b, a, ...]
+ */
+export declare const DotColors: import("koota").Trait<() => Uint8Array<ArrayBufferLike>>;
+/**
+ * Dot size for line vertices, in mm when in world units, or CSS pixels when in screen space
+ */
+export declare const DotSize: import("koota").Trait<() => number>;
 export declare const ReferenceFrame: import("koota").Trait<() => boolean>;
+/**
+ * Interaction layers for entities
+ */
+export type InteractionLayerValue = 'selectTool';
+export declare const SelectToolInteractionLayer: import("koota").Trait<() => boolean>;
 /**
  * This entity can be safetly removed from the scene by the user
  */