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

packages/core/examples/volumeLarge/index.ts

@@ -0,0 +1,97 @@
+import {
+  RenderingEngine,
+  Types,
+  Enums,
+  volumeLoader,
+  CONSTANTS,
+} from '@cornerstonejs/core';
+import {
+  initDemo,
+  createImageIdsAndCacheMetaData,
+  setTitleAndDescription,
+  setCtTransferFunctionForVolumeActor,
+} 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).'
+);
+
+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);
+// ============================= //
+
+/**
+ * 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.
+  const 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:5000/dicomweb',
+  });
+
+  // Instantiate a rendering engine
+  const renderingEngineId = 'myRenderingEngine';
+  const renderingEngine = new RenderingEngine(renderingEngineId);
+
+  // Create a stack viewport
+  const viewportId = 'CT_SAGITTAL_STACK';
+  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
+  const viewport = <Types.IVolumeViewport>(
+    renderingEngine.getViewport(viewportId)
+  );
+
+  // Define a unique id for the volume
+  const volumeName = 'CT_VOLUME_ID'; // Id of the volume less loader prefix
+  const volumeLoaderScheme = 'cornerstoneStreamingImageVolume'; // Loader id which defines which volume loader to use
+  const volumeId = `${volumeLoaderScheme}:${volumeName}`; // VolumeId with loader id + volume id
+
+  // 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/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;