前言

本节主要介绍如何在JavaScript和着色器之间传输数据，从而实现可扩展的WebGL程序。

动态传值的伪代码实现

// 顶点着色器
var VSHADER_SOURCE =
    'attribute vec4 a_Position;\n' +
    'attribute float a_PointSize;\n' +
    'void main() {\n' +
    'gl_Position = a_Position;\n' +
    'gl_PointSize = a_PointSize;\n' +
    '}\n';

// 片元着色器
var FSHADER_SOURCE =
    'void main(){'+
    'gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);'+
    '}';

function main(){
	//......
   //获取attribute变量存储位置
  var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
  // 将顶点位置传输给attribute变量
  gl.vertexAttrib3f(a_Position, 0.5, 0.0, 0.0);
 	// 绘制点
  gl.drawArrays(gl.POINTS, 0, 1);
}

用于传值的变量：attribute 变量/uniform变量

将位置信息从JavaScript程序中传给顶点着色器。有两种方式可以做到这点：attribute变量和**uniform变量。**attribute变量传输的是与顶点相关的数据，而uniform变量传输的是对于所有顶点都相同（或与顶点无关）的数据。

动态传值的三个步骤

1. 声明attribute变量（着色器程序中）
2. 获取attribute变量的存储位置 gl.getAttribLocation()
3. 将顶点位置传输给attribute变量

gl.getAttribLocation()获取变量存储位置的函数

gl.vertexAttrib3f()赋值函数

具体传值过程