如何使用WebGl一次绘制二维点数组，每个点都有不同的颜色？答案

【问题标题】：How draw 2d array of points being every point a different color at one time with WebGl?如何使用WebGl一次绘制二维点数组，每个点都有不同的颜色？
【发布时间】：2017-12-11 19:44:12
【问题描述】：

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

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

谢谢！

【问题讨论】：

标签： webgl

【解决方案1】：

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

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

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

&lt;canvas id="glcanvas"&gt;&lt;/canvas&gt;

【讨论】：