# Cornerstone3D

> Cornerstone3D is a modern, high-performance JavaScript library for medical imaging, designed for building web-based medical imaging applications. It provides tools for rendering, manipulating, and analyzing medical images in various formats including DICOM.

Cornerstone3D is a complete rewrite of the original Cornerstone library, with a focus on 3D rendering and improved performance. It includes a suite of tools for annotation, segmentation, and manipulation of medical images.

The documentation is organized into the following sections:

## Concepts

- [Active Segmentation](https://cornerstonejs.org/docs/llm/concepts/cornerstone-tools/segmentation/active.md): Viewport-specific system for determining which segmentation is currently being edited, with distinct visual styling for active versus inactive segmentations
- [Advance Options](https://cornerstonejs.org/docs/llm/concepts/progressive-loading/advance-retrieve-config.md): Advanced configuration options for progressive loading, including position-based retrieval, decimation strategies, priority handling, and frame replication techniques
- [Annotation Groups](https://cornerstonejs.org/docs/llm/concepts/cornerstone-tools/annotation/annotationGroups.md): System for organizing related annotations together, enabling collective operations like toggling visibility and navigating between grouped annotations
- [Annotation Manager](https://cornerstonejs.org/docs/llm/concepts/cornerstone-tools/annotation/annotationManager.md): Singleton class that manages annotation storage and retrieval, with the default implementation organizing annotations by Frame of Reference UID
- [Annotations](https://cornerstonejs.org/docs/llm/concepts/cornerstone-tools/annotation/index.md): Core concept in Cornerstone3DTools for managing interactive medical image measurements and markups, with APIs for state management, selection, locking, and styling
- [API](https://cornerstonejs.org/docs/llm/concepts/cornerstone-core/generic-viewport/api.md): Practical Generic Viewport API examples for data, overlays, presentation, navigation, and segmentation slice rendering
- [Cache](https://cornerstonejs.org/docs/llm/concepts/cornerstone-core/cahce.md): Core component for managing memory usage of images and volumes, handling caching mechanisms and optimizing memory allocation
- [Camera Model](https://cornerstonejs.org/docs/llm/concepts/cornerstone-core/generic-viewport/camera.md): Comprehensive ownership model for view state, presentation, references, resolved views, and legacy camera compatibility
- [Config](https://cornerstonejs.org/docs/llm/concepts/cornerstone-tools/segmentation/config.md): Multi-level styling system for segmentation visualizations, with a hierarchy that ranges from global settings to segment-specific properties like color, outline, and fill
- [Config](https://cornerstonejs.org/docs/llm/concepts/cornerstone-tools/annotation/config.md): Hierarchical system for configuring annotation styling properties like colors, line styles, and text appearance at different specificity levels
- [Contour Representation](https://cornerstonejs.org/docs/llm/concepts/cornerstone-tools/segmentation/contour.md): Segmentation representation composed of hierarchical contour sets, where each set contains multiple contours representing distinct anatomical structures
- [Cornerstone Core](https://cornerstonejs.org/docs/llm/concepts/cornerstone-core/index.md): Foundation of the Cornerstone3D library that provides rendering capabilities, data caching, image/volume loading, and metadata management for medical imaging applications
- [Cornerstone Metadata](https://cornerstonejs.org/docs/llm/concepts/cornerstone-metadata/index.md): How @cornerstonejs/metadata provides canonical metadata ingestion, providers, and cache behavior in current Cornerstone3D
- [Cornerstone Tools](https://cornerstonejs.org/docs/llm/concepts/cornerstone-tools/index.md): Framework for creating and managing interactive tools for manipulating and annotating medical images in 3D space, with annotations stored in patient coordinates
- [Custom Cursor Geometry & Fill Strategies](https://cornerstonejs.org/docs/llm/concepts/cornerstone-tools/segmentation/cursor-strategies.md): Pair bespoke brush cursors with fill predicates by wiring BrushStrategy callbacks for geometry calculation, SVG rendering, and point-in-shape evaluation.
- [Data Bindings And Loading](https://cornerstonejs.org/docs/llm/concepts/cornerstone-core/generic-viewport/data-bindings-and-loading.md): How Generic Viewport data providers, bindings, and presentation state work together
- [Design Considerations](https://cornerstonejs.org/docs/llm/concepts/designConsiderations.md): Overview of the fundamental architecture and interfaces in Cornerstone3D, including the rendering system built on vtk.js and the tools library with event handling
- [Display Sets](https://cornerstonejs.org/docs/llm/concepts/cornerstone-metadata/display-sets.md): Framework-agnostic display-set splitting in @cornerstonejs/metadata — the split/create/consume pipeline, split rules, and the IDisplaySet data model
- [Encoding](https://cornerstonejs.org/docs/llm/concepts/progressive-loading/encoding.md): Overview of partial resolution image types and techniques for creating them, including lossy encoding, thumbnails, and byte range requests for HTJ2K images
- [Generic Viewport](https://cornerstonejs.org/docs/llm/concepts/cornerstone-core/generic-viewport/index.md): Why the Generic Viewport architecture separates data loading, render paths, bindings, and view state
- [Geometry Loaders](https://cornerstonejs.org/docs/llm/concepts/cornerstone-core/geometryLoader.md): Infrastructure for loading and caching 3D geometry data such as meshes with support for various formats including PLY, OBJ, STL and VTP
- [Image Loaders](https://cornerstonejs.org/docs/llm/concepts/cornerstone-core/imageLoader.md): JavaScript functions that retrieve and prepare medical images for display, supporting various formats and protocols through a pluggable architecture
- [Image Object](https://cornerstonejs.org/docs/llm/concepts/cornerstone-core/images.md): Core data structure representing medical images in Cornerstone, containing pixel data, metadata, and methods for image manipulation and rendering
- [ImageId](https://cornerstonejs.org/docs/llm/concepts/cornerstone-core/imageId.md): URL-based identifiers that uniquely identify medical images, used by Cornerstone to determine which image loader to use for loading specific types of images
- [Locking](https://cornerstonejs.org/docs/llm/concepts/cornerstone-tools/annotation/locking.md): API for preventing accidental changes to annotations by locking them, with methods to lock/unlock individual or all annotations
- [Measurement Targets](https://cornerstonejs.org/docs/llm/concepts/cornerstone-tools/annotation/measurementTargets.md): Configurable filtering of which targets (display sets/volumes) annotation tools compute and display statistics for, including multiple statistics on fusion viewports
- [Metadata Providers](https://cornerstonejs.org/docs/llm/concepts/cornerstone-core/metadataProvider.md): Functions that retrieve and provide non-pixel metadata associated with medical images, supporting DICOM and custom metadata through a prioritized provider system
- [Migration](https://cornerstonejs.org/docs/llm/concepts/cornerstone-core/generic-viewport/migration.md): Before and after examples for moving stack, volume, overlay, segmentation, and camera-style code to Generic Viewport APIs
- [Progressive Loading](https://cornerstonejs.org/docs/llm/concepts/progressive-loading/index.md): System for incrementally loading medical images, enabling faster initial display by loading smaller or lossy versions first, then enhancing quality as more data arrives
- [Progressive Loading for non-HTJ2K](https://cornerstonejs.org/docs/llm/concepts/progressive-loading/non-htj2k-progressive.md): Techniques for implementing progressive loading with non-HTJ2K formats, using JLS thumbnails and sequential retrieval configurations for improved performance
- [Re-ordering Image Requests](https://cornerstonejs.org/docs/llm/concepts/streaming-image-volume/re-order.md): Technique for optimizing volume loading by controlling the order in which image requests are processed, allowing for custom loading patterns
- [Render Backends](https://cornerstonejs.org/docs/llm/concepts/cornerstone-core/generic-viewport/render-backends.md): How planar Generic Viewports select a render backend, and how extensions register additional backends with registerRenderBackend
- [Render Paths](https://cornerstonejs.org/docs/llm/concepts/cornerstone-core/generic-viewport/render-paths.md): How Generic Viewport render paths select runtime implementations and project resolved views into renderer commands
- [Rendering Engine](https://cornerstonejs.org/docs/llm/concepts/cornerstone-core/renderingEngine.md): Core rendering component that manages viewports and their HTML elements, utilizing offscreen WebGL canvas for efficient GPU-accelerated rendering of medical images
- [Request Pool Manager](https://cornerstonejs.org/docs/llm/concepts/cornerstone-core/requestPoolManager.md): System for managing asynchronous image retrieval and decoding with separate queues for different operations, supporting request prioritization and reordering
- [Retrieve Configuration](https://cornerstonejs.org/docs/llm/concepts/progressive-loading/retrieve-Configuration.md): Comprehensive guide to configuring progressive image loading through stages and options, with details on streaming and byte range request methods
- [Segment Index](https://cornerstonejs.org/docs/llm/concepts/cornerstone-tools/segmentation/segmentIndex.md): System for selecting which segment to edit within a segmentation, allowing tools to target specific segments identified by their index
- [Segment Locking](https://cornerstonejs.org/docs/llm/concepts/cornerstone-tools/segmentation/locking.md): Feature that prevents modification of specified segments, protecting completed segmentation work from accidental changes during editing
- [Segmentation Tools](https://cornerstonejs.org/docs/llm/concepts/cornerstone-tools/segmentation/segmentation-tools.md): Collection of interactive tools for creating and modifying segmentations, including brushes, scissors, and threshold-based tools that work in 2D and 3D views
- [Segmentations](https://cornerstonejs.org/docs/llm/concepts/cornerstone-tools/segmentation/index.md): Core framework for medical image segmentation that decouples the underlying segmentation data from its visual representations like labelmaps, contours, and surfaces
- [Selection](https://cornerstonejs.org/docs/llm/concepts/cornerstone-tools/annotation/selection.md): API for selecting annotations via Shift+click interaction or programmatically, with methods to retrieve selected annotations by tool type
- [Server Requirements](https://cornerstonejs.org/docs/llm/concepts/progressive-loading/requirements.md): Server-side capabilities needed for progressive loading, including HTJ2K RPCL encoding support, streaming data responses, and byte range request handling
- [Stack Progressive Loading](https://cornerstonejs.org/docs/llm/concepts/progressive-loading/stackProgressive.md): Implementation of progressive loading for stack viewports, with benchmarks comparing streaming and byte range methods for improved initial rendering times
- [Stack Viewport](https://cornerstonejs.org/docs/llm/concepts/cornerstone-core/stackViewport.md): Specialized viewport for rendering and navigating 2D image stacks with support for scrolling, pan/zoom operations, and individual image manipulations
- [State](https://cornerstonejs.org/docs/llm/concepts/cornerstone-tools/segmentation/state.md): Central storage system for segmentation data and representations, managing color lookup tables and viewport-specific rendering configurations
- [State](https://cornerstonejs.org/docs/llm/concepts/cornerstone-tools/annotation/state.md): System for managing annotation data persistence organized by Frame of Reference, with APIs for adding, removing, and retrieving annotations
- [State Management](https://cornerstonejs.org/docs/llm/concepts/cornerstone-tools/stateManagement.md): System for managing annotation data organized by Frame of Reference UIDs, with world coordinates for points and a comprehensive API for data operations
- [Static dicom web](https://cornerstonejs.org/docs/llm/concepts/progressive-loading/static-wado.md): Information on implementing progressive loading with Static DICOMweb, supporting both standard and non-standard configuration options
- [Streaming ImageVolume](https://cornerstonejs.org/docs/llm/concepts/streaming-image-volume/index.md): Introduction to the volume loader that implements progressive loading of volume data to the GPU for efficient rendering
- [Streaming of Volume Data](https://cornerstonejs.org/docs/llm/concepts/streaming-image-volume/streaming.md): Progressive loading system that creates volumes from 2D images, with pre-fetching of metadata to optimize performance and memory usage
- [Synchronizers](https://cornerstonejs.org/docs/llm/concepts/cornerstone-tools/synchronizers.md): Mechanism for coordinating actions across multiple viewports, enabling synchronization of camera position, windowing levels, and other visualization parameters
- [ToolGroups](https://cornerstonejs.org/docs/llm/concepts/cornerstone-tools/toolGroups.md): System for organizing tools and defining their behavior across viewports, allowing coordinated tool configuration, modes, and shared functionality
- [Tools](https://cornerstonejs.org/docs/llm/concepts/cornerstone-tools/tools.md): Collection of interactive components for image manipulation, annotation, and segmentation that operate in 3D space with shared annotations across viewports
- [TouchEvents](https://cornerstonejs.org/docs/llm/concepts/cornerstone-tools/touch.md): Touch interaction system supporting multi-touch gestures, with events for tap, drag, swipe, and press actions that complement mouse-based interactions
- [Usage](https://cornerstonejs.org/docs/llm/concepts/progressive-loading/usage.md): Guide to implementing progressive loading in Cornerstone3D applications through the imageRetrieveMetadataProvider for both stack and volume viewports
- [Viewport Image Selection Reference and Presentation](https://cornerstonejs.org/docs/llm/concepts/cornerstone-core/viewportReferencePresentation.md): System for specifying which image a viewport displays and how it is presented, enabling transfer of views between viewports and navigation to specific images
- [Viewport Projection](https://cornerstonejs.org/docs/llm/concepts/cornerstone-core/generic-viewport/viewport-projection.md): How Generic Viewport exposes cross-viewport presentation, transforms, and renderer-camera output without making ICamera universal
- [Viewports](https://cornerstonejs.org/docs/llm/concepts/cornerstone-core/viewports.md): Core rendering components that act as cameras for displaying medical images with different capabilities including stack viewing, MPR, 3D rendering, and video playback
- [Visibility](https://cornerstonejs.org/docs/llm/concepts/cornerstone-tools/annotation/visibility.md): API for controlling the visibility of annotations with methods to show/hide individual annotations or show all hidden annotations
- [Volume Loaders](https://cornerstonejs.org/docs/llm/concepts/cornerstone-core/volumeLoader.md): Pluggable functions that retrieve and prepare 3D volumes for rendering, supporting both streaming of 2D image sets and direct 3D data formats
- [Volume Progressive Loading](https://cornerstonejs.org/docs/llm/concepts/progressive-loading/volumeProgressive.md): Techniques for optimizing volume loading through image interleaving, allowing fast initial rendering with progressive quality improvement
- [Volume Viewport](https://cornerstonejs.org/docs/llm/concepts/cornerstone-core/volumeViewport.md): Specialized viewport for rendering volumetric data with MPR capabilities, supporting orthogonal and oblique reformatting views of 3D medical imaging datasets
- [Volumes](https://cornerstonejs.org/docs/llm/concepts/cornerstone-core/volumes.md): 3D data arrays with physical dimensions and orientation that represent medical volumetric datasets, providing the foundation for MPR and 3D visualization
- [Voxel Manager](https://cornerstonejs.org/docs/llm/concepts/cornerstone-core/voxelManager.md): Component for efficiently handling voxel data access and manipulation in volumes, optimizing memory usage and performance through targeted data access methods
- [Web Workers](https://cornerstonejs.org/docs/llm/concepts/cornerstone-core/web-worker.md): API for offloading computational tasks to background threads, providing priority-based execution and efficient management of worker instances

## Contribute

- [How to Contribute](https://cornerstonejs.org/docs/llm/contribute/pull-request.md): Guidelines for contributing to Cornerstone3D, including reporting bugs, submitting code changes through pull requests, and best practices for contributions
- [Linking Cornerstone Libraries](https://cornerstonejs.org/docs/llm/contribute/linking.md): Step-by-step guide for linking local Cornerstone libraries with OHIF for development, including troubleshooting tips and workflows for multiple libraries
- [Writing Documentation](https://cornerstonejs.org/docs/llm/contribute/documentation.md): Guidelines for writing and updating documentation for Cornerstone3D, including instructions for running the documentation server locally and troubleshooting common issues
- [Writing Karma Tests](https://cornerstonejs.org/docs/llm/contribute/karma-tests.md): Instructions for writing and running Karma tests for Cornerstone3D rendering and tools, including visual inspection of test results
- [Writing Playwright Tests](https://cornerstonejs.org/docs/llm/contribute/playwright-tests.md): Comprehensive guide for creating end-to-end tests using Playwright, including working with example pages, capturing screenshots for comparisons, and simulating user interactions

## Getting-started

- [Installation](https://cornerstonejs.org/docs/llm/getting-started/installation.md): Instructions for installing Cornerstone3D packages using npm, yarn, or pnpm, including core, tools, and image loader packages
- [Overview](https://cornerstonejs.org/docs/llm/getting-started/overview.md): Introduction to Cornerstone3D library and its capabilities for medical image visualization, including rendering, manipulation, annotation, and segmentation features
- [React, Vue, Angular, etc.](https://cornerstonejs.org/docs/llm/getting-started/vue-angular-react-vite.md): Guide for integrating Cornerstone3D with popular frontend frameworks, including configuration examples for Vite and Webpack with troubleshooting tips
- [Related Libraries](https://cornerstonejs.org/docs/llm/getting-started/related-libraries.md): Overview of libraries related to Cornerstone3D, including its history, relationship to vtk.js for 3D rendering, and integration with the OHIF Viewer
- [Scope of Project](https://cornerstonejs.org/docs/llm/getting-started/scope.md): Definition of what Cornerstone3D does and doesn't cover, including rendering capabilities, browser support, and the structure of the monorepo

## How-to-guides

- [Configuration](https://cornerstonejs.org/docs/llm/how-to-guides/configuration.md): Guide for configuring various aspects of the Cornerstone3D library, including rendering engine settings, tools, and image loaders
- [Custom Image Loader](https://cornerstonejs.org/docs/llm/how-to-guides/custom-imageLoader.md): Step-by-step guide for implementing a custom image loader in Cornerstone3D, including creating, registering, and using the loader with viewports
- [Custom Metadata Provider](https://cornerstonejs.org/docs/llm/how-to-guides/custom-metadata-provider.md): Instructions for creating and registering a custom metadata provider to store and retrieve image metadata for Cornerstone3D
- [Custom Tools](https://cornerstonejs.org/docs/llm/how-to-guides/custom-tools.md): Guide for creating custom annotation and manipulation tools by extending BaseTool or AnnotationTool classes in Cornerstone3D
- [Custom Volume Loading Order](https://cornerstonejs.org/docs/llm/how-to-guides/custom-volume-loading-order.md): Tutorial for customizing the order in which volume slices are loaded, allowing for interleaved loading of multiple volumes for improved visualization

## Migration-guides

- [@cornerstonejs/core](https://cornerstonejs.org/docs/llm/migration-guides/2x/3-core.md): Changes to the core package when migrating from Cornerstone3D 1.x to 2.x, including API updates and breaking changes
- [@cornerstonejs/dicom-image-loader](https://cornerstonejs.org/docs/llm/migration-guides/2x/6-dicom-image-loader.md): Changes to the DICOM image loader package when upgrading from Cornerstone3D 1.x to 2.x
- [@cornerstonejs/nifti-volume-loader](https://cornerstonejs.org/docs/llm/migration-guides/2x/7-nifti-volume-loader.md): Migration guide for the NIFTI volume loader when updating from Cornerstone3D 1.x to 2.x
- [@cornerstonejs/streaming-image-volume-loader](https://cornerstonejs.org/docs/llm/migration-guides/2x/2-streaming-loader.md): Migration guide for changes to the streaming-image-volume-loader when upgrading from Cornerstone3D 1.x to 2.x
- [@cornerstonejs/tools](https://cornerstonejs.org/docs/llm/migration-guides/2x/5-tools.md): Updates to the tools package when migrating from Cornerstone3D 1.x to 2.x, including API changes and new functionality
- [4.0 Migration Guides](https://cornerstonejs.org/docs/llm/migration-guides/4x/index.md)
- [4D or Dynamic Volume](https://cornerstonejs.org/docs/llm/migration-guides/2x/4-dynamic-volume.md): Migration guide for handling 4D or dynamic volumes when upgrading from Cornerstone3D 1.x to 2.x
- [5.0 Migration Guides](https://cornerstonejs.org/docs/llm/migration-guides/5x/index.md)
- [5.x Migration Reference Notes](https://cornerstonejs.org/docs/llm/migration-guides/5x/1-migration-notes.md)
- [Adapters API](https://cornerstonejs.org/docs/llm/migration-guides/3x/5-adapters.md): Guide for using the new adapters API in Cornerstone3D 3.x
- [Async beforeSend Callback](https://cornerstonejs.org/docs/llm/migration-guides/4x/3-async-beforesend.md)
- [Camera Field of View Changes](https://cornerstonejs.org/docs/llm/migration-guides/4x/1-camera-fov.md)
- [Developer Experience](https://cornerstonejs.org/docs/llm/migration-guides/2x/8-deverloper-experience.md): Improvements to the developer experience when migrating from Cornerstone3D 1.x to 2.x
- [Dynamic Volume API Changes](https://cornerstonejs.org/docs/llm/migration-guides/4x/2-dynamic-volume-api.md)
- [General](https://cornerstonejs.org/docs/llm/migration-guides/2x/1-general.md): Overview of general changes when migrating from Cornerstone3D 1.x to 2.x, including frameworks support, SharedArrayBuffer removal, TypeScript updates, and package exports
- [Generic Viewport](https://cornerstonejs.org/docs/llm/migration-guides/5x/2-generic-viewport.md): Migration notes for adopting Generic Viewport and updating code that depends on legacy viewport classes or removed viewport accessors
- [Labelmap Interpolation](https://cornerstonejs.org/docs/llm/migration-guides/3x/3-labelmap-interpolation.md): Migration guide for labelmap interpolation functionality in Cornerstone3D 3.x
- [Labelmap Thresholding Tools](https://cornerstonejs.org/docs/llm/migration-guides/3x/2-threshold-tools.md): Changes to labelmap thresholding tools when upgrading to Cornerstone3D 3.x
- [Legacy to Cornerstone3D 1.0](https://cornerstonejs.org/docs/llm/migration-guides/legacy-to-3d.md): Comprehensive guide for migrating from legacy Cornerstone to Cornerstone3D 1.0, covering API changes for initialization, viewports, image loading, and coordinate systems
- [Node.js 20 Upgrade](https://cornerstonejs.org/docs/llm/migration-guides/4x/5-node-20-upgrade.md)
- [PolySeg](https://cornerstonejs.org/docs/llm/migration-guides/3x/1-polyseg.md): Migration guide for PolySeg in Cornerstone3D 3.x, explaining how to use the new standalone polymorphic-segmentation package that was previously in the tools package
- [Rendering Engine Viewport Accessors](https://cornerstonejs.org/docs/llm/migration-guides/4x/6-rendering-engine-viewport-accessors.md)
- [Segmentation Statistics API](https://cornerstonejs.org/docs/llm/migration-guides/3x/4-get-statistics.md): Updates to the segmentation statistics API when migrating to Cornerstone3D 3.x
- [Tool consistency of using label instead of text](https://cornerstonejs.org/docs/llm/migration-guides/4x/4-tool-consistency-text-label.md)

## Tutorials

- [Annotation Tools](https://cornerstonejs.org/docs/llm/tutorials/basic-annotation-tool.md): Guide for implementing annotation tools in Cornerstone3D, including tool configuration, viewport setup, and interactive annotation of medical images
- [Examples](https://cornerstonejs.org/docs/llm/tutorials/examples.md): Guide to accessing, debugging, and running Cornerstone3D example applications, with instructions for local development and source code exploration
- [Introduction](https://cornerstonejs.org/docs/llm/tutorials/intro.md): Overview of tutorial components in Cornerstone3D, including instructions for running tutorials locally and explanation of image loaders and metadata providers
- [Manipulation Tools](https://cornerstonejs.org/docs/llm/tutorials/basic-manipulation-tool.md): Tutorial on implementing manipulation tools like zoom and window level for interacting with medical images in Cornerstone3D
- [Render Stack of Images](https://cornerstonejs.org/docs/llm/tutorials/basic-stack.md): Tutorial demonstrating how to render a stack of medical images using Cornerstone3D's stack viewport functionality
- [Render Video](https://cornerstonejs.org/docs/llm/tutorials/basic-video.md): Tutorial on rendering and annotating videos in Cornerstone3D, including video viewport configuration and time-based annotation capabilities
- [Render Volume](https://cornerstonejs.org/docs/llm/tutorials/basic-volume.md): Step-by-step tutorial for rendering medical volumes in different orientations using Cornerstone3D's volume loading and viewport capabilities
- [Segmentation Tools](https://cornerstonejs.org/docs/llm/tutorials/basic-segmentation-tools.md): Comprehensive guide to implementing segmentation tools in Cornerstone3D, including brush tools, volume loading, and rendering segmentations across multiple viewports