feat(rendering): Introduce WebGLContextPool for parallel rendering in ContextPoolRenderingEngine

[IbrahimCSAE]

Overview

This PR enhances the ContextPoolRenderingEngine (previously SequentialRenderingEngine) by introducing a WebGLContextPool class that enables parallel rendering across multiple WebGL contexts. This optimization significantly improves performance when rendering multiple viewports simultaneously while maintaining the core benefits of sequential rendering.

WebGL Context Pooling

Following the successful resolution of canvas size limitations in PR #2181, this PR takes the next step in performance optimization. While the sequential approach solved critical issues with viewport cropping and performance degradation on high-resolution displays, it rendered viewports one at a time. This new implementation introduces controlled parallelism to boost performance further.

Key Features

WebGLContextPool

The new WebGLContextPool class manages multiple WebGL contexts (default: 8) that can render viewports in parallel:

• Configurable Context Count: Users can specify the number of WebGL contexts via webGlContextCount in the init configuration
• Smart Distribution: Stack viewports are distributed across available contexts using round-robin assignment
• Volume Viewport Limitation: Volume viewports continue to use a single context (index 0) due to WebGL resource sharing constraints
• Safe Defaults: The default of 8 contexts provides excellent performance while staying well within browser limits (~16 contexts per tab)

Architecture

Performance Benefits

Multiple stack viewports can now render simultaneously across different WebGL contexts, and significant performance improvement for sychronized operations, eg cine, synced scrolling.

Implementation Details

Configuration

Users can configure the number of WebGL contexts during initialization:

import { init } from '@cornerstonejs/core';

init({
  rendering: {
    webGlContextCount: 8,        // Number of WebGL contexts (default: 8)
  },
});

Context Assignment Strategy

• Volume Viewports: Always assigned to context 0 (no parallelism due to resource sharing constraints between WebGL contexts)
• Stack Viewports: Distributed across all available contexts using round-robin assignment

Important Notes

1. Context Limit: While 8 is the safe default, users should not exceed this unless necessary. Browser limits are typically around 16 contexts per tab, but if your goal is to support as many devices as possible, it's best to stay well below this limit to avoid issues.

2. Volume Viewport Limitation: Volume viewports cannot currently utilize parallel rendering due to WebGL resource sharing constraints between contexts. This is a current limitation of WebGL.

Example

https://marvelous-genie-f7fb6a.netlify.app/live-examples/webglcontextpooling

[sedghi]

add this point we need a doc in https://www.cornerstonejs.org/docs/concepts/cornerstone-core/renderingEngine
to talk about each RE

[IbrahimCSAE]

Deploy preview: https://remarkable-torrone-d3cd0a.netlify.app/

[sedghi]

Thanks, add the extra tests we discussed, looks good

[IbrahimCSAE]

I have tested all examples, and added multiple tests