fix(rendering): Allow memory sizes between 2gb and 4gb by using wasm allocation

packages/core/examples/volumeLarge/index.ts

@@ -0,0 +1,197 @@
+import {
+  RenderingEngine,
+  Types,
+  Enums,
+  volumeLoader,
+  setConfiguration,
+  getConfiguration,
+  cache,
+} from '@cornerstonejs/core';
+import {
+  initDemo,
+  createImageIdsAndCacheMetaData,
+  setTitleAndDescription,
+  setCtTransferFunctionForVolumeActor,
+  addButtonToToolbar,
+  addToggleButtonToToolbar,
+} from '../../../../utils/demo/helpers';
+
+// This is for debugging purposes
+console.warn(
+  'Click on index.ts to open source code for this example --------->'
+);
+
+const { ViewportType } = Enums;
+
+// ======== Set up page ======== //
+setTitleAndDescription(
+  'Large Volume Load',
+  'Displays a large volume in a viewport (>2 gb).'
+);
+
+// Define a unique id for the volume
+const volumeName = 'LargeVolume_Float32_Webassembly'; // Id of the volume less loader prefix
+const volumeName16 = 'LargeVolume_Float16'; // Id of hte volume using Float16
+const volumeLoaderScheme = 'cornerstoneStreamingImageVolume'; // Loader id which defines which volume loader to use
+const volumeId = `${volumeLoaderScheme}:${volumeName}`; // VolumeId with loader id + volume id
+const volumeId16 = `${volumeLoaderScheme}:${volumeName16}`;
+let imageIds, viewport, renderingEngine;
+const renderingEngineId = 'myRenderingEngine';
+const viewportId = 'CT_SAGITTAL_STACK';
+// 16 gb cache size
+const LargeCacheSize = 16 * 1024 * 1024 * 1024;
+
+const content = document.getElementById('content');
+const element = document.createElement('div');
+element.id = 'cornerstone-element';
+element.style.width = '500px';
+element.style.height = '500px';
+
+content.appendChild(element);
+// ============================= //
+
+addToggleButtonToToolbar({
+  title: 'Load 16 Int',
+  defaultToggle: false,
+  onClick: (toggle) => {
+    cache.purgeCache();
+    if (toggle) {
+      loadImage16Float();
+    } else {
+      loadImage32Float();
+    }
+  },
+});
+
+async function loadImage32Float() {
+  console.log('Loading image 32 float');
+  renderingEngine.disableElement(viewportId);
+
+  const viewportInput = {
+    viewportId,
+    type: ViewportType.ORTHOGRAPHIC,
+    element,
+    defaultOptions: {
+      orientation: Enums.OrientationAxis.SAGITTAL,
+      background: <Types.Point3>[0.2, 0, 0.2],
+    },
+  };
+  renderingEngine.enableElement(viewportInput);
+
+  // Get the volume viewport that was created
+  viewport = <Types.IVolumeViewport>renderingEngine.getViewport(viewportId);
+
+  setTimeout(async () => {
+    const volume = cache.getVolume(volumeId);
+    // Set the volume on the viewport
+    viewport.setVolumes([
+      { volumeId, callback: setCtTransferFunctionForVolumeActor },
+    ]);
+
+    console.log('And now rendering');
+    // Render the image
+    viewport.render();
+  }, 100);
+}
+
+async function loadImage16Float() {
+  console.log('Loading image 16 int');
+  renderingEngine.disableElement(viewportId);
+
+  const viewportInput = {
+    viewportId,
+    type: ViewportType.ORTHOGRAPHIC,
+    element,
+    defaultOptions: {
+      orientation: Enums.OrientationAxis.SAGITTAL,
+      background: <Types.Point3>[0, 0, 0.2],
+    },
+  };
+  renderingEngine.enableElement(viewportInput);
+
+  // Get the volume viewport that was created
+  viewport = <Types.IVolumeViewport>renderingEngine.getViewport(viewportId);
+
+  setTimeout(async () => {
+    cache.setMaxCacheSize(LargeCacheSize);
+    const currentConfig = getConfiguration();
+    setConfiguration({
+      ...currentConfig,
+      rendering: {
+        ...currentConfig.rendering,
+        useNorm16Texture: true,
+      },
+    });
+
+    const volume =
+      cache.getVolume(volumeId16) ||
+      (await volumeLoader.createAndCacheVolume(volumeId16, {
+        imageIds,
+      }));
+
+    // Set the volume to load
+    // @ts-ignore
+    volume.load();
+
+    // Set the volume on the viewport
+    viewport.setVolumes([
+      { volumeId: volumeId16, callback: setCtTransferFunctionForVolumeActor },
+    ]);
+
+    // Render the image
+    viewport.render();
+  }, 100);
+}
+
+/**
+ * Runs the demo
+ */
+async function run() {
+  // Init Cornerstone and related libraries
+  await initDemo();
+
+  // Get Cornerstone imageIds and fetch metadata into RAM
+  // TODO - move the study into a shared context.
+  imageIds = await createImageIdsAndCacheMetaData({
+    StudyInstanceUID: '1.2.250.1.90.4.3706890026.20240517115154.2024.1',
+    SeriesInstanceUID: '1.2.250.1.90.3.3384839960.20240517203917.8108.53271',
+    wadoRsRoot: 'http://localhost/dicom-web',
+  });
+
+  // Instantiate a rendering engine
+  renderingEngine = new RenderingEngine(renderingEngineId);
+
+  // Create a volume viewport
+  const viewportInput = {
+    viewportId,
+    type: ViewportType.ORTHOGRAPHIC,
+    element,
+    defaultOptions: {
+      orientation: Enums.OrientationAxis.SAGITTAL,
+      background: <Types.Point3>[0.2, 0, 0.2],
+    },
+  };
+
+  renderingEngine.enableElement(viewportInput);
+
+  // Get the stack viewport that was created
+  viewport = <Types.IVolumeViewport>renderingEngine.getViewport(viewportId);
+
+  // Define a volume in memory
+  const volume = await volumeLoader.createAndCacheVolume(volumeId, {
+    imageIds,
+  });
+
+  // Set the volume to load
+  volume.load();
+
+  // Set the volume on the viewport
+  viewport.setVolumes([
+    { volumeId, callback: setCtTransferFunctionForVolumeActor },
+  ]);
+
+  // Render the image
+  viewport.render();
+}
+
+run();

