WebGL（二）基本几何图元绘制

承接上文，当我们将编译好的着色器与JS程序连接后，WebGL就可以开始使用了。但是我们需要解决几个关键的问题：

1. 着色器绘制所需的数据，比如说顶点还有颜色，JS该怎么给它。
2. 拿到数据，该怎么调动WebGL开始绘制？

WebGL中JS向着色器传值的方式

着色器的变量类型

1. attribute变量
   使用attribute关键字声明的变量属于顶点属性，常用的顶点属相包括位置坐标值、纹理坐标值、颜色值、切向量、法向量和骨骼权重值等。

   attribute关键字声明的变量不需要赋值，WebGL驱动会自动将存在顶点缓存中的顶点数据传输到Vertex Shader（顶点着色器）中。Vertex Shader中，attribute变量只有可读属性，只能用于Vertex Shader中。

2. uniform变量
   使用uniform关键字声明的变量属于全局变量，Vertex Shader和Fragment Shader（片元着色器）都能使用，也只有可读属性。

3. varying变量
   使用varying关键字声明的变量是从Vertex Shader传到Fragment Shader的变量，不需要外部输入，直接在Vertex Shader复值，也是唯一一个可读写的变量。

JS输入attribute变量

完整代码

function initArrayBuffer(gl, attribute, data, num, type) {
   
  // 创建缓冲区对象
  var buffer = gl.createBuffer();
  if (!buffer) {
   
    console.log('Failed to create the buffer object');
    return false;
  }
  // 将缓存区对象绑定到target上
  gl.bindBuffer