使用 attribute 变量

只有顶点着色器才能使用 attribute 变量

tips：

1. 在顶点着色器声明并使用 attribute 变量，如:

attribute vec4 a_Position

2. 获取 attribute 变量存储位置

var a_Position = gl.getAttribLocation(gl.program, 'a_Position')

3. 向 attribute 变量赋值

gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0);

使用 uniform 变量

tips:

1. 声明：

uniform vec4 u_FragColor

2. 获取 uniform 变量的存储地址

var u_FragColor = gl.getUniformLocation(gl.program,'u_FragColor')

3. 向 uniform 变量赋值

gl.uniform4f(u_FragColor, 1.0, 0.0, 0.0, 1.0)
gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix)

绘制多个点

tips:

1.使用缓冲区对象

var vertices = new Float32Array([0.0, 0.5, -0.5, -0.5, 0.5, -0.5])

// 创建缓冲区对象
var vertexBuffer = gl.createBuffer()  

// 将缓冲区对象绑定到目标
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); 

// 向缓存区对象中写入数据
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

// 将缓冲区对象分配给 a_Position 变量
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)

// 连接 a_Position 变量与分配给他的缓冲区对象
gl.enableVertexAttribArray(a_Position)

7种基本图形是 WebGL 可以直接绘制的

• 点 gl.POINTS
• 线段 gl.LINES
• 线条 gl.LINE_STRIP
• 回路 gl.LINE_LOOP
• 三角形 gl.TRIANGLES
• 三角带 gl.TRIANGLES_STRIP
• 三角扇 gl.TRIANGLES_FAN

drawElements

attribute 和 uniform（一致的） 和 varying（可变的） 变量

1. attribute 变量传输的是与顶点相关的数据，而 uniform 传输的是对于所有顶点都相同（或与顶点无关）的数据。

2. varying 变量的作用是从顶点着色器向片元着色器传输数据

实际上，在顶点着色器和片元着色器之间，由这样两个步骤：

图形装配过程：将孤立的顶点坐标装配成几何图形。几何图形的类别由 gl.drawArrays() 函数的第一个参数决定。 光栅化过程：将装配好的几何图形转化为片元。

矩阵变换顺序

视图矩阵：先平移后旋转

投影矩阵：先变换成正交，后进行正交投影