Javascript Webgl2：如何在一次调用中在一个缓冲区中设置不同的颜色

我正在尝试使用webg2和javascript渲染100K到1M的矩形。为此，我制作了一个缓冲区，并仅使用一个RGBA颜色数组调用了一个drawArray。我将在下面附上我的drawSHape函数片段

// This function is used to draw any shape provided coordinates, colour and drawing mode.

const drawShape = (coords, color, drawingMode) => {
  let numberOfDies = 0;
  renderingdata = coords;
  numberOfDies = renderingdata.length / 12;
  console.log("DieWidth:", dieWidth, "DieHeight", dieHeight);
  console.log("Rendering Dies:", numberOfDies);

  // Step 3
  let data = new Float32Array(renderingdata);
  let buffer = utils.createAndBindBuffer(
    gl,
    gl.ARRAY_BUFFER,
    gl.STATIC_DRAW,
    data
  );

  // Step 4
  gl.useProgram(program);
  utils.linkGPUAndCPU(
    {
      program: program,
      buffer: buffer,
      dims: 2,
      gpuVariable: "position",
    },
    gl
  );

  let reticleColor = gl.getUniformLocation(program, "reticleColor");
  gl.uniform4fv(reticleColor, color);

  // Step 5
  gl.drawArrays(drawingMode, 0, renderingdata.length / 2);
};

问题是我不能用不同的颜色绘制100k到1M的矩形。我应该如何以最优化的方式为矩形/目标设置/提供不同的颜色

作为参考，我附上一个截图

您可能会发现和以及都很有帮助