WebGL 变量的内插过程

上一篇文章中讲了在WebGL中使用齐次坐标对三角形进行变换，目前也可以通过gl.drawArrays方法绘制更加复杂的图形，这次让我们更进一步，给你的“女神”挑选一件漂亮的衣服吧👗挑选衣服之前，先让我们回归到最初的那三个点。

🎬又回到最初的起点

还记不记得这熟悉的三个点？在绘制三个点的例子中，我们在顶点着色器中使用了gl_PointSize=10.0这种方式将每个点的大小设置为10像素。但是如果我们想要3个大小不同的点呢？我们需要在顶点着色器中分别定义3个attribute变量接收不同的点的size吗🧐

不必如此，还记不记得我们将顶点坐标信息存入缓冲区对象，并写入attribute变量？定义不同大小的顶点坐标也可以使用这种方式：

const VertexShader = `
  // ...
  attribute float a_PointSize;
  void main() {
    // ...
    gl_PointSize = a_PointSize;
  }
`;

// ...

function initVertexBuffers (gl) {
   
  // ...
  const sizes = new Float32Array([
    10.0, 20.0, 30.0,
  ]);
  
  // 将顶点大小数据写入缓冲区
  const a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize');
  const sizeBuffer = gl.createBuffer();	// create -> 你来到这个世上
  gl.bindBuffer(gl.