颜色与纹理

1 将非坐标数据传入顶点着色器

当执行gl.drawArrays()函数时，存储在缓冲区对象中的数据将按照其在缓冲区中的顺序依次传给对应的attribute变量。在顶点着色器中，我们将这两个attribute变量分别赋值给的gl_Position和gl_PointSize，就在指定的位置绘制出指定大小的点了。

1.1 gl.vertexAttribPointer()的步进和偏移参数

使用多个缓冲区对象向着色器传递多种数据，比较适合数据量不大的情况。当程序中的复杂三维图形具有成千上万个顶点时，维护所有的顶点数据是很困难的，例如：三维模型有1000个顶点。WebGL允许我们把顶点的坐标和尺寸数据打包到同一个缓冲区对象中，并通过某种机制分别访问缓冲区对象中不同种类的数据。可以将顶点的坐标和尺寸数据按照如下方式交错组织。

var verticesSizes = new Float32Array([//顶点坐标和点的尺寸0.0, 0.5, 10.0,//第一个点-0.5, -0.5, 20.0,//第二一个点0.5, -0.5, 30.0,//第三个点
])

gl.vertexAttribPointer()的函数规范：

gl.vertexAttribPointer(location,size,type,normalized,stride,offset); 将绑定到gl.ARRAY_BUFFER的缓冲区对象分配给由location指定的attribute变量
location	指定待分配attribute变量的存储位置
size	指定缓冲区中每个顶点的分量个数（1到4）
type	指定数据格式，例如：gl.FLOAT
normalize	true或false。表明是否将非浮点型的数据归一化到[0,1]或[-1,1]区间
stride	指定相邻两个顶点间的字节数，默认为0
offset	指定缓冲区对象中的偏移量（以字节为单位），即attribute变量从缓冲区中的何处开始存储。如果是从起始位置开始，该参数应为0

var FSIZE = verticesSizes.BYTES_PER_ELEMENT;gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 3, 0);
gl.enableVertexAttribArray(a_Position);gl.vertexAttribPointer(a_PointSize, 1, gl.FLOAT, false, FSIZE * 3, FSIZE * 2);
gl.enableVertexAttribArray(a_PointSize);

参数stride表示：在缓冲区对象中，单个顶点的所有数据（这里就是顶点的坐标和大小）的字节数，也就是相邻两个顶点间的距离，即步进参数。

参数offset表示当前考虑的数据项距离首个元素的距离，即偏移参数。在verticesSizes数组中，顶点的坐标数据是放在最前面的，所以offset应当为0。而顶点尺寸位于verticesSizes中，前两个是顶点坐标，后一个是顶点尺寸，因此offset应当设置为FSIZE*2。

在开启已被分配的缓冲区对象的a_PointSize变量之后，剩下的任务就只有调用gl.drawArrays()进行绘制操作了。

再次执行顶点着色器时，WebGL系统会根据stride和offset参数，从缓冲区中正确地抽取出数据，依次赋值给着色器中的各个attribute变量，并进行绘制。

size：指定缓冲区中每个顶点的分量个数。顶点坐标是2个参数(x,y)；顶点大小只有1个参数。

代码源码如下：

//顶点着色器程序
var VSHADER_SOURCE = `
attribute vec4 a_Position;
attribute float a_PointSize;
void main(){gl_Position = a_Position;gl_PointSize = a_PointSize;
}
`;
//片元着色器程序
var FSHADER_SOURCE = `
precision mediump float;
uniform vec4 u_FragColor;//uniform变量
void main(){gl_FragColor = u_FragColor;//设置颜色
}`function main() {//获取<canvas>元素var canvas = document.getElementById('myCanvas');if (!canvas) {console.log("failed to retrieve the canvas element");return;}//获取WebGL的绘图上下文var gl = canvas.getContext('webgl');if (!gl) {console.log("failed to get webgl context");return;}//初始化着色器if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {console.log("failed to initialize shaders");return;}