perf(cine): pack RGB in the JPEG decode worker

Have the worker produce a 3-component Uint8Array directly so the transferred
buffer is 25% smaller and the main thread publishes frames with a single
typed-array copy instead of a per-pixel RGBA→RGB loop. decodeNativeFrame
follows suit and writes RGB without the dummy alpha channel.

Author: PaulHax

src/core/cine/DicomCineImage.ts

@@ -175,7 +175,17 @@ export default class DicomCineImage extends BaseProgressiveImage {
         const ctx = canvas.getContext('2d');
         if (!ctx) return null;
         const imageData = ctx.createImageData(cols, rows);
-        imageData.data.set(frame.rgba);
+        const dst = imageData.data;
+        const { rgb } = frame;
+        const pixels = cols * rows;
+        for (let i = 0; i < pixels; i++) {
+          const s = i * 3;
+          const d = i * 4;
+          dst[d] = rgb[s];
+          dst[d + 1] = rgb[s + 1];
+          dst[d + 2] = rgb[s + 2];
+          dst[d + 3] = 255;
+        }
         ctx.putImageData(imageData, 0, 0);
         return canvas.toDataURL('image/png');
       } catch {

src/core/cine/__tests__/frameCache.spec.ts

@@ -11,7 +11,7 @@ function frame(byteLength: number): DecodedFrame {
   return {
     width: 1,
     height: 1,
-    rgba: { byteLength } as Uint8ClampedArray,
+    rgb: { byteLength } as unknown as Uint8Array,
   };
 }
 
@@ -58,7 +58,7 @@ describe('decodeNativeFrame', () => {
       planarConfiguration: 0,
     });
 
-    expect(Array.from(decoded.rgba)).toEqual([1, 2, 3, 255, 4, 5, 6, 255]);
+    expect(Array.from(decoded.rgb)).toEqual([1, 2, 3, 4, 5, 6]);
   });
 
   it('decodes plane-interleaved native RGB frames', () => {
@@ -70,6 +70,6 @@ describe('decodeNativeFrame', () => {
       planarConfiguration: 1,
     });
 
-    expect(Array.from(decoded.rgba)).toEqual([1, 2, 3, 255, 4, 5, 6, 255]);
+    expect(Array.from(decoded.rgb)).toEqual([1, 2, 3, 4, 5, 6]);
   });
 });

src/core/cine/frameCache.ts

@@ -1,35 +1,27 @@
 // Decoded-frame cache for cine playback.
 //
-// Holds CPU-visible RGBA bytes (not ImageBitmaps) because VTK's scalar buffer
-// needs to copy them in. Bounded by a byte budget; LRU eviction. Per-image
-// instance — disposed alongside the DicomCineImage that owns it.
+// Holds CPU-visible RGB bytes packed for direct copy into VTK's 3-component
+// scalar buffer. Bounded by a byte budget; LRU eviction. Per-image instance —
+// disposed alongside the DicomCineImage that owns it.
 
 import { decodeJpegInWorker } from './jpegDecodePool';
 
 export type DecodedFrame = {
   width: number;
   height: number;
-  // RGBA, 8-bit per channel, row-major (matches OffscreenCanvas getImageData).
-  rgba: Uint8ClampedArray;
+  // RGB, 8-bit per channel, row-major. Packed in the decoder (worker for JPEG)
+  // so the main thread can publish frames with a single buffer copy.
+  rgb: Uint8Array;
 };
 
-// Copy a decoded RGBA frame into a 3-component RGB buffer (VTK scalar shape).
 // Returns false when the buffers disagree on pixel count, so callers can skip
 // the publish step instead of rendering a partial frame.
 export function copyDecodedFrameToRgb(
   frame: DecodedFrame,
   out: Uint8Array
 ): boolean {
-  const { rgba } = frame;
-  const pixels = out.length / 3;
-  if (rgba.length !== pixels * 4) return false;
-  for (let i = 0; i < pixels; i++) {
-    const src = i * 4;
-    const dst = i * 3;
-    out[dst] = rgba[src];
-    out[dst + 1] = rgba[src + 1];
-    out[dst + 2] = rgba[src + 2];
-  }
+  if (frame.rgb.length !== out.length) return false;
+  out.set(frame.rgb);
   return true;
 }
 
