Passing Float Arrays to WGSL Functions

To pass an array of floats from JavaScript to a WGSL function, you have a few options depending on your specific use case:

Option 1: Using Uniform Buffers

This is the most common approach for passing arrays to shaders:

JAVASCRIPTCopied
// Create a Float32Array with your data
const floatArray = new Float32Array([1.0, 2.0, 3.0, 4.0, 5.0]);

// Create a buffer to hold the data
const buffer = device.createBuffer({
  size: floatArray.byteLength,
  usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
});

// Write the data to the buffer
device.queue.writeBuffer(buffer, 0, floatArray);

// Bind the buffer in your render/compute pass
// Inside your render/compute pipeline setup:
const bindGroupLayout = device.createBindGroupLayout({
  entries: [
    {
      binding: 0,
      visibility: GPUShaderStage.FRAGMENT, // or COMPUTE/VERTEX as needed
      buffer: { type: 'uniform' }
    }
  ]
});

const bindGroup = device.createBindGroup({
  layout: bindGroupLayout,
  entries: [
    {
      binding: 0,
      resource: { buffer }
    }
  ]
});

Then in your WGSL shader:

WGSLCopied
struct MyArrayData {
  data: array<f32, 5>, // Size must match your JS array
}

@group(0) @binding(0) var<uniform> myArray: MyArrayData;

// Now you can access myArray.data[i] in your shader

Option 2: Using Storage Buffers

For larger arrays, storage buffers are more appropriate:

JAVASCRIPTCopied
const floatArray = new Float32Array([/* your data */]);
const buffer = device.createBuffer({
  size: floatArray.byteLength,
  usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
});
device.queue.writeBuffer(buffer, 0, floatArray);

And in WGSL:

WGSLCopied
struct MyArrayData {
  data: array<f32>,  // Note: dynamic size for storage buffers
}

@group(0) @binding(0) var<storage> myArray: MyArrayData;

Option 3: For Small Arrays - Push Constants

Some WebGPU implementations support push constants for very small data:

JAVASCRIPTCopied
// In your pipeline setup
const pipeline = device.createComputePipeline({
  layout: 'auto',
  compute: {
    module: shaderModule,
    entryPoint: 'main',
    constants: {
      // Limited number of constants can be passed this way
      arraySize: floatArray.length,
    },
  },
});

Remember that:

1. For uniform buffers, the array size must be fixed in the shader
2. For storage buffers, you can have dynamic-sized arrays
3. Buffer sizes must typically be aligned to 4-byte boundaries

Let me know if you need more specific examples for your particular use case!