How to process arrays of images with gpu-shader

[nikhedonia]

Hey Guys, I've been now using gpujs to create a complex image processing pipeline and been wondering what is the best way to pass an array of images/textures to a shader?

The naive approach of just passing an array of images is not supported

const sumKernel = gpu.createKernelfunction(images: number[][][][], len: number, weights: number[]) {
    let sums = [0, 0, 0, 0];

    for (let k = 0; k < 4; ++k) {
      for (let i = 0; i < len; ++i) {
        sums[k] += weights[i] * images[i][this.thread.y][this.thread.x][k]
      }
    }
    this.color(sums[0],sums[1],sums[2],sums[3]);
  })

 sumKernel([image1, image2], 2, [0.5, 0.5);

I see couple alternative solutions eg. draw all images side by side and then do some index fiddling:

const sumKernel = gpu.createKernelfunction(image: number[][][], len: number, weights: number[]) {
    let sums = [0, 0, 0, 0];

    for (let k = 0; k < 4; ++k) {
      for (let i = 0; i < len; ++i) {
        sums[k] += weights[i] * images[this.thread.y][this.thread.x + i * this.output.width][k] // assuming all images have same dimensions
      }
    }
    this.color(sums[0],sums[1],sums[2],sums[3]);
  })

 sumKernel([image1, image2], 2, [0.5, 0.5);

What is best practice?