如何使用WebGl一次绘制2d点的每个点一次是不同的颜色？

Question

使用此代码我可以逐个像素地绘制，但我想将所有阵列一起发送以解决性能问题。

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 );
  }
}

谢谢！

Answer 1

就像XY数据一样，您可以在属性中传递颜色数据

＆＃13;

＆＃13;

const vs = `
attribute vec2 aPosition;
attribute vec3 aColor;
varying vec3 vColor;

void main() {
  gl_Position = vec4( aPosition, 1.0, 1.0 );
  vColor = aColor;
  gl_PointSize = 4.0;
}
`;

const fs = `
precision mediump float;

varying vec3 vColor;

void main() {
  gl_FragColor = vec4( vColor, 1.0 );
}
`;


const gl = document.querySelector("#glcanvas").getContext("webgl");

// Compile program
// ===================

var program = gl.createProgram();
var vShader = gl.createShader( gl.VERTEX_SHADER );
var fShader = gl.createShader( gl.FRAGMENT_SHADER );
gl.attachShader( program, vShader );
gl.attachShader( program, fShader );
gl.shaderSource( vShader, vs );
gl.compileShader( vShader );
gl.shaderSource( fShader, fs );
gl.compileShader( fShader );
gl.linkProgram( program );

gl.useProgram( program );




// Create points datas
// ===================

const NUM_POINTS = 0xFF;
var data = new Float32Array( NUM_POINTS * 5);

for (var i = 0; i < NUM_POINTS; i++) {
  var j = i*5;
  data[j+0] = Math.random()*2.0 - 1.0; // x
  data[j+1] = Math.random()*2.0 - 1.0; // y
  data[j+2] = Math.random(); // r
  data[j+3] = Math.random(); // g
  data[j+4] = Math.random(); // b
};


// Setup ArrayBuffer
// ===================

var buffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, this.buffer );
gl.bufferData( gl.ARRAY_BUFFER, data, gl.STATIC_DRAW );

var aPos = gl.getAttribLocation( program, 'aPosition' );
gl.enableVertexAttribArray( aPos );
gl.vertexAttribPointer( aPos, 2, gl.FLOAT, false, 5*4, 0 );

var aCol = gl.getAttribLocation( program, 'aColor' );
gl.enableVertexAttribArray( aCol );
gl.vertexAttribPointer( aCol, 3, gl.FLOAT, false, 5*4, 2*4 );

// Draw
// ===================

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

＆＃13;

canvas { border: 1px solid black; margin: 2px; }

＆＃13;

<canvas id="glcanvas"></canvas>

＆＃13;

＆＃13;

＆＃13;