@luxonis/depthai-viewer-common 3.9.8 → 4.0.0

package/dist/visualizer/panels/pointcloud/PointCloudCanvasRenderer.js

@@ -6,7 +6,8 @@ import { useLiveMessageSubscriptionController, useMessagePipeline, } from "../..
 import { useMessageSubscription } from "../../messaging/utils.js";
 import { readCanvasColor, useThemeMode } from "../../utils/use-theme-mode.js";
 import { DEFAULT_POINT_CLOUD_CAMERA_STATE } from "../pointcloud-camera.js";
-import { getPointCloudRenderScale, hasPointCloudColor, POINT_CLOUD_FRAGMENT_SHADER, POINT_CLOUD_VERTEX_SHADER, } from "./point-cloud-rendering.js";
+import { createPackedPointCloudAttribute, createPackedPointCloudMaterial, createPointCloudMaterial, } from "./point-cloud-materials.js";
+import { getPointCloudRenderScale, hasPointCloudColor } from "./point-cloud-rendering.js";
 const PANEL_STYLE = {
     width: "100%",
     height: "100%",
@@ -31,11 +32,11 @@ const DEFAULT_ORBIT_SPEED_RAD_PER_SECOND = 0.6;
 const ORBIT_SPEED_STEP_MULTIPLIER = 1.25;
 const MIN_ORBIT_SPEED_RAD_PER_SECOND = 0.05;
 const MAX_ORBIT_SPEED_RAD_PER_SECOND = 6;
-function createSubscriptionId() {
-    return typeof crypto !== "undefined" && "randomUUID" in crypto
-        ? crypto.randomUUID()
-        : `pointcloud-${Math.random().toString(36).slice(2)}`;
-}
+const FAST_PATH_BOUNDS_REFRESH_INTERVAL = 30;
+const HOVER_PICK_INTERVAL_MS = 100;
+const MAX_HOVER_PICK_POINT_COUNT = 100_000;
+const MAX_CLICK_PICK_POINT_COUNT = 500_000;
+const MAX_FAST_PATH_BOUNDS_SAMPLES = 16_384;
 function getTopicPointSettings(topic, initialConfig) {
     return {
         minValue: initialConfig.topics?.[topic]?.minValue ?? 0,
@@ -68,6 +69,9 @@ function isPointCloudMessage(message) {
         Array.isArray(candidate.fields) &&
         candidate.data instanceof Uint8Array);
 }
+function extractRenderablePointCloudFrame(event) {
+    return extractPointCloudMessage(event);
+}
 function extractPointCloudMessage(event) {
     if (!POINT_CLOUD_RENDER_SCHEMAS.has(event.schemaName)) {
         return undefined;
@@ -209,6 +213,7 @@ class StandalonePointCloudRenderer {
     #resizeObserver;
     #geometry;
     #material;
+    #packedMaterial;
     #points;
     #cameraReticle = createCameraReticle();
     #raycaster = new THREE.Raycaster();
@@ -222,6 +227,11 @@ class StandalonePointCloudRenderer {
     #whiteColorsArray;
     #positionsAttribute;
     #colorsAttribute;
+    #packedPointDataAttribute;
+    #positionInterleavedBuffer;
+    #usesPackedPointData = false;
+    #boundsPointCount = 0;
+    #framesSinceBoundsRefresh = FAST_PATH_BOUNDS_REFRESH_INTERVAL;
     #currentBackground = "";
     #pointSize;
     #pointSettings;
@@ -258,20 +268,8 @@ class StandalonePointCloudRenderer {
         this.#controls.addEventListener("change", this.#requestRender);
         this.#canvas.addEventListener("keydown", this.#handleKeyDown);
         this.#geometry = new THREE.BufferGeometry();
-        this.#material = new THREE.ShaderMaterial({
-            vertexShader: POINT_CLOUD_VERTEX_SHADER,
-            fragmentShader: POINT_CLOUD_FRAGMENT_SHADER,
-            uniforms: {
-                uPointSize: { value: this.#pointSize },
-                uUseDepthColor: { value: false },
-                uMinDepth: { value: 0 },
-                uMaxDepth: { value: 1 },
-            },
-            depthTest: true,
-            depthWrite: true,
-            transparent: false,
-            toneMapped: false,
-        });
+        this.#material = createPointCloudMaterial(this.#pointSize, this.#pointSettings.minValue, this.#pointSettings.maxValue);
+        this.#packedMaterial = createPackedPointCloudMaterial(this.#pointSize, this.#pointSettings.minValue, this.#pointSettings.maxValue);
         this.#points = new THREE.Points(this.#geometry, this.#material);
         this.#scene.add(this.#points);
         this.#scene.add(this.#cameraReticle);
@@ -298,6 +296,7 @@ class StandalonePointCloudRenderer {
         this.#controls.dispose();
         this.#geometry.dispose();
         this.#material.dispose();
+        this.#packedMaterial.dispose();
         this.#cameraReticle.geometry.dispose();
         if (Array.isArray(this.#cameraReticle.material)) {
             for (const material of this.#cameraReticle.material) {
@@ -322,6 +321,7 @@ class StandalonePointCloudRenderer {
         this.#pointCloud = pointCloud;
         const useDepthColor = !hasPointCloudColor(pointCloud.fields);
         this.#material.uniforms.uUseDepthColor.value = useDepthColor;
+        this.#packedMaterial.uniforms.uUseDepthColor.value = useDepthColor;
         this.#updateGeometry(pointCloud);
         this.#updateDepthColorRange();
         this.#updatePointsPose(pointCloud);
@@ -366,8 +366,10 @@ class StandalonePointCloudRenderer {
         }
         this.#requestRender();
     }
-    pick(clientX, clientY) {
-        if (this.#pointCloud == undefined || this.#geometry.drawRange.count === 0) {
+    pick(clientX, clientY, maxPointCount = Number.POSITIVE_INFINITY) {
+        if (this.#pointCloud == undefined ||
+            this.#geometry.drawRange.count === 0 ||
+            this.#pointCloud.pointCount > maxPointCount) {
             return undefined;
         }
         const rect = this.#canvas.getBoundingClientRect();
@@ -376,6 +378,9 @@ class StandalonePointCloudRenderer {
         }
         const pointer = new THREE.Vector2(((clientX - rect.left) / rect.width) * 2 - 1, -((clientY - rect.top) / rect.height) * 2 + 1);
         this.#raycaster.setFromCamera(pointer, this.#camera);
+        if (this.#usesPackedPointData) {
+            return this.#pickPackedPointCloud();
+        }
         const hit = this.#raycaster.intersectObject(this.#points, false)[0];
         if (!hit || hit.index == undefined) {
             return undefined;
@@ -576,12 +581,118 @@ class StandalonePointCloudRenderer {
         this.#cameraReticle.quaternion.copy(this.#points.quaternion);
         this.#points.updateMatrixWorld(true);
     }
-    #syncBoundsFromGeometry() {
-        this.#geometry.computeBoundingBox();
-        this.#geometry.computeBoundingSphere();
-        if (this.#geometry.boundingSphere) {
-            this.#boundsSphere.copy(this.#geometry.boundingSphere);
+    #pickPackedPointCloud() {
+        const pointCloud = this.#pointCloud;
+        if (!pointCloud) {
+            return undefined;
+        }
+        const localRay = this.#raycaster.ray
+            .clone()
+            .applyMatrix4(new THREE.Matrix4().copy(this.#points.matrixWorld).invert());
+        const threshold = this.#raycaster.params.Points?.threshold ?? 1;
+        const averageScale = (this.#points.scale.x + this.#points.scale.y + this.#points.scale.z) / 3;
+        const localThresholdSq = (threshold / averageScale) ** 2;
+        const positions = new Float32Array(pointCloud.data.buffer, pointCloud.data.byteOffset, pointCloud.pointCount * 4);
+        const point = new THREE.Vector3();
+        const worldPoint = new THREE.Vector3();
+        let closestDistance = Number.POSITIVE_INFINITY;
+        let closestIndex;
+        for (let index = 0; index < pointCloud.pointCount; index += 1) {
+            const offset = index * 4;
+            point.set(positions[offset], positions[offset + 1], positions[offset + 2]);
+            if (!Number.isFinite(point.x) || !Number.isFinite(point.y) || !Number.isFinite(point.z)) {
+                continue;
+            }
+            if (localRay.distanceSqToPoint(point) > localThresholdSq) {
+                continue;
+            }
+            worldPoint.copy(point).applyMatrix4(this.#points.matrixWorld);
+            const distance = this.#raycaster.ray.origin.distanceTo(worldPoint);
+            if (distance < closestDistance) {
+                closestDistance = distance;
+                closestIndex = index;
+            }
         }
+        if (closestIndex == undefined) {
+            return undefined;
+        }
+        return {
+            index: closestIndex,
+            offset: getHitOffset(pointCloud, closestIndex),
+        };
+    }
+    #refreshFastPathBounds(pointCount, positions, pointStride) {
+        const shouldRefresh = this.#geometry.boundingSphere == undefined ||
+            this.#boundsPointCount !== pointCount ||
+            this.#framesSinceBoundsRefresh >= FAST_PATH_BOUNDS_REFRESH_INTERVAL;
+        if (!shouldRefresh) {
+            this.#framesSinceBoundsRefresh += 1;
+            return;
+        }
+        let minX = Number.POSITIVE_INFINITY;
+        let minY = Number.POSITIVE_INFINITY;
+        let minZ = Number.POSITIVE_INFINITY;
+        let maxX = Number.NEGATIVE_INFINITY;
+        let maxY = Number.NEGATIVE_INFINITY;
+        let maxZ = Number.NEGATIVE_INFINITY;
+        const sampleStride = Math.max(1, Math.ceil(pointCount / MAX_FAST_PATH_BOUNDS_SAMPLES));
+        // Bounds only drive camera fitting and coarse frustum culling. Sampling uniformly keeps
+        // their refresh cost bounded instead of periodically scanning millions of points on the
+        // main thread.
+        for (let index = 0; index < pointCount; index += sampleStride) {
+            const offset = index * pointStride;
+            const x = positions[offset];
+            const y = positions[offset + 1];
+            const z = positions[offset + 2];
+            if (x == undefined || y == undefined || z == undefined) {
+                continue;
+            }
+            if (!Number.isFinite(x) || !Number.isFinite(y) || !Number.isFinite(z)) {
+                continue;
+            }
+            if (x < minX)
+                minX = x;
+            if (y < minY)
+                minY = y;
+            if (z < minZ)
+                minZ = z;
+            if (x > maxX)
+                maxX = x;
+            if (y > maxY)
+                maxY = y;
+            if (z > maxZ)
+                maxZ = z;
+        }
+        if (minX === Number.POSITIVE_INFINITY) {
+            this.#geometry.boundingBox = new THREE.Box3();
+            this.#geometry.boundingSphere = new THREE.Sphere(new THREE.Vector3(), 0);
+        }
+        else {
+            const boundingBox = new THREE.Box3(new THREE.Vector3(minX, minY, minZ), new THREE.Vector3(maxX, maxY, maxZ));
+            const padding = Math.max(1, boundingBox.getSize(new THREE.Vector3()).length() * 0.02);
+            boundingBox.expandByScalar(padding);
+            this.#geometry.boundingBox = boundingBox;
+            this.#geometry.boundingSphere = boundingBox.getBoundingSphere(new THREE.Sphere());
+        }
+        this.#boundsSphere.copy(this.#geometry.boundingSphere);
+        this.#boundsPointCount = pointCount;
+        this.#framesSinceBoundsRefresh = 0;
+    }
+    #disposeGeometryAttributes() {
+        // Three.js keys GPU buffers by attribute identity. Disposing before replacing an
+        // attribute ensures a resolution/layout change cannot strand the old GPU buffer.
+        this.#geometry.dispose();
+        for (const attributeName of Object.keys(this.#geometry.attributes)) {
+            this.#geometry.deleteAttribute(attributeName);
+        }
+        this.#geometry.boundingBox = null;
+        this.#geometry.boundingSphere = null;
+        this.#positionsAttribute = undefined;
+        this.#colorsAttribute = undefined;
+        this.#packedPointDataAttribute = undefined;
+        this.#positionInterleavedBuffer = undefined;
+        this.#boundsPointCount = 0;
+        this.#framesSinceBoundsRefresh = FAST_PATH_BOUNDS_REFRESH_INTERVAL;
     }
     #updateDepthColorRange() {
         const minDepth = Number.isFinite(this.#pointSettings.minValue)
@@ -594,31 +705,37 @@ class StandalonePointCloudRenderer {
             : typeof boundsMaxDepth === "number" && Number.isFinite(boundsMaxDepth)
                 ? boundsMaxDepth
                 : minDepth + 1;
+        const normalizedMaxDepth = maxDepth > minDepth ? maxDepth : minDepth + 1;
         this.#material.uniforms.uMinDepth.value = minDepth;
-        this.#material.uniforms.uMaxDepth.value = maxDepth > minDepth ? maxDepth : minDepth + 1;
+        this.#material.uniforms.uMaxDepth.value = normalizedMaxDepth;
+        this.#packedMaterial.uniforms.uMinDepth.value = minDepth;
+        this.#packedMaterial.uniforms.uMaxDepth.value = normalizedMaxDepth;
     }
     #applyFastPathGeometry(pointCloud, layout) {
-        if (this.#pointSettings.minValue > 0 || Number.isFinite(this.#pointSettings.maxValue)) {
-            return false;
-        }
         if (isStandardXYZRGBALayout(pointCloud, layout)) {
             const pointCount = pointCloud.pointCount;
             const positionsView = new Float32Array(pointCloud.data.buffer, pointCloud.data.byteOffset, pointCount * 4);
-            const colorsView = new Uint8Array(pointCloud.data.buffer, pointCloud.data.byteOffset, pointCount * pointCloud.point_stride);
-            const positionBuffer = new THREE.InterleavedBuffer(positionsView, 4);
-            const colorBuffer = new THREE.InterleavedBuffer(colorsView, pointCloud.point_stride);
-            this.#positionsAttribute = new THREE.InterleavedBufferAttribute(positionBuffer, 3, 0, false);
-            this.#colorsAttribute = new THREE.InterleavedBufferAttribute(colorBuffer, 4, 12, true);
-            this.#geometry.setAttribute("position", this.#positionsAttribute);
-            this.#geometry.setAttribute("aColor", this.#colorsAttribute);
+            const packedPointData = new Uint32Array(pointCloud.data.buffer, pointCloud.data.byteOffset, pointCount * 4);
+            const canReuseAttributes = this.#packedPointDataAttribute != undefined &&
+                this.#packedPointDataAttribute.array.byteLength === packedPointData.byteLength;
+            if (canReuseAttributes) {
+                this.#packedPointDataAttribute.array = packedPointData;
+                this.#packedPointDataAttribute.needsUpdate = true;
+            }
+            else {
+                this.#disposeGeometryAttributes();
+                this.#packedPointDataAttribute = createPackedPointCloudAttribute(packedPointData);
+                this.#geometry.setAttribute("aPointData", this.#packedPointDataAttribute);
+            }
+            this.#usesPackedPointData = true;
+            this.#points.material = this.#packedMaterial;
             this.#geometry.setDrawRange(0, pointCount);
-            this.#syncBoundsFromGeometry();
+            this.#refreshFastPathBounds(pointCount, positionsView, 4);
             return true;
         }
         if (isStandardXYZLayout(pointCloud, layout)) {
             const pointCount = pointCloud.pointCount;
             const positionsView = new Float32Array(pointCloud.data.buffer, pointCloud.data.byteOffset, pointCount * 3);
-            const position = new THREE.BufferAttribute(positionsView, 3);
             const colorLength = pointCount * 4;
             const colors = this.#whiteColorsArray && this.#whiteColorsArray.length === colorLength
                 ? this.#whiteColorsArray
@@ -627,13 +744,29 @@ class StandalonePointCloudRenderer {
                 colors.fill(255);
                 this.#whiteColorsArray = colors;
             }
-            const color = new THREE.Uint8BufferAttribute(colors, 4, true);
-            this.#positionsAttribute = position;
-            this.#colorsAttribute = color;
-            this.#geometry.setAttribute("position", position);
-            this.#geometry.setAttribute("aColor", color);
+            const canReuseAttributes = this.#positionsAttribute instanceof THREE.InterleavedBufferAttribute &&
+                this.#colorsAttribute instanceof THREE.Uint8BufferAttribute &&
+                this.#positionInterleavedBuffer != undefined &&
+                this.#positionInterleavedBuffer.stride === 3 &&
+                this.#positionInterleavedBuffer.array.byteLength === positionsView.byteLength &&
+                this.#colorsAttribute.array === colors;
+            if (canReuseAttributes) {
+                this.#positionInterleavedBuffer.array = positionsView;
+                this.#positionInterleavedBuffer.needsUpdate = true;
+            }
+            else {
+                this.#disposeGeometryAttributes();
+                const positionBuffer = new THREE.InterleavedBuffer(positionsView, 3).setUsage(THREE.StreamDrawUsage);
+                this.#positionInterleavedBuffer = positionBuffer;
+                this.#positionsAttribute = new THREE.InterleavedBufferAttribute(positionBuffer, 3, 0, false);
+                this.#colorsAttribute = new THREE.Uint8BufferAttribute(colors, 4, true);
+                this.#geometry.setAttribute("position", this.#positionsAttribute);
+                this.#geometry.setAttribute("aColor", this.#colorsAttribute);
+            }
+            this.#usesPackedPointData = false;
+            this.#points.material = this.#material;
             this.#geometry.setDrawRange(0, pointCount);
-            this.#syncBoundsFromGeometry();
+            this.#refreshFastPathBounds(pointCount, positionsView, 3);
             return true;
         }
         return false;
@@ -697,19 +830,25 @@ class StandalonePointCloudRenderer {
         const position = this.#positionsAttribute instanceof THREE.BufferAttribute &&
             this.#positionsAttribute.array === positions
             ? this.#positionsAttribute
-            : new THREE.BufferAttribute(positions, 3);
+            : new THREE.BufferAttribute(positions, 3).setUsage(THREE.StreamDrawUsage);
         if (position === this.#positionsAttribute) {
             position.needsUpdate = true;
         }
         const color = this.#colorsAttribute instanceof THREE.Uint8BufferAttribute &&
             this.#colorsAttribute.array === colors
             ? this.#colorsAttribute
-            : new THREE.Uint8BufferAttribute(colors, 4, true);
+            : new THREE.Uint8BufferAttribute(colors, 4, true).setUsage(THREE.StreamDrawUsage);
         if (color === this.#colorsAttribute) {
             color.needsUpdate = true;
         }
+        if (position !== this.#positionsAttribute || color !== this.#colorsAttribute) {
+            this.#disposeGeometryAttributes();
+        }
+        this.#positionInterleavedBuffer = undefined;
         this.#positionsAttribute = position;
         this.#colorsAttribute = color;
+        this.#usesPackedPointData = false;
+        this.#points.material = this.#material;
         this.#geometry.setAttribute("position", position);
         this.#geometry.setAttribute("aColor", color);
         this.#geometry.setDrawRange(0, visiblePointCount);
@@ -725,19 +864,29 @@ class StandalonePointCloudRenderer {
         this.#boundsSphere.copy(this.#geometry.boundingSphere);
     }
 }
+function applyFrameToRenderer(renderer, frame, onRendered) {
+    renderer.applyPointCloud(frame);
+    onRendered?.();
+    return true;
+}
 export function PointCloudCanvasRenderer({ topic, initialConfig, frameRenderedEvent, handleOnClick, handleCursorPositionUpdate, registerRendered, unregisterRendered, customOverlay, }) {
     const canvasRef = React.useRef(null);
     const rendererRef = React.useRef(undefined);
     const handledSeekTimeRef = React.useRef(undefined);
     const hoverFrameRef = React.useRef(undefined);
+    const pointCloudApplyFrameRef = React.useRef(undefined);
+    const pendingPointCloudRef = React.useRef(undefined);
     const latestPointerPositionRef = React.useRef(undefined);
+    const lastHoverPickAtRef = React.useRef(0);
     const pointerInteractionRef = React.useRef(false);
     const draggedDuringPointerRef = React.useRef(false);
-    const subscriptionIdRef = React.useRef(createSubscriptionId());
     const liveMessageSubscriptions = useLiveMessageSubscriptionController();
-    const setSubscriptions = useMessagePipeline((ctx) => ctx.setSubscriptions);
     const lastSeekTime = useMessagePipeline((ctx) => ctx.playerState.activeData?.lastSeekTime);
     const themeMode = useThemeMode();
+    const themeModeRef = React.useRef(themeMode);
+    const frameRenderedEventRef = React.useRef(frameRenderedEvent);
+    themeModeRef.current = themeMode;
+    frameRenderedEventRef.current = frameRenderedEvent;
     const cameraState = React.useMemo(() => getInitialCameraState(initialConfig.cameraState), [initialConfig.cameraState]);
     const pointSettings = React.useMemo(() => getTopicPointSettings(topic, initialConfig), [initialConfig, topic]);
     React.useEffect(() => {
@@ -745,29 +894,39 @@ export function PointCloudCanvasRenderer({ topic, initialConfig, frameRenderedEv
         if (!canvas) {
             return;
         }
-        const renderer = new StandalonePointCloudRenderer({
-            canvas,
-            pointSettings,
-            cameraState,
-        });
+        let renderer;
+        try {
+            renderer = new StandalonePointCloudRenderer({ canvas, pointSettings, cameraState });
+        }
+        catch (error) {
+            console.error("Point-cloud renderer initialization failed.", error);
+            return;
+        }
         rendererRef.current = renderer;
+        renderer.setThemeMode(themeModeRef.current);
         registerRendered?.(renderer);
+        const pendingFrame = pendingPointCloudRef.current;
+        if (pendingFrame) {
+            applyFrameToRenderer(renderer, pendingFrame, () => frameRenderedEventRef.current?.(0));
+            pendingPointCloudRef.current = undefined;
+        }
         return () => {
             if (hoverFrameRef.current != undefined) {
                 cancelAnimationFrame(hoverFrameRef.current);
                 hoverFrameRef.current = undefined;
             }
+            if (pointCloudApplyFrameRef.current != undefined) {
+                cancelAnimationFrame(pointCloudApplyFrameRef.current);
+                pointCloudApplyFrameRef.current = undefined;
+            }
+            pendingPointCloudRef.current = undefined;
             renderer.dispose();
-            rendererRef.current = undefined;
+            if (rendererRef.current === renderer) {
+                rendererRef.current = undefined;
+            }
             unregisterRendered?.();
         };
     }, [cameraState, pointSettings, registerRendered, unregisterRendered]);
-    React.useEffect(() => {
-        setSubscriptions(subscriptionIdRef.current, [{ topic, preloadType: "partial" }]);
-        return () => {
-            setSubscriptions(subscriptionIdRef.current, []);
-        };
-    }, [setSubscriptions, topic]);
     React.useEffect(() => {
         const renderer = rendererRef.current;
         if (!renderer) {
@@ -784,25 +943,44 @@ export function PointCloudCanvasRenderer({ topic, initialConfig, frameRenderedEv
         if (!renderer) {
             return;
         }
-        renderer.handleSeekRestore(liveMessageSubscriptions.getCachedMessages([topic]));
+        if (pointCloudApplyFrameRef.current != undefined) {
+            cancelAnimationFrame(pointCloudApplyFrameRef.current);
+            pointCloudApplyFrameRef.current = undefined;
+        }
+        pendingPointCloudRef.current = undefined;
+        const cachedMessages = liveMessageSubscriptions.getCachedMessages([topic]);
+        for (let index = cachedMessages.length - 1; index >= 0; index -= 1) {
+            const frame = extractRenderablePointCloudFrame(cachedMessages[index]);
+            if (frame && applyFrameToRenderer(renderer, frame)) {
+                return;
+            }
+        }
+        renderer.clear();
     }, [lastSeekTime, liveMessageSubscriptions, topic]);
     useMessageSubscription({
         topics: [topic],
         onMessages: (messages, incomingLastSeekTime) => {
-            const renderer = rendererRef.current;
-            if (!renderer) {
-                return;
-            }
             if (incomingLastSeekTime != undefined) {
                 handledSeekTimeRef.current = incomingLastSeekTime;
             }
             for (let index = messages.length - 1; index >= 0; index -= 1) {
-                const pointCloud = extractPointCloudMessage(messages[index]);
-                if (!pointCloud) {
+                const frame = extractRenderablePointCloudFrame(messages[index]);
+                if (!frame) {
                     continue;
                 }
-                renderer.applyPointCloud(pointCloud);
-                frameRenderedEvent?.(0);
+                pendingPointCloudRef.current = frame;
+                if (pointCloudApplyFrameRef.current == undefined && rendererRef.current) {
+                    pointCloudApplyFrameRef.current = requestAnimationFrame(() => {
+                        pointCloudApplyFrameRef.current = undefined;
+                        const pendingPointCloud = pendingPointCloudRef.current;
+                        pendingPointCloudRef.current = undefined;
+                        const activeRenderer = rendererRef.current;
+                        if (!pendingPointCloud || !activeRenderer) {
+                            return;
+                        }
+                        applyFrameToRenderer(activeRenderer, pendingPointCloud, () => frameRenderedEventRef.current?.(0));
+                    });
+                }
                 return;
             }
         },
@@ -817,7 +995,12 @@ export function PointCloudCanvasRenderer({ topic, initialConfig, frameRenderedEv
         if (!renderer || !position || !handleCursorPositionUpdate) {
             return;
         }
-        const hit = renderer.pick(position.x, position.y);
+        const now = performance.now();
+        if (now - lastHoverPickAtRef.current < HOVER_PICK_INTERVAL_MS) {
+            return;
+        }
+        lastHoverPickAtRef.current = now;
+        const hit = renderer.pick(position.x, position.y, MAX_HOVER_PICK_POINT_COUNT);
         handleCursorPositionUpdate(position, hit?.offset);
     }, [handleCursorPositionUpdate]);
     const handleCanvasPointerMove = React.useCallback((event) => {
@@ -852,7 +1035,7 @@ export function PointCloudCanvasRenderer({ topic, initialConfig, frameRenderedEv
             handleOnClick(event, undefined);
             return;
         }
-        const hit = renderer.pick(event.clientX, event.clientY);
+        const hit = renderer.pick(event.clientX, event.clientY, MAX_CLICK_PICK_POINT_COUNT);
         handleOnClick(event, hit?.offset);
     }, [handleOnClick]);
     const handleCanvasPointerDown = React.useCallback((event) => {