Working with Large StorageBufferAttributes in WGSL

You're encountering a fundamental limitation in WGSL where array sizes must be less than 65536 elements. Your geometry has 3,780,060 elements, which far exceeds this limit.

When working with large buffer attributes in Three.js and WGSL, you need to avoid using fixed-size arrays in your shader function signature. Instead, you should work with storage buffers directly.

Here's how you can modify your approach:

TYPESCRIPTCopied
const positionBaseAttribute = geometry.attributes.position;

const positionStorageBufferAttribute = new TSL.StorageBufferAttribute(positionBaseAttribute.count, 4);

const positionStorageAttribute = storage(positionStorageBufferAttribute, 'vec4', positionStorageBufferAttribute.count);

// Use a WGSL function that processes elements individually rather than the whole array
let computeNode = wgslFn(`
    fn doWork(index: u32, v: ptr<storage, vec4<f32>, read_write>) -> vec4<f32> {
        // Process a single element at the given index
        // Example: modify the position
        let position = *v;
        
        // Your processing logic here
        // ...
        
        return position; // Return the processed position
    }
`)({v: positionStorageAttribute})
  .compute(positionBaseAttribute.count);

await renderer.computeAsync(computeNode);

const outArray = new Float32Array(await renderer.getArrayBufferAsync(positionStorageBufferAttribute));

The key differences in this approach:

1. The WGSL function takes an index and a pointer to a storage buffer element
2. It processes one element at a time rather than trying to handle the entire array
3. The compute shader will be invoked for each element in your buffer

This approach avoids the WGSL array size limitation by working with the storage buffer directly through pointers rather than trying to pass the entire array as a function parameter.