【WebGL】二、通过attribute变量实现坐标变动

一、本文目的

当成功绘制图形后，需要对图形位置进行变动，故需要使用 attribute 变量进行对位置信息的获取和赋值。

二、声明 attribute 变量

   attribute vec4 aPosition;
//存储限定符  类型  变量名
//！！！ps：分号不可缺少

attribute 变量只能在顶点着色器中使用，不能在片元着色器中使用。

//1.顶点着色器源码
    const VERTEX_SHADER_SOURCE = `
    //声明变量 只能在顶点着色器使用
    attribute vec4 aPosition;
    // 必须存在 main 函数
    void main() {
        //点坐标所绘制的位置
        gl_Position = aPosition;//默认vec4(0.0, 0.0, 0.0, 1.0);
        //点的大小
        gl_PointSize = 100.0;
    }`;

三、获取 attribute 变量

通过WebGL的getAttribLocation可获取attribute 变量。

获取 attribute 变量需要在 initShader 函数之后，因为会用到 program 这个程序对象。（若不清楚 initShader 函数，可查看该专栏的：【WebGL】一、画布创建和着色器基本操作及封装）

const aPosition = gl.getAttribLocation(program,'aPosition');
//   返回变量的存储地址                   程序对象  指定想要获取存储地址的 attribute 变量的名称

四、给 attribute 变量赋值

给 attribute 变量赋值有四种情况，分别代表传递多少个分量的值

• gl.vertexAttrib1f(location, v0)
• gl.vertexAttrib2f(location, v0, v1)
• gl.vertexAttrib3f(location, v0, v1, v2)
• gl.vertexAttrib4f(location, v0, v1, v2, v3)
  注解：location: 指定 attribute 变量的存储位置，v0,v1,v2,v3：传入的四个分量的值

gl.vertexAttrib4f(aPosition,0.5,0.5,0.5,1.0);

五、逻辑流程