@luxonis/visualizer-protobuf 2.16.2 → 2.18.0

package/dist/deserialization.worker-DsG76nP8.js

@@ -0,0 +1,1326 @@
+import { e as expose } from './comlink-DHMAu6X7.js';
+import { t as typescript } from './useMessageReducer-Cg30zaG9.js';
+import { e as estimateObjectSize, U as uint8ArrayToUint16Array, d as dist } from './tslib.es6-D98N6tjc.js';
+import { T as Type, P as PointsAnnotationType, p as protobufsBySchema, a as Profile } from './protobuf-Cr0sn6Ua.js';
+import 'react';
+import './_commonjsHelpers-E-ZsRS8r.js';
+import 'zustand';
+import 'react-mosaic-component';
+import '@mui/material';
+import './isArrayLikeObject-Bytw9p-q.js';
+import 'protobufjs/minimal';
+
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/
+
+const glColor = (r, g, b, a) => ({
+  r: r / 255,
+  g: g / 255,
+  b: b / 255,
+  a
+});
+const DEFAULT_WIDTH = 1920;
+const DEFAULT_HEIGHT = 1080;
+function interpolate(width, height, base) {
+  const widthScale = width / DEFAULT_WIDTH;
+  const heightScale = height / DEFAULT_HEIGHT;
+  const scale = (widthScale + heightScale) / 2;
+  return base * scale;
+}
+const DEFAULT_SIZE = 42;
+const DEFAULT_THICKNESS = 10;
+const getTextSize = (width, height) => interpolate(width, height, DEFAULT_SIZE);
+const getBorderThickness = (width, height) => interpolate(width, height, DEFAULT_THICKNESS);
+
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/
+
+const GROUP_COLORS = {
+  entity: {
+    fill: glColor(21, 56, 127, 0.1),
+    outline: glColor(21, 56, 127, 1)
+  },
+  item: {
+    fill: glColor(21, 127, 88, 0.1),
+    outline: glColor(21, 127, 88, 1)
+  },
+  bulk: {
+    fill: glColor(127, 21, 42, 0.1),
+    outline: glColor(127, 21, 42, 1)
+  }
+};
+const DETECTION_STYLE = [{
+  label: "Person",
+  ...GROUP_COLORS.entity
+}, {
+  label: "Bicycle",
+  ...GROUP_COLORS.bulk
+}, {
+  label: "Car",
+  ...GROUP_COLORS.bulk
+}, {
+  label: "Motorbike",
+  ...GROUP_COLORS.bulk
+}, {
+  label: "Aeroplane",
+  ...GROUP_COLORS.bulk
+}, {
+  label: "Bus",
+  ...GROUP_COLORS.bulk
+}, {
+  label: "Train",
+  ...GROUP_COLORS.bulk
+}, {
+  label: "Truck",
+  ...GROUP_COLORS.bulk
+}, {
+  label: "Boat",
+  ...GROUP_COLORS.bulk
+}, {
+  label: "Traffic Light",
+  ...GROUP_COLORS.item
+}, {
+  label: "Fire Hydrant",
+  ...GROUP_COLORS.item
+}, {
+  label: "Stop Sign",
+  ...GROUP_COLORS.item
+}, {
+  label: "Parking Meter",
+  ...GROUP_COLORS.item
+}, {
+  label: "Bench",
+  ...GROUP_COLORS.bulk
+}, {
+  label: "Bird",
+  ...GROUP_COLORS.entity
+}, {
+  label: "Cat",
+  ...GROUP_COLORS.entity
+}, {
+  label: "Dog",
+  ...GROUP_COLORS.entity
+}, {
+  label: "Horse",
+  ...GROUP_COLORS.entity
+}, {
+  label: "Sheep",
+  ...GROUP_COLORS.entity
+}, {
+  label: "Cow",
+  ...GROUP_COLORS.entity
+}, {
+  label: "Elephant",
+  ...GROUP_COLORS.entity
+}, {
+  label: "Bear",
+  ...GROUP_COLORS.entity
+}, {
+  label: "Zebra",
+  ...GROUP_COLORS.entity
+}, {
+  label: "Giraffe",
+  ...GROUP_COLORS.entity
+}, {
+  label: "Backpack",
+  ...GROUP_COLORS.item
+}, {
+  label: "Umbrella",
+  ...GROUP_COLORS.item
+}, {
+  label: "Handbag",
+  ...GROUP_COLORS.item
+}, {
+  label: "Tie",
+  ...GROUP_COLORS.item
+}, {
+  label: "Suitcase",
+  ...GROUP_COLORS.item
+}, {
+  label: "Frisbee",
+  ...GROUP_COLORS.item
+}, {
+  label: "Skis",
+  ...GROUP_COLORS.bulk
+}, {
+  label: "Snowboard",
+  ...GROUP_COLORS.bulk
+}, {
+  label: "Sports Ball",
+  ...GROUP_COLORS.item
+}, {
+  label: "Lite",
+  ...GROUP_COLORS.item
+}, {
+  label: "Baseball Bat",
+  ...GROUP_COLORS.item
+}, {
+  label: "Baseball Glove",
+  ...GROUP_COLORS.item
+}, {
+  label: "Skateboard",
+  ...GROUP_COLORS.item
+}, {
+  label: "Surfboard",
+  ...GROUP_COLORS.bulk
+}, {
+  label: "Tennis Racket",
+  ...GROUP_COLORS.item
+}, {
+  label: "Bottle",
+  ...GROUP_COLORS.item
+}, {
+  label: "Wine Glass",
+  ...GROUP_COLORS.item
+}, {
+  label: "Cup",
+  ...GROUP_COLORS.item
+}, {
+  label: "Fork",
+  ...GROUP_COLORS.item
+}, {
+  label: "Knife",
+  ...GROUP_COLORS.item
+}, {
+  label: "Spoon",
+  ...GROUP_COLORS.item
+}, {
+  label: "Bowl",
+  ...GROUP_COLORS.item
+}, {
+  label: "Banana",
+  ...GROUP_COLORS.item
+}, {
+  label: "Apple",
+  ...GROUP_COLORS.item
+}, {
+  label: "Sandwich",
+  ...GROUP_COLORS.item
+}, {
+  label: "Orange",
+  ...GROUP_COLORS.item
+}, {
+  label: "Broccoli",
+  ...GROUP_COLORS.item
+}, {
+  label: "Carrot",
+  ...GROUP_COLORS.item
+}, {
+  label: "Hot Dog",
+  ...GROUP_COLORS.item
+}, {
+  label: "Pizza",
+  ...GROUP_COLORS.item
+}, {
+  label: "Donut",
+  ...GROUP_COLORS.item
+}, {
+  label: "Cake",
+  ...GROUP_COLORS.item
+}, {
+  label: "Chair",
+  ...GROUP_COLORS.bulk
+}, {
+  label: "Sofa",
+  ...GROUP_COLORS.bulk
+}, {
+  label: "Potted Plant",
+  ...GROUP_COLORS.item
+}, {
+  label: "Bed",
+  ...GROUP_COLORS.bulk
+}, {
+  label: "Diningtable",
+  ...GROUP_COLORS.bulk
+}, {
+  label: "Toilet",
+  ...GROUP_COLORS.bulk
+}, {
+  label: "TV Monitor",
+  ...GROUP_COLORS.item
+}, {
+  label: "Laptop",
+  ...GROUP_COLORS.item
+}, {
+  label: "Mouse",
+  ...GROUP_COLORS.item
+}, {
+  label: "Remote",
+  ...GROUP_COLORS.item
+}, {
+  label: "Keyboard",
+  ...GROUP_COLORS.item
+}, {
+  label: "Cell Phone",
+  ...GROUP_COLORS.item
+}, {
+  label: "Microwave",
+  ...GROUP_COLORS.item
+}, {
+  label: "Oven",
+  ...GROUP_COLORS.item
+}, {
+  label: "Toaster",
+  ...GROUP_COLORS.item
+}, {
+  label: "Sink",
+  ...GROUP_COLORS.item
+}, {
+  label: "Refrigerator",
+  ...GROUP_COLORS.bulk
+}, {
+  label: "Book",
+  ...GROUP_COLORS.item
+}, {
+  label: "Clock",
+  ...GROUP_COLORS.item
+}, {
+  label: "Vase",
+  ...GROUP_COLORS.item
+}, {
+  label: "Scissors",
+  ...GROUP_COLORS.item
+}, {
+  label: "Teddy Bear",
+  ...GROUP_COLORS.item
+}, {
+  label: "Hair Drier",
+  ...GROUP_COLORS.item
+}, {
+  label: "Toothbrush",
+  ...GROUP_COLORS.item
+}];
+const DEBUG_COLOR = {
+  r: 0,
+  g: 0.5,
+  b: 0,
+  a: 1
+};
+const DEFAULT_STYLE = {
+  label: null,
+  ...GROUP_COLORS.item
+};
+const DEFAULT_TEXT_COLOR = {
+  r: 1,
+  g: 1,
+  b: 1,
+  a: 1
+};
+const DEFAULT_BACKGROUND_COLOR = {
+  r: 0,
+  g: 0,
+  b: 0,
+  a: 0
+};
+
+function fromMillis(value) {
+  let sec = Math.trunc(value / 1000);
+  let nsec = Math.round((value - sec * 1000) * 1e6);
+  sec += Math.trunc(nsec / 1e9);
+  nsec %= 1e9;
+  return {
+    sec,
+    nsec
+  };
+}
+function parsePixelFormat(format) {
+  switch (format) {
+    case "BGRA":
+      return ["bgra8", 3];
+    case "BGRX":
+      return ["bgr8", 3];
+    // Closest supported
+    case "I420":
+    case "I420A":
+      return ['I420', 2];
+    case "I422":
+    case "I444":
+      return ['yuv422', 2];
+    case "RGBA":
+      return ["rgba8", 1];
+    case "RGBX":
+      return ["rgb8", 1];
+    // Closest supported
+    case "NV12":
+      return ["nv12", 1];
+    default:
+      // Unsupported
+      return ["bgra8", 3];
+  }
+}
+function parseMessageType(type) {
+  switch (type) {
+    case Type.YUV422i:
+    case Type.YUV422p:
+      return ["yuv422", 2];
+    case Type.NV12:
+      return ["nv12", 1];
+    case Type.RGB888i:
+      return ["rgb8", 3];
+    case Type.RGB888p:
+      return ["rgb8p", 1];
+    case Type.RGBA8888:
+      return ["rgba8", 1];
+    case Type.BGR888i:
+      return ["bgr8i", 3];
+    case Type.BGR888p:
+      return ["bgr8p", 3];
+    case Type.RAW16:
+      return ["mono16", 2];
+    case Type.RAW8:
+      return ["mono8", 2];
+    default:
+      throw new Error(`Unsupported encoding ${Type[type]}`);
+  }
+}
+function parseMessage(message) {
+  const width = Number(message.fb?.width ?? message.sourceFb?.width ?? 1920);
+  const height = Number(message.fb?.height ?? message.sourceFb?.height ?? 1200);
+  const stride = message.fb?.stride ?? message.sourceFb?.stride ?? null;
+  const p2Offset = message.fb?.p2Offset ?? message.sourceFb?.p2Offset ?? null;
+  const p1Offset = message.fb?.p1Offset ?? message.sourceFb?.p1Offset ?? null;
+  let planeStride = p1Offset != null && p2Offset != null ? p2Offset - p1Offset : 0;
+  if (planeStride <= 0) {
+    planeStride = null;
+  }
+  const type = message.fb?.type ?? message.sourceFb?.type ?? Type.RGB888p;
+  const [encoding, step] = parseMessageType(type);
+  const receiveTime = message.ts ?? message.tsDevice ?? fromMillis(Date.now());
+  return {
+    encoding,
+    step: stride ?? step,
+    receiveTime,
+    width,
+    height,
+    stride,
+    planeStride,
+    type
+  };
+}
+
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/
+
+function deserializeImgDetectionsCustom({
+  topic,
+  message,
+  callback,
+  topicSizes
+}) {
+  const {
+    receiveTime
+  } = parseMessage(message);
+  const {
+    width,
+    height
+  } = topicSizes.values().next().value ?? {
+    width: DEFAULT_WIDTH,
+    height: DEFAULT_HEIGHT
+  };
+  const xMultiplier = width >= height ? 1 : height / width;
+  const yMultiplier = height >= width ? 1 : width / height;
+  const points = [];
+  const texts = [];
+  const circles = [];
+  for (const annotations of message.annotations) {
+    points.push(...annotations.points.map(annotation => ({
+      timestamp: receiveTime,
+      type: annotation.type === PointsAnnotationType.UNRECOGNIZED ? typescript.PointsAnnotationType.UNKNOWN : Number(annotation.type),
+      points: annotation.points,
+      outline_color: annotation.outlineColor ?? DEFAULT_STYLE.outline,
+      outline_colors: [],
+      fill_color: annotation.fillColor ?? DEFAULT_STYLE.fill,
+      thickness: annotation.thickness
+    })));
+    texts.push(...annotations.texts.map(annotation => ({
+      timestamp: receiveTime,
+      position: annotation.position ?? {
+        x: 0,
+        y: 0
+      },
+      text: annotation.text,
+      font_size: annotation.fontSize ?? getTextSize(width, height),
+      text_color: annotation.textColor ?? DEFAULT_TEXT_COLOR,
+      background_color: annotation.backgroundColor ?? DEFAULT_BACKGROUND_COLOR
+    })));
+    circles.push(...annotations.circles.map(annotation => ({
+      timestamp: receiveTime,
+      xMultiplier,
+      yMultiplier,
+      position: annotation.position ?? {
+        x: 0,
+        y: 0
+      },
+      diameter: annotation.diameter,
+      thickness: annotation.thickness,
+      fill_color: annotation.fillColor ?? DEFAULT_STYLE.fill,
+      outline_color: annotation.outlineColor ?? DEFAULT_STYLE.outline
+    })));
+  }
+  const foxgloveMessage = {
+    points,
+    texts,
+    circles
+  };
+  callback({
+    topic,
+    receiveTime,
+    message: foxgloveMessage,
+    sizeInBytes: estimateObjectSize(foxgloveMessage),
+    schemaName: "foxglove.ImageAnnotations"
+  });
+}
+
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/
+
+function deserializeImgDetections({
+  topic,
+  message,
+  callback,
+  topicSizes
+}) {
+  const {
+    receiveTime
+  } = parseMessage(message);
+  const foxgloveMessage = {
+    points: [],
+    texts: [],
+    circles: []
+  };
+  if (message.detections.length > 0) {
+    for (const detection of message.detections) {
+      const detectionWidth = detection.xmax - detection.xmin;
+      const {
+        width,
+        height
+      } = topicSizes.values().next().value ?? {
+        width: DEFAULT_WIDTH,
+        height: DEFAULT_HEIGHT
+      };
+      const ratio = width / height;
+      const highligtLength = 0.035;
+      const highlightSizeX = Math.min(highligtLength, detectionWidth);
+      const highlightSizeY = Math.min(highligtLength * ratio, detection.ymax - detection.ymin);
+      const style = DETECTION_STYLE[detection.label] ?? DEFAULT_STYLE;
+      foxgloveMessage.points.push({
+        timestamp: receiveTime,
+        points: [{
+          x: detection.xmin,
+          y: detection.ymin
+        }, {
+          x: detection.xmin,
+          y: detection.ymax
+        }, {
+          x: detection.xmax,
+          y: detection.ymax
+        }, {
+          x: detection.xmax,
+          y: detection.ymin
+        }],
+        type: typescript.PointsAnnotationType.LINE_LOOP,
+        outline_colors: [],
+        thickness: 0,
+        outline_color: DEBUG_COLOR,
+        fill_color: style.fill
+      });
+      const baseHighlightConfig = {
+        timestamp: receiveTime,
+        type: typescript.PointsAnnotationType.LINE_LIST,
+        outline_colors: [],
+        thickness: getBorderThickness(width, height),
+        outline_color: style.outline,
+        fill_color: DEBUG_COLOR
+      };
+      foxgloveMessage.points.push({
+        ...baseHighlightConfig,
+        points: [{
+          x: detection.xmin,
+          y: detection.ymin
+        }, {
+          x: detection.xmin + highlightSizeX,
+          y: detection.ymin
+        }]
+      });
+      foxgloveMessage.points.push({
+        ...baseHighlightConfig,
+        points: [{
+          x: detection.xmin,
+          y: detection.ymin
+        }, {
+          x: detection.xmin,
+          y: detection.ymin + highlightSizeY
+        }]
+      });
+      foxgloveMessage.points.push({
+        ...baseHighlightConfig,
+        points: [{
+          x: detection.xmax,
+          y: detection.ymin
+        }, {
+          x: detection.xmax - highlightSizeX,
+          y: detection.ymin
+        }]
+      });
+      foxgloveMessage.points.push({
+        ...baseHighlightConfig,
+        points: [{
+          x: detection.xmax,
+          y: detection.ymin
+        }, {
+          x: detection.xmax,
+          y: detection.ymin + highlightSizeY
+        }]
+      });
+      foxgloveMessage.points.push({
+        ...baseHighlightConfig,
+        points: [{
+          x: detection.xmax,
+          y: detection.ymax
+        }, {
+          x: detection.xmax - highlightSizeX,
+          y: detection.ymax
+        }]
+      });
+      foxgloveMessage.points.push({
+        ...baseHighlightConfig,
+        points: [{
+          x: detection.xmax,
+          y: detection.ymax
+        }, {
+          x: detection.xmax,
+          y: detection.ymax - highlightSizeY
+        }]
+      });
+      foxgloveMessage.points.push({
+        ...baseHighlightConfig,
+        points: [{
+          x: detection.xmin,
+          y: detection.ymax
+        }, {
+          x: detection.xmin + highlightSizeX,
+          y: detection.ymax
+        }]
+      });
+      foxgloveMessage.points.push({
+        ...baseHighlightConfig,
+        points: [{
+          x: detection.xmin,
+          y: detection.ymax
+        }, {
+          x: detection.xmin,
+          y: detection.ymax - highlightSizeY
+        }]
+      });
+      const label = `${style.label ?? `Unknown #${detection.label}`} ${Math.round(detection.confidence * 100)}%`;
+      foxgloveMessage.texts.push({
+        timestamp: receiveTime,
+        position: {
+          x: detection.xmin + highligtLength / 2,
+          y: detection.ymin + highlightSizeY
+        },
+        text: label,
+        font_size: getTextSize(width, height),
+        text_color: DEFAULT_TEXT_COLOR,
+        background_color: DEFAULT_BACKGROUND_COLOR
+      });
+    }
+  }
+  callback({
+    topic,
+    receiveTime,
+    message: foxgloveMessage,
+    sizeInBytes: estimateObjectSize(foxgloveMessage),
+    schemaName: "foxglove.ImageAnnotations"
+  });
+}
+
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/
+
+function deserializePointCloudData({
+  topic,
+  message,
+  callback
+}) {
+  const receiveTime = fromMillis(Date.now());
+  const foxgloveMessage = {
+    timestamp: receiveTime,
+    frame_id: `pointcloud-${topic}-frame`,
+    point_stride: 12,
+    pose: {
+      position: {
+        x: 0,
+        y: 0,
+        z: 0
+      },
+      orientation: {
+        x: 0,
+        y: 0,
+        z: 1,
+        w: 0
+      }
+    },
+    fields: [{
+      name: "x",
+      offset: 0,
+      type: typescript.NumericType.FLOAT32
+    }, {
+      name: "y",
+      offset: 4,
+      type: typescript.NumericType.FLOAT32
+    }, {
+      name: "z",
+      offset: 8,
+      type: typescript.NumericType.FLOAT32
+    }],
+    data: message.data
+  };
+  if (message.color) {
+    foxgloveMessage.fields.push({
+      name: "red",
+      offset: 12,
+      type: typescript.NumericType.UINT8
+    }, {
+      name: "green",
+      offset: 13,
+      type: typescript.NumericType.UINT8
+    }, {
+      name: "blue",
+      offset: 14,
+      type: typescript.NumericType.UINT8
+    }, {
+      name: "alpha",
+      offset: 15,
+      type: typescript.NumericType.UINT8
+    });
+    foxgloveMessage.point_stride = 16;
+  }
+  callback({
+    topic,
+    receiveTime,
+    message: foxgloveMessage,
+    sizeInBytes: estimateObjectSize(foxgloveMessage),
+    schemaName: "foxglove.PointCloud"
+  });
+}
+
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/
+
+function deserializeColorFrame({
+  topic,
+  message,
+  callback
+}) {
+  const {
+    receiveTime,
+    encoding,
+    step,
+    width,
+    height,
+    stride,
+    planeStride
+  } = parseMessage(message);
+  const foxgloveMessage = {
+    timestamp: receiveTime,
+    frame_id: `color-${topic}-frame`,
+    width,
+    height,
+    encoding,
+    step: width * step,
+    data: message.data,
+    stride,
+    planeStride
+  };
+  callback({
+    topic,
+    receiveTime,
+    message: foxgloveMessage,
+    sizeInBytes: estimateObjectSize(foxgloveMessage),
+    schemaName: "foxglove.RawImage"
+  });
+}
+
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/
+/* eslint-disable no-underscore-dangle */
+
+const shader = `
+@group(0) @binding(0) var<storage, read> depthBuffer: array<u32>; // Uint16 stored as u32
+@group(0) @binding(1) var<storage, read> intrinsicsBuffer: array<f32>;
+@group(0) @binding(2) var<storage, read_write> xyzColorBuffer: array<u32>; // Stores XYZ + RGBA
+
+@compute @workgroup_size(256, 1, 1)
+fn main(@builtin(global_invocation_id) global_id: vec3<u32>) {
+    let i = global_id.x;
+    let fx = intrinsicsBuffer[0];
+    let fy = intrinsicsBuffer[1];
+    let cx = intrinsicsBuffer[2];
+    let cy = intrinsicsBuffer[3];
+    let scale = intrinsicsBuffer[4];
+    let width = intrinsicsBuffer[5];
+    let height = intrinsicsBuffer[6];
+
+    if (i >= u32(width * height)) { return; }
+
+    let u = i % u32(width);
+    let v = i / u32(width);
+
+    // Convert uint16 depth value to float (stored as u32, so we bitwise mask)
+    let rawDepth = depthBuffer[i] & 0xFFFFu;
+    let z = f32(rawDepth) * scale;
+
+    let x = (cx - f32(u)) * z / fx;
+    let y = (cy - f32(v)) * z / fy;
+
+    let base = i * 4u; // 4 values per point (X, Y, Z, Color)
+
+    // Convert floats to u32 representation for storage
+    xyzColorBuffer[base] = bitcast<u32>(x);
+    xyzColorBuffer[base + 1u] = bitcast<u32>(y);
+    xyzColorBuffer[base + 2u] = bitcast<u32>(z);
+
+    // Example: RGB set based on depth, Alpha is fixed at 255
+    let r = u32(clamp(z * 255.0, 0.0, 255.0));
+    let g = u32(clamp(y * 255.0, 0.0, 255.0));
+    let b = u32(clamp(x * 255.0, 0.0, 255.0));
+    xyzColorBuffer[base + 3u] = (r & 0xFFu) | ((g & 0xFFu) << 8) | ((b & 0xFFu) << 16) | (255u << 24);
+}
+`;
+async function depthToPointcloudGPU(depthArray, width, height, fx, fy, cx, cy) {
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  if (!navigator.gpu) {
+    console.warn("WebGPU not supported.");
+    return depthToPointCloudBuffer(depthArray, width, height, fx, fy, cx, cy);
+  }
+  const adapter = await navigator.gpu.requestAdapter();
+  if (!adapter) {
+    console.warn("Couldn't request WebGPU adapter.");
+    return depthToPointCloudBuffer(depthArray, width, height, fx, fy, cx, cy);
+  }
+  const device = await adapter.requestDevice();
+  const queue = device.queue;
+  const scale = 1.0;
+  const numPixels = width * height;
+  const outputSize = numPixels * 16;
+  const depthData32 = new Uint32Array(depthArray);
+  const intrinsics = new Float32Array([fx, fy, cx, cy, scale, width, height]);
+  const depthBuffer = device.createBuffer({
+    size: depthData32.byteLength,
+    usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+  });
+  const intrinsicsBuffer = device.createBuffer({
+    size: intrinsics.byteLength,
+    usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+  });
+  const xyzColorBuffer = device.createBuffer({
+    size: outputSize,
+    usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC
+  });
+  queue.writeBuffer(depthBuffer, 0, depthData32);
+  queue.writeBuffer(intrinsicsBuffer, 0, intrinsics);
+  const bindGroupLayout = device.createBindGroupLayout({
+    entries: [{
+      binding: 0,
+      visibility: GPUShaderStage.COMPUTE,
+      buffer: {
+        type: "read-only-storage"
+      }
+    }, {
+      binding: 1,
+      visibility: GPUShaderStage.COMPUTE,
+      buffer: {
+        type: "read-only-storage"
+      }
+    }, {
+      binding: 2,
+      visibility: GPUShaderStage.COMPUTE,
+      buffer: {
+        type: "storage"
+      }
+    }]
+  });
+  const bindGroup = device.createBindGroup({
+    layout: bindGroupLayout,
+    entries: [{
+      binding: 0,
+      resource: {
+        buffer: depthBuffer
+      }
+    }, {
+      binding: 1,
+      resource: {
+        buffer: intrinsicsBuffer
+      }
+    }, {
+      binding: 2,
+      resource: {
+        buffer: xyzColorBuffer
+      }
+    }]
+  });
+  const shaderModule = device.createShaderModule({
+    code: shader
+  });
+  const pipeline = device.createComputePipeline({
+    layout: device.createPipelineLayout({
+      bindGroupLayouts: [bindGroupLayout]
+    }),
+    compute: {
+      module: shaderModule,
+      entryPoint: "main"
+    }
+  });
+  const commandEncoder = device.createCommandEncoder();
+  const passEncoder = commandEncoder.beginComputePass();
+  passEncoder.setPipeline(pipeline);
+  passEncoder.setBindGroup(0, bindGroup);
+  passEncoder.dispatchWorkgroups(Math.ceil(numPixels / 256));
+  passEncoder.end();
+  device.queue.submit([commandEncoder.finish()]);
+  const outputBuffer = device.createBuffer({
+    size: xyzColorBuffer.size,
+    usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
+  });
+  const copyEncoder = device.createCommandEncoder();
+  copyEncoder.copyBufferToBuffer(xyzColorBuffer, 0, outputBuffer, 0, xyzColorBuffer.size);
+  device.queue.submit([copyEncoder.finish()]);
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+  await outputBuffer.mapAsync(GPUMapMode.READ);
+  const mappedRange = outputBuffer.getMappedRange();
+  const result = new Uint8Array(mappedRange.byteLength);
+  result.set(new Uint8Array(mappedRange));
+  outputBuffer.unmap();
+  return result;
+}
+function depthToPointCloudBuffer(uint16Array, width, height, fx, fy, cx, cy) {
+  const depthData = Array.from({
+    length: height
+  }, () => new Array(width));
+  for (let v = 0; v < height; v++) {
+    depthData[v] = depthData[v] ?? [];
+    for (let u = 0; u < width; u++) {
+      const d = uint16Array[v * width + u] ?? -1;
+      depthData[v][u] = d > 0 ? d : -1;
+    }
+  }
+  const points = [];
+  // Accumulate the x, y, z values for each pixel.
+  for (let v = 0; v < height; v++) {
+    const row = depthData[v];
+    if (!row) {
+      continue;
+    }
+    for (let u = 0; u < width; u++) {
+      const z = row[u] ?? 0;
+      const x = (cx - u) * z / fx;
+      const y = (cy - v) * z / fy;
+      points.push(x, y, z);
+    }
+  }
+  const pointCount = points.length / 3;
+  const buffer = new ArrayBuffer(pointCount * 16);
+  const view = new DataView(buffer);
+  for (let i = 0; i < pointCount; i++) {
+    const offset = i * 16;
+    view.setFloat32(offset, points[i * 3] ?? 0, true); //X
+    view.setFloat32(offset + 4, points[i * 3 + 1] ?? 0, true); //Y
+    view.setFloat32(offset + 8, points[i * 3 + 2] ?? 0, true); //Z
+    view.setUint8(offset + 12, 0); // R
+    view.setUint8(offset + 13, 0); // G
+    view.setUint8(offset + 14, 0); // B
+    view.setUint8(offset + 15, 255); // A
+  }
+  return new Uint8Array(buffer);
+}
+async function deserializeDepthFrame({
+  topic,
+  message,
+  callback
+}) {
+  const {
+    receiveTime,
+    width,
+    height
+  } = parseMessage(message);
+  const neuralCameraIntrinsics = JSON.parse(localStorage.getItem("neuralCameraIntrinsics") ?? "{}");
+  const uint16Array = uint8ArrayToUint16Array(message.data);
+  const fx = neuralCameraIntrinsics.right.focalLenght.x;
+  const fy = neuralCameraIntrinsics.right.focalLenght.y;
+  const cx = neuralCameraIntrinsics.right.principalPoint.x;
+  const cy = neuralCameraIntrinsics.right.principalPoint.y;
+  const pointCloudBufferGPU = depthToPointcloudGPU(uint16Array, width, height, fx, fy, cx, cy);
+  const foxgloveMessage = {
+    timestamp: receiveTime,
+    frame_id: `pointcloud-${topic}-frame`,
+    point_stride: 16,
+    pose: {
+      position: {
+        x: 0,
+        y: 0,
+        z: 0
+      },
+      orientation: {
+        x: 0,
+        y: 0,
+        z: 1,
+        w: 0
+      }
+    },
+    width,
+    height,
+    fields: [{
+      name: "x",
+      offset: 0,
+      type: typescript.NumericType.FLOAT32
+    }, {
+      name: "y",
+      offset: 4,
+      type: typescript.NumericType.FLOAT32
+    }, {
+      name: "z",
+      offset: 8,
+      type: typescript.NumericType.FLOAT32
+    }, {
+      name: "red",
+      offset: 12,
+      type: typescript.NumericType.UINT8
+    }, {
+      name: "green",
+      offset: 13,
+      type: typescript.NumericType.UINT8
+    }, {
+      name: "blue",
+      offset: 14,
+      type: typescript.NumericType.UINT8
+    }, {
+      name: "alpha",
+      offset: 15,
+      type: typescript.NumericType.UINT8
+    }],
+    data: await pointCloudBufferGPU
+  };
+  callback({
+    topic,
+    receiveTime,
+    message: foxgloveMessage,
+    sizeInBytes: estimateObjectSize(foxgloveMessage),
+    schemaName: "foxglove.PointCloud"
+  });
+}
+
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/
+
+function ensureWebCodecsSupported(target) {
+  const supported = typeof target !== "undefined";
+  if (!supported) {
+    const isProtocolSupported = window.location.protocol === "https:" || window.location.protocol === "file:";
+    const isLocalHostname = window.location.hostname === "127.0.0.1" || window.location.hostname === "localhost";
+    const reason = isProtocolSupported || isLocalHostname ? "Unsupported browser" : `${target} only supports \`https\` or \`localhost\` or \`127.0.0.1\``;
+    console.error(`${target} is not available. Reason: ${reason}`);
+    return false;
+  }
+  return true;
+}
+
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/
+
+function createVideoDecoder({
+  topic,
+  callback,
+  topicDecoders
+}) {
+  return new VideoDecoder({
+    output: async frame => {
+      const buffer = new Uint8Array(frame.allocationSize());
+      await frame.copyTo(buffer);
+      const receiveTime = topicDecoders.get(topic)?.timing.get(frame.timestamp) ?? dist.fromMicros(frame.timestamp);
+      const [encoding, step] = parsePixelFormat(frame.format);
+      const foxgloveMessage = {
+        timestamp: receiveTime,
+        frame_id: `h264-${topic}-frame`,
+        width: frame.displayWidth,
+        height: frame.displayHeight,
+        data: buffer,
+        encoding,
+        step: frame.displayWidth * step
+      };
+      callback({
+        topic,
+        receiveTime,
+        message: foxgloveMessage,
+        sizeInBytes: estimateObjectSize(foxgloveMessage),
+        schemaName: "foxglove.RawImage"
+      });
+      frame.close();
+    },
+    error: console.error
+  });
+}
+async function deserializeEncodedFrameH264({
+  topic,
+  message,
+  topicDecoders,
+  callback
+}) {
+  const {
+    receiveTime
+  } = parseMessage(message);
+  const supported = ensureWebCodecsSupported("VideoDecoder");
+  if (!supported) {
+    return;
+  }
+  if (!topicDecoders.has(topic)) {
+    const decoder = createVideoDecoder({
+      topic,
+      callback,
+      topicDecoders
+    });
+    decoder.configure({
+      codec: "avc1.42001E",
+      optimizeForLatency: true
+    });
+    topicDecoders.set(topic, {
+      decoder,
+      timing: new Map()
+    });
+  }
+  const decoderInfo = topicDecoders.get(topic);
+  if (!decoderInfo) {
+    return;
+  }
+  if (decoderInfo.decoder.decodeQueueSize > 60) {
+    decoderInfo.decoder.reset();
+    return;
+  }
+  const microTimestamp = receiveTime.sec * 1_000_000 + Math.floor(receiveTime.nsec / 1_000);
+  decoderInfo.timing.set(microTimestamp, receiveTime);
+  const frame = {
+    type: 'key',
+    data: message.data,
+    timestamp: microTimestamp
+  };
+  try {
+    const chunk = new EncodedVideoChunk(frame);
+    decoderInfo.decoder.decode(chunk);
+  } catch {
+    topicDecoders.delete(topic);
+  }
+}
+
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/
+
+async function deserializeMJPEGFrame({
+  topic,
+  message,
+  callback
+}) {
+  const {
+    receiveTime
+  } = parseMessage(message);
+  const supported = ensureWebCodecsSupported("ImageDecoder");
+  if (!supported) {
+    return;
+  }
+  const decoder = new ImageDecoder({
+    type: "image/jpeg",
+    data: message.data
+  });
+  const {
+    image: frame
+  } = await decoder.decode();
+  const buffer = new Uint8Array(frame.allocationSize());
+  await frame.copyTo(buffer);
+  const [encoding, step] = parsePixelFormat(frame.format);
+  const foxgloveMessage = {
+    timestamp: receiveTime,
+    frame_id: "camera",
+    width: frame.displayWidth,
+    height: frame.displayHeight,
+    data: buffer,
+    encoding,
+    step: frame.displayWidth * step
+  };
+  frame.close();
+  callback({
+    topic,
+    receiveTime,
+    message: foxgloveMessage,
+    sizeInBytes: estimateObjectSize(foxgloveMessage),
+    schemaName: "foxglove.RawImage"
+  });
+}
+
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/
+const topicDecoders = new Map();
+const topicSizes = new Map();
+let callback;
+function initCallback(cb) {
+  callback = cb;
+}
+function handleMessageToDecode({
+  schema,
+  buffer,
+  topic
+}) {
+  const protobufSchema = protobufsBySchema[schema];
+  if (!protobufSchema) {
+    console.warn(`Unsupported message schema "${schema}"`);
+    return;
+  }
+  const bufferArray = new Uint8Array(buffer.buffer, buffer.byteOffset, buffer.byteLength);
+  const message = protobufSchema.decoder.decode(bufferArray);
+  void deserializeDepthAiMessage({
+    topic,
+    topicSizes,
+    topicDecoders,
+    message,
+    callback,
+    type: protobufSchema.type
+  });
+}
+async function deserializeDepthAiMessage(args) {
+  const {
+    topicDecoders,
+    topicSizes,
+    type,
+    message,
+    callback,
+    topic
+  } = args;
+  switch (type) {
+    case "encodedFrame":
+      {
+        topicSizes.set(topic, {
+          width: message.width,
+          height: message.height
+        });
+        if (message.profile === Profile.AVC) {
+          await deserializeEncodedFrameH264({
+            topic,
+            message,
+            topicDecoders,
+            callback
+          });
+        } else if (message.profile === Profile.JPEG) {
+          await deserializeMJPEGFrame({
+            topic,
+            message,
+            callback
+          });
+        } else ;
+        break;
+      }
+    case "imageFrame":
+      {
+        const {
+          width,
+          height,
+          type: messageType
+        } = parseMessage(message);
+        topicSizes.set(topic, {
+          width,
+          height
+        });
+        switch (messageType) {
+          case Type.BITSTREAM:
+            {
+              await deserializeEncodedFrameH264({
+                topic,
+                message,
+                topicDecoders,
+                callback
+              });
+              break;
+            }
+          case Type.RAW16:
+            {
+              await deserializeDepthFrame({
+                topic,
+                message,
+                callback
+              });
+              break;
+            }
+          default:
+            {
+              deserializeColorFrame({
+                topic,
+                message,
+                callback
+              });
+            }
+        }
+        break;
+      }
+    case "imageDetections":
+      {
+        deserializeImgDetections({
+          topic,
+          message,
+          callback,
+          topicSizes
+        });
+        break;
+      }
+    case "imageDetectionsCustom":
+      {
+        deserializeImgDetectionsCustom({
+          topic,
+          message,
+          callback,
+          topicSizes
+        });
+        break;
+      }
+    case "imageDetectionsSpatial":
+      {
+        // TODO: Use separate 3D detection deserializer
+        deserializeImgDetections({
+          topic,
+          topicSizes,
+          message: {
+            ...message,
+            detections: message.detections.map(detections => detections.detection)
+          },
+          callback
+        });
+        break;
+      }
+    case "pointCloud":
+      {
+        deserializePointCloudData({
+          topic,
+          message,
+          callback
+        });
+        break;
+      }
+    default:
+      {
+        console.warn(`Message decoding failed: unsupported type "${type}"`);
+        break;
+      }
+  }
+}
+expose({
+  initCallback,
+  handleMessageToDecode
+});