如何使用WebGl一次为每个点绘制不同颜色的二维点阵列？

有了这段代码，我可以一个像素一个像素地画，但我想把所有的数组一起发送，以解决性能问题

function drawOneBlackPixel( gl, x, y ) {
  // Fills the buffer with a single point?
  r=numToFloat(_.random(1,255) );
  g=numToFloat(_.random(1,255) );
  b=numToFloat(_.random(1,255) );

  gl.uniform4f( colorLocation, r , g, b, 1);

  gl.bufferData( gl.ARRAY_BUFFER , new Float32Array([
     x,     y]), gl.STATIC_DRAW );

  gl.drawArrays( gl.POINTS, 0, 1 );

  // Draw one point.

}

function numToFloat(x){
  return x/255; 
}

for(i=0;i<500;i++){
  for(j=0;j<500;j++){
    drawOneBlackPixel( gl, i, j );
  }
}

函数drawOneBlackPixel（gl、x、y）{
//用一个点填充缓冲区？
r=单位面积（u0.random（1255））；
g=单位面积（u.random（1255））；
b=数量（随机（1255））；
gl.uniform4f（颜色位置，r，g，b，1）；
gl.bufferData（gl.ARRAY\u BUFFER，新Float32Array([
x、 y]），总帐（静态图纸）；
总图绘制阵列（总图点，0,1）；
//画一个点。
}
函数numToFloat（x）{
返回x/255；
}
对于（i=0；i，就像XY数据一样，可以在属性中传递颜色数据
const vs=`
属性向量2定位；
属性向量3颜色；
可变vec3颜色；
void main（）{
gl_位置=vec4（位置，1.0,1.0）；
vColor=aColor；
gl_PointSize=4.0；
}
`;
常数fs=`
精密中泵浮子；
可变vec3颜色；
void main（）{
gl_FragColor=vec4（vColor，1.0）；
}
`;
const gl=document.querySelector（“glcanvas”）.getContext（“webgl”）；
//编译程序
// ===================
var program=gl.createProgram（）；
var vShader=gl.createShader（gl.VERTEX_着色器）；
var fShader=gl.createShader（gl.FRAGMENT\u着色器）；
gl.attachShader（程序，vShader）；
gl.attachShader（程序，fShader）；
gl.shaderSource（vShader，vs）；
总帐编译管理员（vShader）；
gl.shaderSource（fShader，fs）；
总帐编译主管（fShader）；
总账链接程序（程序）；
gl.useProgram（程序）；
//创建点数据
// ===================
const NUM_POINTS=0xFF；
var数据=新的Float32Array（NUM_POINTS*5）；
对于（变量i=0；i

canvas{边框：1px纯黑色；边距：2px；}