Cornerstone3D

@cornerstonejs/core is the central library in the Cornerstone ecosystem used for building web-based medical imaging applications. It provides the foundational framework for rendering medical images and volumes, supporting both CPU and GPU-based rendering.

Key capabilities include:

• Rendering Support: High-performance CPU and GPU-based rendering engines.
• Loading API: Interfaces for loading medical images and volumes.
• Caching Utilities: Built-in utilities to manage image and data caching for improved performance.

Cornerstone is a set of JavaScript libraries for building web-based medical imaging applications. It uses WebGL for high-performance rendering and WebAssembly for fast image decompression. It is standards-compliant with DICOMweb out-of-the-box.

To learn how to integrate Cornerstone3D into your specific project, visit the official Getting Started Overview.

The Cornerstone3D project is organized as a monorepo. The following packages are the primary building blocks:

• @cornerstonejs/core (/packages/core): The core library responsible for rendering images and volumes and managing caching.
• @cornerstonejs/tools (/packages/tools): The tool library for manipulation, annotation, and segmentation rendering/tools.
• @cornerstonejs/dicom-image-loader (/packages/dicom-image-loader): Provides image loading for wadors and wadouri DICOM P10 instances over HTTP.
• @cornerstonejs/nifti-volume-loader (/packages/nifti-volume-loader): Provides image loading for NIfTI files.
• @cornerstonejs/docs (/packages/docs): Contains documentation, guides, examples, and API references.

The @cornerstonejs/tools library provides a specialized set of tools for building interactive web-based medical imaging applications. It includes functionality for:

• Manipulation: Tools to interact with and view medical images.
• Annotation: Tools to draw and manage annotations on images.
• Segmentation: Tools for defining and managing segmented regions within medical data.
• Tool Framework: A foundational framework that allows developers to build custom interactive imaging applications.

It is designed to work within the Cornerstone ecosystem and is used as a core component in applications like the OHIF Viewer.

The VoxelManager is a core component in Cornerstone's architecture designed for efficient voxel data access and volume management. Instead of relying on large, monolithic scalar arrays that consume significant memory, VoxelManager acts as an adapter that interacts with individual images.

Key architectural shifts include:

• Single Source of Truth: It uses the image cache as the primary data source, eliminating the need for separate volume caches and reducing synchronization issues.
• Efficient Streaming: It enables loading images one by one, caching only what is necessary, and streaming data directly to the GPU.
• Optimized Caching: Data is kept in its native format and only converted when required, minimizing overhead.
• Simplified Web Workers: It removes dependencies on SharedArrayBuffer, making implementation easier and more secure.

An ImageId is a URL-based identifier that uniquely identifies a single medical image for display in Cornerstone3D.

Cornerstone3D uses the URL scheme within the ImageId to determine which Image Loader plugin to invoke. This design allows Cornerstone to simultaneously display images from diverse sources and protocols—such as a DICOM CT image retrieved via WADO alongside a JPEG dermatology image from a local file system—by delegating the actual loading logic to specialized plugins.

Progressive Loading is a system designed to incrementally load medical images to enable faster initial display. Instead of waiting for a full-resolution dataset to arrive, the system displays lower-quality versions first and enhances the image quality as more data is received.

There are two primary modes of progressive loading:

1. Stack Images: The loader can fetch smaller or lossy versions of the images to provide an immediate preview.
2. Volumes: The loader can fetch smaller/lossy images or fully interleaved versions to accelerate the loading process of volumetric data.

The @cornerstonejs/core package serves as the foundation of the Cornerstone3D library. It is a comprehensive framework for medical imaging applications that extends beyond simple rendering. Its core responsibilities include:

• Rendering: Handles image rendering using both GPU and CPU-based approaches.
• Data Management: Provides caching mechanisms for both image data and metadata.
• Loading Framework: Provides the necessary APIs and framework for implementing image and volume loaders.
• Metadata Support: Provides a dedicated API for managing and accessing medical imaging metadata.

In the context of render paths, the distinction between Source and Overlay determines how navigation state is handled:

• Source Binding: Defines the active resolved view for the viewport. In planar rendering, the source binding is the only entity that writes to ctx.view.activeSourceICamera.
• Overlay Binding: Receives the same viewState as the source but does not replace the active source view. Overlays read ctx.view.activeSourceICamera solely to align their sampling or actors to the source.

Example: Segmentation Slice Rendering When useSliceRendering is enabled, the source volume slice defines the active view. The labelmap representation is mounted as an overlay binding and rendered through the slice path. It follows the source navigation without becoming the source view itself.