@luxonis/depthai-viewer-common 3.9.7 → 4.0.0

package/dist/visualizer/panels/PointCloudPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"PointCloudPanel.js","sourceRoot":"","sources":["../../../src/visualizer/panels/PointCloudPanel.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PointCloudPanel.js","sourceRoot":"","sources":["../../../src/visualizer/panels/PointCloudPanel.tsx"],"names":[],"mappings":"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"}

package/dist/visualizer/panels/image/ImageCanvasRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageCanvasRenderer.d.ts","sourceRoot":"","sources":["../../../../src/visualizer/panels/image/ImageCanvasRenderer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAM1D,KAAK,wBAAwB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,SAAS,MAAM,EAAE,CAAC;IACpC,qBAAqB,EAAE,SAAS,MAAM,EAAE,CAAC;IACzC,kBAAkB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,8BAA8B,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5C,aAAa,CAAC,EAAE,CACd,KAAK,EAAE,KAAK,CAAC,UAAU,EACvB,iBAAiB,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS,KAChE,IAAI,CAAC;IACV,0BAA0B,CAAC,EAAE,CAC3B,WAAW,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,EACrC,iBAAiB,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS,KAChE,IAAI,CAAC;IACV,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,KAAK,IAAI,CAAC;IACrD,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AA8CF,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,gBAAgB,EAChB,qBAAqB,EACrB,kBAAkB,EAClB,8BAA8B,EAC9B,aAAa,EACb,0BAA0B,EAC1B,gBAAgB,EAChB,kBAAkB,EAClB,aAAa,EACb,WAAmB,GACpB,EAAE,wBAAwB,GAAG,KAAK,CAAC,YAAY,CAuyB/C"}
+{"version":3,"file":"ImageCanvasRenderer.d.ts","sourceRoot":"","sources":["../../../../src/visualizer/panels/image/ImageCanvasRenderer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAO1D,KAAK,wBAAwB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,SAAS,MAAM,EAAE,CAAC;IACpC,qBAAqB,EAAE,SAAS,MAAM,EAAE,CAAC;IACzC,kBAAkB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,8BAA8B,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5C,aAAa,CAAC,EAAE,CACd,KAAK,EAAE,KAAK,CAAC,UAAU,EACvB,iBAAiB,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS,KAChE,IAAI,CAAC;IACV,0BAA0B,CAAC,EAAE,CAC3B,WAAW,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,EACrC,iBAAiB,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS,KAChE,IAAI,CAAC;IACV,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,KAAK,IAAI,CAAC;IACrD,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAoFF,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,gBAAgB,EAChB,qBAAqB,EACrB,kBAAkB,EAClB,8BAA8B,EAC9B,aAAa,EACb,0BAA0B,EAC1B,gBAAgB,EAChB,kBAAkB,EAClB,aAAa,EACb,WAAmB,GACpB,EAAE,wBAAwB,GAAG,KAAK,CAAC,YAAY,CAo9B/C"}

package/dist/visualizer/panels/image/ImageCanvasRenderer.js

@@ -6,10 +6,12 @@ import React from "react";
 import { useDetections } from "../../components/Panel.js";
 import { recordRenderFrame } from "../../messaging/stream-diagnostics.js";
 import { useMessageSubscription } from "../../messaging/utils.js";
+import { recordBenchmarkRendered } from "../../utils/benchmark-metrics.js";
 import { readCanvasColor } from "../../utils/use-theme-mode.js";
 import { drawImageAnnotations } from "./annotation-overlay.js";
 import { drawSegmentationMasks } from "./segmentation-mask-overlay.js";
 import { WebGlImageRenderer } from "./webgl-image-renderer.js";
+import { WebGlSegmentationMaskRenderer } from "./webgl-segmentation-mask-renderer.js";
 import { WorkerImageDecoder } from "./worker-image-decoder.js";
 const MIN_ZOOM = 1;
 const MAX_ZOOM = 8;
@@ -17,14 +19,39 @@ const WHEEL_ZOOM_STEP = 0.0015;
 const RESET_ZOOM_EVENT_NAME = "visualizer:image-reset-zoom";
 const ZOOM_STATE_EVENT_NAME = "visualizer:image-zoom-state";
 const ANNOTATION_STALE_TIMEOUT_MS = 500;
+const MAX_IMAGE_DEVICE_PIXEL_RATIO = 1.5;
+const CONSTRAINED_IMAGE_DEVICE_PIXEL_RATIO = 1;
+function getImageCanvasPixelRatio() {
+    const devicePixelRatio = window.devicePixelRatio || 1;
+    const deviceMemory = navigator.deviceMemory;
+    const isConstrainedDevice = (deviceMemory != undefined && deviceMemory <= 4) || navigator.hardwareConcurrency <= 4;
+    const maximumPixelRatio = isConstrainedDevice
+        ? CONSTRAINED_IMAGE_DEVICE_PIXEL_RATIO
+        : MAX_IMAGE_DEVICE_PIXEL_RATIO;
+    return Math.max(1, Math.min(devicePixelRatio, maximumPixelRatio));
+}
+function releaseCanvasBackingStore(canvas) {
+    if (canvas.width !== 1 || canvas.height !== 1) {
+        canvas.width = 1;
+        canvas.height = 1;
+    }
+}
+function releaseOffscreenCanvasBackingStore(canvas) {
+    if (canvas && (canvas.width !== 1 || canvas.height !== 1)) {
+        canvas.width = 1;
+        canvas.height = 1;
+    }
+}
 export function ImageCanvasRenderer({ topic, annotationTopics, extraAnnotationTopics, frameRenderedEvent, annotationReceivedEventHandler, handleOnClick, handleCursorPositionUpdate, registerRendered, unregisterRendered, customOverlay, disableZoom = false, }) {
     const canvas2dRef = React.useRef(null);
     const webGlCanvasRef = React.useRef(null);
     const overlayCanvasRef = React.useRef(null);
+    const segmentationCanvasRef = React.useRef(null);
     const containerRef = React.useRef(null);
     const offscreenCanvasRef = React.useRef(null);
     const decoderRef = React.useRef(undefined);
     const webGlRendererRef = React.useRef(undefined);
+    const segmentationRendererRef = React.useRef(undefined);
     const decodedRenderableRef = React.useRef(undefined);
     const activeBitmapRef = React.useRef(undefined);
     const viewSizeRef = React.useRef({ width: 0, height: 0 });
@@ -32,7 +59,12 @@ export function ImageCanvasRenderer({ topic, annotationTopics, extraAnnotationTo
     const segmentationMasksByTopicRef = React.useRef(new Map());
     const visibleAnnotationsRef = React.useRef([]);
     const visibleSegmentationMasksRef = React.useRef([]);
+    const baseDirtyRef = React.useRef(true);
+    const overlayDirtyRef = React.useRef(true);
+    const nextOverlayExpiryRef = React.useRef(Number.POSITIVE_INFINITY);
     const imageRevisionRef = React.useRef(0);
+    const lastDrawnImageRevisionRef = React.useRef(-1);
+    const lastRenderSourceRef = React.useRef("image-render:image-data");
     const decodeRequestIdRef = React.useRef(0);
     const decodeInFlightRef = React.useRef(false);
     const decodePumpRequestIdRef = React.useRef(undefined);
@@ -77,6 +109,9 @@ export function ImageCanvasRenderer({ topic, annotationTopics, extraAnnotationTo
         if (rendererModeRef.current === nextMode) {
             return;
         }
+        if (nextMode === "canvas2d") {
+            webGlRendererRef.current?.releaseFrameResources();
+        }
         rendererModeRef.current = nextMode;
         setRendererMode(nextMode);
     }, []);
@@ -107,10 +142,28 @@ export function ImageCanvasRenderer({ topic, annotationTopics, extraAnnotationTo
         }
         return decoder;
     }, []);
+    const ensureSegmentationRenderer = React.useCallback(() => {
+        if (segmentationRendererRef.current === null) {
+            return undefined;
+        }
+        if (segmentationRendererRef.current) {
+            return segmentationRendererRef.current;
+        }
+        const canvas = segmentationCanvasRef.current;
+        if (!canvas) {
+            return undefined;
+        }
+        segmentationRendererRef.current = WebGlSegmentationMaskRenderer.create(canvas) ?? null;
+        return segmentationRendererRef.current ?? undefined;
+    }, []);
     const releaseDecodedRenderable = React.useCallback((renderable) => {
         if (!renderable || renderable.kind === "raw-image") {
             return;
         }
+        if (renderable.kind === "video-frame") {
+            renderable.frame.close();
+            return;
+        }
         if (renderable.kind === "bitmap") {
             renderable.bitmap.close();
             if (activeBitmapRef.current === renderable.bitmap) {
@@ -126,111 +179,183 @@ export function ImageCanvasRenderer({ topic, annotationTopics, extraAnnotationTo
         const canvas2d = canvas2dRef.current;
         const webGlCanvas = webGlCanvasRef.current;
         const overlayCanvas = overlayCanvasRef.current;
+        const segmentationCanvas = segmentationCanvasRef.current;
         const decodedRenderable = decodedRenderableRef.current;
-        if (!canvas2d || !webGlCanvas || !overlayCanvas) {
+        if (!canvas2d || !webGlCanvas || !overlayCanvas || !segmentationCanvas) {
             return;
         }
         const drawStart = performance.now();
-        const dpr = window.devicePixelRatio || 1;
+        if (!decodedRenderable) {
+            baseDirtyRef.current = true;
+            lastDrawnImageRevisionRef.current = -1;
+            releaseCanvasBackingStore(canvas2d);
+            releaseCanvasBackingStore(webGlCanvas);
+            releaseCanvasBackingStore(overlayCanvas);
+            releaseCanvasBackingStore(segmentationCanvas);
+            releaseOffscreenCanvasBackingStore(offscreenCanvasRef.current);
+            return;
+        }
+        const dpr = getImageCanvasPixelRatio();
         const width = Math.max(Math.floor(viewSizeRef.current.width * dpr), 1);
         const height = Math.max(Math.floor(viewSizeRef.current.height * dpr), 1);
         if (overlayCanvas.width !== width || overlayCanvas.height !== height) {
             overlayCanvas.width = width;
             overlayCanvas.height = height;
+            baseDirtyRef.current = true;
+            overlayDirtyRef.current = true;
         }
         const overlayCtx = overlayCanvas.getContext("2d");
         if (!overlayCtx) {
             return;
         }
-        overlayCtx.setTransform(1, 0, 0, 1, 0, 0);
-        overlayCtx.clearRect(0, 0, width, height);
-        if (!decodedRenderable) {
-            return;
-        }
         const baseRect = calculateDrawRect(decodedRenderable.width, decodedRenderable.height, viewSizeRef.current.width, viewSizeRef.current.height);
         const rect = applyViewTransform(baseRect, viewTransformRef.current);
         const scaledRect = scaleDrawRect(rect, dpr);
-        let renderSource = "image-render:image-data";
-        if (decodedRenderable.kind === "raw-image") {
-            if (webGlCanvas.width !== width || webGlCanvas.height !== height) {
-                webGlCanvas.width = width;
-                webGlCanvas.height = height;
-            }
-            const webGlRenderer = ensureWebGlRenderer();
-            if (webGlRenderer?.draw(decodedRenderable.image, width, height, scaledRect)) {
-                renderSource = "image-render:webgl";
-            }
-        }
-        if (renderSource !== "image-render:webgl") {
-            if (canvas2d.width !== width || canvas2d.height !== height) {
-                canvas2d.width = width;
-                canvas2d.height = height;
-            }
-            const imageCtx = canvas2d.getContext("2d");
-            if (!imageCtx) {
-                return;
-            }
-            imageCtx.setTransform(1, 0, 0, 1, 0, 0);
-            imageCtx.clearRect(0, 0, width, height);
-            imageCtx.imageSmoothingEnabled = false;
-            imageCtx.fillStyle = readCanvasColor();
-            imageCtx.fillRect(0, 0, width, height);
-            if (decodedRenderable.kind === "bitmap") {
-                imageCtx.drawImage(decodedRenderable.bitmap, scaledRect.x, scaledRect.y, scaledRect.width, scaledRect.height);
-                renderSource = "image-render:bitmap";
+        const imageRevision = imageRevisionRef.current;
+        const shouldDrawBase = baseDirtyRef.current || lastDrawnImageRevisionRef.current !== imageRevision;
+        let renderSource = lastRenderSourceRef.current;
+        if (shouldDrawBase) {
+            renderSource = "image-render:image-data";
+            if (decodedRenderable.kind === "raw-image") {
+                if (webGlCanvas.width !== width || webGlCanvas.height !== height) {
+                    webGlCanvas.width = width;
+                    webGlCanvas.height = height;
+                }
+                const webGlRenderer = ensureWebGlRenderer();
+                if (webGlRenderer?.draw(decodedRenderable.image, width, height, scaledRect)) {
+                    renderSource = "image-render:webgl";
+                }
             }
-            else if (decodedRenderable.kind === "image-data") {
-                const offscreenCanvas = getOffscreenCanvas(offscreenCanvasRef, decodedRenderable.imageData.width, decodedRenderable.imageData.height);
-                const offscreenCtx = offscreenCanvas.getContext("2d");
-                if (!offscreenCtx) {
+            if (renderSource !== "image-render:webgl") {
+                if (canvas2d.width !== width || canvas2d.height !== height) {
+                    canvas2d.width = width;
+                    canvas2d.height = height;
+                }
+                const imageCtx = canvas2d.getContext("2d");
+                if (!imageCtx) {
                     return;
                 }
-                offscreenCtx.putImageData(decodedRenderable.imageData, 0, 0);
-                imageCtx.drawImage(offscreenCanvas, scaledRect.x, scaledRect.y, scaledRect.width, scaledRect.height);
+                imageCtx.setTransform(1, 0, 0, 1, 0, 0);
+                imageCtx.clearRect(0, 0, width, height);
+                imageCtx.imageSmoothingEnabled = false;
+                imageCtx.fillStyle = readCanvasColor();
+                imageCtx.fillRect(0, 0, width, height);
+                if (decodedRenderable.kind === "bitmap") {
+                    imageCtx.drawImage(decodedRenderable.bitmap, scaledRect.x, scaledRect.y, scaledRect.width, scaledRect.height);
+                    renderSource = "image-render:bitmap";
+                }
+                else if (decodedRenderable.kind === "video-frame") {
+                    imageCtx.drawImage(decodedRenderable.frame, scaledRect.x, scaledRect.y, scaledRect.width, scaledRect.height);
+                    renderSource = "image-render:video-frame";
+                }
+                else if (decodedRenderable.kind === "image-data") {
+                    const offscreenCanvas = getOffscreenCanvas(offscreenCanvasRef, decodedRenderable.imageData.width, decodedRenderable.imageData.height);
+                    const offscreenCtx = offscreenCanvas.getContext("2d");
+                    if (!offscreenCtx) {
+                        return;
+                    }
+                    offscreenCtx.putImageData(decodedRenderable.imageData, 0, 0);
+                    imageCtx.drawImage(offscreenCanvas, scaledRect.x, scaledRect.y, scaledRect.width, scaledRect.height);
+                }
+                else {
+                    renderSource = "image-render:webgl-fallback";
+                }
             }
-            else {
-                renderSource = "image-render:webgl-fallback";
+            const nextRendererMode = renderSource === "image-render:webgl" ? "webgl" : "canvas2d";
+            setRendererModeIfChanged(nextRendererMode);
+            releaseCanvasBackingStore(nextRendererMode === "webgl" ? canvas2d : webGlCanvas);
+            if (decodedRenderable.kind !== "image-data") {
+                releaseOffscreenCanvasBackingStore(offscreenCanvasRef.current);
             }
+            baseDirtyRef.current = false;
+            lastDrawnImageRevisionRef.current = imageRevision;
+            lastRenderSourceRef.current = renderSource;
         }
         const now = performance.now();
-        const enabledTopics = visibleAnnotationsRef.current;
-        enabledTopics.length = 0;
-        const enabledSegmentationMasks = visibleSegmentationMasksRef.current;
-        enabledSegmentationMasks.length = 0;
-        for (const annotationTopic of allAnnotationTopics) {
-            const isEnabled = isAnnotationTopicEnabled(detectionsRef.current, annotationTopic);
-            const annotationEntry = annotationsByTopicRef.current.get(annotationTopic);
-            if (annotationEntry) {
-                if (now - annotationEntry.receivedAt > ANNOTATION_STALE_TIMEOUT_MS) {
-                    annotationsByTopicRef.current.delete(annotationTopic);
+        if (now >= nextOverlayExpiryRef.current) {
+            overlayDirtyRef.current = true;
+        }
+        if (overlayDirtyRef.current) {
+            overlayCtx.setTransform(1, 0, 0, 1, 0, 0);
+            overlayCtx.clearRect(0, 0, width, height);
+            const enabledTopics = visibleAnnotationsRef.current;
+            enabledTopics.length = 0;
+            const enabledSegmentationMasks = visibleSegmentationMasksRef.current;
+            enabledSegmentationMasks.length = 0;
+            let nextExpiry = Number.POSITIVE_INFINITY;
+            for (const annotationTopic of allAnnotationTopics) {
+                const isEnabled = isAnnotationTopicEnabled(detectionsRef.current, annotationTopic);
+                const annotationEntry = annotationsByTopicRef.current.get(annotationTopic);
+                if (annotationEntry) {
+                    const expiresAt = annotationEntry.receivedAt + ANNOTATION_STALE_TIMEOUT_MS;
+                    if (now >= expiresAt) {
+                        annotationsByTopicRef.current.delete(annotationTopic);
+                    }
+                    else {
+                        nextExpiry = Math.min(nextExpiry, expiresAt);
+                        if (isEnabled) {
+                            enabledTopics.push(annotationEntry.annotation);
+                        }
+                    }
                 }
-                else if (isEnabled) {
-                    enabledTopics.push(annotationEntry.annotation);
+                const segmentationMaskEntry = segmentationMasksByTopicRef.current.get(annotationTopic);
+                if (segmentationMaskEntry) {
+                    const expiresAt = segmentationMaskEntry.receivedAt + ANNOTATION_STALE_TIMEOUT_MS;
+                    if (now >= expiresAt) {
+                        segmentationMasksByTopicRef.current.delete(annotationTopic);
+                    }
+                    else {
+                        nextExpiry = Math.min(nextExpiry, expiresAt);
+                        if (isEnabled) {
+                            enabledSegmentationMasks.push(segmentationMaskEntry.mask);
+                        }
+                    }
                 }
             }
-            const segmentationMaskEntry = segmentationMasksByTopicRef.current.get(annotationTopic);
-            if (segmentationMaskEntry) {
-                if (now - segmentationMaskEntry.receivedAt > ANNOTATION_STALE_TIMEOUT_MS) {
-                    segmentationMasksByTopicRef.current.delete(annotationTopic);
+            overlayCtx.scale(dpr, dpr);
+            if (enabledSegmentationMasks.length > 0) {
+                if (segmentationCanvas.width !== width || segmentationCanvas.height !== height) {
+                    segmentationCanvas.width = width;
+                    segmentationCanvas.height = height;
+                }
+                const segmentationRenderer = ensureSegmentationRenderer();
+                if (segmentationRenderer) {
+                    segmentationRenderer.draw(enabledSegmentationMasks, width, height, scaledRect);
                 }
-                else if (isEnabled) {
-                    enabledSegmentationMasks.push(segmentationMaskEntry.mask);
+                else {
+                    releaseCanvasBackingStore(segmentationCanvas);
+                    drawSegmentationMasks(overlayCtx, enabledSegmentationMasks, rect);
                 }
             }
+            else if (segmentationRendererRef.current) {
+                segmentationRendererRef.current.draw([], width, height, scaledRect);
+            }
+            else {
+                // Most image streams never carry segmentation. Avoid allocating a second
+                // full-size canvas and WebGL context for every panel until one is needed.
+                releaseCanvasBackingStore(segmentationCanvas);
+            }
+            drawImageAnnotations(overlayCtx, enabledTopics, rect, decodedRenderable.width, decodedRenderable.height);
+            nextOverlayExpiryRef.current = nextExpiry;
+            overlayDirtyRef.current = false;
         }
-        overlayCtx.scale(dpr, dpr);
-        drawSegmentationMasks(overlayCtx, enabledSegmentationMasks, rect);
-        drawImageAnnotations(overlayCtx, enabledTopics, rect, decodedRenderable.width, decodedRenderable.height);
-        if (lastReportedImageRevisionRef.current !== imageRevisionRef.current) {
-            lastReportedImageRevisionRef.current = imageRevisionRef.current;
+        if (lastReportedImageRevisionRef.current !== imageRevision &&
+            lastDrawnImageRevisionRef.current === imageRevision) {
+            lastReportedImageRevisionRef.current = imageRevision;
             frameRenderedEventRef.current?.(performance.now() - drawStart);
+            recordBenchmarkRendered(topic);
             recordRenderFrame({
                 topic,
                 source: renderSource,
                 renderDurationMs: performance.now() - drawStart,
             });
         }
-    }, [allAnnotationTopics, ensureWebGlRenderer]);
+    }, [
+        allAnnotationTopics,
+        ensureSegmentationRenderer,
+        ensureWebGlRenderer,
+        setRendererModeIfChanged,
+    ]);
     const scheduleDraw = React.useCallback(() => {
         if (drawRequestIdRef.current != undefined) {
             return;
@@ -250,6 +375,8 @@ export function ImageCanvasRenderer({ topic, annotationTopics, extraAnnotationTo
     }, [topic]);
     const resetZoom = React.useCallback(() => {
         viewTransformRef.current = { scale: 1, offsetX: 0, offsetY: 0 };
+        baseDirtyRef.current = true;
+        overlayDirtyRef.current = true;
         dragStateRef.current = undefined;
         suppressClickRef.current = false;
         publishZoomState(false);
@@ -258,6 +385,9 @@ export function ImageCanvasRenderer({ topic, annotationTopics, extraAnnotationTo
     const clearRenderable = React.useCallback(() => {
         releaseDecodedRenderable(decodedRenderableRef.current);
         decodedRenderableRef.current = undefined;
+        baseDirtyRef.current = true;
+        lastDrawnImageRevisionRef.current = -1;
+        overlayDirtyRef.current = true;
         setRendererModeIfChanged("canvas2d");
         publishZoomState(false);
         if (hasRenderableRef.current) {
@@ -276,6 +406,11 @@ export function ImageCanvasRenderer({ topic, annotationTopics, extraAnnotationTo
         });
     }, []);
     const applyDirectRawImage = React.useCallback((image) => {
+        const previousRenderable = decodedRenderableRef.current;
+        if (previousRenderable?.width !== image.width ||
+            previousRenderable?.height !== image.height) {
+            overlayDirtyRef.current = true;
+        }
         releaseDecodedRenderable(decodedRenderableRef.current);
         setRendererModeIfChanged("webgl");
         decodedRenderableRef.current = {
@@ -291,6 +426,11 @@ export function ImageCanvasRenderer({ topic, annotationTopics, extraAnnotationTo
         scheduleDraw();
     }, [releaseDecodedRenderable, scheduleDraw, setRendererModeIfChanged]);
     const applyCanvasRenderable = React.useCallback((renderable) => {
+        const previousRenderable = decodedRenderableRef.current;
+        if (previousRenderable?.width !== renderable.width ||
+            previousRenderable?.height !== renderable.height) {
+            overlayDirtyRef.current = true;
+        }
         releaseDecodedRenderable(decodedRenderableRef.current);
         setRendererModeIfChanged("canvas2d");
         decodedRenderableRef.current = renderable;
@@ -363,6 +503,8 @@ export function ImageCanvasRenderer({ topic, annotationTopics, extraAnnotationTo
                 width: entry.contentRect.width,
                 height: entry.contentRect.height,
             };
+            baseDirtyRef.current = true;
+            overlayDirtyRef.current = true;
             const decodedRenderable = decodedRenderableRef.current;
             if (decodedRenderable) {
                 viewTransformRef.current = clampViewTransform(calculateDrawRect(decodedRenderable.width, decodedRenderable.height, entry.contentRect.width, entry.contentRect.height), entry.contentRect.width, entry.contentRect.height, viewTransformRef.current);
@@ -422,10 +564,13 @@ export function ImageCanvasRenderer({ topic, annotationTopics, extraAnnotationTo
             decoderRef.current = undefined;
             webGlRendererRef.current?.destroy();
             webGlRendererRef.current = undefined;
+            segmentationRendererRef.current?.destroy();
+            segmentationRendererRef.current = undefined;
         };
     }, [releaseDecodedRenderable, topic]);
     React.useEffect(() => {
         detectionsRef.current = detections.detections;
+        overlayDirtyRef.current = true;
         scheduleDraw();
     }, [detections.detections, scheduleDraw]);
     useMessageSubscription({
@@ -461,8 +606,34 @@ export function ImageCanvasRenderer({ topic, annotationTopics, extraAnnotationTo
                 decodeRequestIdRef.current = requestId;
                 pendingDecodeImageRef.current = undefined;
                 pendingDecodeRequestIdRef.current = undefined;
-                if (image.renderableBitmap) {
+                if (image.renderableVideoFrame) {
+                    const frame = image.renderableVideoFrame;
+                    const previousRenderable = decodedRenderableRef.current;
+                    if (previousRenderable?.width !== image.width ||
+                        previousRenderable?.height !== image.height) {
+                        overlayDirtyRef.current = true;
+                    }
+                    releaseDecodedRenderable(decodedRenderableRef.current);
+                    setRendererModeIfChanged("canvas2d");
+                    decodedRenderableRef.current = {
+                        kind: "video-frame",
+                        frame,
+                        width: image.width,
+                        height: image.height,
+                    };
+                    if (!hasRenderableRef.current) {
+                        hasRenderableRef.current = true;
+                        setHasRenderable(true);
+                    }
+                    scheduleDraw();
+                }
+                else if (image.renderableBitmap) {
                     const bitmap = image.renderableBitmap;
+                    const previousRenderable = decodedRenderableRef.current;
+                    if (previousRenderable?.width !== image.width ||
+                        previousRenderable?.height !== image.height) {
+                        overlayDirtyRef.current = true;
+                    }
                     releaseDecodedRenderable(decodedRenderableRef.current);
                     setRendererModeIfChanged("canvas2d");
                     activeBitmapRef.current = bitmap;
@@ -500,6 +671,7 @@ export function ImageCanvasRenderer({ topic, annotationTopics, extraAnnotationTo
                     });
                 }
                 annotationReceivedEventHandlerRef.current?.();
+                overlayDirtyRef.current = true;
                 scheduleDraw();
             }
             if (latestSegmentationMaskByTopic.size > 0) {
@@ -511,6 +683,7 @@ export function ImageCanvasRenderer({ topic, annotationTopics, extraAnnotationTo
                     });
                 }
                 annotationReceivedEventHandlerRef.current?.();
+                overlayDirtyRef.current = true;
                 scheduleDraw();
             }
         },
@@ -565,6 +738,8 @@ export function ImageCanvasRenderer({ topic, annotationTopics, extraAnnotationTo
                 offsetX: localX - baseRect.x - normalizedX * nextRectWidth,
                 offsetY: localY - baseRect.y - normalizedY * nextRectHeight,
             });
+            baseDirtyRef.current = true;
+            overlayDirtyRef.current = true;
             publishZoomState(nextScale > MIN_ZOOM);
             scheduleDraw();
         }, onPointerDown: (event) => {
@@ -601,6 +776,8 @@ export function ImageCanvasRenderer({ topic, annotationTopics, extraAnnotationTo
                     offsetX: dragState.startOffsetX + deltaX,
                     offsetY: dragState.startOffsetY + deltaY,
                 });
+                baseDirtyRef.current = true;
+                overlayDirtyRef.current = true;
                 scheduleDraw();
                 return;
             }
@@ -623,7 +800,7 @@ export function ImageCanvasRenderer({ topic, annotationTopics, extraAnnotationTo
             handleOnClick?.(event, handlePointerEvent(event.clientX, event.clientY));
         }, onDoubleClick: () => {
             resetZoom();
-        }, children: [_jsx("canvas", { className: `absolute inset-0 h-full w-full ${rendererMode === "webgl" ? "hidden" : ""}`, ref: canvas2dRef }), _jsx("canvas", { className: `absolute inset-0 h-full w-full ${rendererMode === "canvas2d" ? "hidden" : ""}`, ref: webGlCanvasRef }), _jsx("canvas", { className: "absolute inset-0 h-full w-full pointer-events-none", ref: overlayCanvasRef }), customOverlay ? (_jsx("div", { className: "absolute inset-0 pointer-events-none", children: customOverlay })) : null, !hasRenderable ? (_jsx("div", { className: "absolute inset-0 flex items-center justify-center text-sm text-slate-600", children: "Waiting for image frames" })) : null] }));
+        }, children: [_jsx("canvas", { className: `absolute inset-0 h-full w-full ${rendererMode === "webgl" ? "hidden" : ""}`, ref: canvas2dRef }), _jsx("canvas", { className: `absolute inset-0 h-full w-full ${rendererMode === "canvas2d" ? "hidden" : ""}`, ref: webGlCanvasRef }), _jsx("canvas", { className: "absolute inset-0 h-full w-full pointer-events-none", ref: segmentationCanvasRef }), _jsx("canvas", { className: "absolute inset-0 h-full w-full pointer-events-none", ref: overlayCanvasRef }), customOverlay ? (_jsx("div", { className: "absolute inset-0 pointer-events-none", children: customOverlay })) : null, !hasRenderable ? (_jsx("div", { className: "absolute inset-0 flex items-center justify-center text-sm text-slate-600", children: "Waiting for image frames" })) : null] }));
 }
 function calculateDrawRect(imageWidth, imageHeight, containerWidth, containerHeight) {
     if (imageWidth <= 0 || imageHeight <= 0 || containerWidth <= 0 || containerHeight <= 0) {