packages/core/src/cache/cache.ts

@@ -38,7 +38,7 @@ class Cache implements ICache {
   private _imageCacheSize = 0;
   private _volumeCacheSize = 0;
   private _maxCacheSize = 3 * ONE_GB;
-  private _maxInstanceSize = 2 * ONE_GB - 8;
+  private _maxInstanceSize = 4 * ONE_GB - 8;
 
   constructor() {
     // used to store object data (contour, surface, etc.)

packages/core/src/loaders/volumeLoader.ts

@@ -12,6 +12,9 @@ import triggerEvent from '../utilities/triggerEvent';
 import cloneDeep from 'lodash.clonedeep';
 
 import {
+  createUint16SharedArray,
+  createUint8SharedArray,
+  createFloat32SharedArray,
   generateVolumePropsFromImageIds,
   getBufferConfiguration,
   uuidv4,
@@ -641,8 +644,24 @@ function generateVolumeScalarData(
 
   let volumeScalarData;
   if (targetBuffer?.sharedArrayBuffer) {
-    const buffer = new SharedArrayBuffer(numBytes);
-    volumeScalarData = new TypedArrayConstructor(buffer);
+    switch (targetBuffer.type) {
+      case 'Float32Array':
+        volumeScalarData = createFloat32SharedArray(scalarLength);
+        break;
+      case 'Uint8Array':
+        volumeScalarData = createUint8SharedArray(scalarLength);
+        break;
+      case 'Uint16Array':
+        volumeScalarData = createUint16SharedArray(scalarLength);
+        break;
+      case 'Int16Array':
+        volumeScalarData = createUint16SharedArray(scalarLength);
+        break;
+      default:
+        throw new Error(
+          'generateVolumeScalarData: SharedArrayBuffer is not supported for the specified target buffer type'
+        );
+    }
   } else {
     volumeScalarData = new TypedArrayConstructor(scalarLength);
   }

packages/core/src/utilities/createFloat32SharedArray.ts

@@ -1,6 +1,10 @@
-import global from '../global';
 import { getShouldUseSharedArrayBuffer } from '../init';
 
+const SMALL_MEMORY_LIMIT = 2 * 1024 * 1024 * 1024 - 2;
+const BIG_MEMORY_LIMIT = SMALL_MEMORY_LIMIT * 2;
+// Wasm page size
+const PAGE_SIZE = 65536;
+
 /**
  * A helper function that creates a new Float32Array that utilized a shared
  * array buffer. This allows the array to be updated  simultaneously in
@@ -37,9 +41,20 @@ function createFloat32SharedArray(length: number): Float32Array {
     );
   }
 
-  const sharedArrayBuffer = new SharedArrayBuffer(length * 4);
+  const byteLength = length * 4;
 
-  return new Float32Array(sharedArrayBuffer);
+  if (byteLength < SMALL_MEMORY_LIMIT) {
+    const sharedArrayBuffer = new SharedArrayBuffer(byteLength);
+    return new Float32Array(sharedArrayBuffer);
+  } else if (byteLength < BIG_MEMORY_LIMIT) {
+    const pages = Math.ceil(byteLength / PAGE_SIZE);
+    const memory = new WebAssembly.Memory({
+      initial: pages,
+      maximum: pages,
+      shared: true,
+    });
+    return new Float32Array(memory.buffer, 0, length);
+  }
 }
 
 export default createFloat32SharedArray;