@@ -59,11 +51,11 @@ export class FrameCache {
   set(frameIndex: number, frame: DecodedFrame): void {
     const existing = this.entries.get(frameIndex);
     if (existing) {
-      this.bytesInUse -= existing.rgba.byteLength;
+      this.bytesInUse -= existing.rgb.byteLength;
       this.entries.delete(frameIndex);
     }
     this.entries.set(frameIndex, frame);
-    this.bytesInUse += frame.rgba.byteLength;
+    this.bytesInUse += frame.rgb.byteLength;
     this.evictUntilUnderBudget();
   }
 
@@ -90,7 +82,7 @@ export class FrameCache {
     for (const key of this.entries.keys()) {
       if (this.bytesInUse <= this.budgetBytes) break;
       const entry = this.entries.get(key)!;
-      this.bytesInUse -= entry.rgba.byteLength;
+      this.bytesInUse -= entry.rgb.byteLength;
       this.entries.delete(key);
     }
   }
@@ -114,7 +106,7 @@ type NativeFrameLayout = {
   planarConfiguration: number;
 };
 
-// Convert a raw uncompressed frame to RGBA. Supports the two photometric
+// Convert a raw uncompressed frame to packed RGB. Supports the two photometric
 // interpretations our sample corpus shows in the native PixelData path:
 // - 'RGB' with samplesPerPixel=3 (interleaved RGB)
 // - 'MONOCHROME2' with samplesPerPixel=1 (grayscale, replicated to RGB)
@@ -125,17 +117,16 @@ export function decodeNativeFrame(
   const { width, height, samplesPerPixel, photometric, planarConfiguration } =
     layout;
   const pixelCount = width * height;
-  const out = new Uint8ClampedArray(pixelCount * 4);
+  const out = new Uint8Array(pixelCount * 3);
 
   if (samplesPerPixel === 1) {
-    // Grayscale — replicate luminance to R, G, B; alpha = 255.
+    // Grayscale — replicate luminance to R, G, B.
     for (let i = 0; i < pixelCount; i++) {
       const v = bytes[i] ?? 0;
-      const j = i * 4;
+      const j = i * 3;
       out[j] = v;
       out[j + 1] = v;
       out[j + 2] = v;
-      out[j + 3] = 255;
     }
   } else if (
     samplesPerPixel === 3 &&
@@ -145,20 +136,17 @@ export function decodeNativeFrame(
       // RRRR...GGGG...BBBB...
       const plane = pixelCount;
       for (let i = 0; i < pixelCount; i++) {
-        const j = i * 4;
+        const j = i * 3;
         out[j] = bytes[i] ?? 0;
         out[j + 1] = bytes[plane + i] ?? 0;
         out[j + 2] = bytes[2 * plane + i] ?? 0;
-        out[j + 3] = 255;
       }
     } else {
       for (let i = 0; i < pixelCount; i++) {
         const k = i * 3;
-        const j = i * 4;
-        out[j] = bytes[k] ?? 0;
-        out[j + 1] = bytes[k + 1] ?? 0;
-        out[j + 2] = bytes[k + 2] ?? 0;
-        out[j + 3] = 255;
+        out[k] = bytes[k] ?? 0;
+        out[k + 1] = bytes[k + 1] ?? 0;
+        out[k + 2] = bytes[k + 2] ?? 0;
       }
     }
   } else {
@@ -167,5 +155,5 @@ export function decodeNativeFrame(
     );
   }
 
-  return { width, height, rgba: out };
+  return { width, height, rgb: out };
 }

src/core/cine/jpegDecode.worker.ts

@@ -23,13 +23,24 @@ async function decodeJpeg(
     const ctx = canvas.getContext('2d');
     if (!ctx) throw new Error('OffscreenCanvas 2D context unavailable');
     ctx.drawImage(bitmap, 0, 0);
-    const imageData = ctx.getImageData(0, 0, bitmap.width, bitmap.height);
+    const { data: rgba } = ctx.getImageData(0, 0, bitmap.width, bitmap.height);
+    // Pack RGBA→RGB in-worker so the main thread only does a single
+    // typed-array copy when publishing the frame.
+    const pixels = bitmap.width * bitmap.height;
+    const rgb = new Uint8Array(pixels * 3);
+    for (let i = 0; i < pixels; i++) {
+      const s = i * 4;
+      const d = i * 3;
+      rgb[d] = rgba[s];
+      rgb[d + 1] = rgba[s + 1];
+      rgb[d + 2] = rgba[s + 2];
+    }
     const result: DecodedFrame = {
       width: bitmap.width,
       height: bitmap.height,
-      rgba: imageData.data,
+      rgb,
     };
-    return Comlink.transfer(result, [imageData.data.buffer]);
+    return Comlink.transfer(result, [rgb.buffer]);
   } finally {
     bitmap.close();
   }