GPU.js Maximum Single Dimension Output Size

This article examines the maximum output size supported for a single dimension in a GPU.js kernel, focusing on the underlying WebGL hardware limitations, how texture dimensions dictate single-dimension constraints, and how GPU.js handles 1D arrays internally.

WebGL Hardware Dependency

GPU.js does not enforce an arbitrary, hardcoded limit on kernel output dimensions. Instead, because GPU.js compiles JavaScript kernels into WebGL shaders, output dimensions are constrained directly by the underlying graphics hardware and the browser's WebGL implementation. Specifically, output dimensions are bounded by the WebGL parameter gl.MAX_TEXTURE_SIZE.

The Value of MAX_TEXTURE_SIZE

For a single dimension within a multi-dimensional output array (such as width, height, or depth specified via kernel.setOutput([x, y, z])), no single spatial coordinate can exceed the hardware's maximum texture size.

On modern systems, gl.MAX_TEXTURE_SIZE typically falls into the following ranges:

• 16,384 pixels: Standard for most modern desktop GPUs (NVIDIA, AMD, and Apple Silicon).
• 8,192 pixels: Common on integrated GPUs, mid-tier mobile processors, and older desktop hardware.
• 4,096 pixels: Encountered on older mobile devices or low-powered embedded systems.

Consequently, when assigning a single dimension in a multi-dimensional kernel, the absolute maximum is typically 8,192 or 16,384 elements, depending on the client machine running the code.

1D Output Arrays and Texture Packing

When working with a purely one-dimensional kernel output (e.g., kernel.setOutput([N])), GPU.js employs an internal texture-packing mechanism. Rather than attempting to allocate a 1D texture that exceeds MAX_TEXTURE_SIZE, GPU.js wraps the 1D data across a 2D texture surface.

Under this 2D packing system:

• The theoretical maximum element count for a 1D output becomes MAX_TEXTURE_SIZE × MAX_TEXTURE_SIZE.
• On hardware with a MAX_TEXTURE_SIZE of 16,384, this theoretical ceiling is \(16,384 \times 16,384 \approx 268.4\) million elements.
• On hardware with an 8,192 limit, the theoretical ceiling is approximately 67.1 million elements.

Practical Limitations

While the theoretical ceiling for packed 1D arrays is large, developers encounter practical ceilings far earlier due to:

1. Browser VRAM Allocation Limits: WebGL implementations in browsers like Chrome, Firefox, and Safari set strict memory caps per tab, which can cause out-of-memory errors when allocating textures near theoretical maximums.
2. Precision and Type Overhead: When using 32-bit floating-point textures (float output), the memory footprint quadruples compared to 8-bit unsigned integer textures, triggering hardware limits much sooner.
3. Execution Timeouts: Browsers monitor WebGL contexts with a watchdog timer. If a kernel with an exceptionally large output size takes longer than a few seconds to finish execution, the browser will kill the WebGL context to prevent system freezing.

How to Check the Limit Programmatically

To find the precise single-dimension limitation on a target environment, query the WebGL context directly via JavaScript:

const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl2') || canvas.getContext('webgl');
const maxTextureSize = gl.getParameter(gl.MAX_TEXTURE_SIZE);
console.log('Maximum single dimension size:', maxTextureSize);

For applications requiring data volumes that exceed the device's MAX_TEXTURE_SIZE, the computation must be partitioned into chunks and processed over multiple kernel dispatches.