attribute 变量只能用来传递顶点数据,只能在顶点着色器中使用，不能在片元着色器中使用

1、定义 aPosition 变量 ：

attribute vec4 aPosition ;

格式：attribute存储限定符 vec4类型 aPositiion变量名 ;（分号必须加）

2、获取aPosition变量：

const aPosition = gl.getAttribLocation(program,'aPosition')

gl.getAttribLocation(program, name)

program:程序对象

name:指定想要获取存储地址的

方法返回变量的存储地址

3、给aPosition变量赋值：

gl.vertexAttrib4f(location, v1, v2, v3,v4)

location:变量

v1:第一个分量的值x

v2:第二个分量的值y

v3:第三个分量的值z

v4:第四个分量的值w

同族函数：

gl.vertexAttrib1f(location, v1)

gl.vertexAttrib2f(location, v1, v2)

gl.vertexAttrib3f(location, v1, v2, v3)

gl.vertexAttrib4f(location, v1, v2, v3, v4)

let webglDiv = document.getElementById('practice');
let webgl = webglDiv.getContext('webgl');

/*着色器*/
// 顶点着色器
const VERTEX_SHADER_SOURCE = `
      //  attribute 只能用于传递定点数据
     attribute vec4 aPosition ;
      void main(){
        // 要绘制的点的坐标
        gl_Position = aPosition;
        // 点的大小
        gl_PointSize = 20.0;
      }
`;
// 片元着色器
const FRAGMENT_SHADER_SOURCE = `
      void main(){
        //这里的vec4代表是 vec4(1.0,0.0,0.0,1.0) r,g,b,a
        gl_FragColor =  vec4(1.0 , 0.0 , 0.0 , 1.0)  ;
      }
`;
const program =  initShader(webgl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE);

// 获取变量
const aPosition = webgl.getAttribLocation(program,'aPosition');

// 变量赋值
webgl.vertexAttrib4f(aPosition,0.5, 0,0.0,1.0);
// 执行绘制
// drawArrays(绘制的图形，从哪个点开始，使用几个顶点)
webgl.drawArrays(webgl.POINTS, 0, 1);

获取 attribute 变量需要在 initShader 函数之后，因为会用到program 这个程序对象

流程图